Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taking over the web with Angular 2

Taking over the web with Angular 2

*Note* - Some slides were cropped and code snippets not shown as the code example slide are interactive and sadly I can only show one piece of code per slide rather than each line I was highlighting :)

Todd Motto

May 21, 2016
Tweet

More Decks by Todd Motto

Other Decks in Programming

Transcript

  1. TALK OVERVIEW Component architecture Types of Components One-way dataflow Angular

    2 implementation Web Component integration Bootstrapping, Components, Routing Server-side and Web Worker rendering
  2. WHAT IS ANGULAR 2? Successor to Angular 1.x Cutting edge

    and future focused Sits on top of the web platform Component-based architecture Web, mobile web Native mobile (NativeScript) and desktop
  3. ANGULAR 2 ANATOMY Angular core, modules (routing/http/etc) Components, one-way dataflow

    RxJS, TypeScript, CLI Template compiler Dependency Injection, Zones
  4. 3 5 . < a p p > 3 6

    . L o a d i n g . . . 3 7 . < / a p p > 3 8 . < s c r i p t s r c = " b u n d l e . j s " > < / s c r i p t > 2 2 . p a c k a g e s : { 2 3 . a p p : { 2 4 . m a i n : ' . / m a i n . t s ' , 2 5 . d e f a u l t E x t e n s i o n : ' t s ' 2 6 . } 2 7 . } 2 8 . } ) ; 2 9 . S y s t e m 3 0 . . i m p o r t ( ' a p p ' ) 3 1 . . c a t c h ( c o n s o l e . e r r o r . b i n d ( c o n s o l e ) ) ; 3 2 . < / s c r i p t > 3 3 . < / h e a d > 3 4 . < b o d y > 3 9 . < / b o d y > 4 0 . < / h t m l >
  5. 5 . b o o t s t r a

    p ( A p p C o m p o n e n t ) ; 1 . / / m a i n . t s 2 . i m p o r t { b o o t s t r a p } f r o m ' @ a n g u l a r / p l a t f o r m - b r o w s e r - d y n a m i c ' ; 3 . i m p o r t { A p p C o m p o n e n t } f r o m ' . / a p p . c o m p o n e n t ' ; 4 .
  6. 1 4 . t h i s . m e

    s s a g e = ' H e l l o w o r l d ' ; 1 . / / a p p . c o m p o n e n t . t s 2 . i m p o r t { C o m p o n e n t } f r o m ' @ a n g u l a r / c o r e ' ; 3 . 4 . @ C o m p o n e n t ( { 5 . s e l e c t o r : ' a p p ' , 6 . t e m p l a t e : ` 7 . < d i v c l a s s = " a p p " > 8 . { { m e s s a g e } } 9 . < / d i v > 1 0 . ` 1 1 . } ) 1 2 . e x p o r t c l a s s A p p C o m p o n e n t { 1 3 . c o n s t r u c t o r ( ) { 1 5 . } 1 6 . n g O n I n i t ( ) { 1 7 . c o n s o l e . l o g ( ' C o m p o n e n t i n i t i a l i s e d ' ) ; 1 8 . } 1 9 . }
  7. 1 0 . < d i v c l a

    s s = " a p p " > 1 1 . < m a i n > 1 2 . < c h a t > < / c h a t > 1 3 . < / m a i n > 1 4 . < / d i v > 1 . / / a p p . c o m p o n e n t . t s 2 . i m p o r t { C o m p o n e n t } f r o m ' @ a n g u l a r / c o r e ' ; 3 . i m p o r t { 4 . C h a t C o m p o n e n t 5 . } f r o m ' . / c o m p o n e n t s / c h a t . c o m p o n e n t ' ; 6 . 7 . @ C o m p o n e n t ( { 8 . s e l e c t o r : ' a p p ' , 9 . t e m p l a t e : ` 1 5 . ` , 1 6 . d i r e c t i v e s : [ 1 7 . C h a t C o m p o n e n t 1 8 . ] 1 9 . } ) 2 0 . e x p o r t c l a s s A p p C o m p o n e n t { 2 1 . c o n s t r u c t o r ( ) { 2 2 . t h i s . m e s s a g e = ' H e l l o w o r l d ' ; 2 3 . } 2 4 . n g O n I n i t ( ) { 2 5 . c o n s o l e . l o g ( ' C o m p o n e n t i n i t i a l i s e d ' ) ; 2 6 . } 2 7 . }
  8. 1 8 . e n c a p s u

    l a t i o n : V i e w E n c a p s u l a t i o n . N a t i v e , 4 . V i e w E n c a p s u l a t i o n 5 . } f r o m ' @ a n g u l a r / c o r e ' ; 6 . i m p o r t { 7 . C h a t P r o f i l e C o m p o n e n t 8 . } f r o m ' . / c o m p o n e n t s / c h a t - p r o f i l e . c o m p o n e n t ' ; 9 . i m p o r t { 1 0 . C h a t S e a r c h C o m p o n e n t 1 1 . } f r o m ' . / c o m p o n e n t s / c h a t - s e a r c h . c o m p o n e n t ' ; 1 2 . i m p o r t { 1 3 . C h a t L i s t C o m p o n e n t 1 4 . } f r o m ' . / c o m p o n e n t s / c h a t - l i s t . c o m p o n e n t ' ; 1 5 . 1 6 . @ C o m p o n e n t ( { 1 7 . s e l e c t o r : ' c h a t ' , 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 2 6 . < c h a t - p r o f i l e > < / c h a t - p r o f i l e > 2 7 . < c h a t - s e a r c h > < / c h a t - s e a r c h > 2 8 . < c h a t - l i s t > < / c h a t - l i s t > 2 9 . < / d i v > 3 0 . ` , 3 1 . d i r e c t i v e s : [ 3 2 . C h a t P r o f i l e C o m p o n e n t , 3 3 . C h a t S e a r c h C o m p o n e n t , 3 4 . C h a t L i s t C o m p o n e n t
  9. 3 2 . < c h a t - l

    i s t 3 3 . [ f r i e n d s ] = " c h a t F r i e n d s " > 3 4 . < / c h a t - l i s t > 3 5 . < / d i v > 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 2 6 . < c h a t - p r o f i l e 2 7 . [ u s e r ] = " c h a t U s e r " > 2 8 . < / c h a t - p r o f i l e > 2 9 . < c h a t - s e a r c h 3 0 . [ t e r m ] = " c h a t T e r m " > 3 1 . < / c h a t - s e a r c h > 3 6 . ` , 3 7 . d i r e c t i v e s : [ 3 8 . C h a t P r o f i l e C o m p o n e n t , 3 9 . C h a t S e a r c h C o m p o n e n t , 4 0 . C h a t L i s t C o m p o n e n t 4 1 . ] 4 2 . } ) 4 3 . e x p o r t c l a s s C h a t C o m p o n e n t { 4 4 . c o n s t r u c t o r ( ) { 4 5 . t h i s . c h a t U s e r = { 4 6 . n a m e : ' T o d d M o t t o ' , 4 7 . o n l i n e : t r u e 4 8 . } ; 4 9 . t h i s . c h a t T e r m = ' ' ;
  10. 2 6 . < c h a t - p

    r o f i l e 2 7 . [ u s e r ] = " c h a t U s e r " 2 8 . ( s t a t u s C h a n g e ) = " o n S t a t u s C h a n g e ( $ e v e n t ) " > 2 9 . < / c h a t - p r o f i l e > 1 3 . C h a t L i s t C o m p o n e n t 1 4 . } f r o m ' . / c o m p o n e n t s / c h a t - l i s t . c o m p o n e n t ' ; 1 5 . 1 6 . @ C o m p o n e n t ( { 1 7 . s e l e c t o r : ' c h a t ' , 1 8 . e n c a p s u l a t i o n : V i e w E n c a p s u l a t i o n . N a t i v e , 1 9 . s t y l e s : [ ` 2 0 . . c h a t { 2 1 . b a c k g r o u n d : b l u e ; p a d d i n g : 1 5 p x ; 2 2 . } 2 3 . ` ] , 2 4 . t e m p l a t e : ` 2 5 . < d i v c l a s s = " c h a t " > 3 0 . < c h a t - s e a r c h 3 1 . [ t e r m ] = " c h a t T e r m " 3 2 . ( s e a r c h C h a n g e ) = " o n S e a r c h C h a n g e ( $ e v e n t ) " > 3 3 . < / c h a t - s e a r c h > 3 4 . < c h a t - l i s t 3 5 . [ f r i e n d s ] = " c h a t F r i e n d s " 3 6 . ( c o n t a c t S e l e c t ) = " o n C o n t a c t S e l e c t ( $ e v e n t ) " > 3 7 . < / c h a t - l i s t > 3 8 . < / d i v > 3 9 . ` , 4 0 . d i r e c t i v e s : [ 4 1 . C h a t P r o f i l e C o m p o n e n t , 4 2 . C h a t S e a r c h C o m p o n e n t , 4 3 . C h a t L i s t C o m p o n e n t
  11. [ ] are property bindings Think myObject['property'] in JavaScript (

    ) are event bindings Think myFunction() in JavaScript TEMPLATING SYNTAXES
  12. 1 0 . < i n p u t [

    ( n g M o d e l ) ] = " t o d o . t e x t " > 1 . / / v i c t o r s a v k i n . c o m / p o s t / 1 1 9 9 4 3 1 2 7 1 5 1 / a n g u l a r - 2 - t e m p l a t e - s y n t a x 2 . < d i v * n g F o r = " l e t i t e m i n i t e m s ; v a r i n d e x = i n d e x " > 3 . { { i n d e x } } 4 . < / d i v > 5 . 6 . < i n p u t 7 . [ n g M o d e l ] = " t o d o . t e x t " 8 . ( n g M o d e l C h a n g e ) = " t o d o . t e x t = $ e v e n t " > 9 .
  13. 1 3 . < t e m p l a

    t e 1 4 . n g F o r 1 5 . [ n g F o r O f ] = " t o d o s " 1 6 . l e t - t = " $ i m p l i c i t " 1 7 . l e t - i = " i n d e x " > 1 8 . < t o d o - c m p 1 9 . [ m o d e l ] = " t " 2 0 . [ i n d e x ] = " i " > 2 1 . < / t o d o - c m p > 2 2 . < / t e m p l a t e > 1 . < t o d o - c m p 2 . * n g F o r = " l e t t o f t o d o s ; l e t i = i n d e x " 3 . [ m o d e l ] = " t " 4 . [ i n d e x ] = " t " > 5 . < / t o d o - c m p > 6 . 7 . < t o d o - c m p 8 . t e m p l a t e = " n g F o r : l e t t o f t o d o s ; l e t i = i n d e x " 9 . [ m o d e l ] = " t " 1 0 . [ i n d e x ] = " i " > 1 1 . < / t o d o - c m p > 1 2 .
  14. WHY? Bind to any native element (Web Components included) No

    Angular 2 component wrappers Consistent syntax across all code Explicit syntax
  15. 3 3 . t o g g l e S

    t a t u s ( ) { 3 4 . l e t n e w S t a t u s = ! t h i s . u s e r . o n l i n e ; 3 5 . l e t u s e r = { 3 6 . n a m e : t h i s . u s e r . n a m e , 3 7 . o n l i n e : n e w S t a t u s 3 8 . } ; 3 9 . t h i s . u s e r S t a t u s = ( 4 0 . n e w S t a t u s ? ' O n l i n e ' : ' O f f l i n e ' 4 1 . ) ; 4 2 . t h i s . s t a t u s C h a n g e . e m i t ( { u s e r } ) ; 4 3 . } 4 4 . } 1 8 . W e l c o m e , { { u s e r . n a m e } } - { { u s e r S t a t u s } } 1 9 . < a h r e f = " " ( c l i c k ) = " t o g g l e S t a t u s ( ) " > 2 0 . C h a n g e s t a t u s 2 1 . < / a > 2 2 . < / d i v > 2 3 . ` 2 4 . } ) 2 5 . e x p o r t c l a s s C h a t P r o f i l e C o m p o n e n t { 2 6 . @ I n p u t ( ) u s e r ; 2 7 . @ O u t p u t ( ) s t a t u s C h a n g e = n e w E v e n t E m i t t e r ( ) ; 2 8 . c o n s t r u c t o r ( ) { 2 9 . t h i s . u s e r S t a t u s = ( 3 0 . t h i s . u s e r . o n l i n e ? ' O n l i n e ' : ' O f f l i n e ' 3 1 . ) ; 3 2 . }
  16. 2 7 . < m a i n > 2

    8 . < r o u t e r - o u t l e t > < / r o u t e r - o u t l e t > 2 9 . < / m a i n > 3 0 . < a s i d e > 3 1 . < c h a t > < / c h a t > 3 2 . < / a s i d e > 1 5 . i m p o r t { 1 6 . D a s h b o a r d C o m p o n e n t 1 7 . } f r o m ' . / c o m p o n e n t s / d a s h b o a r d . c o m p o n e n t ' ; 1 8 . 1 9 . @ C o m p o n e n t ( { 2 0 . s e l e c t o r : ' a p p ' , 2 1 . t e m p l a t e : ` 2 2 . < d i v c l a s s = " a p p " > 2 3 . < n a v > 2 4 . < a [ r o u t e r L i n k ] = " [ ' / i n b o x ' ] " > I n b o x < / a > 2 5 . < a [ r o u t e r L i n k ] = " [ ' / d a s h b o a r d ' ] " > D a s h b o a r d < / a > 2 6 . < / n a v > 3 3 . < / d i v > 3 4 . ` , 3 5 . d i r e c t i v e s : [ 3 6 . R O U T E R _ D I R E C T I V E S , 3 7 . C h a t C o m p o n e n t 3 8 . ] 3 9 . } ) 4 0 . @ R o u t e s ( [ 4 1 . { p a t h : ' / i n b o x ' , c o m p o n e n t : I n b o x C o m p o n e n t } , 4 2 . { p a t h : ' / i n b o x / : i d ' , c o m p o n e n t : I n b o x M e s s a g e C o m p o n e n t } , 4 3 . { p a t h : ' / d a s h b o a r d ' , c o m p o n e n t : D a s h b o a r d C o m p o n e n t } 4 4 . ] ) 4 5 . e x p o r t c l a s s A p p C o m p o n e n t { 4 6 . c o n s t r u c t o r ( ) { }
  17. DOM abstracted, use abstraction methods Render on the server, Universal

    Angular Initial page pre-rendered superfast Rehydrates the DOM once rendered SERVER-SIDE RENDERING
  18. Runs in a background thread Frees up the UI thread

    Angular bootstraps in a Web Worker Superfast UI and data-processing (faster repaints) Angular communicates between UI + Web Worker WEB WORKER RENDERING
  19. Cache code and application data Works offline with last data

    renders Background synchronisation SERVICE WORKERS
  20. Sits on top of web components (template/content) Uses dependency injection

    Still has Directives (Angular 1.x) Well-defined Component lifecycles Easily testable (unit/e2e) FEW MORE FEATURES
  21. Component communication Observables (RxJS) Nested views and routes Data architecture

    (Redux/ngrx) And the rest... for another talk ... AND SOME MORE