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. Industrialisation
    Front-end ?
    Encore un gros mot !
    @Halleck45

    View Slide

  2. Développez
    CSS
    JavaScript
    HTML
    IDE
    Browser

    View Slide

  3. IDE
    FileWatchers, extension navigateur, relecteurs...

    View Slide

  4. Réduisez
    La quantité de code à écrire

    View Slide

  5. Préprocesseurs CSS
    Programmation CSS : variables, mixins...

    View Slide

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



    Item 1
    Item 2
    Item 3
    Item 4
    Item 5


    View Slide

  7. Limitez
    Vos actions

    View Slide

  8. Live reload
    Ctrl + S

    View Slide

  9. Autrefois
    Aller sur le site de jQuery
    Télécharger la librairie
    Copier les fichiers
    Coller dans le projet
    Mettre à jour le tag HTML

    View Slide

  10. Aujourd'hui
    > npm install bower grunt­bower­install
    > bower install jquery#1.11 ­­save
    > grunt bower install

    View Slide

  11. grunt
    Automatise les tâches répétitives

    View Slide

  12. grunt-responsive-image
    Crée automatiquement plusieurs résolutions
    de chaque image
    À utiliser avec srcset-polyfill, Imager.js...

    View Slide

  13. grunt-contrib-imagemin
    Compresse chaque image (JPG, PNG, GIF...)

    View Slide

  14. Générez
    Votre code

    View Slide

  15. > 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
    ...

    View Slide

  16. 473 générateurs !

    View Slide

  17. Yeoman
    Web app generator

    View Slide

  18. Utilisez
    Un framework

    View Slide

  19. Faites votre marché

    View Slide

  20. Implémentations TodoMVC

    View Slide

  21. Passez au web déclaratif

    My tasks

    by name
    by date



    View Slide

  22. Publiez
    Et optimisez vos ressources

    View Slide

  23. Créée une version de production de votre projet
    > grunt build

    View Slide

  24. grunt-uncss
    Supprime le CSS inutilisé
    Twitter Bootstrap
    + jquery-ui
    + plugins jQuery
    + css de l'application
    = 168 Ko

    View Slide

  25. grunt-contrib-uglify
    Minifie le JavaScript

    View Slide

  26. grunt-contrib-concat
    Fusionne les fichiers JavaScript

    View Slide

  27. Testez
    Votre projet

    View Slide

  28. Détectez
    Les anomalies

    View Slide

  29. 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 !

    View Slide

  30. Multi supports
    Navigation synchronisée
    Clics et scrolls synchronisés
    Captures d'écran
    Live reload
    Adobe edge inspect
    Grunt live reload
    Ghostlab
    Saucelabs
    ...

    View Slide

  31. Visualisez
    Font des captures d'écran, vous indiquent les différences
    PhantomCSS, Huxley, Wraith...

    View Slide

  32. 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

    View Slide

  33. Merci
    Des questions ?
    @Halleck45

    View Slide