Industrialisation
Front-end ?
Encore un gros mot !

@Halleck45
CSS
JavaScript
HTML
IDE
Browser

Développez
FileWatchers, extension navigateur, relecteurs...

IDE
Réduisez

La quantité de code à écrire
Programmation CSS : variables, mixins...

Préprocesseurs CSS
#page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">I...
Limitez
Vos actions
Ctrl + S

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

...
> npm install bower grunt­bower­install
> bower install jquery#1.11 ­­save
> grunt bower install

Aujourd'hui
grunt

Automatise les tâches répétitives
grunt-responsive-image
Crée automatiquement plusieurs résolutions
de chaque image

À utiliser avec srcset-polyfill, Imager...
grunt-contrib-imagemin
Compresse chaque image (JPG, PNG, GIF...)
Générez

Votre code
> yo
[?] What would you like to 
do ?
>run the angular generator
>run the Mocha generator
>run the Node generator
>run the...
473 générateurs !
Yeoman
Web app generator
Utilisez

Un framework
Faites votre marché
Implémentations TodoMVC
Passez au web déclaratif
<body> 
<h1>My tasks</h1> 
 
<sorters> 
    <sort key="name">by name</sort> 
    <sort key="date"...
Publiez

Et optimisez vos ressources
> grunt build

Créée une version de production de votre projet
grunt-uncss
Supprime le CSS inutilisé

Twitter Bootstrap
+ jquery-ui
+ plugins jQuery
+ css de l'application
= 168 Ko
grunt-contrib-uglify
Minifie le JavaScript
grunt-contrib-concat
Fusionne les fichiers JavaScript
Testez

Votre projet
Détectez

Les anomalies
Une syntaxe de tests... Pour tous !
var assert = require("assert")
describe('Array', function(){
  describe('#indexOf()', ...
Multi supports
Navigation synchronisée
Clics et scrolls synchronisés
Captures d'écran
Live reload

Adobe edge inspect
Grun...
Visualisez

Font des captures d'écran, vous indiquent les différences
PhantomCSS, Huxley, Wraith...
En bref...
1. L'écosystème JavaScript est riche
2. Un bon développeur boit un café pendant
que ses robots travaillent !
3....
Merci
Des questions ?

@Halleck45
Prochain SlideShare
Chargement dans…5
×

Industrialisation Front-end - introduction

1 126 vues

Publié le

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

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 126
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×