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 :)

B56bb22b3a4b83c6b534b4c114671380?s=128

Todd Motto

May 21, 2016
Tweet

Transcript

  1. TAKING OVER THE WEB WITH ANGULAR 2

  2. None
  3. 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
  4. 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
  5. THINK OF ANGULAR 2 AS A PLATFORM NOT A FRAMEWORK

  6. ANGULAR 2 ANATOMY Angular core, modules (routing/http/etc) Components, one-way dataflow

    RxJS, TypeScript, CLI Template compiler Dependency Injection, Zones
  7. COMPONENT ARCHITECTURE

  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. TYPES OF COMPONENTS

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. ONE-WAY DATA FLOW

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. Data down, events up Components are APIs Well-defined Inputs/Outputs "What

    role does your Component play?"
  41. ANGULAR 2

  42. Component architecture Bootstrapping Components + Shadow DOM One-way dataflow Property

    and event binding Routing
  43. BOOTSTRAPPING

  44. 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 >
  45. 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 .
  46. 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 . }
  47. 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 . }
  48. STATEFUL AND STATELESS COMPONENTS

  49. 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
  50. ONE-WAY DATA FLOW

  51. 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 = ' ' ;
  52. 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
  53. [ ] are property bindings Think myObject['property'] in JavaScript (

    ) are event bindings Think myFunction() in JavaScript TEMPLATING SYNTAXES
  54. None
  55. 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 .
  56. 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 .
  57. WHY? Bind to any native element (Web Components included) No

    Angular 2 component wrappers Consistent syntax across all code Explicit syntax
  58. 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 . }
  59. ROUTING + ROUTED COMPONENTS

  60. 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 ( ) { }
  61. SERVER-SIDE + WEB WORKER RENDERING

  62. DOM abstracted, use abstraction methods Render on the server, Universal

    Angular Initial page pre-rendered superfast Rehydrates the DOM once rendered SERVER-SIDE RENDERING
  63. 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
  64. SERVICE WORKERS

  65. Cache code and application data Works offline with last data

    renders Background synchronisation SERVICE WORKERS
  66. 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
  67. Component communication Observables (RxJS) Nested views and routes Data architecture

    (Redux/ngrx) And the rest... for another talk ... AND SOME MORE
  68. THANK YOU!

  69. None