Mad Science with the Angular Compiler

One of the most unique features of Angular is the way it performs change detection. The template of each individual component in the app gets transpiled to efficient JavaScript which makes the dirty checking algorithm “obviously fast”.

The fast change detection is not the only benefit we get from the template compiler! In this talk we’ll mix some mad science ideas with the Angular compiler and see where we can go!

Transcript

1. twitter.com/mgechev github.com/mgechev blog.mgechev.com Mad science with the Angular Compiler twitter.com/mgechev github.com/mgechev blog.mgechev.com
2. twitter.com/mgechev twitter.com/mgechev twitter.com/mgechev github.com/mgechev
3. twitter.com/mgechev twitter.com/mgechev EBGES050 50% off ebook PBGSA15 15% off book
4. twitter.com/mgechev twitter.com/mgechev The compiler transforms the source code of an Angular application for achieving higher efficiency.
5. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'header-cmp', template: ` <header> {{ title }} </header> ` }) class HeaderComponent { ... }
6. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'header-cmp', template: ` <header> {{ title }} </header> ` }) class HeaderComponent { ... } class _View_HeaderComponent extends import1.AppView<import0.HeaderComponent> { constructor(...) { ... } createInternal(...):import3.AppElement { ... } injectorGetInternal(...):any { ... } }
7. twitter.com/mgechev Angular Compiler • Efficient views • Efficient providers instantiation Generates…
8. Transformation
9. twitter.com/mgechev Is that all we can do?
10. twitter.com/mgechev Of Course Not… • Analyze the source code • Visualize the source code • Much more…
11. twitter.com/mgechev How a compiler works?
12. twitter.com/mgechev Compiler COMPILER Input Output
13. twitter.com/mgechev Compiler COMPILER
 
 
 
 FRONT-END BACK-END Input Output
14. twitter.com/mgechev Compiler Input Output FRONT-END
15. twitter.com/mgechev FRONT-END
 
 
 
 Compiler LEXICAL ANALYSIS SYNTAX ANALYSIS … Input Output …
16. twitter.com/mgechev Lexical Analysis tokenize('const product = a * b;')
17. twitter.com/mgechev Lexical Analysis tokenize('const product = a * b;')
18. twitter.com/mgechev Lexical Analysis tokenize('const product = a * b;') [ { lexeme: 'const', type: 'keyword' }, { lexeme: 'product', type: 'identifier' }, { lexeme: '=', type: 'operator' }, ... ]
19. twitter.com/mgechev Syntax Analysis parse(tokenize('...'))
20. twitter.com/mgechev Syntax Analysis parse(tokenize('...')) CONST PRODUCT * A B
21. twitter.com/mgechev Syntax Analysis parse(tokenize('...')) AST CONST PRODUCT * A B
22. twitter.com/mgechev Static Analysis
23. twitter.com/mgechev twitter.com/mgechev Static program analysis is the analysis of computer software that is performed without actually executing programs. Wikipedia
24. twitter.com/mgechev github.com/mgechev codelyzer
25. twitter.com/mgechev tsc
26. twitter.com/mgechev tslint
27. twitter.com/mgechev
28. twitter.com/mgechev tsc.parse( tokenize(` @Component({ selector: '[tooltip]', template: '...' }) class TooltipComponent { ... } `) );
29. twitter.com/mgechev ast = tsc.parse( tsc.tokenize(` @Component({ selector: '[tooltip]', template: '...' }) class TooltipComponent { ... } `) );
30. twitter.com/mgechev ast = tsc.parse( tsc.tokenize(` @Component({ selector: '[tooltip]', template: '...' }) class TooltipComponent { ... } `) );
31. twitter.com/mgechev tokenize(` @Component({ selector: '[tooltip]', template: '...' }) class TooltipComponent { ... } `) );
32. twitter.com/mgechev tokenize(` @Component({ selector: '[tooltip]', template: '...' }) class TooltipComponent { ... } `) ); CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
33. twitter.com/mgechev Validate Selector visitClass(node) { node.decorators.forEach(visitDecorator); } visitDecorator(node) { if (node.name === 'Component') { visitComponentMetadata(readMetadata(node)) } } visitComponentMetadata(metadata) { if (!parseSelector(metadata.selector).element) { tslint.report('Components should have element selectors'); } }
34. twitter.com/mgechev Validate Selector visitClass(node) visitDecorator(node) visitComponentMetadata(metadata) CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
35. twitter.com/mgechev Validate Selector visitClass(node) visitDecorator(node) visitComponentMetadata(metadata) CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
36. twitter.com/mgechev Validate Selector visitClass(node) visitDecorator(node) visitComponentMetadata(metadata) CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
37. twitter.com/mgechev Validate Selector visitClass(node) visitDecorator(node) visitComponentMetadata(metadata) CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
38. twitter.com/mgechev Validate Selector visitClass(node) visitDecorator(node) visitComponentMetadata(metadata) CLASS DECORATOR OBJ LITERAL SELECTOR [TOOLTIP] TEMPLATE ‘…’ PROPERTY[0] PROPERTY[1]
39. twitter.com/mgechev Analysis of Styles and Templates
40. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'header-cmp', template: ` <h1 class="greeting">Hello <span>{{ name }}</span>!</div> `, styles: [` .greeting spam { color: red; } `] }) class HeaderComponent { ... }
41. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'header-cmp', template: ` <h1 class="greeting">Hello <span>{{ name }}</span>!</div> `, styles: [` .greeting spam { color: red; } `] }) class HeaderComponent { ... }
42. twitter.com/mgechev twitter.com/mgechev TEMPLATE AST DIV.GREETING SPAN COMPONENT STYLES AST CSS RULE SELECTOR .GREETING SPAM … <div class="greeting"> <span>...</span> </div> .greeting spam { color: red; }
44. twitter.com/mgechev Breaking Changes
45. twitter.com/mgechev Smooth Upgrade to v4 $ npm install @angular/ {common,compiler,compiler-cli, core,forms,http,platform-browser, platform-browser-dynamic, platform-server,router,animations} @^4.0.0 typescript@^2.2.2 --save --save-exact
46. twitter.com/mgechev Smooth Upgrade to v4 …with a few deprecations $ npm install @angular/ {common,compiler,compiler-cli, core,forms,http,platform-browser, platform-browser-dynamic, platform-server,router,animations} @^4.0.0 typescript@^2.2.2 --save --save-exact
47. twitter.com/mgechev twitter.com/mgechev <template> Renderer RendererType RendererFactory
48. twitter.com/mgechev twitter.com/mgechev <template> Renderer RendererType RendererFactory <ng-template> Renderer2 RendererType2 RendererFactory2
49. twitter.com/mgechev s/<template/<ng-template s/<\/template/<\/ng-template Is it that easy?
50. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'content-cmp', template: '<template...></template>' }) class ContentComponent { content = '<template> is an HTML5 element'; }
51. twitter.com/mgechev twitter.com/mgechev @Component({ selector: 'content-cmp', template: '<template...></template>' }) class ContentComponent { content = '<template> is an HTML5 element'; }
52. twitter.com/mgechev Context Aware Replacement TEMPLATE AST TEMPLATE COMPONENT Demonstration github.com/mgechev/ngmigrate
54. twitter.com/mgechev Code Visualization
55. Large Software Systems are Complex
56. twitter.com/mgechev Understanding Large System • A lot of code which is hard to digest • Mixing different levels of abstractions • Humans are good in “visual thinking”
57. twitter.com/mgechev compiler provides primitives for parsing an Angular application
58. twitter.com/mgechev github.com/mgechev/ ngast
59. twitter.com/mgechev ngast provides • Directives / components and their metadata • Providers and their relations • etc… A way to get all:
60. twitter.com/mgechev twitter.com/mgechev github.com/mgechev/ ngrev
66. twitter.com/mgechev lets go one dimension above
67. twitter.com/mgechev We’re putting our source code in our own reality, instead, lets move to its own reality!
68. twitter.com/mgechev Visualization github.com/mgechev/ngworld Demonstration
70. twitter.com/mgechev
71. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com