Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
You Will Learn RxJS In 2017
Jerry Hong
RxJS
...
• RxJS ? Lodash ?
• RxJS ?
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
Functional Programming
[1, 2, 3].forEach(x => console.log(x));
1
2
3
ForEach
[1, 2, 3].map(x => x + 1);
[2, 3, 4]
Map
[1, 2, 3].filter(x => x % 2 === 1);
[1, 3]
Filter
[[1, 2], [2, 3], [5, 6]].concatAll();
[1, 2, 2, 3, 5, 6]
concatAll
var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ ...
var user = {
id: 888,
name: 'JerryHong',
courseLists: [{
name: 'My Courses',
courses: [
{ title: 'React ', rating: 5 },
{ ...
user.courseLists
.map(courseList =>
courseList.courses
.filter(course => course.rating === 5))
.concatAll()
.forEach(cours...
elmt.mouseDowns
.map(mouseEvent =>
document.mouseMoves
.filter takeUntil(document.mouseUps))
.concatAll()
.forEach(pos => ...
...
[{x: 31, y: 23}, {x: 41, y: 23}, {x: 12, y: 45}]
{x: 31, y: 23}...{x: 41, y: 23}...{x: 12, y: 45}
(Collection)


Iterator
Observer
var iterator = [1, 2, 3][Symbol.iterator]();
iterator.next();
{ value: 1, done: false }
iterator.next();
{ value: 2, done:...
iterator 

Map, Filter, ConcatAll
document.addEventListener(

'mousemove', 

function next(event){

console.log(event)

})
{ clientX: 55, clientY: 121 }
{ c...
Iterator Observer
document.addEventListener('click', (event) => { ... })
Push
var x = iterator.next()
Pull
Push API
• DOM Events
• Web sockets
• Node Streams
• XMLHttpRequest
• setInterval
• Service Workers
Observable
Observable 

var mouseMove = Observable
.fromEvent(elem, 'mousemove')
Observable for Event
API
• DOM Events
• Web sockets
• Node Streams
• XMLHttpRequest
• setInterval
• Service Workers
=> Observable
var handler = (event) => console.log(event)
// subscribe
document.addEventListener('mousemove', handler)
// unsubscribe
do...
// subscribe
var subscription = mouseMove.subscribe(console.log)
// unsubscribe
subscription.unsubscribe()
Observable
// subscribe
mouseMove.subscribe(
event => console.log(event),
err => console.log('Error: ' + err),
() => console.log('com...
-------1---2----3----|
Marble Diagram
time
-------1---2----3----
'--1----2---3'.forEach(x => console.log(x));
1
2
3
ForEach
'--1----2---3'.map(x => x + 1);
2
3
4
Map
'--1----2---3'.filter(x => x % 2 === 1);
1
3
Filter
[[1, 2], [2, 3], [5, 6]].concatAll();
[1, 2, 2, 3, 5, 6]
concatAll
'--o-------o'.concatAll();

  

-1--2| -1-2-3|
1
2
1
2
3
concatAll
'---1--2---1-2-3'
'--1---2----3'.takeUntil(

'--------e');
1
2
'complete'
takeUntil
'--1---2-|'
const dragDOM = document.getElementById('drag');
const mouseDown = Observable
.fromEvent(dragDOM, 'mousedown');
const mous...
mouseDown
.map(event => mouseMove)
mouseDown
.map(event => mouseMove.takeUntil(mouseUp))
mouseDown
.map(event => mouseMove...
var isRequesting = false;
window.addEventListener('scroll', function() {
if(someOffsetBottom < 0 && !isRequesting) {
isReq...
var scroll = Observable.fromEvent(window, 'scroll');
scroll
.filter(event => someOffsetBottom < 0)
.map(event => fetch('ur...
RxJS
• Promise
• DOM Event
• AJAX
• WebSocket
• Server Sent Event
• Animation
• DOM Event (0 - N values)
• AJAX (1 value)
• WebSocket (0 ...
Promise AJAX
• DOM Event (0 - N values)
• AJAX (1 value)
• WebSocket (0 - N values)
• Server Sent Event (0 - N values)
• A...
Observable
• DOM Event (0 - N values)
• AJAX (1 value)
• WebSocket (0 - N values)
• Server Sent Event (0 - N values)
• Ani...
RxJS
• Promise
• Observable ES7
• RxJS 5
• RxJS 5 Observable Spec Proposal
• framework (library) RxJS
• Angular 2
• Vue-rx...
RxJS
RxJS
• ( )
• ( )
•
•
•
RxJS
• Hello World app
•
• ( )
• RxJS
• 30 RxJS
• Observable Spec Proposal
• Learn RxJS
•
•
• AutoComplete
•
•
You will learn RxJS in 2017
You will learn RxJS in 2017
You will learn RxJS in 2017
Prochain SlideShare
Chargement dans…5
×

You will learn RxJS in 2017

1 975 vues

Publié le

2017 Front-End Taiwan Developer 小聚簡報

Publié dans : Technologie

You will learn RxJS in 2017

  1. 1. You Will Learn RxJS In 2017 Jerry Hong
  2. 2. RxJS
  3. 3. ...
  4. 4. • RxJS ? Lodash ? • RxJS ?
  5. 5. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
  6. 6. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
  7. 7. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) ...
  8. 8. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Callback
  9. 9. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Promise
  10. 10. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } }) Complex State
  11. 11. Functional Programming
  12. 12. [1, 2, 3].forEach(x => console.log(x)); 1 2 3 ForEach
  13. 13. [1, 2, 3].map(x => x + 1); [2, 3, 4] Map
  14. 14. [1, 2, 3].filter(x => x % 2 === 1); [1, 3] Filter
  15. 15. [[1, 2], [2, 3], [5, 6]].concatAll(); [1, 2, 2, 3, 5, 6] concatAll
  16. 16. var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] }; var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] }; var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] };
  17. 17. var user = { id: 888, name: 'JerryHong', courseLists: [{ name: 'My Courses', courses: [ { title: 'React ', rating: 5 }, { title: ' ', rating: 4 } ] }, { name: 'New Release', courses: [ { title: 'Vue 2 ', rating: 5 }, { title: 'RxJS ', rating: 5 } ] }] };
  18. 18. user.courseLists .map(courseList => courseList.courses .filter(course => course.rating === 5)) .concatAll() .forEach(course => console.log(course)) rating 5
  19. 19. elmt.mouseDowns .map(mouseEvent => document.mouseMoves .filter takeUntil(document.mouseUps)) .concatAll() .forEach(pos => image.position = pos);
  20. 20. ... [{x: 31, y: 23}, {x: 41, y: 23}, {x: 12, y: 45}]
  21. 21. {x: 31, y: 23}...{x: 41, y: 23}...{x: 12, y: 45}
  22. 22. (Collection)
  23. 23.
  24. 24. Iterator Observer
  25. 25. var iterator = [1, 2, 3][Symbol.iterator](); iterator.next(); { value: 1, done: false } iterator.next(); { value: 2, done: false } iterator.next(); { value: 3, done: false } iterator.next(); { value: undefined, done: true } Iterator
  26. 26. iterator 
 Map, Filter, ConcatAll
  27. 27. document.addEventListener(
 'mousemove', 
 function next(event){
 console.log(event)
 }) { clientX: 55, clientY: 121 } { clientX: 12, clientY: 124 } { clientX: 23, clientY: 234 } { clientX: 234, clientY: 12 } { clientX: 123, clientY: 45 } { clientX: 56, clientY: 133 } Observer
  28. 28. Iterator Observer
  29. 29. document.addEventListener('click', (event) => { ... }) Push var x = iterator.next() Pull
  30. 30. Push API • DOM Events • Web sockets • Node Streams • XMLHttpRequest • setInterval • Service Workers
  31. 31. Observable
  32. 32. Observable 

  33. 33. var mouseMove = Observable .fromEvent(elem, 'mousemove') Observable for Event
  34. 34. API • DOM Events • Web sockets • Node Streams • XMLHttpRequest • setInterval • Service Workers => Observable
  35. 35. var handler = (event) => console.log(event) // subscribe document.addEventListener('mousemove', handler) // unsubscribe document.removeEventListener('mousemove', handler)
  36. 36. // subscribe var subscription = mouseMove.subscribe(console.log) // unsubscribe subscription.unsubscribe() Observable
  37. 37. // subscribe mouseMove.subscribe( event => console.log(event), err => console.log('Error: ' + err), () => console.log('complete') ) // unsubscribe mouseMove.unsubscribe() Observable
  38. 38. -------1---2----3----| Marble Diagram time -------1---2----3----
  39. 39. '--1----2---3'.forEach(x => console.log(x)); 1 2 3 ForEach
  40. 40. '--1----2---3'.map(x => x + 1); 2 3 4 Map
  41. 41. '--1----2---3'.filter(x => x % 2 === 1); 1 3 Filter
  42. 42. [[1, 2], [2, 3], [5, 6]].concatAll(); [1, 2, 2, 3, 5, 6] concatAll
  43. 43. '--o-------o'.concatAll();
 
 -1--2| -1-2-3| 1 2 1 2 3 concatAll '---1--2---1-2-3'
  44. 44. '--1---2----3'.takeUntil(
 '--------e'); 1 2 'complete' takeUntil '--1---2-|'
  45. 45. const dragDOM = document.getElementById('drag'); const mouseDown = Observable .fromEvent(dragDOM, 'mousedown'); const mouseUp = Observable .fromEvent(document, 'mouseup'); const mouseMove = Observable .fromEvent(document, 'mousemove');
  46. 46. mouseDown .map(event => mouseMove) mouseDown .map(event => mouseMove.takeUntil(mouseUp)) mouseDown .map(event => mouseMove mouseDown .map(event => mouseMove.takeUntil(mouseUp)) .concatAll() mouseDown .map(event => mouseMove.takeUntil(mouseUp)) .concatAll() .subscribe(event => { dragDOM.style.left = event.clientX + 'px'; dragDOM.style.top = event.clientY + 'px'; }) https://jsbin.com/sanefic/1/edit?js,output
  47. 47. var isRequesting = false; window.addEventListener('scroll', function() { if(someOffsetBottom < 0 && !isRequesting) { isRequesting = true; fetch('url...') .then(res => { // do something change view isRequesting = false; }) } })
  48. 48. var scroll = Observable.fromEvent(window, 'scroll'); scroll .filter(event => someOffsetBottom < 0) .map(event => fetch('url...')) .exhaust() .subscribe(res => { // do something change view })
  49. 49. RxJS • Promise
  50. 50. • DOM Event • AJAX • WebSocket • Server Sent Event • Animation • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
  51. 51. Promise AJAX • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
  52. 52. Observable • DOM Event (0 - N values) • AJAX (1 value) • WebSocket (0 - N values) • Server Sent Event (0 - N values) • Animation (0 - N values, )
  53. 53. RxJS • Promise • Observable ES7 • RxJS 5 • RxJS 5 Observable Spec Proposal • framework (library) RxJS • Angular 2 • Vue-rx • Redux-Observable
  54. 54. RxJS
  55. 55. RxJS • ( ) • ( ) • • •
  56. 56. RxJS • Hello World app • • ( )
  57. 57. • RxJS • 30 RxJS • Observable Spec Proposal • Learn RxJS
  58. 58. • • • AutoComplete • •

×