Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Industrialiser le
dév. Front-End
Boris Schapira - Bdx.io 2015
Accessibilité, sémantique, mark-up applicatifs, micro-datas et
attributs ARIA, Web Components avec des Custom Elements et
...
10 % ?
30 % ?
60 % ?
Valeur ajoutée ✘
Gains
- de temps
- de confort
- de confiance✓
Gestion des dépendances
Dépendances à plat ou en arbres ?
Versionning sémantique ?
Pérénité des dépôts de dépendances ?
Ex...
Tâches orchestrées
Pré / Post / Compilateurs ?
Génération de variantes d’images ?
Optimisations de ressources ?
Formateurs...
Observateur de modification
Quels fichiers observer ?
Quelle action en fonction de quelle modification ?
Mise à jour synch...
Contrôles
Validation statique HTML + JS + CSS ?
Tests de performance ?
Navigateurs cibles Usages cibles (navigateur + cont...
Packaging et livraison
Nature du projet ?
Management du projet ?
Historique et communication ?
Intégration continue ?
[ ]
Moteur d’automatisation
Qui doit le programmer, avec quelles compétences ?
Quelles sont les briques disponibles sur les ma...
Maintenance et débogage
Reprise du processus plusieurs semaines / mois / année plus tard ?
Capacité à diriger le trafic ve...
[ ]
Installation
Développement
Intégration
Maintenance
[ ]
Accessibilité, sémantique, mark-up applicatifs, micro-datas et
attributs ARIA, Web Components avec des Custom Elements et
...
Merci !
The Noun Project
Creative Commons BY 3.0 - US :
documents par John Slater
Gear par Dmitry Baranovskiy
Building blocks par ...
Des liens qu’ils sont biens :
“Mes projets Web se passent toujours bien”, Jérémie Patonnier
“Readme Driven Development”, T...
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Industrialiser le dev. front end · Boris Schapira · Bdx.io
Upcoming SlideShare
Loading in …5
×

Industrialiser le dev. front end · Boris Schapira · Bdx.io

Qu'on parle d'intégration HTML ou de développement Front-End, on ne s'outille plus en 2015 comme en 2005. De nombreux outils existent désormais pour faciliter les processus de démarrage, composition, construction et déploiement.

Prenons 15 minutes pour en faire un rapide tour d'horizon et surtout en souligner les spécificités afin que vous trouviez le bon outil pour votre processus.

  • Be the first to comment

Industrialiser le dev. front end · Boris Schapira · Bdx.io

  1. 1. Industrialiser le dév. Front-End Boris Schapira - Bdx.io 2015
  2. 2. Accessibilité, sémantique, mark-up applicatifs, micro-datas et attributs ARIA, Web Components avec des Custom Elements et des HTML imports utilisant des HTML Templates et du Shadow DOM, Images en RWD utilisant picture ou figure avec figcaption, Canvas, SVG, balises médias Audio/Video, Speech Input, Templating Jade/HAML ou à balisage léger, Sélecteurs CSS, Polices et WebFonts, Grilles Float ou flexbox ?, Couleurs et opacité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 ?
  3. 3. 10 % ? 30 % ? 60 % ? Valeur ajoutée ✘
  4. 4. Gains - de temps - de confort - de confiance✓
  5. 5. Gestion des dépendances Dépendances à plat ou en arbres ? Versionning sémantique ? Pérénité des dépôts de dépendances ? Existant Back ?
  6. 6. Tâches orchestrées Pré / Post / Compilateurs ? Génération de variantes d’images ? Optimisations de ressources ? Formateurs / Linters à la volée ?
  7. 7. Observateur de modification Quels fichiers observer ? Quelle action en fonction de quelle modification ? Mise à jour synchronisée du navigateur sur plusieurs devices ?
  8. 8. Contrôles Validation statique HTML + JS + CSS ? Tests de performance ? Navigateurs cibles Usages cibles (navigateur + contexte) ?
  9. 9. Packaging et livraison Nature du projet ? Management du projet ? Historique et communication ? Intégration continue ? [ ]
  10. 10. Moteur d’automatisation Qui doit le programmer, avec quelles compétences ? Quelles sont les briques disponibles sur les machines ? Quelle communauté pour les ajouts ?
  11. 11. Maintenance et débogage Reprise du processus plusieurs semaines / mois / année plus tard ? Capacité à diriger le trafic vers des fichiers locaux ?
  12. 12. [ ] Installation Développement Intégration Maintenance [ ]
  13. 13. Accessibilité, sémantique, mark-up applicatifs, micro-datas et attributs ARIA, Web Components avec des Custom Elements et des HTML imports utilisant des HTML Templates et du Shadow DOM, Images en RWD utilisant picture ou figure avec figcaption, Canvas, SVG, balises médias Audio/Video, Speech Input, Templating Jade/HAML ou à balisage léger, Sélecteurs CSS, Polices et WebFonts, Grilles Float ou flexbox ?, Couleurs et opacité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 ?
  14. 14. Merci !
  15. 15. 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’utilisation Accept 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
  16. 16. 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

×