Front-end workflow

Transcript

1. Front-end workflow David Dias – Front-end Architect / @frontenddevfr Proximity BBDO Indian Ocean 10 février 2014
2. Il y a très très longtemps… mais pas si loin que ça
3. Le développement front n’était pas si réjouissant que ça…
4. • HTML statiques • Nombreuses classes CSS • Incohérences graphiques • Beaucoup de bug JS à corriger • Nombreux JavaScripts • Pas de tests : qualité, performance, accessibilité… • Tâches répétitives…
5. … que faire pour que cette situation change ?
6. Appeler le Superdeveloper !
7. HTML = JADE
9. Les possibilités offertes par Jade • Block / extends • Include • Mixins • Variables / json • Conditions, boolean • HTML parfaitement indenté
10. CSS = OOCSS, SMACSS et BEM
11. Réutilisable Maintenable « Scalable » Performant
12. OOCSS Object Oriented CSS
13. Séparer structure et skin Séparer container et content
14. #button { width: 200px; height: 50px; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; } #box { width: 350px; overflow: hidden; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; } #widget { width: 250px; min-height: 150px overflow: auto; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; }
15. .button { width: 200px; height: 50px; } .box { width: 350px; overflow: hidden; } .widget { width: 250px; min-height: 150px overflow: auto; } .skin { border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; }
16. Séparer structure et skin Séparer container et content
17. <div id=#main-content> <section> <h1>Title</h1> </section> </div>
18. #main-content section h1 { … }
19. <div id=#main-content> <article> <h2>Title</h2> </article> </div>
20. .entry-title { … }
21. <div id=#main-content> <div> <h2 class=entry-title>Title</h2> </div> </div>
22. SMACSS Scalable and Modular Architecture for CSS
23. Catégorisation Convention de nommage Séparer le CSS du HTML
24. - base - components - layout - mixins - theme settings
25. BEM
26. BEM = Block – Element - Modifier
27. <div class=widget> <div class=inner> <h2 class=entry-title>Title</h2> </div> </div> http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
28. <div class=widget> <div class=widget__inner> <h2 class=widget__entry-title>Title</h2> </div> </div> <div class=widget> <div class=widget__inner> <h2 class=widget__entry-title--extra>Title</h2> </div> </div> http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
29. CSS = SASS + COMPASS
30. - Mixins - Extends - Variables - Découpage - …
31. Frameworks
32. Ne réinventons pas la roue, faisons la tourner : Les frameworks
33. Twitter Boostrap
34. Foundation zurb
35. Gumby
36. • Ne plus penser page mais modules • Pensez le framework pour répondre à toutes les possibilités • Framework créé, plus besoin de re-créer mais maintenir • Facilité la création de nouvelles pages
37. Vous pensez que les frameworks sont une bonne idée ? Alors pourquoi ne faisons nous pas ça ?
38. Front-end UX Crea Styleguide Modularité Travail d’équipe UX Crea Front-end Aujourd’hui Incohérences graphiques Complexité structure Absence d’équipe Demain…
40. Fronts doivent aussi être des UX et les UX des développeurs
41. Fronts doivent aussi être des designers et les designers des développeurs
43. NODE
44. NODE JavaScript Hors du navigateur Avec des fonctions pour serveurs Utilise V8 Evénementiel Asynchrone
45. Ecosystème de nodeJS Est-ce mûr ? • nodejs autosuffisant en serveur web • les NPM • la communauté
47. GRUNT
48. Rafraîchis automatiquement la page du navigateur des appareils grunt-browser_sync
50. Mets à jour le FTP grunt-ftpush
52. Analyse des erreurs dans le CSS grunt-csslint
54. Indente parfaitement tous les fichiers JS grunt-jsbeautifier
55. Analyse des erreurs dans le JS grunt-jshint
57. Analyse des erreurs dans le HTML grunt-htmlhint
58. Crée un serveur grunt-server
59. Optimise le poids des images grunt-imagemin
61. MODE DEVELOPEMENT
62. Sync Compass Express Open Browser_sync Notify Watch
63. APERÇU MODE WATCH
64. Fichier modifié Update dossiers Réinjecte dans la page JS modifié Beautifier JSlint SCSS modifié Compass Legacssy
65. MODE BUILD
66. Modernizr Sync Compass image_min jade clean htmlhint ftpush
67. MODE CSS, IMG, INSTALL, TEST…
68. Pas mal !... Mais c’est pas tout
69. BOWER
71. GRUNT + BOWER =
72. C’est pas fini…
74. - app - data - node_modules (pas sur svn) - config - tasks - public - test
75. - app controllers fonts models sass scripts views
76. - public fonts html images scripts styles
77. Base de données noSQL
79. Possibilités • Tester + avant intégration back • Validation des formulaires • Tests ajax (web service) • Se loguer sur le site • Multilangue (+ tests ltr et rtl)
80. Optimisations performance
81. La performance n’est pas seulement un problème backend !
82. • Concaténation • Minification • Nombre de requêtes HTTP • Poids des images, sprites, lazy loading • Asynchrone • Icône sous forme de webfont • Local storage (moins de cookies) • Pas de redirection (problèmes avec les « tags » statistiques) • …
83. Ce que l’on doit faire prochainement…
84. • Documentation front précise et détaillé (tous les projets) • Développer la base de donnée • Mettre en place RequireJS • Système de templating JS (Backbone…)
85. I have a dream… j’espère que vous le partagerez aussi
86. Construire un « frontdesk » (le terminer)
87. - Tasks manager - Chat (websocket) - Checklist fichiers debug - Error list (CSSlint & JSHint) - Génération template - Barre d’outils - ...
88. Développer et automatiser tous les tests
89. Construire notre propre framework adaptable et « autonome »
90. => Créer des modules automatiquement
92. Développer des portails qui deviennent des références !
94. Rendre tout le monde plus heureux !
95. • Moins de bugs à corriger • Moins de stress et de rushs • Documentation maintenable et évolutive • Plus de temps pour vraiment développer (jeux, nouveaux modules…) • Lancer des plateformes en 3x moins de temps • Gagner plus d’argent ! (pour Prox)  • …
96. Mèsi ! Obrigado ! Thank you ! Merci !