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

Transcript

1. TAKING OVER THE WEB WITH ANGULAR 2
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
23. TYPES OF COMPONENTS
30. ONE-WAY DATA FLOW
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
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!