Building the Modern Web with AngularJS

Presented at London Web, 16.01.2014 and FrontEndLondon 30.01.2014.

Transcript

1. BUILDING THE MODERN WEB WITH ANGULARJS @toddmotto | toddmotto.com
2. WHO AM I? Lead front-end at Appsbroker Created Conditionizr, HTML5Blank, FireShell Partnered with Intel/Rolling Stone in 2013
3. SESSION OVERVIEW Modern Web Key concepts (MVC, data-binding) AngularJS core features
4. WHAT/WHY ANGULAR? Client-side MVC + JS framework Server + Client AIO (one language!) Rapid application development Focus on data-driven apps (no DOM manipulation)
5. WHAT IS THE "MODERN WEB"? Client side templating Web Components/Shadow DOM HTML5 data-* attributes Single Page Apps More JavaScript
6. KEY CONCEPTS QUICK OVERVIEW OF MVC (+ DATA-BINDING!)
7. MODEL APPLICATION DATA (JSON)
8. VIEW RENDERED HTML/COMPONENTS/TEMPLATES
9. CONTROLLER COMMS WITH THE SERVER AND CLIENT DRIVES THE MODEL/VIEW CHANGES
10. TWO WAY DATA-BINDING KEEPING DATA IN SYNC, MODEL UPDATES THE VIEW, VICE VERSA
11. THREE D'S Design Declare Distribute
12. DESIGN (JSON - MODEL) [ { " f r o m " : " S t e v e J o b s " , " s u b j e c t " : " H o l d i n g y o u r i P h o n e c o r r e c t l y " , " s e n t " : " 2 0 1 4 - 0 1 - 1 2 T 0 8 : 0 5 : 5 9 Z " } , { " f r o m " : " B i l l G a t e s " , " s u b j e c t " : " O v e r c o m i n g B S O D " , " s e n t " : " 2 0 1 4 - 0 1 - 1 6 T 1 9 : 0 1 : 2 6 Z " } ]
13. DECLARE (DATA-BINDING - VIEW) < u l > < l i n g - r e p e a t = " e m a i l i n e m a i l s " > < p > F r o m : { { e m a i l . f r o m } } < / p > < p > S u b j e c t : { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
14. DISTRIBUTE (CONTROLLER) v a r m y A p p = a n g u l a r . m o d u l e ( ' m y A p p ' , [ ] ) ; m y A p p . c o n t r o l l e r ( ' M a i n C t r l ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { $ h t t p . g e t ( ' / e m a i l s ' ) . s u c c e s s ( f u n c t i o n ( d a t a ) { $ s c o p e . e m a i l s = d a t a ; / / A r r a y } ) ; } ] ) ;
15. CORE FEATURES THE WOW PARTS
16. HANDLEBAR BINDINGS EXPOSING THE MODEL / / J S $ s c o p e . u s e r n a m e = ' T o d d ' ; / / H T M L < p > W e l c o m e , { { u s e r n a m e } } < / p > / / O u t p u t < p > W e l c o m e , T o d d < / p >
17. CONTROLLER SIMPLICITY PUSHING TO THE $SCOPE v a r m y A p p = a n g u l a r . m o d u l e ( ' m y A p p ' , [ ] ) ; / / < d i v n g - c o n t r o l l e r = " U s e r s C t r l " > < / d i v > m y A p p . c o n t r o l l e r ( ' U s e r s C t r l ' , [ ' $ s c o p e ' , f u n c t i o n ( $ s c o p e ) { / / g e t t h e u s e r n a m e $ h t t p . g e t ( ' / u s e r s ' ) . s u c c e s s ( f u n c t i o n ( d a t a ) { $ s c o p e . u s e r n a m e = d a t a . u s e r n a m e ; } ) ; } ] ) ;
18. TWO WAY DATA-BINDING MODEL AND VIEW IN SYNC, NO RE-QUERYING AND INSTANT UPDATES < d i v c l a s s = " u s e r n a m e " > < p > C h a n g e y o u r u s e r n a m e : < / p > < i n p u t t y p e = " t e x t " n g - m o d e l = " u s e r n a m e " > < a n g - c l i c k = " u p d a t e U s e r n a m e ( ) ; " > S a v e u s e r n a m e a s { { u s e r n a m e } } ? < / a > < / d i v >
19. $SCOPE FUNCTIONS CALLBACK-LESS DATA MANIPULATION (NO DOM) / / a p p l i e d v i a n g - c l i c k = " d e l e t e E m a i l ( $ i n d e x , e m a i l ) " $ s c o p e . d e l e t e E m a i l = f u n c t i o n ( i n d e x , d a t a ) { $ h t t p . d e l e t e ( d a t a ) . s u c c e s s ( f u n c t i o n ( ) { $ s c o p e . e m a i l s . s p l i c e ( i n d e x , 1 ) ; } ) ; } ;
20. TEMPLATING SCALABLE/REUSABLE AND FAST COMPONENTS < ! - - t e m p l a t e s / e m a i l s . h t m l - - > < d i v c l a s s = " e m a i l s " n g - c o n t r o l l e r = " E m a i l s C t r l " > < p > I n b o x { { m y M o d e l . e m a i l s . l e n g t h } } < / p > < / d i v > < u l > < l i n g - r e p e a t = " e m a i l i n m y M o d e l . e m a i l s " n g - c l i c k = " v i e w E m a i l ( $ i n d e x , e m a i l ) " > < p > F r o m : { { e m a i l . f r o m } } < / p > < p > S u b j e c t : { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
21. DIRECTIVES REUSABLE CHUNKS OF CODE/LOGIC / / < e m a i l s - l i s t > < / e m a i l s - l i s t > E l e m e n t : ' E ' / / < d i v e m a i l s - l i s t > < / d i v > A t t r i b u t e : ' A ' m y A p p . d i r e c t i v e ( ' e m a i l s L i s t ' , f u n c t i o n ( ) { r e t u r n { r e s t r i c t : ' E A ' , r e p l a c e : t r u e , t r a n s c l u d e : t r u e , t e m p l a t e U r l : ' t e m p l a t e s / e m a i l s . h t m l ' , l i n k : f u n c t i o n ( s c o p e , e l e m e n t , a t t r s ) { / / D O M m a n i p u l a t i o n / e v e n t s h e r e ! } } ; } ) ;
22. EXPRESSIONS EVALUATE DATA AND MANIPULATE THE DOM < p > { { m y M o d e l . e m a i l s . l e n g t h > 0 & & ' E m a i l s ' | | ' N o e m a i l s ' } } < / p >
23. FILTERS INSTANT DOM FILTERING < ! - - m y A p p . f i l t e r ( ' i m p o r t a n t ' , [ l o g i c ] ) - - > < u l > < l i n g - r e p e a t = " e m a i l i n m y M o d e l . e m a i l s | f i l t e r : i m p o r t a n t " > < p > { { e m a i l . f r o m } } < / p > < p > { { e m a i l . s u b j e c t } } < / p > < / l i > < / u l >
24. DYNAMIC VIEWS/ROUTING AUTOMATIC XHR HANDLING/TEMPLATE POPULATION m y A p p . c o n f i g ( [ ' $ r o u t e P r o v i d e r ' , f u n c t i o n ( $ r o u t e P r o v i d e r ) { $ r o u t e P r o v i d e r . w h e n ( ' / e m a i l s ' , { t e m p l a t e U r l : ' v i e w s / e m a i l s . h t m l ' } ) . w h e n ( ' / e m a i l s / i t e m : i d ' , { t e m p l a t e U r l : ' v i e w s / e m a i l s - s i n g l e . h t m l ' } ) . o t h e r w i s e ( { r e d i r e c t T o : ' / ' } ) ; } ] ) ;
25. FACTORY ABSTRACTED LOGIC (DRY) m y A p p . f a c t o r y ( ' J S O N F a c t o r y ' , [ ' $ h t t p ' , f u n c t i o n ( $ h t t p ) { v a r J S O N F a c t o r y = { g e t U s e r s : f u n c t i o n ( c a l l b a c k ) { $ h t t p . g e t ( ' / u s e r s ' ) . s u c c e s s ( c a l l b a c k ) ; } , p o s t U s e r s : f u n c t i o n ( c a l l b a c k ) { $ h t t p . p o s t ( ' / u s e r s U p d a t e ' ) . s u c c e s s ( c a l l b a c k ) ; } } ; r e t u r n J S O N F a c t o r y ; } ] ) ; / / J S O N F a c t o r y . g e t U s e r s ( f u n c t i o n ( d a t a ) { / / $ s c o p e . u s e r s = d a t a ; / / } ) ;
26. VALIDATION MODEL SAYS NO < ! - - a u t o e v e n t . p r e v e n t D e f a u l t ( ) f o r X H R c a l l s - - > < f o r m n g - s u b m i t = " u p d a t e U s e r n a m e ( ) ; " > < i n p u t t y p e = " t e x t " n g - m o d e l = " u s e r n a m e " > < b u t t o n t y p e = " s u b m i t " n g - d i s a b l e d = " ! u s e r n a m e . l e n g t h " > U p d a t e U s e r n a m e < / b u t t o n > < / f o r m >
27. "THINKING ANGULAR" NG-THINKING Forget the DOM exists $('.no!') Think components and layers Keep code abstracted (files/code)
28. QUESTIONS?