Industrialisation Front-end - introduction

905 views
731 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
905
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Industrialisation Front-end - introduction

  1. 1. Industrialisation Front-end ? Encore un gros mot ! @Halleck45
  2. 2. CSS JavaScript HTML IDE Browser Développez
  3. 3. FileWatchers, extension navigateur, relecteurs... IDE
  4. 4. Réduisez La quantité de code à écrire
  5. 5. Programmation CSS : variables, mixins... Préprocesseurs CSS
  6. 6. #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> Qui a encore besoin d'ouvrir des balises ?
  7. 7. Limitez Vos actions
  8. 8. Ctrl + S Live reload
  9. 9. Aller sur le site de jQuery Télécharger la librairie Copier les fichiers Coller dans le projet Mettre à jour le tag HTML Autrefois
  10. 10. > npm install bower grunt­bower­install > bower install jquery#1.11 ­­save > grunt bower install Aujourd'hui
  11. 11. grunt Automatise les tâches répétitives
  12. 12. grunt-responsive-image Crée automatiquement plusieurs résolutions de chaque image À utiliser avec srcset-polyfill, Imager.js...
  13. 13. grunt-contrib-imagemin Compresse chaque image (JPG, PNG, GIF...)
  14. 14. Générez Votre code
  15. 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 ...
  16. 16. 473 générateurs !
  17. 17. Yeoman Web app generator
  18. 18. Utilisez Un framework
  19. 19. Faites votre marché
  20. 20. Implémentations TodoMVC
  21. 21. 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> 
  22. 22. Publiez Et optimisez vos ressources
  23. 23. > grunt build Créée une version de production de votre projet
  24. 24. grunt-uncss Supprime le CSS inutilisé Twitter Bootstrap + jquery-ui + plugins jQuery + css de l'application = 168 Ko
  25. 25. grunt-contrib-uglify Minifie le JavaScript
  26. 26. grunt-contrib-concat Fusionne les fichiers JavaScript
  27. 27. Testez Votre projet
  28. 28. Détectez Les anomalies
  29. 29. Une syntaxe de tests... Pour tous ! 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));     })   }) })
  30. 30. Multi supports Navigation synchronisée Clics et scrolls synchronisés Captures d'écran Live reload Adobe edge inspect Grunt live reload Ghostlab Saucelabs ...
  31. 31. Visualisez Font des captures d'écran, vous indiquent les différences PhantomCSS, Huxley, Wraith...
  32. 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
  33. 33. Merci Des questions ? @Halleck45

×