JS : Stack Overdose ?

Nicolas Chambrier

Info : quelques slides sont accompagnées de note (précisé au cas par cas)

Dependency overflow

Un projet JS au hasard :

{
  "dependencies": {
    "angular": "^1.4.5",
    "angular-animate": "^1.4.5",
    "angular-bootstrap-colorpicker": "^3.0.19",
    "angular-masonry": "github:delapouite/angular-masonry#nojquery",
    "angular-off-click": "github:lmtm/angular-off-click#npm",
    "angular-sanitize": "^1.4.5",
    "angular-socket-io": "^0.7.0",
    "angular-ui-bootstrap": "^0.13.4",
    "angular-ui-router": "^0.2.15",
    "async": "^1.4.2",
    "babel-eslint": "^4.1.1",
    "bluebird": "^2.9.15",
    "body-parser": "^1.12.2",
    "bootstrap": "^3.3.5",
    "bootstrap-styl": "^4.0.5",
    "busboy": "^0.2.9",
    "chalk": "^1.0.0",
    "commander": "^2.7.1",
    "connect-assets": "^5.0.1",
    "connect-flash": "~0.1.1",
    "connect-mongo": "~0.8.0",
    "connect-redis": "^2.2.0",
    "cors": "^2.7.1",
    "debug": "^2.1.3",
    "deepmerge": "~0.2.7",
    "ect": "~0.5.9",
    "eslint": "^1.4.1",
    "express": "^4.12.3",
    "express-session": "^1.10.4",
    "file-loader": "^0.8.4",
    "gm": "^1.17.0",
    "hiredis": "~0.4.1",
    "html-loader": "^0.3.0",
    "imap": "^0.8.14",
    "imports-loader": "^0.6.4",
    "jquery": "^2.1.4",
    "less": "^2.4.0",
    "lodash": "~3.10.1",
    "mailparser": "0.5.2",
    "masonry-layout": "^3.3.2",
    "method-override": "^2.3.2",
    "mime": "^1.3.4",
    "minimatch": "^2.0.4",
    "moment": "^2.10.6",
    "mongoose": "~4.0.6",
    "mongoose-schema-extend": "^0.1.7",
    "mongoose-timestamp": "^0.4.0",
    "nconf": "~0.7.1",
    "ng-annotate-loader": "0.0.10",
    "ng-file-upload": "^7.2.1",
    "ngtemplate-loader": "^1.3.0",
    "node-transloadit": "0.0.4",
    "node-uuid": "~1.4.3",
    "nodemailer": "^1.3.2",
    "passport": "^0.3.0",
    "passport-local": "^1.0.0",
    "random-string": "~0.1.2",
    "raw-loader": "^0.5.1",
    "redis": "^1.0.0",
    "request": "^2.54.0",
    "serve-favicon": "^2.2.0",
    "serve-static": "^1.9.2",
    "slugify2": "0.0.2",
    "socket.io": "^1.3.5",
    "socket.io-client": "^1.3.6",
    "striptags": "^2.0.3",
    "stylus-loader": "^1.3.0",
    "talon": "^2.3.2",
    "temporary": "0.0.8",
    "transloadit-api": "^1.0.0",
    "wb-angular-slugify": "^1.2.0",
    "winston": "^1.0.1"
  },
  "devDependencies": {
    "aggregate-commands": "^2.0.1",
    "awsbox": "^0.7.0",
    "babel-core": "^5.8.24",
    "babel-loader": "^5.3.2",
    "chai": "^3.2.0",
    "compression-webpack-plugin": "^0.2.0",
    "css-loader": "^0.18.0",
    "env-test": "^1.0.0",
    "http-server": "^0.8.0",
    "mocha": "^2.2.1",
    "nodemon": "^1.5.0",
    "rewire": "^2.3.1",
    "style-loader": "^0.12.3",
    "stylus": "^0.52.4",
    "supertest": "^1.1.0",
    "watch-exec": "^1.1.0",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.11.0",
    "xhr2": "^0.1.2"
  }
}

Grosse fatigue…

C'était mieux avant ?

C'était plus facile !

  • Moins de complexité
  • Moins d'étapes avant de coder
  • Aujourd'hui, le développeur s'éloigne de son code !

C'était mieux avant ?

Versionning

Avant : les fameux dossiers "v1", "v1-final", "v1-final-2", "v1-final-corrige"… Et le ZIP en pièce jointe !

Maintenant : Git.

C'était mieux avant ?

Déploiement

Avant : Filezilla \o/ (en priant pour bien poser la vraie dernière version du fichier).

Maintenant : Git.

C'était mieux avant ?

C'est plutôt pas mal maintenant

  • Des outils en plus ? On a remplacé d'anciens outils
  • De la complexité en plus ? À la mise en place des outils
  • Des gains ? Fiabilité, reproductibilité, rapidité…

OK, mais JavaScript…

  • Un nouveau framework tous les 15 jours !
  • Des librairies par milliers !
  • Des outils en pagaille !

javascripting.com

OK, mais JavaScript…

Les librairies

  • jQuery
  • Zepto
  • Isotope
  • Masonry
  • jQuery Mobile
  • jQuery UI
  • Modernizr
  • Underscore
  • Lodash

OK, mais JavaScript…

Les librairies

  • Moment
  • Leaflet
  • D3
  • Three.js
  • Mustache
  • Handlebars
  • Bluebird

OK, mais JavaScript…

Les librairies

  • D'autres ?

OK, mais JavaScript…

Les frameworks

  • Angular
  • React
  • Backbone
  • Ember
  • Ionic
  • Polymer

OK, mais JavaScript…

Les frameworks

  • Rx JS
  • Riotjs
  • Knockout
  • Aurelia

OK, mais JavaScript…

Les frameworks

  • D'autres ?

OK, mais JavaScript…

Les outils

Le pire reste à venir…

OK, mais JavaScript…

Les outils

Package managers

  • Bower
  • Component
  • JSPM
  • Jam
  • Duo
  • npm

OK, mais JavaScript…

Les outils

Task runners

  • Grunt
  • Gulp
  • Make
  • Cake
  • Broccoli
  • npm

OK, mais JavaScript…

Les outils

Transformateurs

  • Babel
  • Browserify
  • Coffeescript
  • JSX
  • Traceur
  • Typescript
  • Uglify
  • Webpack

OK, mais JavaScript…

Les outils

D'autres ?

On n'en peut plus !

Tant d'outils, c'est ingérable, sans compter que de nouveaux apparaissent chaque jour…

On n'en peut plus !

… ou alors c'est juste qu'on ne sait pas s'organiser ?

INFO: pressez 's' pour voir les notes

Aide au tri

Introduisons de nouvelles métriques

  • Pour s'en sortir, classons les librairies, frameworks, outils…
  • Mais sur quels critères ?

Aide au tri

Librairies et frameworks JS

Lors de ma veille

Dois-je consacrer du temps à cette brique ?

nouveauté-du-paradigme × documentation

Be aware of trends, from a safe distance

  • Angular / Knockout / Aurelia
  • React / Riotjs
  • RxJs / BaconJs

INFO: pressez 's' pour voir les notes

Aide au tri

Librairies et frameworks JS

Lors du choix pour un projet

Cette brique apporte-t-elle une valeur à mon projet ?

service × documentation / complexité

popularité × reprenabilité

INFO: pressez 's' pour voir les notes

Aide au tri

Outils de développement JS

Il doit améliorer mon quotidien

Un outil coûte à mettre en place, à apprendre…

service / complexité

  • gulp / grunt / etc… → des plugins en pagaille
  • make / npm → lancer des lignes de commandes
  • webpack vs. browserify

Aide au tri

De manière générale

L'ultime équation

valeur = amélioration-quotidien / complexité

INFO: pressez 's' pour voir les notes

Aide au tri

Darwin

Prédire les survivants :

  • Variation : quelles sont les spécificités de l'outil ?
  • Adaptation : lequel est le plus adaptable ?
  • Hérédité : quelles sont ses caractéristiques héritées ?

Aide au tri

Darwin

Prédire les survivants :

  • Variation : quelles sont les spécificités de l'outil ?
  • Adaptation : lequel est le plus adaptable ?
  • Hérédité : quelles sont ses caractéristiques héritées ?
  • Simplicité : quel est le périmètre fonctionnel ?

Ralentir…

Arrêter de regarder partout

Apprendre à filtrer rapidement

Ne pas culpabiliser de rater des trains

…mais ne pas s'arrêter

Noter, mettre de côté "pour plus tard"

(peut-être jamais, OSEF)

Ne pas réinventer la roue par flemme

La liste

Vous voulez voir ma stack ?

  • npm
  • Babel
  • Lodash
  • Angular ou React

Résoudre les problèmes à mesure qu'ils se posent

Goodbye!

questions?