APÉRO TECHNO - 21 NOVEMBRE 2014 
NODE.JS + 
ANGULARJS 
AU JOURNAL LE MONDE 
Par Yves-Emmanuel Jutard 
0
À PROPOS 
Ex. développeur "corporate" C / C++ 
Migration volontaire vers le "bleeding edge" 
Arrivée chez Omnilog en févri...
LIENS 
Blog 
Github 
Wiki technique perso 
http://offirmo.net/ 
https://github.com/Offirmo 
http://offirmo.net/wiki/ 
http...
BLEEDING EDGE EN 2014 ? 
1ères versions en 2009 
Font encore le buzz (même si ça se calme)
BLEEDING EDGE ? 
Qu'est-ce qui est si bien ? 
Qu'est-ce qui n'est pas si bien ? 
Est-ce pour moi ?
PLAN 
1. 
2. 
3. 
4. 
5. 
Contexte 
node.js 
AngularJS 
Bonnes pratiques au Monde 
Opinions et conclusions 
+ questions à ...
QUI SONT LES PIONNIERS EN 
FRANCE ? 
NOUVELLE APPLI ÉDITORIALE "LE 8"
Nouveau système éditorial. Fusion des éditions : 
print = journal papier 
numérique = site web, mobiles, tablettes...
DÉMO
(NOTES) 
Technos utilisées
"LE 8" : DÉFIS 
appli critique le résultat est tiré à ~ 
charge 
utilisateurs exigeants 
462 000 exemplaires quotidiens
JAVASCRIPT REVOLUTION 
le langage le plus incompris du monde 
accidentellement génial (comme l'ensemble du web ;) 
déjà pa...
(NOTES) 
"The world's most misunderstood language" 
"the new lingua franca" 
"Will JavaScript take over the programming wo...
JAVASCRIPT REVOLUTION 
un langage de script comme un autre python, ruby 
langage interprété = productivité++ typage fort p...
(NOTES) 
même âge que ruby ! (1995) 
ce sont les tests qui font la qualité du code 
le tout objet est lourd et inefficace ...
LE NOUVEAU VENU 
interpréteur javascript tout neuf by google 
(2008) 
open source, performant
…une lib "from scratch" au meilleur du moment : 
design pattern réacteur intégré merci les closures 
I/O non bloquantes me...
(LIENS) 
http://nodejs.org/ 
Des applications ultra-rapides avec Node.js 
http://www.nodebeginner.org/ 
mes notes
micro-framework : 
ligne de commande :
cible le web dynamique, connecté 
performance++ pour les serveurs 
mono-thread = productivité++ 
APIs REST, micro-services...
(NOTES) 
MICROSERVICES 
http://fr.slideshare.net/xgorse/klubup-forumphp-join 
http://martinfowler.com/articles/microservic...
RÉFÉRENCES 
PAYPAL 
migré depuis Java 
++ full-stack engineers 
« The node.js app was built almost twice as fast with fewe...
RÉFÉRENCES 
NETFLIX 
migré depuis Java 
« huge gains in developer productivity » 
« We're hoping to migrate all of that as...
RÉFÉRENCES 
GROUPON 
migré depuis RoR 
SOA, API attaquée par mobile + web 
« We’re currently serving ~50,000rpm and our ov...
RÉFÉRENCES 
EBAY 
++push, real-time
contre-points 
pas pour le calcul intensif ou tâches longues 
callback hell (promises ?) 
API parfois brouillonne (évèneme...
(LIENS) 
Farewell Node.js
PENDANT CE TEMPS, LE 
FRONT-END... 
de plus en plus complexe 
passe lui aussi au dynamique, connecté 
"un nouveau framewor...
INTRODUCING... 
pour appli cliente propre et organisée
(LIENS) 
Site officiel http://angularjs.org/ 
mes notes 
Ultimate guide to learning AngularJS in one day 
learn angular by...
inclusions dans le HTML 
Résultat :
framework déclaratif (comme le HTML et c'est bien) 
permet de modulariser son appli 
solide, made by google, grosse commun...
TESTABLE ? 
testable en test unitaire 
rapide 
accès au DOM (phantomJS) 
testable en e2e (selenium + protractor)
TESTABLE ? 
DÉMO
gros framework 
beaucoup de concepts à intégrer
(NOTES)
Attention au SEO 
Attention aux perfs 
DI complexe, bootstrap 
gros concurrent qui monte : react (facebook) 
environnement...
(LIENS) 
All About Angular 2.0 
Angular 2 Core 
« While massive changes [about the web] have happened in 
the last couple ...
NODE + ANGULAR = MAGIE ? 
La techno aide, mais la solidité est dans les bonnes 
pratiques.
BONNES PRATIQUES 
Gestion de projet 
Code linting (jshint) 
Code review (Github entreprise) 
Tests unitaires 
Tests e2e 
I...
GESTION DE PROJET 
dès la conception 
personnas, API first, expert UX...
CODE LINTING
CODE REVIEW
TESTS UNITAIRES
TESTS E2E
INTÉGRATION CONTINUE
DÉPLOIEMENT ROULANT
SUPERVISION
CONCLUSIONS 
technos récentes : rencontré bugs, veille nécessaire, 
besoin devs motivés 
front-end encore en recherche, év...
THE END 
QUESTIONS + MERCI À TOUS !!
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
Prochain SlideShare
Chargement dans…5
×

Apéro techno node.js + AngularJS @Omnilog 2014

1 069 vues

Publié le

Présentation et retour d'expérieuce sur node.js + AngularJS au journal Le Monde, novembre 2014.

Présenté dans le cadre d'un « apéro techno » chez Omnilog.

Publié dans : Ingénierie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 069
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
79
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Apéro techno node.js + AngularJS @Omnilog 2014

  1. 1. APÉRO TECHNO - 21 NOVEMBRE 2014 NODE.JS + ANGULARJS AU JOURNAL LE MONDE Par Yves-Emmanuel Jutard 0
  2. 2. À PROPOS Ex. développeur "corporate" C / C++ Migration volontaire vers le "bleeding edge" Arrivée chez Omnilog en février 2014
  3. 3. LIENS Blog Github Wiki technique perso http://offirmo.net/ https://github.com/Offirmo http://offirmo.net/wiki/ http://www.yves-emmanuel.jutard.com/
  4. 4. BLEEDING EDGE EN 2014 ? 1ères versions en 2009 Font encore le buzz (même si ça se calme)
  5. 5. BLEEDING EDGE ? Qu'est-ce qui est si bien ? Qu'est-ce qui n'est pas si bien ? Est-ce pour moi ?
  6. 6. PLAN 1. 2. 3. 4. 5. Contexte node.js AngularJS Bonnes pratiques au Monde Opinions et conclusions + questions à volonté !
  7. 7. QUI SONT LES PIONNIERS EN FRANCE ? NOUVELLE APPLI ÉDITORIALE "LE 8"
  8. 8. Nouveau système éditorial. Fusion des éditions : print = journal papier numérique = site web, mobiles, tablettes...
  9. 9. DÉMO
  10. 10. (NOTES) Technos utilisées
  11. 11. "LE 8" : DÉFIS appli critique le résultat est tiré à ~ charge utilisateurs exigeants 462 000 exemplaires quotidiens
  12. 12. JAVASCRIPT REVOLUTION le langage le plus incompris du monde accidentellement génial (comme l'ensemble du web ;) déjà partout, énorme pool de développeurs
  13. 13. (NOTES) "The world's most misunderstood language" "the new lingua franca" "Will JavaScript take over the programming world?" "Why JavaScript Will Become The Dominant Programming Language Of The Enterprise"
  14. 14. JAVASCRIPT REVOLUTION un langage de script comme un autre python, ruby langage interprété = productivité++ typage fort pas si utile héritage prototypal = productivité++ vent de fraicheur sur l'objet JSON = productivité++ au revoir XML lourd closures intégrées = magie insoupçonnée
  15. 15. (NOTES) même âge que ruby ! (1995) ce sont les tests qui font la qualité du code le tout objet est lourd et inefficace ruby et python ont aussi le design pattern réacteur, mais en lib, et la std API a des I/O bloquantes pendant ce temps, java discute encore de comment implémenter les closures
  16. 16. LE NOUVEAU VENU interpréteur javascript tout neuf by google (2008) open source, performant
  17. 17. …une lib "from scratch" au meilleur du moment : design pattern réacteur intégré merci les closures I/O non bloquantes merci les closures modèle évènementiel micro-framework souplesse, liberté gestionnaire de paquet (npm, 2011) =
  18. 18. (LIENS) http://nodejs.org/ Des applications ultra-rapides avec Node.js http://www.nodebeginner.org/ mes notes
  19. 19. micro-framework : ligne de commande :
  20. 20. cible le web dynamique, connecté performance++ pour les serveurs mono-thread = productivité++ APIs REST, micro-services projets, code et développeurs full stack (en théorie)
  21. 21. (NOTES) MICROSERVICES http://fr.slideshare.net/xgorse/klubup-forumphp-join http://martinfowler.com/articles/microservices.html
  22. 22. RÉFÉRENCES PAYPAL migré depuis Java ++ full-stack engineers « The node.js app was built almost twice as fast with fewer people. Written in 33% fewer lines of code. Constructed with 40% fewer files. » « Double the requests per second vs. the Java application [even when] using a single core for the node.js application compared to five cores in Java. We expect to increase this divide further. 35% decrease in the average response time »
  23. 23. RÉFÉRENCES NETFLIX migré depuis Java « huge gains in developer productivity » « We're hoping to migrate all of that as soon as we can »
  24. 24. RÉFÉRENCES GROUPON migré depuis RoR SOA, API attaquée par mobile + web « We’re currently serving ~50,000rpm and our overall response times have dropped dramatically »
  25. 25. RÉFÉRENCES EBAY ++push, real-time
  26. 26. contre-points pas pour le calcul intensif ou tâches longues callback hell (promises ?) API parfois brouillonne (évènement ? exception ?) API non terminée, version stable encore à venir, ex. mode cluster qq problèmes de stabilité ? pb de gouvernance en cours
  27. 27. (LIENS) Farewell Node.js
  28. 28. PENDANT CE TEMPS, LE FRONT-END... de plus en plus complexe passe lui aussi au dynamique, connecté "un nouveau framework par jour"
  29. 29. INTRODUCING... pour appli cliente propre et organisée
  30. 30. (LIENS) Site officiel http://angularjs.org/ mes notes Ultimate guide to learning AngularJS in one day learn angular by building a gmail clone
  31. 31. inclusions dans le HTML Résultat :
  32. 32. framework déclaratif (comme le HTML et c'est bien) permet de modulariser son appli solide, made by google, grosse communauté prévu testable dès la conception (et c'est bien !) pas parfait, mais îlot de stabilité dans le monde fou du front-end !
  33. 33. TESTABLE ? testable en test unitaire rapide accès au DOM (phantomJS) testable en e2e (selenium + protractor)
  34. 34. TESTABLE ? DÉMO
  35. 35. gros framework beaucoup de concepts à intégrer
  36. 36. (NOTES)
  37. 37. Attention au SEO Attention aux perfs DI complexe, bootstrap gros concurrent qui monte : react (facebook) environnement front encore instable (ES6, polymer, web components…) AngularJS 2.0 proche
  38. 38. (LIENS) All About Angular 2.0 Angular 2 Core « While massive changes [about the web] have happened in the last couple of years, they pale in comparison to what's coming in the next 1-3 years » ( Rob Eisenberg )
  39. 39. NODE + ANGULAR = MAGIE ? La techno aide, mais la solidité est dans les bonnes pratiques.
  40. 40. BONNES PRATIQUES Gestion de projet Code linting (jshint) Code review (Github entreprise) Tests unitaires Tests e2e Intégration continue (Jenkins) Déploiement roulant Supervision
  41. 41. GESTION DE PROJET dès la conception personnas, API first, expert UX...
  42. 42. CODE LINTING
  43. 43. CODE REVIEW
  44. 44. TESTS UNITAIRES
  45. 45. TESTS E2E
  46. 46. INTÉGRATION CONTINUE
  47. 47. DÉPLOIEMENT ROULANT
  48. 48. SUPERVISION
  49. 49. CONCLUSIONS technos récentes : rencontré bugs, veille nécessaire, besoin devs motivés front-end encore en recherche, évolutions majeures à venir promesse de code reuse moyennement tenues micro-libs magiques mais versions à maintenir micro-libs = créativité mais bonnes pratiques peinent à émerger microservices : la prod ne suit pas microservices : question organisationelles agile, dette = compétence et discipline nécessaire
  50. 50. THE END QUESTIONS + MERCI À TOUS !!

×