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
APÉRO TECHNO - 21 NOVEMBRE 2014
NODE.JS +ANGULARJS
AU JOURNAL LE MONDEPar Yves-Emmanuel Jutard
0
À PROPOS
Ex. développeur "corporate" C / C++Migration volontaire vers le "bleeding edge"Arrivée chez Omnilog en février 2014
LIENSBlog
Github
Wiki technique perso
http://offirmo.net/
https://github.com/Offirmo
http://offirmo.net/wiki/
http://www.yves-emmanuel.jutard.com/
BLEEDING EDGE EN 2014 ?
1ères versions en 2009Font 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 ?
PLAN1.
2.
3.
4.
5.
Contexte
node.js
AngularJS
Bonnes pratiques au Monde
Opinions et conclusions
+ questions à volonté !
QUI SONT LES PIONNIERS ENFRANCE ?
NOUVELLE APPLI ÉDITORIALE "LE 8"
Nouveau système éditorial. Fusion des éditions :
print = journal papiernumérique = site web, mobiles, tablettes...
DÉMO
(NOTES)Technos utilisées
"LE 8" : DÉFISappli critique le résultat est tiré à ~
chargeutilisateurs exigeants
462 000 exemplaires quotidiens
JAVASCRIPT REVOLUTION
le langage le plus incompris du mondeaccidentellement génial (comme l'ensemble du web ;)déjà partout, énorme pool de développeurs
(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"
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
(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
LE NOUVEAU VENU
interpréteur javascript tout neuf (2008)
open source, performant
by google
…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)
=
(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 serveursmono-thread = productivité++APIs REST, micro-servicesprojets, code et développeurs full stack (en théorie)
(NOTES)
MICROSERVICES
http://fr.slideshare.net/xgorse/klubup-forumphp-joinhttp://martinfowler.com/articles/microservices.html
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 »
RÉFÉRENCES
NETFLIXmigré depuis Java« huge gains in developer productivity »« We're hoping to migrate all of that as soon as we can »
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 »
RÉFÉRENCES
EBAY++push, real-time
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
PENDANT CE TEMPS, LEFRONT-END...
de plus en plus complexepasse lui aussi au dynamique, connecté"un nouveau framework par jour"
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 building a gmail clone
inclusions dans le HTML
Résultat :
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 !
TESTABLE ?
testable en test unitairerapideaccès au DOM (phantomJS)
testable en e2e (selenium + protractor)
TESTABLE ?
DÉMO
gros frameworkbeaucoup de concepts à intégrer
(NOTES)
Attention au SEOAttention aux perfsDI complexe, bootstrapgros concurrent qui monte : react (facebook)environnement front encore instable (ES6, polymer,web components…)AngularJS 2.0 proche
(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
NODE + ANGULAR = MAGIE ?La techno aide, mais la solidité est dans les bonnes
pratiques.
BONNES PRATIQUESGestion de projetCode linting (jshint)Code review (Github entreprise)Tests unitairesTests e2eIntégration continue (Jenkins)Déploiement roulantSupervision
GESTION DE PROJETdès la conceptionpersonnas, API first, expert UX...
CODE LINTING
CODE REVIEW
TESTS UNITAIRES
TESTS E2E
INTÉGRATION CONTINUE
DÉPLOIEMENT ROULANT
SUPERVISION
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
THE ENDQUESTIONS + MERCI À TOUS !!