Frontend architecture on big and small sites

F R O N T E N D A R C H I T E C T U R E
O N B I G A N D S M A L L S S I T E S
@ T O N I P I N E L
# W E B C AT B C N 1 1 M A R C H , 2 0 1 5

@ t o n i p i n e l
D E S I G N E R
U X E X P E R T
F R O N T E N D
E N G I N E E R
C S S L O V E R
J AVA S C R I P T
S P E C I A L I S T
S C R U M
& A G I L EF I L M O G R A P H E R
M U S I C I A N

K L A AT U B A R A D A N … .
I T ’ S J U S T A W O R D … A N D N O B O D Y I S WA T C H I N G !
EJEM
EJEM…I TOLD

A R M Y O F D A R K N E S S
B U T H E A WA K E N E D T H E …

“ I t ’s j u s t f o r a
f e w u s e r s ”
@ E V E RY B O D Y D I X I T:
“ I t ’s j u s t a
s m a l l s i t e ”
“ S o … f u c k t h e
o n e b e h i n d m e . ”
“ I t ’s n o t g o i n g t o b e
n e c e s s a r y t o c h e c k
t h i s c o d e a n y m o re ”

T E A M , T E A M ,
T E A M
Y O U A R E N O T A L O N E …

S E L F U C K
I F Y O U A R E A L O N E … TA K E C A R E O F T H E

A R C H I T E C T U R E
S TA N D A R D S &

A R E T H E S A M E
S M A L L & B I G S I T E S

W E B A P P
W E B T H E F U C K A R E Y O U D O I N G ?
W E B S I T E
I N T E N S E U S E O F
J AVA S C R I P T / A J A X
B A S E D O N E V E N T S
N O N R E S P O N S I V E :
A D A P TAT I V E
L O W O R M I D D L E U S E
J AVA S C R I P T / A J A X
B A S E D O N U R L
R E S P O N S I V E *
* 2 W E B S I T E S = E P I C FA I L

G E T O U R H A N D S D I R T Y
I T ’ S T I M E T O …

R U L E S… O N LY I F M A K E S S E N S E T O Y O U ; )
Y O U S H O U L D F O L L O W M Y …

P R I VAT E
T RY A LWA Y S T O D O I T
J S
D O N ’ T P U T Y O U R G A R B A G E
O N T H E G L O B A L S C O P E
S C S S

. m y O b j e c t {
$ c o l o r : r e d ! g l o b a l ;
}
. o t h e r O b j e c t {
$ c o l o r : b l u e ! g l o b a l ;
}
$ c o l o r : r e d ! g l o b a l ;
. m y O b j e c t {
$ c o l o r : r e d ;
}
. o t h e r O b j e c t {
$ c o l o r : b l u e ;
}
S C S S

m y F u n c t i o n ( ) {
k e y = 0 ;
}
m y F u n c t i o n ( ) {
v a r k e y = 0 ;
}
J S

AT O M I C
S C A L A B L E O B J E C T O R I E N T E D C S S :
S C S S
D E S I G N

http://bradfrost.com/blog/post/atomic-web-design/
We’re not designing pages,
we’re designing systems of components

ATOM MOLECULE
ORGANISM

What is what?
Helpers
%placeholders
@mixins
functions()
Objects Pages

S C S S
M O D I F I E R S
U S E ! I M P O R TA N T
I N S T E A D O F O B J E C T VA R I A T I O N S
A K A “ A T O M I C C S S ”

< d i v c l a s s = “ o b j e c t o b j e c t - b i g ” >
 I ’ m a b i g o b j e c t 
< / d i v >
S C S S
. o b j e c t {
b a c k g r o u n d : r e d ;
. . .
}
. o b j e c t - b i g {
f o n t - s i z e : 3 r e m ;
}
< d i v c l a s s = “ o b j e c t f z - x l ” >
 I ’ m a b i g o b j e c t 
< / d i v >
. o b j e c t {
b a c k g r o u n d : r e d ;
. . .
}
. f z - x l {
f o n t - s i z e : 3 r e m ! i m p o r t a n t ;
}
“ E M M E T A B B R E V I A T I O N S
A R E T H E K E Y F O R T H E N A M E S ”
h t t p : / / d o c s . e m m e t . i o / c s s - a b b re v i a t i o n s /

T H R E E …
N O M O R E T H A N
O R Y O U W I L L E N D C R A Z Y
J S S C S S

< d i v c l a s s = “ m a - l m b - n p a - l f z - x l f w - b ” >
 M y b o x 
< / d i v >
< d i v c l a s s = “ b o x m b - n f w - b ” >
 M y b o x 
< / d i v >
H T M L
C S S

S C S S
S I N G L E
R E S P O N S A B I L I T Y PA T T E R N
A LWA Y S U S E T H E

< a h r e f = " p r o d u c t " c l a s s = " i s l a n d p r o m o " > B u y n o w ! < / a >
. i s l a n d {
d i s p l a y : b l o c k ;
p a d d i n g : 2 0 p x ;
m a r g i n - b o t t o m : 2 0 p x ;
}
. p r o m o {
b a c k g r o u n d - c o l o r : # 0 9 f ;
c o l o r : # f f f ;
t e x t - s h a d o w : 0 0 1 p x r g b a ( 0 , 0 , 0 , 0 . 2 5 ) ;
b o r d e r - r a d i u s : 4 p x ;
}
< a h r e f = " / p r o d u c t " c l a s s = " p r o m o " > B u y n o w ! < / a >
. p r o m o {
d i s p l a y : b l o c k ;
p a d d i n g : 2 0 p x ;
m a r g i n - b o t t o m : 2 0 p x ;
b a c k g r o u n d - c o l o r : # 0 9 f ;
c o l o r : # f f f ;
b o r d e r - r a d i u s : 4 p x ;
}

M O D U L E S
D O N ’ T D O S PA G U E T T I J S , W O R K W I T H
J S

d e f i n e ( [ ' j q u e r y ' ] , f u n c t i o n ( $ ) {
r e t u r n f u n c t i o n ( ) { } ;
} ) ;

D O M
J S S C S S
I S T H E B O S S

D O M B O T
S O … Y O U W I L L N E E D A
J S S C S S

< d i v d a t a - o b j e c t = “ m y O b j e c t ” >
< h 1 > M y t i t l e < / h 1 >
 M y p a r a g r a p h 
< / d i v >
J S
d e f i n e ( ‘ m y O b j e c t ’ … f u n c t i o n ( ) {
r e t u r n {
o n S t a r t : f u n c t i o n ( ) {
. . .
}
} ;
} ) ;
H T M L

O W N S T U F F
E A C H M O D U L E / O B J E C T S H O U L D
TA K E C A R E O N LY O F H I S
J S S C S S

M y O b j e c t 
< / d i v >
< d i v i d = “ a n o t h e r D i v ” >
 O t h e r O b j e c t 
< / d i v >
r e t u r n {
$ ( ‘ # a n o t h e r D i v ’ ) . h t m l ( ) ;
}
} ;
} ) ;
< d i v i d = “ o n e D i v ” >
 M y O b j e c t 
< / d i v >
< d i v i d = “ a n o t h e r D i v ” >
 O t h e r O b j e c t 
< / d i v >
< / d i v >
r e t u r n {
$ ( ‘ # a n o t h e r D i v ’ ) . h t m l ( ) ;
}
} ;
} ) ;
J SH T M L

M E D I AT O R
B E C A U S E S O M E T I M E S , M O D U L E S
N E E D T O C O M M U N I C A T E .
T H E
J S

v a r m e d i a t o r = {
s u b s c r i b e : f u n c t i o n ( t o p i c s , h a n d l e r ) { } ,
p u b l i s h : f u n c t i o n ( t o p i c , d a t a ) { } ,
u n s u b s c r i b e : f u n c t i o n ( t o p i c s ) { }
} ;
J S
m e d i a t o r . s u b s c r i b e ( ‘ h e l l o : t h e r e ’ , f u n c t i o n ( ) { } ) ;
m e d i a t o r . u n s u b s c r i b e ( ‘ h e l l o : t h e r e ’ ) ;

J Q U E RY
I S T H E E V I L ?
O N LY I F Y O U A B U S E
J S
h t t p : / / y o u m i g h t n o t n e e d j q u e r y. c o m /

E V E RY B O D Y S H O U L D D O H I S J O B
A N I M AT I O N S
E F F E C T S
S E L E C T O R S
AT T R I B U T E S
S I M P L E D O M M A N I P U L AT I O N
C S S
M A N I P U L AT I O N S I M P L E
C S S
A J A X
E V E N T S
A D VA N C E D M A N I P U L AT I O N
C R O S S B R O W S E R I S S U E S
C O M P L I C AT E D S E L E C T O R S
J Q U E RY
J S

D ATA - T E S T
I N T E G R AT I O N
T E S T D ATA - *
I D
J SC L A S S
C S S

F R A M E W O R K
A G N O S T I C
T RY T O B E
B U T N O T A N
A G N O S T I C PA R A N O I D
J S S C S S

C A L L H I M O N C E , I T ’ S O K …
B U T I F Y O U R E P E AT 3 T I M E S
B E E T L E J U I C E W I L L A P P E A R !

I T ’ S T I M E T O B E A G N O S T I C

J S
$ ( ‘ # l i n k ’ ) . m o d a l ( ) ;
m y F r a m e w o r k . m o d a l ( ‘ # l i n k ’ ) ;
m y F r a m e w o r k . m o d a l = f u n c t i o n ( t a r g e t )
{
$ ( t a r g e t ) . m o d a l ( ) ;
}

T H E F R O N T E N D F R A M E W O R K F O R T H E R E A L L I F E
O
PEN
SO
U
RC
E
w w w. f ro n t e n d c o re . c o m

Q U E S T I O N S
I T ’ S T I M E T O A N S W E R Y O U R
J S S C S S

T. H A N K S
@ T O N I P I N E L
w w w. f ro n t e n d c o re . c o m

Frontend architecture on big and small sites

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Frontend architecture on big and small sites

Similar to Frontend architecture on big and small sites (20)

Recently uploaded

Recently uploaded (20)

Frontend architecture on big and small sites