Upload
boris-schapira
View
1.000
Download
0
Embed Size (px)
Citation preview
Industrialiser le
dév. Front-End
Boris Schapira - Bdx.io 2015
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
?
10 % ?
30 % ?
60 % ?
Valeur ajoutée ✘
Gains
- de temps
- de confort
- de confiance✓
Gestion des dépendancesDépendances à plat ou en arbres ?
Versionning sémantique ?
Pérénité des dépôts de dépendances ?
Existant Back ?
Tâches orchestréesPré / Post / Compilateurs ?
Génération de variantes d’images ?
Optimisations de ressources ?
Formateurs / Linters à la volée ?
Observateur de modificationQuels fichiers observer ?
Quelle action en fonction de quelle modification ?
Mise à jour synchronisée du navigateur sur plusieurs devices ?
ContrôlesValidation statique HTML + JS + CSS ?
Tests de performance ?
Navigateurs cibles Usages cibles (navigateur + contexte) ?
Packaging et livraisonNature du projet ?
Management du projet ?
Historique et communication ?
Intégration continue ?
[ ]
Moteur d’automatisationQui doit le programmer, avec quelles compétences ?
Quelles sont les briques disponibles sur les machines ?
Quelle communauté pour les ajouts ?
Maintenance et débogageReprise du processus plusieurs semaines / mois / année plus tard ?
Capacité à diriger le trafic vers des fichiers locaux ?
[ ]
Installation
Développement
Intégration
Maintenance
[ ]
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 ?
Merci !
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
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