Téléchargé 23 fois
![> 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
...](https://image.slidesharecdn.com/2014-02-meetup-javascript-industrialisation-frontend-140219095124-phpapp01/75/Industrialisation-Front-end-introduction-15-2048.jpg)
![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));
})
})
})](https://image.slidesharecdn.com/2014-02-meetup-javascript-industrialisation-frontend-140219095124-phpapp01/75/Industrialisation-Front-end-introduction-29-2048.jpg)
Industrialisation Front-end - introduction
- 1. Industrialisation Front-end ? Encore un grosmot ! @Halleck45
- 2.
- 3. FileWatchers, extension navigateur,relecteurs... IDE
- 4. Réduisez La quantité decode à écrire
- 5. Programmation CSS : variables,mixins... Préprocesseurs CSS
- 6. #page>div.logo+ul#navigation>li*5>a{Item $} <div id="page"> <div class="logo"></div> <ulid="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.
- 8. Ctrl + S Livereload
- 9. Aller sur lesite de jQuery Télécharger la librairie Copier les fichiers Coller dans le projet Mettre à jour le tag HTML Autrefois
- 10.
- 11. grunt Automatise les tâchesrépétitives
- 12. grunt-responsive-image Crée automatiquement plusieursrésolutions de chaque image À utiliser avec srcset-polyfill, Imager.js...
- 13. grunt-contrib-imagemin Compresse chaque image(JPG, PNG, GIF...)
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Passez au webdéclaratif <body> <h1>My tasks</h1> <sorters> <sort key="name">by name</sort> <sort key="date">by date</sort> </sorters> <tasks /> </body>
- 22. Publiez Et optimisez vosressources
- 23. > grunt build Créée une versionde production de votre projet
- 24. grunt-uncss Supprime le CSSinutilisé Twitter Bootstrap + jquery-ui + plugins jQuery + css de l'application = 168 Ko
- 25.
- 26.
- 27.
- 28.
- 29. Une syntaxe detests... 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. Multi supports Navigation synchronisée Clicset scrolls synchronisés Captures d'écran Live reload Adobe edge inspect Grunt live reload Ghostlab Saucelabs ...
- 31. Visualisez Font des capturesd'écran, vous indiquent les différences PhantomCSS, Huxley, Wraith...
- 32. En bref... 1. L'écosystèmeJavaScript 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.