J a v a s c r i p t f o r b a c k e n d d e v - PowerPoint PPT Presentation

J a v a s c r i p t f o r b a c k e n d d e v e l o p e r s T h é o d o r e ' n o d _ ' B i a d a l a

A s s u m p t i o n s

B a c k e n d o w l B a c k e n d o w l i s i n i s i n C o n t r o l C o n t r o l

F r o n t e n d F l a m i n g o F r o n t e n d F l a m i n g o r u n f r o m r u n f r o m C h a o s C h a o s

Y o u s o r t o f c a r e a b o u t f r o n t e n d Y o u s o r t o f w o r r y a b o u t p e r f o r m a n c e Y o u j u s t w a n t t h i n g t o w o r k

J a v a s c r i p t L a n d s c a p e J a v a s c r i p t L a n d s c a p e

S u g a r S y n t a x « C l a s s e s » H a r m o n y H a r m o n y M o d u l e s

d i o r d n A

BI B IN NG GO O

D M A S J n o m m o C U U U U g g g g l l l l i i i i f f f f y y y y J J J J S S S S Isomorphic

P i t f a l l s P i t f a l l s e p o c s l e b a i r a V e l l h k a c l l b C a 'use strict' ; T y p e s » s y r a a r v e t i i a c s o s A «

B e h a v i o r s B e h a v i o r s Drupal.behaviors.initializeFlamingo = { attach : function ( context , settings) { }, detach : function (context, settings, trigger) {} } ;

context (page load) context (after ajax call)

O n c e O n c e // In the attach function. var $burgers = $(context).find('.burger') ; // Salt to my burger(s). $burgers.each(saltThisBurger) ; // Don't add salt at every ajax request ! $burgers. once('salt') .each(saltThisBurger) ;

once

once

P e r f o r m a n c e w o l v e s P e r f o r m a n c e w o l v e s

J a v a s c r i p t p e r f o r m a n c e , D o n ' t w o r r y

D O M P e r f o r m a n c e D O M P e r f o r m a n c e

R e p a i n t R e p a i n t & & R e f l o w R e f l o w

W o l f - r e s i s t a n t T o o l s W o l f - r e s i s t a n t T o o l s

Q u e s t i o n s ? T h é o d o r e B I A D A L A @ n o d _ t h e o d o r e @ b i a d a l a . n e t

T h e p r o b l e m w i t h A n g u l a r T h e p r o b l e m w i t h A n g u l a r — p p k — p p k