Front-End Architecture on Multibrand

Transcript

1. The Front-End architecture on Multibrand David Dias - Front-End architect April 2016 / Proximity BBDO Indian Ocean
2. front-end Architecture is important...
3. ... and it's not just about HTML and CSS.
4. We faced daily a lot of challenges
5. Accessibility SEO Quality Performance Maintainability *Browser compatibility
6. Martin Golding « Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. »
7. But in 2013, we faced a new challenge (at that time, lot of new tools come out into the front-end world)
8. Build few projects with same code base?
10. We decide to use the best of the front-end technologies
13. First, we needed to automate tasks To work better, faster and maintain the code...
14. 2015 2013 2016 +
16. - Build fonts: convert icons in SVG to .ttf, .woff, .eot webfonts - Build images: optimize all layout's images (performance) - Dev reload: reload automatically the page after modifications - Dev js: concatenate and minify all JavaScript files - ...
17. Extend the possibilities of simple HTML files
18. PUG
20. PUG (jade) HTML
21. Dynamise our CSS files
23. CSS culture • Strong nomenclature: c- (component), l- (layout), u- (utility)... • CSS guidelines rules • Based on OOCSS, SMACSS and BEM
24. Modularize all the JS files
25. 2015 2014 2016
27. Bring NODE.js advantages to the browser (Modularity, NPM import packages...)
29. A day with a FRONT-END
30. specifications wireframes technical documentation creatives (+ styleguide)
31. creative analysis and feedbacks creation component / page styling and dynamise regression testing
32. How we see the futur? (next weeks)
33. new RULES
34. ECMAScript 6 A bright new future is coming...
36. more MODULARITY
37. HTML (Pug) + CSS (PostCSS) + JS (React.js?) = ONE component / ONE folder
40. page.psd component A.psd component B.psd component C.psd component A.pug component B.pug component C.pug + css + js + css + js + css + js styleguide Score - Sitecore
41. component A + component B.1 + component C component A1 + component B + component C3 Article page styleguide Static page
43. more AUTOMATION
44. Replace manual FTP update with continuous integration
46. more TESTING / QUALITY
47. JavaScript Unit Testing
49. Demos
50. Questions?
51. Thank you Obrigado Merci