Dev Avengers

pour le Front-End

Une présentation de Christophe Porteneuve à BLEND Web Mix 2014

TÉKITOA


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

Le dev front

aujourd’hui

Le cycle du dev front aujourd’hui

Préambule

Les Source Maps

Fichiers produits par une phase de build (ex. transpiling, concaténation, minification…) permettant de faire le lien, au caractère près, entre l’unique contenu résultat et les contenus des fichiers originaux.

Référencé par un commentaire spécial dans le fichier final.


/*# sourceMappingURL=app.css.map*/
          

//# sourceMappingURL=app.js.map
          

Chargé et utilisé par nos navigateurs (Chrome, Firefox, IE) si les outils de dev sont actifs. Très utile au débogage.

Côté client

Juste dans le navigateur

Côté client

Injection CSS

Modifiable interactivement dans les outils développeur.

Modifiable aussi en tant que fichier source (sauf IE).

Pris en compte à la volée.

Injection JS

Dans Chrome, on peut modifier le JS à la volée.

V8 (la runtime JS) hot-swappe le code modifié dans l’exécution en cours (pas de rechargement de la page).

Hélas pas encore dispo sur Firefox et IE :-(

Souci 1 : transient

Reste dans la page en cours :

disparaît au rafraîchissement.

Souci 2 : Source Maps

« Modifier » les originaux ne sert à rien

Le navigateur ne peut pas reconstruire, côté client, le fichier final réellement exploité (CSS, JS) à partir des sources d’origine : les modifiers individuellement n’est pas reflété.

Interlude

Brunch

brunch.io

Pour quoi faire ?

Application Assembly

Concaténation intelligente (dont enrobages modules)

Préprocesseurs, transpiling et précompilation

Linting

Minification haut de gamme

Tâches connexes (ex. manifeste AppCache, spriting & optimisation images, génération de docs, digests…)

Autres outils

Grunt (très répandu, basé fichiers)

Gulp (idem, mais basé pipeline)

Broccoli (moins répandu, basé pipeline aussi)

Les 3 sont des exécuteurs de tâches génériques, qui nécessitent pas mal de code et sont lents (> 1s).

Brunch : (presque) « que » du build, config triviale, beaucoup plus rapide à réagir aux changements.

Bien répandu, stable, là depuis des années…

Config basique


exports.config =
  files:
    javascripts:
      joinTo: 'app.js'
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'
            

brunch-config.coffee ou brunch-config.js

Indique au minimum les cibles de la « concaténation », par type de fichiers : scripts, feuilles de styles et templates.

Permet aussi plein de fonctions cool en plus (serveur statique, etc.)

Plugins Brunch

Y'en a des tonnes

Il suffit de les installer (npm install) dans le projet pour que Brunch les utilise. La plupart du temps, zéro config.

Il reste évidemment possible de les configurer spécifiquement pour affiner leur comportement.


plugins:
  appcache:
    externalCacheEntries: [
      '/socket.io/socket.io.js'
    ]
    network: ['*', 'http://*', 'https://*']
  browserSync:
    codeSync: false
    logLevel: 'silent'
    online: false
    open: false
            

Builds

Par défaut, Brunch builde pour le dev : pas de minifications / optimisations. Plus rapide et plus pratique en dev (même si on a les Source Maps de toutes façons).


$ brunch build
            

On peut bien sûr demander un build de production, qui active les plugins éventuels associés. Notamment clean-css et UglifyJS.


$ brunch build --production
            

Watcher

Surveille l’ensemble des fichiers sources et reconstruit* les fichiers cibles du build.


$ brunch watch
26 Oct 12:07:22 - info: compiled 24 files and 2 cached into 2 files,
  copied 5 in 947ms
26 Oct 12:07:38 - info: compiled application.js and 22 cached files
  into app.js in 246ms
26 Oct 12:07:42 - info: compiled history.styl and 2 cached files into
  app.css in 155ms
            
* intelligemment : cache partiel, etc.

Notre appli d’exemple

Petite SPA simple, qui mélange plein de technos :

JS (ES3/ES5) et CoffeeScript pour les scripts

SASS et Stylus pour les styles

Jade pour les templates

CommonJS pour l’enrobage des modules (dont les libs classiques : jQuery, Underscore, Moment, Bootstrap, Backbone…)

Avec Brunch, super facile !

Le diagramme

Sur disque

pour persister

Workspaces

avec Chrome DevTools

Permet de « mapper » des ressources (URL) à des fichiers sur le filesystem de ta machine (dont montages réseaux).

Du coup on peut éditer dans les DevTools mais sauver le fichier correspondant pour de vrai.

Workspaces

Souci : Source Maps

Toujours pas, forcément…

Toujours le même problème côté client : le navigateur ne pouvant re-construire le build tout seul, il ne déploie pas la modif faite sur un des fichiers « source », seulement ceux sur le build.

Surveiller

les fichiers finaux pour notifier le navigateur

Reconstruire le build

LiveReload

a presque inventé ce p’tit jeu

Basé sur les WebSockets, donc IE10+ et les autres.

Archi serveur/watcher + extension

Gère aujourd’hui plein d’autres trucs (transpiling, concaténation, etc.)

Outils desktop dans le même genre : CodeKit (OSX), Hammer (OSX), Prepros (OSX / Windows).

livereload.com

* ou IE pre-9 mais avec extension + serveur spécifique

Emmet LiveStyle

Super approche, qui permet une synchro bidirectionnelle entre n'importe quelle page et des fichiers/buffers dans SublimeText.

Pas basé fichiers spécifiques, donc pas besoin même de trucs spéciaux dans la page.

Paquet Sublime Text + Extension Chrome.

livestyle.emmet.io

Démo

Brackets Live Preview

Même principe que Emmet LiveStyle, mais spécifiquement pour l’éditeur Brackets et sa prévisualisation, basée Chrome.

brackets.io

BrowserSync

S’occupe avant tout de synchroniser l'interaction avec plein de navigateurs ouverts, mais fait aussi de l’injection CSS.

Aucune extension : tous navigateurs (IE5.5+).

Indépendant de l'éditeur / EDI.

On l’utilisera tout à l’heure.

browsersync.io

Et JS alors ?!

Tous ces outils n’injectent pas JS, seulement CSS.

Quand on modifie du JS, ils rechargent la page.

« Ce qui est bien mais pas top »

Comment faire pour avoir de l’injection JS, ce qui nécessite du hot-swapping dans la runtime JS du navigateur ?

WebStorm / PHPStorm

L’EDI peut injecter à la volée les modifications faites dans l'EDI (HTML, CSS, JS) dans son panneau de prévisualisation (Chrome seulement).

D’une manière générale, un EDI de fou. Vaut très largement son coût de license, allez voir.

En savoir plus

fb-flo

Encore une extension Chrome… mais avec un serveur ouvert et indépendant de l’éditeur/EDI (comme BrowserSync).

Injecte CSS et JS !

Ça ressemble au Saint-Graal (mais que sur Chrome).

github.com/facebook/fb-flo

fb-flo

Notre serveur fb-flo


'use strict';

var flo = require('fb-flo'),
    fs = require('fs'),
    path = require('path');

var dir = path.resolve(__dirname, '../public');
var server = flo(dir, { glob: ['**/*.js', '**/*.css'] }, resolver);

server.once('ready', function() {
  console.log('fb-flo server ready to rock!');
});

function resolver(filepath, callback) {
  var fullPath = path.resolve(dir, filepath);
  callback({
    resourceURL: filepath,
    contents: fs.readFileSync(fullPath).toString(),

    update: function(window, resourceURL) {
      console.log(resourceURL + " has just been updated with new content!");
    }
  });
}
            

Quel que soit l’éditeur

Tincr

Ajoute des possibilités de sauvegarde par rapport aux Workspaces (par exemple, persiste les modifs sans les panneaux Styles de l’onglet Éléments), et permet en théorie l’injection CSS et JS (j’ai pas vérifié).

Nécessite quand même un poil de config manuelle pour chaque ressource concernée (mais pas grave).

tin.cr

BrowserSync

pour synchroniser les comportements

Ça fait plein de trucs

Ghost Mode : synchro clics, scroll, manips formulaires…

Serveur statique

Proxy par-dessus backend existant

Tunnel (avec localtunnel.me) pour partager du local

URLs en xip.io si pas de DNS local pratique

Injection CSS

Basé sur Socket.IO (IE5.5+), injecte son code client

browsersync.io

Ghost Mode

Clics

Scroll

Formulaires : saisies, (dé)cochages, sélections, envois

Position de la souris

Tout ça optionnel / configurable.

Démo

Envie d’en savoir plus ?

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

Merci !

Et que le Web soit avec vous


Christophe Porteneuve

@porteneuve

Retrouvez des slides plus complets sur bit.ly/devavengers
…et le screencast HD détaillé qui leur correspond.