Living Style Guide : La boîte à outils de votre projet web

Modules, composants, toolkits, pattern libraries, building blocks, design systems, templates... au-delà de la terminologie variée, le but du style guide est de décomposer son projet web en de nombreux éléments simples, extensibles et surtout réutilisables.

Le principe de style guide appliqué au développement front n'est pas nouveau, mais il s'est récemment enrichi, avec l'apparition de "living" style guides. Ces livrables à part entière, mis à disposition de toute l'équipe, sont composés de modules directement consommés par les sites web en production.

Et que ce soit à travers les frameworks Javascript en vogue ou avec l'arrivée des Web Components, cette approche est plus que jamais d'actualité ! Je vous expliquerai les avantages de cette approche et je vous donnerai des outils et des conseils pour l'appliquer à votre prochain projet web.

Transcript

1. Living Style Guide La boîte à outils de votre projet web Hans Lemuet – 10 juin 2015
2. Qu’est-ce que c’est ? • une méthodologie pour le développement front-end d’un site web • un document de référence pour toute l’équipe du projet • un livrable technique
3. Un Living Style Guide, c’est une bibliothèque d’éléments d’interface réutilisables qui va servir de base à un projet web.
4. Ce n'est pas... • un guide de standards pour le code • une charte graphique • nouveau...
8. Style Guide
9. <link rel="stylesheet" href="styleguide-v1.css"> <script src="styleguide-v1.js"></script> ... <a href="#" class="button">Mon bouton</a>
10. <link rel="stylesheet" href="styleguide-v2.css"> <script src="styleguide-v2.js"></script> ... <a href="#" class="button" role="button">Mon bouton</a>
11. Living Style Guide
12. ruby gem 'my-styleguide' ... = button(href: '#', text: 'Mon bouton') rendu html <a href="#" class="button">Mon bouton</a>
13. javascript $ npm install my-styleguide ... +button({ href: '#', text: 'Mon bouton' }) rendu html <a href="#" class="button">Mon bouton</a>
14. Quel moteur de templates ? Stack unique • Ruby : Slim ou Haml • JavaScript : Jade rendu de modules côté client possible ♥ • PHP : Twig ... Environnements multiples C'est pas simple !
15. Mustache
16. C'est parti !
17. Méthodologie suggérée • Imprimer toutes les maquettes graphiques • Découpage en modules ➔ nommage ➔ cas particuliers : harmonisation ou variantes • Définir les bases : variables de couleurs, typos, icônes... • Développer chaque module ➔ fluide / responsive ➔ mobile first
18. Méthodologie (suite) Une fois les premiers modules développés... • Développer chaque layout • Placer les modules dans des layouts pour composer les templates
19. Structurer son Living Style Guide
23. Vue d'ensemble
24. Avantages • Découpage d'un projet complexe en modules plus simples ♥ responsive, mobile-first • Nomenclature commune pour toute l'équipe • Maintenabilité, réutilisabilité et séparation des rôles • Définition du modèle de données de chaque module et de chaque vue • Possibilité de tests automatisés et d'intégration continue
25. Perspectives • Frameworks JS basé sur un découpage par « modules » : React, Angular... • Approche future-friendly (arrivée des Web Components) • styleguides.io pour approfondir le sujet
26. Questions ? Démo ?
27. Exemples • Style Guide Jerevedunemaison.com par Etamin Studio • Paris Living Style Guide par Etamin Studio (bientôt dispo) • Rizzo par Lonely Planet • Style Guide de Starbucks
28. Outils recommandés • Rendu du site statique, gestion des données : Harp • Build : Gulp, Browserify, Templatizer • Distribution : npm, bower...