56
APÉRO TECHNO - 21 NOVEMBRE 2014 NODE.JS + ANGULARJS AU JOURNAL LE MONDE Par Yves-Emmanuel Jutard 0

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

  • Upload
    yvem

  • View
    240

  • Download
    8

Embed Size (px)

DESCRIPTION

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.

Citation preview

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

APÉRO TECHNO - 21 NOVEMBRE 2014

NODE.JS +ANGULARJS

AU JOURNAL LE MONDEPar Yves-Emmanuel Jutard

0

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

À PROPOS

Ex. développeur "corporate" C / C++Migration volontaire vers le "bleeding edge"Arrivée chez Omnilog en février 2014

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

LIENSBlog

Github

Wiki technique perso

http://offirmo.net/

https://github.com/Offirmo

http://offirmo.net/wiki/

http://www.yves-emmanuel.jutard.com/

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

BLEEDING EDGE EN 2014 ?

1ères versions en 2009Font encore le buzz (même si ça se calme)

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

BLEEDING EDGE ?

Qu'est-ce qui est si bien ?Qu'est-ce qui n'est pas si bien ?Est-ce pour moi ?

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

PLAN1.

2.

3.

4.

5.

Contexte

node.js

AngularJS

Bonnes pratiques au Monde

Opinions et conclusions

+ questions à volonté !

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

QUI SONT LES PIONNIERS ENFRANCE ?

NOUVELLE APPLI ÉDITORIALE "LE 8"

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

Nouveau système éditorial. Fusion des éditions :

print = journal papiernumérique = site web, mobiles, tablettes...

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

DÉMO

Page 10: Apéro techno node.js + AngularJS @Omnilog 2014
Page 11: Apéro techno node.js + AngularJS @Omnilog 2014

(NOTES)Technos utilisées

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

"LE 8" : DÉFISappli critique le résultat est tiré à ~

chargeutilisateurs exigeants

462 000 exemplaires quotidiens

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

JAVASCRIPT REVOLUTION

le langage le plus incompris du mondeaccidentellement génial (comme l'ensemble du web ;)déjà partout, énorme pool de développeurs

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

(NOTES)

"The world's most misunderstood language"

"the new lingua franca"

"Will JavaScript take over the programming world?"

"Why JavaScript Will Become The Dominant ProgrammingLanguage Of The Enterprise"

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

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

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

(NOTES)

même âge que ruby ! (1995)ce sont les tests qui font la qualité du codele tout objet est lourd et inefficaceruby et python ont aussi le design pattern réacteur,mais en lib, et la std API a des I/O bloquantespendant ce temps, java discute encore de commentimplémenter les closures

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

LE NOUVEAU VENU

interpréteur javascript tout neuf (2008)

open source, performant

by google

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

…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ènementielmicro-framework souplesse, liberté

gestionnaire de paquet (npm, 2011)

=

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

(LIENS)

http://nodejs.org/

Des applications ultra-rapides avec Node.js

http://www.nodebeginner.org/

mes notes

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

micro-framework :

ligne de commande :

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

cible le web dynamique, connectéperformance++ pour les serveursmono-thread = productivité++APIs REST, micro-servicesprojets, code et développeurs full stack (en théorie)

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

(NOTES)

MICROSERVICES

http://fr.slideshare.net/xgorse/klubup-forumphp-joinhttp://martinfowler.com/articles/microservices.html

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

RÉFÉRENCES

PAYPALmigré depuis Java++ full-stack engineers« The node.js app was built almost twice as fast with fewerpeople. Written in 33% fewer lines of code. Constructed with40% fewer files. »« Double the requests per second vs. the Java application[even when] using a single core for the node.js applicationcompared to five cores in Java. We expect to increase thisdivide further. 35% decrease in the average response time »

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

RÉFÉRENCES

NETFLIXmigré depuis Java« huge gains in developer productivity »« We're hoping to migrate all of that as soon as we can »

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

RÉFÉRENCES

GROUPONmigré depuis RoRSOA, API attaquée par mobile + web« We’re currently serving ~50,000rpm and our overallresponse times have dropped dramatically »

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

contre-points

pas pour le calcul intensif ou tâches longuescallback hell (promises ?)API parfois brouillonne (évènement ? exception ?)API non terminée, version stable encore à venir, ex.mode clusterqq problèmes de stabilité ?pb de gouvernance en cours

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

PENDANT CE TEMPS, LEFRONT-END...

de plus en plus complexepasse lui aussi au dynamique, connecté"un nouveau framework par jour"

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

INTRODUCING...

pour appli cliente propre et organisée

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

(LIENS)

Site officiel http://angularjs.org/

mes notes

Ultimate guide to learning AngularJS in one day

learn angular by building a gmail clone

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

inclusions dans le HTML

Résultat :

Page 33: Apéro techno node.js + AngularJS @Omnilog 2014
Page 34: Apéro techno node.js + AngularJS @Omnilog 2014

framework déclaratif (comme le HTML et c'est bien)permet de modulariser son applisolide, 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 dufront-end !

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

TESTABLE ?

testable en test unitairerapideaccès au DOM (phantomJS)

testable en e2e (selenium + protractor)

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

TESTABLE ?

DÉMO

Page 37: Apéro techno node.js + AngularJS @Omnilog 2014
Page 38: Apéro techno node.js + AngularJS @Omnilog 2014
Page 39: Apéro techno node.js + AngularJS @Omnilog 2014
Page 40: Apéro techno node.js + AngularJS @Omnilog 2014
Page 41: Apéro techno node.js + AngularJS @Omnilog 2014

gros frameworkbeaucoup de concepts à intégrer

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

(NOTES)

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

Attention au SEOAttention aux perfsDI complexe, bootstrapgros concurrent qui monte : react (facebook)environnement front encore instable (ES6, polymer,web components…)AngularJS 2.0 proche

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

(LIENS)

« While massive changes [about the web] have happened inthe last couple of years, they pale in comparison to what'scoming in the next 1-3 years » ( )

All About Angular 2.0

Angular 2 Core

Rob Eisenberg

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

NODE + ANGULAR = MAGIE ?La techno aide, mais la solidité est dans les bonnes

pratiques.

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

BONNES PRATIQUESGestion de projetCode linting (jshint)Code review (Github entreprise)Tests unitairesTests e2eIntégration continue (Jenkins)Déploiement roulantSupervision

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

GESTION DE PROJETdès la conceptionpersonnas, API first, expert UX...

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

CODE LINTING

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

CODE REVIEW

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

TESTS UNITAIRES

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

TESTS E2E

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

INTÉGRATION CONTINUE

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

DÉPLOIEMENT ROULANT

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

SUPERVISION

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

CONCLUSIONStechnos récentes : rencontré bugs, veille nécessaire,besoin devs motivésfront-end encore en recherche, évolutions majeures àvenirpromesse de code reuse moyennement tenuesmicro-libs magiques mais versions à maintenirmicro-libs = créativité mais bonnes pratiques peinent àémergermicroservices : la prod ne suit pasmicroservices : question organisationellesagile, dette = compétence et discipline nécessaire

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

THE ENDQUESTIONS + MERCI À TOUS !!