Optimiser son workflow frontend

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

Transcript

1. Louis Chenais - 2016 Optimiser son workflow frontend @chuckn0risk
2. https://twitter.com/chuckn0risk https://github.com/ChucKN0risK lchenais@gmail.com
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/
23. Front-End Questionnaire github.com/bradfrost/frontend-guidelines-questionnaire/
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
27. http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
28. http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
29. 74% des internautes quitteront un site mobile s’il met plus de 5s à charger https://kinsta.com/learn/page-speed/
30. Performance IS Design
31. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
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
36. THE SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
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/
39. CSS Stats cssstats.com
40. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
41. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
42. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
43. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
44. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
45. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
46. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
47. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
48. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
49. L’architecture SMACSS
51. SMACSS - BASE
52. SMACSS - Components
53. SMACSS - fonts
54. SMACSS - layout
55. SMACSS - pages
56. SMACSS - tools
57. Sassdoc http://sassdoc.com/
58. Automatiser la crÉation de documentation
60. Media queries Mixin https://github.com/sass-mq/sass-mq
61. À connaître Flexbox Module Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)
62. build process
63. Git Sketch Plugin https://github.com/mathieudutour/git-sketch-plugin
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
66. Créons des interfaces accessibles http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it
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)
68. MERCI @chuckn0risk