Save 37% off PRO during our Black Friday Sale! »

Optimiser son workflow frontend

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

88447dbb966c62206c23f5ffd402af3b?s=128

Louis Chenais

May 18, 2016
Tweet

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

  33. None
  34. None
  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

  50. None
  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

  59. None
  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