Industrialisation front-end: introduction

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

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