industrialisation front-end - introduction
Post on 05-Jul-2015
414 Views
Preview:
DESCRIPTION
TRANSCRIPT
Industrialisation Front-end ?
Encore un gros mot !
@Halleck45
Développez
CSS JavaScript
HTMLIDE
Browser
IDE
FileWatchers, extension navigateur, relecteurs...
RéduisezLa quantité de code à écrire
Préprocesseurs CSS
Programmation CSS : variables, mixins...
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>
LimitezVos actions
Live reload
Ctrl + S
Autrefois
Aller sur le site de jQueryTélécharger la librairie
Copier les fichiersColler dans le projet
Mettre à jour le tag HTML
Aujourd'hui
> npm install bower gruntbowerinstall
> bower install jquery#1.11 save> grunt bower install
gruntAutomatise les tâches répétitives
grunt-responsive-image
Crée automatiquement plusieurs résolutions de chaque image
À utiliser avec srcset-polyfill, Imager.js...
grunt-contrib-imagemin
Compresse chaque image (JPG, PNG, GIF...)
GénérezVotre code
> 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...
473 générateurs !
Yeoman Web app generator
UtilisezUn 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">by date</sort> </sorters> <tasks /> </body>
PubliezEt optimisez vos ressources
Créée une version de production de votre projet
> grunt build
grunt-uncssSupprime le CSS inutilisé
Twitter Bootstrap + jquery-ui + plugins jQuery+ css de l'application
= 168 Ko
grunt-contrib-uglifyMinifie le JavaScript
grunt-contrib-concatFusionne les fichiers JavaScript
TestezVotre projet
DétectezLes anomalies
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 !
Multi supports
Navigation synchroniséeClics et scrolls synchronisés
Captures d'écranLive reload
Adobe edge inspectGrunt live reloadGhostlabSaucelabs...
Visualisez
Font des captures d'écran, vous indiquent les différencesPhantomCSS, 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. Un bon manager industrialise son workflow de production
MerciDes questions ?
@Halleck45
top related