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

À 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

(LIENS)

Farewell Node.js

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 !!