Une présentation de Christophe Porteneuve à BLEND Web Mix 2014
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'
]
};
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.
Modifiable interactivement dans les outils développeur.
Modifiable aussi en tant que fichier source (sauf IE).
Pris en compte à la volée.
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 :-(
Reste dans la page en cours :
disparaît au rafraîchissement.
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é.
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…)
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…
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.)
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
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
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
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 !
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.
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.
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).
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.
Même principe que Emmet LiveStyle, mais spécifiquement pour l’éditeur Brackets et sa prévisualisation, basée Chrome.
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.
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 ?
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.
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).
'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!");
}
});
}
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.crGhost 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
Clics
Scroll
Formulaires : saisies, (dé)cochages, sélections, envois
Position de la souris
Tout ça optionnel / configurable.
On fait des super formations de ouf sur
JS et le dev web front,
Node.js et
Git.
Christophe Porteneuve
Retrouvez des slides plus complets sur bit.ly/devavengers
…et le screencast HD détaillé qui leur correspond.