Back to front

L'évolution du frontend lors de ces dernières années a apporté un grande richesse mais aussi entrainé une complexité grandissante et il faut le dire, souvent ingérable dès que les projets gagnent en volume et en envergure.
Aperçu de quelques outils et pratiques sélectionnés avec la plus grande partialité pour rendre tout ça maintenable et se faciliter la vie. (sass, libsass, browsersync, B.E.M, susy)

Transcript

1. FRONT BACK TO @providenz
2. $ whoami @providenz
3. Préprocesseurs B.E.M Outils de build Browsersync Susy
4. Préprocesseurs
5. Préprocesseurs Less Sass Stylus
6. Préprocesseur Maintenabilité Séparation Variables
7. Préprocesseur • structure _base.scss _layout.scss _modules.scss _state.scss
8. Préprocesseurs
9. Sass Compass Libsass Préprocesseurs
10. Compass (2.7s) Libsass (340ms) Préprocesseurs
11. Autoprefixer Préprocesseurs https://github.com/postcss/autoprefixer
12. B.E.M
13. B.E.M Block Element Modifier
14. id classes B.E.M
15. .block__element--modifier B.E.M
16. Block Element + modifier Element Element Element B.E.M
17. B.E.M
18. Outils de build
19. Outils de build Grunt Gulp Broccoli Brunch …
20. Brunch Because feignasse power Outils de build
21. Brunch CONVENTION over CONFIGURATION CONFIG PAR DÉFAUT
22. Brunch · features SIMPLE RAPIDE
23. concaténation enrobage source maps minification surveillance notification scaffolding serveur Brunch · features
24. npm install -g brunch Brunch · installation
25. Brunch · config brunch-config.coffee brunch-config.js
26. Brunch · config
27. Brunch · scaffolding brunch new <skeleton-URL> [dir] brunch new gh:brunch/dead-simple
28. Brunch · plugins npm install --save-dev plugin et c’est tout* *très souvent
29. Brunch · structure app assets vendor public
30. Brunch brunch watch brunch watch --server brunch w -s brunch build [-- production] build dev
31. Browsersync
32. Browsersync · features live reload interaction sync multi navigateurs editeur agnostique
33. Browsersync · install npm install browser-sync
34. Browsersync
35. Susy
36. Susy metaframework sass layout
37. Susy sass (libsass) grilles/asymétriques
38. Susy · install bower install susy
39. Susy · setup
40. Susy · setup
42. columns: 12
44. Liens http://brunch.io/ https://en.bem.info/ http://susy.oddbird.net/ http://www.browsersync.io/ http://www.css-maintenables.fr/ http://projetresponsive.fr/
45. Merci <3 @providenz