Le dev front
à Mach 1
au quotidien

Promis, ça ne fait pas mal

Une présentation de Christophe Porteneuve à Paris Web 2015

Tékitoa


var christophe = {
  age:        37.90622861054072,
  city:       'Paris',
  company:    'Delicious Insights',
  trainings:  ['JS Total', 'Node.js', 'Git Total'],
  webSince:   1995,
  claimsToFame: [
    'Prototype.js',
    'Ruby On Rails',
    'Bien Développer pour le Web 2.0',
    'Prototype and Script.aculo.us',
    'Paris Web'
  ]
};
          

En 30 minutes

Ne clignez pas des yeux !

6 piliers

3 bonus

Plein de démos

Des étoiles dans les yeux

État des lieux

du dev front aujourd’hui

Le bon vieux cycle SSRR

(Save, Switch, Reload, Replay)

Période Temps perdu1 Coût / pers.2
Heure 5 minutes 2,47 €
Jour 39 minutes 19,23 €
Semaine2 3 heures 15 minutes 96,15 €
Mois 2 jours 2 heures 29 minutes 416,67 €
An3 19 jours 1 heure 20 minutes 4 519,23 €

Comme en 1995. Y’a 20 ans. WTF, les gens.

1 Source : Wanegaine Institute™ Of Wing-It Statistics • 2 Base 2,5K€ nets en 39h • 3 5 sem. CP
If you could go ahead and not waste my time, that would be great.

Pilier n°1

Édition live

dans le navigateur

Pourquoi c’est bien ?

Tirer parti de l’état courant de la runtime
(complétion réelle, introspection, débogage pas à pas…)

Un exemple de complétion réelle

Feedback immédiat (on y reviendra)

Dans quels navigateurs ?

Desktop : tous ceux dont on a besoin (IE8+, Firefox, Chrome, Safari, Opera…)

Mobile : souvent connectable via l’équivalent desktop

Vue partielle du débogage distant d’un périphérique Android grâce aux outils développeurs de Google Chrome

Ça marche pour quoi ?

HTML en mode « assisté »

Modification assistée de HTML dans Chrome Developer Tools

CSS en assisté ou texte brut, hot-swapped.

Modification assistée de CSS dans Chrome Developer Tools

Ça marche pour quoi ?

JavaScript en texte brut, hot-swapped1

Modification hot-swapped de JS dans Chrome Developer Tools
1 sur Chrome ; prochainement Firefox et MS Edge

Workspaces

Sauve sur disque vos changements faits dans Chrome

Mapping URLs ⬌ chemins sur disque

Activation d’un workspace dans Chrome Developer Tools

On peut utiliser les Dev Tools comme un EDI, si on veut !

Bonus n°1.1

Maîtriser ses Dev Tools

pour de vrai

Apprenez, bon sang !

Les Dev Tools, c’est comme MS Office :
tout le monde s’en sert… à 5%.

Cours interactif gratuit Discover DevTools, excellentissime manuel officiel, chaînes YouTube Chrome Devs, tutos sur HTML5 Rocks, sur le MDN ou Hacks Mozilla, tout plein de comptes Twitter à suivre

Utilisez le navigateur le plus pratique à un instant t !

Tout ça est doté d’une tonne de raccourcis clavier, pour aller encore plus vite : consultez-les !

Dans les derniers Dev Tools de Chrome, on peut même réordonner nos onglets…

Bonus n°1.2

DevTools dédiés

Encore plus mieux que mieux

React

Outil de dev dédié React dans Chrome

Angular

Outil de dev dédié React dans Chrome

Ember

Outil de dev dédié Ember dans Chrome

Redux

Outil de dev dédié Redux dans Chrome

Extensions outils de dev pour Chrome, Firefox, etc.

Pilier n°2

Feedback instantané

sur modifs extérieures

« Extérieures ? »

Oui, genre faites depuis un éditeur / EDI externe au navigateur, quoi.

Et ce, évidemment, indépendamment de l’éditeur retenu.

Côté CSS

Tous les navigateurs autorisent la prise en charge à la volée, programmatique, d’une feuille de style mise à jour : il suffit donc d’avoir un script dans la page (ou une extension) qui soit notifiée par l’extérieur.

Pléthore de solutions :
LiveReload (bleark), fb-flo (sympa), BrowserSync (yay !)…

Présent aussi dans du dédié : Brackets, WebStorm…

Côté JS

Certains l’aiment chaud

Si la runtime permet le hot-swap : au top. Mais pour le moment, ça n’est vrai que pour v8 (Chrome, Safari, Opera, Node.js).

Sinon, on devra recharger la page / le programme (bon, certes, automatiquement).

Quels outils ?

BrowserSync toujours, partout (mais sans hot-swap…), fb-flo (Chrome seulement…), Webpack trituré (toutes v8).

Bonus n°2.1

Synchro multi-devices

BrowserSync brille aussi par son Ghost Mode, qui répercute la plupart des manips interactives d’un navigateur vers tous les autres connectés au même serveur.

Idéal pour tester en parallèle le comportement d’une même page sur plusieurs clients (dont mobiles, TVs, consoles…)

Pilier n°3

Source Maps

Source Maps

Découple le code source en dev (langage, découpage / enrobage, lisibilité…) de celui exécuté (bundle CSS/JS unique voire minifié).

Super idée, mais frein potentiel : le code interprété n’est plus celui écrit : comment s’y retrouver au débogage ?

Source Maps v3 depuis février 2011 (bientôt 5 ans). Large prise en charge : Fx23+, Cr26+, IE11+, Saf6+…

Fonctionne en multi-niveaux, donc à travers n étapes.
Ex. : ES6 ⇢ ES5 ⇢ bundle unique ⇢ minification.

Plus d’excuse pour ne pas utiliser le top en dev !

Pilier n°4

Automatiser

Automatiser, pourquoi ?

On a aujourd'hui de véritables chaînes d’assemblage : le développement web, front comme back, s’est énormément industrialisé ces dernières années.

Beaucoup de tâches fréquentes, voire ultra-récurrentes, rébarbatives et faciles à gaufrer à la main.

Quels outils pour automatiser ?

Grunt a certes popularisé le truc, mais trop mal branlé ; déjà largement sur le retour.

Principaux acteurs aujourd'hui :

Gulp (générique, a néanmoins pas mal de problèmes)

Webpack (assemblage surtout, très avancé)

Browserify encore populaire, mais nécessite pas mal de code / CLI… Du coup Webpack et JSPM lui bouffent son lunch. Quant à Brunch, longtemps l’outsider qui défonce tout, il a raté sa prise en charge npm (on y reviendra), et devient condamné à la marge, où il retrouve Broccoli et d’autres :'-(

Pilier n°5

Modules

Dis papa pourquoi ?

Pour les mêmes raisons que côté back :
modularité, découpage, dépendances explicites, chargement à la demande, etc.

Indispensable

…pour arrêter l’amateurisme crasse des tas de balises <script> dégueulasses jetées dans un ordre magique sur la page, avec leurs tas de requêtes synchrones bloquantes…

Quel format ?

AMD (donc Require.js) est comateux #unleashthetrolls

CommonJS domine (Brunch, Browserify, Webpack…) mais en vrai on passe aux modules natifs ES6

Transition facile en tous les cas, grâce à des tours de force techniques comme SystemJS

Ne pas confondre avec Bower, qui simplifie juste l’installation de dépendances front

npm all the things!

Très, très grosse tendance

A émergé notamment grâce à des outils comme Browserify et le mouvement Universal JS1

Webpack est vraiment au top dans ce contexte

JSPM est une énorme tuerie, en complément

1 anciemment « Isomorphic JS »

Pilier n°6

Tests automatisés

et parallèles

Un écosystème sans pareil

JS industriel = excellent corpus de tests

On a sans doute l’écosystème de tests le plus avancé, toutes technologies confondues

Des solutions haut de gamme pour les assertions (Chai et ses plugins), le mocking (notamment SinonJS), les harnais (Mocha, Tape…), les runners (Karma, BrowserStack, Sauce), la mesure de couverture (Istanbul, Isparta)…

Critique pour la CI (intégration continue), le CD (déploiement continu) et les builds incassables.

Test-first ?

Approche qui a largement fait ses preuves, mais… il faut que les tests aillent vite. Très vite, pour être confortable.

Ça tombe bien : tester du JS, front comme back, en feedback temps réel (watchers), peut être extrêmement rapide, notamment grâce aux mockings I/O et DOM et au pur fonctionnel (qui rend l’isolation triviale, ex. Redux).

Pilier n°7

ES6+

ES6, ES7…

C’est là, ça y est, et c’est utilisable maintenant1

Énormes gains de productivité, de performance et de fiabilité à la clé, mais aussi…

Énormes gains de plaisir :-D

Pour tout savoir là-dessus, venez à mon atelier de samedi… ou à ma présentation à Blend à la fin du mois !

1 grâce à Babel + core-js, notamment : IE9+ suffisant, Node.js OK !

En conclusion

Arrêtez de gaspiller

votre temps avec des silex

Reprenez du plaisir

en créant, plutôt qu’en attendant après vos outils

Envie d’en savoir plus ?

On fait des super formations de ouf sur
Git, JavaScript et le dev web front et Node.js.


Et ce qui est encore plus cool, c’est que pour l’auditoire Paris Web, c’est −15% sur toutes les sessions jusqu’à fin janvier, rien qu’avec votre n° d’inscription PW.

Merci !

Et que le web soit avec vous


Christophe Porteneuve

@porteneuve

Retrouvez les slides sur bit.ly/devfrontmach1