Louis Chenais - 2016
Optimiser son
workflow frontend
@chuckn0risk
https://twitter.com/chuckn0risk
https://github.com/ChucKN0risK
lchenais@gmail.com
Pourquoi cette
présentation ?
Suite de mon article publié en février concernant
différents headers à implémenter.

=> 4 Re...
À QUI m’adrÉsse-je ?
Principalement aux développeurs et aux designers
curieux de mieux collaborer avec les membres de
leur...
Le PROGRAMME
Mieux collaborer c’est quoi ?
Présentation d’une architecture modulaire
Mieux collaborer
c’est quoi ?
I
DÉROULEMent lambda d’un
projet
1
Cahier des
charges
2
Wireframes
3
Maquettes
4
Intégration
DÉROULEMent lambda d’un
projet
1
Cahier des
charges
2
Wireframes
3
Maquettes
4
Intégration
Designers
Se partager le travail
Credits : Tom Maslen, Testing & Debugging Responsive Web Design from Smashing Book 5
NOPE
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é...
Toutes les ressources du
projet en un seul endroit
https://github.com/sparkbox/standard/blob/master/project_management/bas...
LE STYLEGUIDE
KÉzako le styleguide ?
Un styleguide est un guide de design pour un
projet donné. Il va aider les différents
contributeurs...
Identité de marque
Vocabulaire commun
Ton & Voix
Librairie de
modules
Code
Anatomie d’un styleguide
http://www.slideshare....
Identité de marque
Son but : établir un guide d’utilisation des
principaux composants de la marque
Destinataires : toute p...
Vocabulaire commun
Son but : établir un langage commun pour un
expérience utilisateur homogène sur l’ensemble
des produits...
Ton & Voix
Son but : établir et encourage un ton homogène
et approprié à travers l’ensemble des produits et
services de la...
code
Son but : établir des conventions pour les
développeurs afin de créer un code performant,
cohérent et maintenable
Des...
librairie de modules
Son but : établir/maintenir un système de
composants pour des UI cohérentes et accélérer
la productio...
Plusieurs avantages
Meilleure communication et vocabulaire commun
Meilleur workflow
Cohérence Design/UX/UI
Salesforce Lightning Design System
www.lightningdesignsystem.com/
Front-End Questionnaire
github.com/bradfrost/frontend-guidelines-questionnaire/
Website Style Guide Ressources
http://styleguides.io/
Quelques liens
CSS Guidelines by @csswizardry
SMACSS Architecture by @snookca
Airbnb JavaScript Style Guide by Airbnb
une architecture
de projet modulaire
II
http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
74
%
des internautes quitteront un site mobile s’il
met plus de 5s à charger
https://kinsta.com/learn/page-speed/
Performance
IS
Design
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Construire le DOM en
fonction de la
performance
Pourquoi ?
Spécificité du CSS difficile à maîtriser
CSS difficile à scale si mal organisé
CSS rapidement hétérogène du fai...
THE SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
THE bad SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
THE good SPECIFICITY GRAPH
http://csswizardry.com/2014/10/the-specificity-graph/
CSS Stats
cssstats.com
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
L’architecture SMACSS
SMACSS - BASE
SMACSS - Components
SMACSS - fonts
SMACSS - layout
SMACSS - pages
SMACSS - tools
Sassdoc
http://sassdoc.com/
Automatiser la crÉation
de documentation
Media queries Mixin
https://github.com/sass-mq/sass-mq
À connaître
Flexbox Module
Responsive Typography
SVG
Responsive Design Patterns & Components
ARIA (Accessible Rich Interne...
build process
Git Sketch Plugin
https://github.com/mathieudutour/git-sketch-plugin
Designers utilisant Git très appréciés
Gestion des assets automatisée/simplifiée
« If I had to choose between
making something my problem
or the user’s problem i’ll choose
to make it mine every time » 
-...
Créons des interfaces
accessibles
http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were...
Ressources supplémentaires
https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library-rwd-summit-2016
Responsi...
MERCI
@chuckn0risk
Optimiser son workflow frontend
Optimiser son workflow frontend
Optimiser son workflow frontend
Optimiser son workflow frontend
Prochain SlideShare
Chargement dans…5
×

Optimiser son workflow frontend

188 vues

Publié le

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

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
188
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimiser son workflow frontend

  1. 1. Louis Chenais - 2016 Optimiser son workflow frontend @chuckn0risk
  2. 2. https://twitter.com/chuckn0risk https://github.com/ChucKN0risK lchenais@gmail.com
  3. 3. Pourquoi cette présentation ? Suite de mon article publié en février concernant différents headers à implémenter.
 => 4 Responsive Navigation Principles
  4. 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. 5. Le PROGRAMME Mieux collaborer c’est quoi ? Présentation d’une architecture modulaire
  6. 6. Mieux collaborer c’est quoi ? I
  7. 7. DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration
  8. 8. DÉROULEMent lambda d’un projet 1 Cahier des charges 2 Wireframes 3 Maquettes 4 Intégration Designers
  9. 9. Se partager le travail Credits : Tom Maslen, Testing & Debugging Responsive Web Design from Smashing Book 5
  10. 10. NOPE
  11. 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. 12. Toutes les ressources du projet en un seul endroit https://github.com/sparkbox/standard/blob/master/project_management/base-hub.md
  13. 13. LE STYLEGUIDE
  14. 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. 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. 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. 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. 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. 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. 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. 21. Plusieurs avantages Meilleure communication et vocabulaire commun Meilleur workflow Cohérence Design/UX/UI
  22. 22. Salesforce Lightning Design System www.lightningdesignsystem.com/
  23. 23. Front-End Questionnaire github.com/bradfrost/frontend-guidelines-questionnaire/
  24. 24. Website Style Guide Ressources http://styleguides.io/
  25. 25. Quelques liens CSS Guidelines by @csswizardry SMACSS Architecture by @snookca Airbnb JavaScript Style Guide by Airbnb
  26. 26. une architecture de projet modulaire II
  27. 27. http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
  28. 28. http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
  29. 29. 74 % des internautes quitteront un site mobile s’il met plus de 5s à charger https://kinsta.com/learn/page-speed/
  30. 30. Performance IS Design
  31. 31. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
  32. 32. Construire le DOM en fonction de la performance
  33. 33. 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
  34. 34. THE SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
  35. 35. THE bad SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
  36. 36. THE good SPECIFICITY GRAPH http://csswizardry.com/2014/10/the-specificity-graph/
  37. 37. CSS Stats cssstats.com
  38. 38. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  39. 39. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  40. 40. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  41. 41. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  42. 42. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  43. 43. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  44. 44. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  45. 45. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  46. 46. http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  47. 47. L’architecture SMACSS
  48. 48. SMACSS - BASE
  49. 49. SMACSS - Components
  50. 50. SMACSS - fonts
  51. 51. SMACSS - layout
  52. 52. SMACSS - pages
  53. 53. SMACSS - tools
  54. 54. Sassdoc http://sassdoc.com/
  55. 55. Automatiser la crÉation de documentation
  56. 56. Media queries Mixin https://github.com/sass-mq/sass-mq
  57. 57. À connaître Flexbox Module Responsive Typography SVG Responsive Design Patterns & Components ARIA (Accessible Rich Internet Application)
  58. 58. build process
  59. 59. Git Sketch Plugin https://github.com/mathieudutour/git-sketch-plugin
  60. 60. Designers utilisant Git très appréciés Gestion des assets automatisée/simplifiée
  61. 61. « 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
  62. 62. Créons des interfaces accessibles http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it
  63. 63. 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)
  64. 64. MERCI @chuckn0risk

×