industrialiser le dev. front end · boris schapira · bdx.io

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