$ git add autoslave/stations/static/stations/station.png

$ git add autoslave/stations/static/stations/station.png


$ git add autoslave/www/static/www/css/main.css

$ git add autoslave/stations/static/stations/station.png


$ git add autoslave/www/static/www/css/main.css


$ git add autoslave/www/static/www/js/lib/jquery-1.5.2.js

$ git add autoslave/stations/static/stations/station.png


$ git add autoslave/www/static/www/css/main.css


$ git add autoslave/www/static/www/js/lib/jquery-1.5.2.js


$ git add libs/Django-1.9.6-py2.py3-none-any.whl  # ?‽?

$ git add autoslave/stations/static/stations/station.png


$ git add autoslave/www/static/www/css/main.css


$ npm add --save jquery
$ git add package.json

package.json :

{
    "name": "redacted",
    "version": "0.0.1",
    "description": "Stuff",
    "author": "Raphaël Barrois",
    "license": "MIT",
    "dependencies": {
        "bootstrap": "~3.3.5",
        "jquery": "~2.1.4",
        "typeahead": "~0.2.0"
    }
}

$ npm install


$ ls node_modules/jquery/dist
jquery.js  jquery.min.js  jquery.min.map

$ npm install


$ ls node_modules/jquery/dist
jquery.js  jquery.min.js  jquery.min.map

$ ls -la autoslave/www/static/www/js/lib
jquery.js -> ../../../../../node_modules/jquery/dist/jquery.js

$ npm install


$ ls node_modules/jquery/dist
jquery.js  jquery.min.js  jquery.min.map

$ ls -la autoslave/www/static/www/js/lib
jquery.js -> ../../../../../node_modules/jquery/dist/jquery.js


$ django-admin.py collectstatic

$ ls autoslave/assets
jquery.0ad1eb5571fd.js

• ReactJS
  • et son JSX

• ReactJS
  • et son JSX
• ES6
  • Et ses compilateurs / transpilers

• ReactJS
  • et son JSX
• ES6
  • Et ses compilateurs / transpilers
• Sass, less

• Minification & co
  • Moins de fichiers, plus petits

• Minification & co
  • Moins de fichiers, plus petits
• HTTP/2
  • Plus besoin de découper

• Minification & co
  • Moins de fichiers, plus petits
• HTTP/2
  • Plus besoin de découper
• Un CDN
  • Il faut tout déployer avant de mettre à jour le code
  • Ou alors, on charge le JS depuis le CDN — mais uniquement en dév

• Minification & co
  • Moins de fichiers, plus petits
• HTTP/2
  • Plus besoin de découper
• Un CDN
  • Il faut tout déployer avant de mettre à jour le code
  • Ou alors, on charge le JS depuis le CDN — mais uniquement en dév
• Sentry
  • Avoir des rapports d'erreur sur le JS c'est bien, avec le code non-minifié c'est mieux

• Gulp

• Gulp
• Grunt

• Gulp
• Grunt
• Webpack

• Gulp
• Grunt
• Webpack
• Browserify

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs
• jspm

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs
• jspm
• npm

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs
• jspm
• npm
• Broccoli

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs
• jspm
• npm
• Broccoli
• Brunch

• Gulp
• Grunt
• Webpack
• Browserify
• systemjs
• jspm
• npm
• Broccoli
• Brunch
• ...

Pour faire quoi ?

• Du Javascript sans variables globales (ou presque)
• Compilation (ES6, JSX, Sass, Less, ...)
• Optimisation des images (high DPI, entrelacement, sprites, ...)
• Concaténation et minification (moins de fichier => moins de requêtes)
• Tree-shaking (élimination du code non-utilisé)
• Génération de sourcemaps

collectstatic :

1. Détecte les fichiers à intégrer
2. Les enregistre sur le StaticFilesStorage
3. Calcule les hash, intelligemment
4. Enregistre les fichiers hashés sur le StaticFilesStorage

collectstatic :

3. Calcule les hash, intelligemment

app.js → lib.js → lib.css → logo.png

=> Autant le faire quand on compile / concatène / minifie tous les fichiers

collectstatic :

2. Les enregistre sur le StaticFilesStorage

4. Enregistre les fichiers hashés sur le StaticFilesStorage

• On n'a besoin que du fichier hashé, pas du fichier d'origine
• Coût double

• Le ManifestStaticFilesStorage utilise un manifest.json
  • Indique, pour chaque fichier source, le nom du fichier hashé
  • Calculé au collectstatic, prêt à déployer sans recalcul
• Rails, webpack, grunt, broccoli, gulp, ... génèrent un manifest.json comparable
  • main.js → main.0ad1eb5571fd.js
  • Parfois les détails des sources utilisées

• Standardiser un format de manifest.json compatible avec d'autres écosystèmes
• Refondre la chaîne du collectstatic
  1. Scan des fichiers (sauf ceux pré-calculés par un autre pipeline)
  2. Traitement des fichiers (hash, copie locale, etc.)
  3. Écriture d'un manifest.json intégrant tous les fichiers du projet (admin compris)
  4. Écrire ces fichiers à un emplacement défini (local, CDN, etc.)
• Sujet évoqué à Django Under the Hood et à la DjangoConEU

Message subliminal: On recrute ;)

• Twitter: @raphaelbarrois
• https://github.com/rbarrois
• Xelnor @ irc.freenode.net