Front-End architecture on Multibrand

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