@edimitchel

Front-end Lead Developer

@ ALTRAN

@KeziahMoselle

Front-end Developer

@ HOME

MICHEL

KEZIAH

User

Notification

Subject

One to many relationship

Mutation

Observers

Notify

MutationObserver

IntersectionObserver
ResizeObserver
PerformanceObserver

Pipeline Operator

Stage 1

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)

source: javascript.info/proxy

Theory

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

learnrxjs.io

rxjs.dev

Official docs

Learning resources

rxviz.com

Visualize observables

Thank you !

frama.link/slides-strasjs-dec

frama.link/repo-strasjs-dec

@KeziahMoselle - @edimitchel - @VueStrasbourg

Advanced
JavaScript

Observer

Theory

Implementation

MutationObserver

Pipeline Operator

Stage 1

Example

Can I use it ?

Proxy

Theory

Example

Can I use it ?

Reactive Programming

RxJS

RxJS is not easy to master

But is enjoyable to use !

Operators through pipe

MAP operator

TAP / DO operator

FILTER operator

THROTTLE operator

MERGE operator

CATCHERROR operator

Look forward and learn more

Thank you !

	{
	"plugins": [
	[
	"@babel/plugin-proposal-pipeline-operator",
	{ "proposal": "minimal" }
	],
	"@babel/plugin-proposal-partial-application"
	]
	}

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

	// 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

	// 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}`)
	);

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

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

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