front-end architecture on multibrand
TRANSCRIPT
The Front-End architecture on Multibrand
David Dias - Front-End architect April 2016 / Proximity BBDO Indian Ocean
front-end Architecture is important...
... and it's not just about HTML and CSS.
We faced daily a lot of challenges
AccessibilitySEO
QualityPerformance
Maintainability*Browser compatibility
»Martin Golding
« Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. »
But in 2013, we faced a new challenge(at that time, lot of new tools come out into the front-end world)
Build few projects with same code base?
We decide to use the best of the front-end technologies
»
»
First, we needed to automate tasks
To work better, faster and maintain the code...
201520132016
+
- 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
- ...
Extend the possibilities of simple HTML files
PUG
PUG (jade)
HTML
Dynamise our CSS files
CSS culture
• Strong nomenclature: c- (component), l- (layout), u- (utility)...
• CSS guidelines rules
• Based on OOCSS, SMACSS and BEM
Modularize all the JS files
201520142016
Bring NODE.js advantages to the browser
(Modularity, NPM import packages...)
A day with a FRONT-END
specifications
wireframes
technical documentation
creatives (+ styleguide)
creative analysis and feedbacks
creation component / page
styling and dynamise
regression testing
How we see the futur? (next weeks)
new RULES
ECMAScript 6 A bright new future is coming...
more MODULARITY
HTML (Pug) +
CSS (PostCSS) +
JS (React.js?)
= ONE component / ONE folder
page.psdcomponent 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
component A + component B.1 + component C
component A1 + component B + component C3
Article page
styleguide
Static page
more AUTOMATION
Replace manual FTP update with
continuous integration
more TESTING / QUALITY
JavaScript Unit Testing
Demos
Questions?
Thank you Obrigado
Merci