Front-End Architecture on Multibrand

Slide 1

Slide 1 text

The Front-End architecture on Multibrand David Dias - Front-End architect April 2016 / Proximity BBDO Indian Ocean

Slide 2

Slide 2 text

front-end Architecture is important...

Slide 3

Slide 3 text

... and it's not just about HTML and CSS.

Slide 4

Slide 4 text

We faced daily a lot of challenges

Slide 5

Slide 5 text

Accessibility SEO Quality Performance Maintainability *Browser compatibility

Slide 6

Slide 6 text

Martin Golding « Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. »

Slide 7

Slide 7 text

But in 2013, we faced a new challenge (at that time, lot of new tools come out into the front-end world)

Slide 8

Slide 8 text

Build few projects with same code base?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

We decide to use the best of the front-end technologies

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

First, we needed to automate tasks To work better, faster and maintain the code...

Slide 14

Slide 14 text

2015 2013 2016 +

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

- 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 modiﬁcations - Dev js: concatenate and minify all JavaScript ﬁles - ...

Slide 17

Slide 17 text

Extend the possibilities of simple HTML ﬁles

Slide 18

Slide 18 text

PUG

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

PUG (jade) HTML

Slide 21

Slide 21 text

Dynamise our CSS ﬁles

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

CSS culture • Strong nomenclature: c- (component), l- (layout), u- (utility)... • CSS guidelines rules • Based on OOCSS, SMACSS and BEM

Slide 24

Slide 24 text

Modularize all the JS ﬁles

Slide 25

Slide 25 text

2015 2014 2016

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Bring NODE.js advantages to the browser (Modularity, NPM import packages...)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

A day with a FRONT-END

Slide 30

Slide 30 text

speciﬁcations wireframes technical documentation creatives (+ styleguide)

Slide 31

Slide 31 text

creative analysis and feedbacks creation component / page styling and dynamise regression testing

Slide 32

Slide 32 text

How we see the futur? (next weeks)

Slide 33

Slide 33 text

new RULES

Slide 34

Slide 34 text

ECMAScript 6 A bright new future is coming...

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

more MODULARITY

Slide 37

Slide 37 text

HTML (Pug) + CSS (PostCSS) + JS (React.js?) = ONE component / ONE folder

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

component A + component B.1 + component C component A1 + component B + component C3 Article page styleguide Static page