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.
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…)
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
Ça marche pour quoi ?
HTML en mode « assisté »
CSS en assisté ou texte brut, hot-swapped.
Ça marche pour quoi ?
JavaScript en texte brut, hot-swapped1
Workspaces
Sauve sur disque vos changements faits dans Chrome
Mapping URLs ⬌ chemins sur disque
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 !
Bonus n°1.2
DevTools dédiés
Encore plus mieux que mieux
React
Angular
Ember
Redux
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é)
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
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
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 !
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
Retrouvez les slides sur bit.ly/devfrontmach1