industrialiser le dev. front end · boris schapira · bdx.io
TRANSCRIPT
![Page 1: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/1.jpg)
Industrialiser le
dév. Front-End
Boris Schapira - Bdx.io 2015
![Page 2: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/2.jpg)
![Page 3: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/3.jpg)
Accessibilité, sémantique, mark-up applicatifs, micro-datas etattributs ARIA, Web Components avec des Custom Elements etdes HTML imports utilisant des HTML Templates et duShadow DOM, Images en RWD utilisant picture ou figure avecfigcaption, Canvas, SVG, balises médias Audio/Video, SpeechInput, Templating Jade/HAML ou à balisage léger, SélecteursCSS, Polices et WebFonts, Grilles Float ou flexbox ?, Couleurs etopacités, HSLA, gradients, bords arrondis, ombres, background,Animations, Transition, Support des navigateurs, préprocesseurs,postprocesseurs, normalisateurs et reset, autoprefixer, Closures,Hoisting, localStorage, openDatabase, indexedDb, AppCache,Service Workers, Notifications, Drag’nDrop, Filesystem API’s,Géoloc, Orientation, Précompilateurs JS, linters...
Le Web aujourd’hui :
HTML + JS + CSS
?
![Page 4: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/4.jpg)
10 % ?
30 % ?
60 % ?
Valeur ajoutée ✘
![Page 5: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/5.jpg)
![Page 6: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/6.jpg)
Gains
- de temps
- de confort
- de confiance✓
![Page 7: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/7.jpg)
Gestion des dépendancesDépendances à plat ou en arbres ?
Versionning sémantique ?
Pérénité des dépôts de dépendances ?
Existant Back ?
![Page 8: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/8.jpg)
Tâches orchestréesPré / Post / Compilateurs ?
Génération de variantes d’images ?
Optimisations de ressources ?
Formateurs / Linters à la volée ?
![Page 9: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/9.jpg)
Observateur de modificationQuels fichiers observer ?
Quelle action en fonction de quelle modification ?
Mise à jour synchronisée du navigateur sur plusieurs devices ?
![Page 10: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/10.jpg)
ContrôlesValidation statique HTML + JS + CSS ?
Tests de performance ?
Navigateurs cibles Usages cibles (navigateur + contexte) ?
![Page 11: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/11.jpg)
Packaging et livraisonNature du projet ?
Management du projet ?
Historique et communication ?
Intégration continue ?
[ ]
![Page 12: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/12.jpg)
Moteur d’automatisationQui doit le programmer, avec quelles compétences ?
Quelles sont les briques disponibles sur les machines ?
Quelle communauté pour les ajouts ?
![Page 13: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/13.jpg)
Maintenance et débogageReprise du processus plusieurs semaines / mois / année plus tard ?
Capacité à diriger le trafic vers des fichiers locaux ?
![Page 14: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/14.jpg)
[ ]
Installation
Développement
Intégration
Maintenance
[ ]
![Page 15: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/15.jpg)
Accessibilité, sémantique, mark-up applicatifs, micro-datas etattributs ARIA, Web Components avec des Custom Elements etdes HTML imports utilisant des HTML Templates et duShadow DOM, Images en RWD utilisant picture ou figure avecfigcaption, Canvas, SVG, balises médias Audio/Video, SpeechInput, Templating Jade/HAML ou à balisage léger, SélecteursCSS, Polices et WebFonts, Grilles Float ou flexbox ?, Couleurs etopacités, HSLA, gradients, bords arrondis, ombres, background,Animations, Transition, Support des navigateurs, préprocesseurs,postprocesseurs, normalisateurs et reset, autoprefixer, Closures,Hoisting, localStorage, openDatabase, indexedDb, AppCache,Service Workers, Notifications, Drag’nDrop, Filesystem API’s,Géoloc, Orientation, Précompilateurs JS, linters...
Solutions ?
![Page 16: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/16.jpg)
![Page 17: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/17.jpg)
![Page 18: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/18.jpg)
![Page 19: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/19.jpg)
Merci !
![Page 20: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/20.jpg)
The Noun Project
Creative Commons BY 3.0 - US :
documents par John Slater
Gear par Dmitry Baranovskiy
Building blocks par Olivier Rooker
Process par Rflor Baranovskiy
Box par Nicolas Vicent
Crosshair par Chris, NZ
Observation par Arthur Shlain
Licences d’utilisationAccept File par mantisshrimpdesign
Browser Upload par Tahsin Tahil, BD
Browser par Zlatko Najdenovski, MK
Cloud par Viktor Fedyuk
User icons par Wilson Joseph
Discussion par Milky - Digital innovation
Flickr :
pitiful par latteda - CC BY 2.0
![Page 21: Industrialiser le dev. front end · Boris Schapira · Bdx.io](https://reader033.vdocuments.site/reader033/viewer/2022051503/5a6778017f8b9ab0378b49d5/html5/thumbnails/21.jpg)
Des liens qu’ils sont biens :
“Mes projets Web se passent toujours bien”, Jérémie Patonnier
“Readme Driven Development”, Thomas Parisot
“Développeurs front : vous n’utilisez pas de proxy ?”, Stéphane Tessier
“Intégrateur Web vs. Développeur Front-End”, Marie Guillaumet
“Yeoman”, Florian Lonqueu-Brochard
“Pourquoi je préfère Brunch”, Christophe Porteneuve