Optimiser son workflow frontend
•
1 like•464 views
Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ? Comment construire une architecture CSS modulaire ? https://www.youtube.com/watch?v=nWWslZboeEE
Recommended
Recommended
More Related Content
Similar to Optimiser son workflow frontend
Similar to Optimiser son workflow frontend (20)
Optimiser son workflow frontend
- 1. Louis Chenais - 2016 Optimiser son workflow frontend @chuckn0risk
- 3. Pourquoi cette présentation ? Suite de mon article publié en février concernant différents headers à implémenter. => 4 Responsive Navigation Principles
- 4. À QUI m’adrÉsse-je ? Principalement aux développeurs et aux designers curieux de mieux collaborer avec les membres de leur projet et d’automatiser leur workflow.
- 5. Le PROGRAMME Mieux collaborer c’est quoi ? Présentation d’une architecture modulaire
- 6. Mieux collaborer c’est quoi ? I
- 7. DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration
- 8. DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration Designers
- 9. Se partager le travail Credits : Tom Maslen, Testing & Debugging Responsive Web Design from Smashing Book 5
- 10. NOPE
- 11. C’est se parler, se comprendre et mettre en place les méthodes et les outils basés sur cette compréhension. En tant que développeur Front-End je me dois de comprendre comment travaillent les designers et les autres développeurs du projet.
- 12. Toutes les ressources du projet en un seul endroit https://github.com/sparkbox/standard/blob/master/project_management/base-hub.md
- 13. LE STYLEGUIDE
- 14. KÉzako le styleguide ? Un styleguide est un guide de design pour un projet donné. Il va aider les différents contributeurs à rester dans le même chemin et à construire un produit le plus homogène possible.
- 15. Identité de marque Vocabulaire commun Ton & Voix Librairie de modules Code Anatomie d’un styleguide http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
- 16. Identité de marque Son but : établir un guide d’utilisation des principaux composants de la marque Destinataires : toute personne susceptible de communiquer au nom de la marque Peut inclure : logo, typographies, charte graphique, documents, templates, etc…
- 17. Vocabulaire commun Son but : établir un langage commun pour un expérience utilisateur homogène sur l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer une expérience utilisateur au nom de la marque Peut inclure : principes de design, esthétique globale, principes d’UX, type d’animation… (ex : Material Design)
- 18. Ton & Voix Son but : établir et encourage un ton homogène et approprié à travers l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer du contenu écrit pour la marque Peut inclure : marketing, documentation, blog post, CGU/CGV, alertes, conventions de rédaction…
- 19. code Son but : établir des conventions pour les développeurs afin de créer un code performant, cohérent et maintenable Destinataires : toute personne susceptible de développer pour la marque Peut inclure : conventions de développement, structure HTML, CSS architecture, HTML/CSS/JS Styleguides…
- 20. librairie de modules Son but : établir/maintenir un système de composants pour des UI cohérentes et accélérer la production Destinataires : toute personne susceptible de toucher aux projets de la marque Peut inclure : modules globaux, typography, blocs de navigation, objet media, animations, littéralement tout ce que l’on inclue dans une interface
- 21. Plusieurs avantages Meilleure communication et vocabulaire commun Meilleur workflow Cohérence Design/UX/UI
- 22. Salesforce Lightning Design System www.lightningdesignsystem.com/
- 24. Website Style Guide Ressources http://styleguides.io/
- 25. Quelques liens CSS Guidelines by @csswizardry SMACSS Architecture by @snookca Airbnb JavaScript Style Guide by Airbnb
- 26. une architecture de projet modulaire II
- 29. 74 % des internautes quitteront un site mobile s’il met plus de 5s à charger https://kinsta.com/learn/page-speed/
- 32. Construire le DOM en fonction de la performance
- 35. Pourquoi ? Spécificité du CSS difficile à maîtriser CSS difficile à scale si mal organisé CSS rapidement hétérogène du fait qu’il soit un langage accessible
- 37. THE bad SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
- 38. THE good SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
- 51. SMACSS - BASE
- 53. SMACSS - fonts
- 54. SMACSS - layout
- 55. SMACSS - pages
- 56. SMACSS - tools
- 58. Automatiser la crÉation de documentation
- 61. À connaître Flexbox Module Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)
- 62. build process
- 64. Designers utilisant Git très appréciés Gestion des assets automatisée/simplifiée
- 65. « If I had to choose between making something my problem or the user’s problem i’ll choose to make it mine every time » - Jeremy Keith, Web Developper
- 67. Ressources supplémentaires https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library-rwd-summit-2016 Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)