Présentation des streams haut-niveau en Javascript, avec HIghlandJS. - Présentation des exemples où leur utilisation est intéressante - API & utilisation avec les promesses - Conseils et bonnes pratiques.

1. Streams
Highland et compagnie

2. Guillaume Gautreau
Lead developer @ReportLinker
@ghusse
https://www.ghusse.com

3. Feedbacks
http://speakerscore.com/BX1L
Contact
@ghusse
guillaume@ghusse.com

4. Programme
● Pourquoi les streams
● Highland : API & caractéristiques
● Bonnes pratiques

5. En 2015

6. @mpjme
Youtube: funfunfunction
Je découvre FunFunFunction

7. Janvier 2016

8. Janvier 2016: vidéo sur les streams
Présentation de :
● highlandjs
● baconjs
● ReactiveX

9. Les streams
Ça a l’air sympa

10. Mais je ne vois pas trop
dans quels cas ça pourrait
nous être utile
Moi, Janvier 2016

11. 1 an
plus tard

12. Utilisation chez ReportLinker
12
42
Projets
node
Projets dépendant
de highland

13. On a trouvé !

14. Qui utilise les
promesses ?

16. Et puis un jour...

17. Lancer un traitement sur
tous les enregistrements
d’une API paginée

18. Exemple
http://jsonplaceholder.typicode.com
/posts 100 items
/comments 500 items
/albums 100 items
/photos 5000 items
/todos 200 items
/users 10 items

19. Exemple
http://jsonplaceholder.typicode.com
/posts 100 items
/comments 500 items
/albums 100 items
/photos 5000 items
/todos 200 items
/users 10 items

20. const promiseLoad =
require('./paginationPromise');
promiseLoad()
.then(console.log);

21. const photos = require('./jsonPlaceholder').photos;
function loadFromPage(page, results = []){
return photos.list({ page })
.then(response => {
const nextResults = results.concat(response.results);
if (page >= response.pages){
return results;
}
return loadFromPage(page + 1, nextResults);
});
}

22. Code
https://github.com/ghusse/lyonjs-streams-code

23. Chargement avec promesses
1. Charge TOUT en mémoire
2. Attend 19s avant de pouvoir continuer

24. Et si on pouvait traiter
les résultats
au fil de l’eau ?

25. const promiseCallbackLoad =
require('./paginationPromiseWithCallbacks')
promiseCallbackLoad(
(error, result) => console.log(result)
).then(() => console.log('done'));

26. return photos.list({ page })
.then(response => {
response.results
.forEach(result => callback(undefined, result)));
if (page >= response.pages){
return;
}
return loadFromPage(page + 1, callback);
})
.catch(error => callback(error));

27. return photos.list({ page })
.then(response => {
response.results
.forEach(result => callback(undefined, result)));
if (page >= response.pages){
return;
}
return loadFromPage(page + 1, callback);
})
.catch(error => callback(error));

28. Promises
Callbacks

29. Welcome to callback hell, again
1. Gestion d’erreurs
2. Traitement asynchrone dans les callbacks
3. Regroupement des résultats
4. Ressources (mémoire, flood réseau etc)

30. Promesses
+ Lisibilité du code
+ Chaînage des actions
+ Gestion d’erreur
− Un seul résultat
− Callback appelé une
fois à la fin

31. Promesses + callbacks
+ Flexibilité
− Gestion d’erreur
− Lisibilité du code
− Chaînage des appels

32. Promesses
+
Callbacks

33. Promesses
+
Callbacks

34. Promesses
+
Streams

35. Promesses
+
Streams
Asynchronisme
Gestion d’erreur
Gestion du flux
Ressources

36. const streamLoad =
require("./paginationStream");
streamLoad()
.each(console.log)
.done();

37. const streamLoad =
require("./paginationStream");
streamLoad()
.each(console.log)
.done();

38. API

39. Exemple :
récupérer les URLs

40. {
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum
similique qui sunt",
"url": "http://placehold.it/600/92c952",
"thumbnailUrl": "http://placehold.it/150/30ac17"
}

41. {
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum
similique qui sunt",
"url": "http://placehold.it/600/92c952",
"thumbnailUrl": "http://placehold.it/150/30ac17"
}

42. const streamLoad =
require("./paginationStream");
streamLoad()
.map(photo => photo.url)
.each(console.log)
.done();

43. Exemple :
Uniquement les
photos avec un
titre de + de 4 mots

44. const streamLoad =
require("./paginationStream");
streamLoad()
.filter(
photo => photo.title.split(' ')
.length > 4
)
.map(photo => photo.url)
.each(console.log)
.done()

45. Quizz
Répondez au signal

46. Citez une 4ème
fonction sur les
streams

47. Méthodes sur les streams
each
map
filter

48. Méthodes sur les streams
each
map
filter
GO !

50. Méthodes sur les streams
each
map
filter
reduce

51. Méthodes sur les streams
each
map
filter
reduce
Programmation
fonctionnelle comme
sur les tableaux, mais
au fil de l’eau

52. Méthodes sur les streams
each
map
filter
reduce
Méthodes synchrones

53. Asynchronisme

54. Exemple
/posts 100 items
/comments 500 items
/albums 100 items
/photos 5000 items
/todos 200 items
/users 10 items
http://jsonplaceholder.typicode.com
1. Lister les albums
2. Récupérer la liste des photos
de chaque album

55. Exemple
/posts 100 items
/comments 500 items
/albums 100 items
/photos 5000 items
/todos 200 items
/users 10 items
http://jsonplaceholder.typicode.com
1. Lister les albums
2. Récupérer la liste des photos
de chaque album
PS : tout est paginé

56. const streamLoad = require("./paginationStream");
const { photos, albums } = require('./jsonPlaceholder');
streamLoad(albums)
.flatMap(album =>
streamLoad(photos, { albumId: album.id }))
.filter(photo => photo.title.split(' ').length > 4)
.map(photo => photo.url)
.each(console.log)
.done();

57. flatmap
=
map asynchrone

58. flatmap
● Chaque élément du stream est mappé en un
nouveau stream
● Le contenu de chaque stream est envoyé dans le
stream

59. flatMap vs map
streamLoad(albums)
.flatMap(album =>
streamLoad(photos,
{ albumId: album.id }))
.each(console.log)
.done();
streamLoad(albums)
.map(album =>
streamLoad(photos,
{ albumId: album.id }))
.each(console.log)
.done();
// Une ligne de log par PHOTO
{ albumId: 1, id: 1, ...
{ albumId: 1, id: 2, ...
// Une ligne par ALBUM
Stream { domain: null, ...

60. flatFilter vs filter
Synchrone Asynchrone
.map .flatMap
.filter .flatFilter

61. flatFilter vs filter
Synchrone Asynchrone
.map .flatMap .map().sequence()
.filter .flatFilter

62. Promesses
+
Streams

63. FlatMap
.flatMap( )
Fonction qui doit renvoyer un
stream highland

64. Créer un stream Higland
const highland = require('highland');
const promise = Promise.resolve('value');
const stream = highland(promise);

65. FlatMap
.flatMap(highland( ))
Fonction qui renvoie
une promesse

66. Créer un stream highland
● Array
● Iterator
● Iterable
● Promise
● Readable stream
● Events
● Function

67. Créer un stream highland
● Array
● Iterator
● Iterable
● Promise
● Readable stream
● Events
● Function
Traitements asynchrones

68. Créer un stream highland
● Array
● Iterator
● Iterable
● Promise
● Readable stream
● Events
● Function
Fichiers, requêtes HTTP

69. Créer un stream highland
● Array
● Iterator
● Iterable
● Promise
● Readable stream
● Events
● Function
Événements DOM (client)

70. Créer un stream highland
● Array
● Iterator
● Iterable
● Promise
● Readable stream
● Events
● Function
Créer ses propres streams

71. back
pressure

72. Back-pressure
streamLoad(albums)
.tap(() => console.log(new Date(), "album"))
.flatMap(album =>
streamLoad(photos, { albumId: album.id }))
.each(photo => { /*NOOP*/ });

73. Back-pressure
streamLoad(albums)
.tap(() => console.log(new Date(), "album"))
.flatMap(album =>
streamLoad(photos, { albumId: album.id }))
.each(photo => { /*NOOP*/ });

74. Back-pressure
streamLoad(albums)
.tap(() => console.log(new Date(), "album"))
.flatMap(album =>
streamLoad(photos, { albumId: album.id }))
.each(photo => { /*NOOP*/ });
Code 1 avec flatMap

75. Back-pressure
streamLoad(albums)
.tap(() => console.log(new Date(), "album"))
/*.flatMap(album =>
streamLoad(photos, { albumId: album.id }))*/
.each(album => { /*NOOP*/ });
Code 2 sans flatMap

76. Back-pressure
Avec flatMap Sans flatMap

77. Back-Pressure
● Laziness
● S’adapte au plus lent

78. Back-pressure
Avec flatMap Sans flatMap

79. Back-Pressure
● Laziness
● S’adapte au plus lent
● Chargement différé (source)

80. Récap’

81. API
map/filter/reduce/tap
flatMap/flatFilter
ctor : promise, function

82. API
map/filter/reduce/tap
flatMap/flatFilter
ctor : promise, function
batch/sequence
errors/stopOnError
rateLimit
fork/merge
pipe

83. http://highlandjs.org

84. 3 bonnes
pratiques

85. Gérer les erreurs

86. Gérer les erreurs
source
.stopOnError(
error => {
// Do something
}
).done();
source
.errors(
(error, push) => {
// Do something
}
).done();

87. Utiliser next dans
la création de
stream

88. Utiliser next
return highland((push, next) => {});
Pousser une valeur
dans le stream

89. Utiliser next
return highland((push, next) => {});
Pousser une valeur
dans le stream
Rediriger vers un
autre stream

90. Utiliser next
return highland((push, next) => {});
Pousser une valeur
dans le stream
Rediriger vers un
autre stream
back
pressure

91. Streams =
où c’est nécessaire,
promesses =
partout ailleurs

92. const getThing = require('./getThing');
source
.flatMap(getThing)
.done();
Streams où c’est nécessaire
getThing doit
renvoyer un stream

93. Streams où c’est nécessaire
const getThing = require('./getThing');
source
.flatMap(v => highland(getThing(v)))
.done();
getThing renvoie
une promesse
Streams limités à ce
traitement

94. Streams où c’est nécessaire
return new Promise((resolve, reject) => {
stream
.stopOnError(reject)
.collect().toArray(resolve);
});

95. Feedbacks
http://speakerscore.com/BX1L
Contact
@ghusse
guillaume@ghusse.com