Industrialisation Front-end - introduction
-
Upload
halleck45 -
Category
Technology
-
view
414 -
download
0
description
Transcript of Industrialisation Front-end - introduction
![Page 1: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/1.jpg)
Industrialisation Front-end ?
Encore un gros mot !
@Halleck45
![Page 2: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/2.jpg)
Développez
CSS JavaScript
HTMLIDE
Browser
![Page 3: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/3.jpg)
IDE
FileWatchers, extension navigateur, relecteurs...
![Page 4: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/4.jpg)
RéduisezLa quantité de code à écrire
![Page 5: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/5.jpg)
Préprocesseurs CSS
Programmation CSS : variables, mixins...
![Page 6: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/6.jpg)
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>
![Page 7: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/7.jpg)
LimitezVos actions
![Page 8: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/8.jpg)
Live reload
Ctrl + S
![Page 9: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/9.jpg)
Autrefois
Aller sur le site de jQueryTélécharger la librairie
Copier les fichiersColler dans le projet
Mettre à jour le tag HTML
![Page 10: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/10.jpg)
Aujourd'hui
> npm install bower gruntbowerinstall
> bower install jquery#1.11 save> grunt bower install
![Page 11: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/11.jpg)
gruntAutomatise les tâches répétitives
![Page 12: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/12.jpg)
grunt-responsive-image
Crée automatiquement plusieurs résolutions de chaque image
À utiliser avec srcset-polyfill, Imager.js...
![Page 13: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/13.jpg)
grunt-contrib-imagemin
Compresse chaque image (JPG, PNG, GIF...)
![Page 14: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/14.jpg)
GénérezVotre code
![Page 15: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/15.jpg)
> 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...
![Page 16: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/16.jpg)
473 générateurs !
![Page 17: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/17.jpg)
Yeoman Web app generator
![Page 18: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/18.jpg)
UtilisezUn framework
![Page 19: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/19.jpg)
Faites votre marché
![Page 20: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/20.jpg)
Implémentations TodoMVC
![Page 21: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/21.jpg)
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>
![Page 22: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/22.jpg)
PubliezEt optimisez vos ressources
![Page 23: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/23.jpg)
Créée une version de production de votre projet
> grunt build
![Page 24: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/24.jpg)
grunt-uncssSupprime le CSS inutilisé
Twitter Bootstrap + jquery-ui + plugins jQuery+ css de l'application
= 168 Ko
![Page 25: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/25.jpg)
grunt-contrib-uglifyMinifie le JavaScript
![Page 26: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/26.jpg)
grunt-contrib-concatFusionne les fichiers JavaScript
![Page 27: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/27.jpg)
TestezVotre projet
![Page 28: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/28.jpg)
DétectezLes anomalies
![Page 29: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/29.jpg)
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 !
![Page 30: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/30.jpg)
Multi supports
Navigation synchroniséeClics et scrolls synchronisés
Captures d'écranLive reload
Adobe edge inspectGrunt live reloadGhostlabSaucelabs...
![Page 31: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/31.jpg)
Visualisez
Font des captures d'écran, vous indiquent les différencesPhantomCSS, Huxley, Wraith...
![Page 32: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/32.jpg)
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
![Page 33: Industrialisation Front-end - introduction](https://reader033.fdocuments.in/reader033/viewer/2022052909/559819661a28ab36048b458e/html5/thumbnails/33.jpg)
MerciDes questions ?
@Halleck45