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"
  ]
}

https://github.com/tc39/proposal-pipeline-operator (stage 1)

https://github.com/tc39/proposal-partial-application (stage 1)

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));