Advanced
JavaScript
DESIGN PATTERNS
@edimitchel
Front-end Lead Developer
@ ALTRAN
@KeziahMoselle
Front-end Developer
@ HOME
MICHEL
KEZIAH
Observer
Theory
User
Notification
Subject
One to many relationship
Mutation
Observers
Notify
Implementation
MutationObserver
- IntersectionObserver
- ResizeObserver
- PerformanceObserver
Pipeline Operator
Stage 1
Example
Can I use it ?
{
"plugins": [
[
"@babel/plugin-proposal-pipeline-operator",
{ "proposal": "minimal" }
],
"@babel/plugin-proposal-partial-application"
]
}Proxy
source: javascript.info/proxy
Theory
Example
Can I use it ?
| IE | Edge | Firefox | Chrome | Safari |
|---|---|---|---|---|
| No | 12+ | 18+ | 49+ | 10+ |
Vue.js (vue-next) : Reactivity system will be rewritten with Proxies with various improvements
Reactive Programming
RxJS
Synchronize your asynchronous
and event-based code
We know Promises,
Promises are single-shot,
results to an resolve or a reject.
Observables from RxJS are multi-shot,
steams data and handles errors.
promise
.then(value => console.log(value))
.catch(err => console.error(err));const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
// logs: 1, 2, 3 and one second after 4
observable.subscribe(console.log);RxJS is not easy to master
Observable
Observers
Operators
...subscribes
But is enjoyable to use !
Operators through pipe
map
tap
merge
catchError
data
throttle
filter
MAP operator
// returns an Observable
const fetch = APIService.getPosts();
const formatPost = ({ name, date, content }) => ({
name, date, content
});
fetch.pipe(
map(posts => posts.map(formatPost))
)
.subscribe(console.log); // logs post formatted
TAP / DO operator
// returns an Observable
const fetch = APIService.getPosts();
const formatPost = ({ name, date, content }) => ({
name, date, content
});
fetch.pipe(
tap(console.log), // for debugging
map(posts => posts.map(formatPost))
)
.subscribe(console.log); // logs posts formatted
FILTER operator
// emits array of objects
const source = from([
{ name: 'Joe', age: 31 },
{ name: 'Bob', age: 25 },
{ name: 'David', age: 20 }
]);
// filter out people with age under 30
const example = source.pipe(
filter(person => person.age >= 30)
);
//output: "Over 30: Joe"
example.subscribe(person =>
console.log(`Over 30: ${person.name}`)
);
THROTTLE operator
// emits value every 1 second
const source = interval(1000);
// emits the first value, then ignore for 5 seconds
const example = source.pipe(
throttleTime(5000)
);
// logs: 0...6...12
example.subscribe(console.log);interval operator creates an Observable that
emits each second the time passed.
MERGE operator
// emits every 2.5 seconds
const first = interval(2500);
// emits every 2 seconds
const second = interval(2000);
// emits every 1.5 seconds
const third = interval(1500);
// emits every 1 second
const fourth = interval(1000);
// emits outputs from one observable
const example = merge(
first.pipe(mapTo('FIRST!')),
second.pipe(mapTo('SECOND!')),
third.pipe(mapTo('THIRD')),
fourth.pipe(mapTo('FOURTH'))
);
// logs: "FOURTH", "THIRD", "SECOND!",
// "FOURTH", "FIRST!", "THIRD", "FOURTH"
example.subscribe(console.log);
CATCHERROR operator
// emits error
const source = throwError('API endpoint unreachable');
// gracefully handle error,
// returning observable with error message
const example = source.pipe(
catchError(val => of(`Something went wrong: ${val}`))
);
// logs: 'Something went wrong: API endpoint unreachable'
example.subscribe(val => console.log(val));
RxJS integrated into Vue (with vue-rx)
Look forward and learn more
Official docs
Learning resources
Visualize observables
Thank you !
@KeziahMoselle - @edimitchel - @VueStrasbourg
Advanced JS and Design Pattern
By Michel EDIGHOFFER
