Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Industrialisation front-end: introduction

Industrialisation front-end: introduction

Un introduction aux pratiques d'industrialisation front-end, à l'occasion d'un Meetup JavaScript

Jean-François Lépine

February 19, 2014
Tweet

More Decks by Jean-François Lépine

Other Decks in Programming

Transcript

  1. Qui a encore besoin d'ouvrir des balises ? #page>div.logo+ul#navigation>li*5>a{Item $}

    <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
  2. Autrefois Aller sur le site de jQuery Télécharger la librairie

    Copier les fichiers Coller dans le projet Mettre à jour le tag HTML
  3. > yo [?] What would you like to do ?

    >run the angular generator >run the Mocha generator >run the Node generator >run the webapp generator >run the bog generator >run the jquery generator ...
  4. Passez au web déclaratif <body> <h1>My tasks</h1> <sorters> <sort key="name">by

    name</sort> <sort key="date">by date</sort> </sorters> <tasks /> </body>
  5. grunt-uncss Supprime le CSS inutilisé Twitter Bootstrap + jquery-ui +

    plugins jQuery + css de l'application = 168 Ko
  6. var assert = require("assert") describe('Array', function(){ describe('#indexOf()', function(){ it('should return

    ­1 when the value is not present', function(){ assert.equal(­1, [1,2,3].indexOf(5)); assert.equal(­1, [1,2,3].indexOf(0)); }) }) }) Une syntaxe de tests... Pour tous !
  7. Multi supports Navigation synchronisée Clics et scrolls synchronisés Captures d'écran

    Live reload Adobe edge inspect Grunt live reload Ghostlab Saucelabs ...
  8. En bref... 1. L'écosystème JavaScript est riche 2. Un bon

    développeur boit un café pendant que ses robots travaillent ! 3. Un bon manager industrialise son workflow de production