Mad Science with the Angular Compiler

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!

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

April 05, 2017
Tweet

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; }
  43. None
  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

  53. None
  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

  61. None
  62. None
  63. None
  64. None
  65. None
  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

  69. None
  70. twitter.com/mgechev

  71. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com