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
   

   View Slide

2. twitter.com/mgechev
   twitter.com/mgechev
   twitter.com/mgechev
   github.com/mgechev
   

   View Slide

3. twitter.com/mgechev
   twitter.com/mgechev
   EBGES050
   50% off ebook
   PBGSA15
   15% off book
   

   View Slide

4. twitter.com/mgechev
   twitter.com/mgechev
   The compiler transforms the source code
   of an Angular application for achieving
   higher efficiency.
   

   View Slide

5. twitter.com/mgechev
   twitter.com/mgechev
   @Component({
   selector: 'header-cmp',
   template: `
   
   {{ title }}
   
   `
   })
   class HeaderComponent { ... }
   

   View Slide

6. twitter.com/mgechev
   twitter.com/mgechev
   @Component({
   selector: 'header-cmp',
   template: `
   
   {{ title }}
   
   `
   })
   class HeaderComponent { ... }
   class _View_HeaderComponent extends
   import1.AppView {
   constructor(...) {
   ...
   }
   createInternal(...):import3.AppElement {
   ...
   }
   injectorGetInternal(...):any {
   ...
   }
   }
   

   View Slide

7. twitter.com/mgechev
   Angular Compiler
   • Efficient views
   • Efficient providers instantiation
   Generates…
   

   View Slide

8. Transformation
   

   View Slide

9. twitter.com/mgechev
   Is that all we can do?
   

   View Slide

10. twitter.com/mgechev
    Of Course Not…
    • Analyze the source code
    • Visualize the source code
    • Much more…
    

    View Slide

11. twitter.com/mgechev
    How a compiler works?
    

    View Slide

12. twitter.com/mgechev
    Compiler
    COMPILER
    Input Output
    

    View Slide

13. twitter.com/mgechev
    Compiler
    COMPILER

    

    

    

    FRONT-END BACK-END
    Input Output
    

    View Slide

14. twitter.com/mgechev
    Compiler
    Input Output
    FRONT-END
    

    View Slide

15. twitter.com/mgechev
    FRONT-END

    

    

    

    Compiler
    LEXICAL
    ANALYSIS
    SYNTAX
    ANALYSIS
    …
    Input Output
    …
    

    View Slide

16. twitter.com/mgechev
    Lexical Analysis
    tokenize('const product = a * b;')
    

    View Slide

17. twitter.com/mgechev
    Lexical Analysis
    tokenize('const product = a * b;')
    

    View Slide

18. twitter.com/mgechev
    Lexical Analysis
    tokenize('const product = a * b;')
    [
    { lexeme: 'const', type: 'keyword' },
    { lexeme: 'product', type: 'identifier' },
    { lexeme: '=', type: 'operator' },
    ...
    ]
    

    View Slide

19. twitter.com/mgechev
    Syntax Analysis
    parse(tokenize('...'))
    

    View Slide

20. twitter.com/mgechev
    Syntax Analysis
    parse(tokenize('...'))
    CONST
    PRODUCT *
    A B
    

    View Slide

21. twitter.com/mgechev
    Syntax Analysis
    parse(tokenize('...'))
    AST
    CONST
    PRODUCT *
    A B
    

    View Slide

22. twitter.com/mgechev
    Static Analysis
    

    View Slide

23. twitter.com/mgechev
    twitter.com/mgechev
    Static program analysis is the analysis of computer
    software that is performed without actually executing
    programs.
    Wikipedia
    

    View Slide

24. twitter.com/mgechev
    github.com/mgechev
    codelyzer
    

    View Slide

25. twitter.com/mgechev
    tsc
    

    View Slide

26. twitter.com/mgechev
    tslint
    

    View Slide

27. twitter.com/mgechev
    

    View Slide

28. twitter.com/mgechev
    tsc.parse(
    tokenize(`
    @Component({
    selector: '[tooltip]',
    template: '...'
    })
    class TooltipComponent { ... }
    `)
    );
    

    View Slide

29. twitter.com/mgechev
    ast = tsc.parse(
    tsc.tokenize(`
    @Component({
    selector: '[tooltip]',
    template: '...'
    })
    class TooltipComponent { ... }
    `)
    );
    

    View Slide

30. twitter.com/mgechev
    ast = tsc.parse(
    tsc.tokenize(`
    @Component({
    selector: '[tooltip]',
    template: '...'
    })
    class TooltipComponent { ... }
    `)
    );
    

    View Slide

31. twitter.com/mgechev
    tokenize(`
    @Component({
    selector: '[tooltip]',
    template: '...'
    })
    class TooltipComponent { ... }
    `)
    );
    

    View Slide

32. twitter.com/mgechev
    tokenize(`
    @Component({
    selector: '[tooltip]',
    template: '...'
    })
    class TooltipComponent { ... }
    `)
    ); CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

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');
    }
    }
    

    View Slide

34. twitter.com/mgechev
    Validate Selector
    visitClass(node)
    visitDecorator(node)
    visitComponentMetadata(metadata)
    CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

35. twitter.com/mgechev
    Validate Selector
    visitClass(node)
    visitDecorator(node)
    visitComponentMetadata(metadata)
    CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

36. twitter.com/mgechev
    Validate Selector
    visitClass(node)
    visitDecorator(node)
    visitComponentMetadata(metadata)
    CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

37. twitter.com/mgechev
    Validate Selector
    visitClass(node)
    visitDecorator(node)
    visitComponentMetadata(metadata)
    CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

38. twitter.com/mgechev
    Validate Selector
    visitClass(node)
    visitDecorator(node)
    visitComponentMetadata(metadata)
    CLASS
    DECORATOR
    OBJ LITERAL
    SELECTOR [TOOLTIP] TEMPLATE ‘…’
    PROPERTY[0] PROPERTY[1]
    

    View Slide

39. twitter.com/mgechev
    Analysis of
    Styles and Templates
    

    View Slide

40. twitter.com/mgechev
    twitter.com/mgechev
    @Component({
    selector: 'header-cmp',
    template: `
    Hello {{ name }}!
    `,
    styles: [`
    .greeting spam {
    color: red;
    }
    `]
    })
    class HeaderComponent { ... }
    

    View Slide

41. twitter.com/mgechev
    twitter.com/mgechev
    @Component({
    selector: 'header-cmp',
    template: `
    Hello {{ name }}!
    `,
    styles: [`
    .greeting spam {
    color: red;
    }
    `]
    })
    class HeaderComponent { ... }
    

    View Slide

42. twitter.com/mgechev
    twitter.com/mgechev
    TEMPLATE
    AST
    DIV.GREETING
    SPAN
    COMPONENT
    STYLES
    AST
    CSS RULE
    SELECTOR
    .GREETING SPAM
    …
    
    ...
    
    .greeting spam {
    color: red;
    }
    

    View Slide

43. View Slide

44. twitter.com/mgechev
    Breaking Changes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. twitter.com/mgechev
    twitter.com/mgechev
    
    Renderer
    RendererType
    RendererFactory
    

    View Slide

48. twitter.com/mgechev
    twitter.com/mgechev
    
    Renderer
    RendererType
    RendererFactory
    
    Renderer2
    RendererType2
    RendererFactory2
    

    View Slide

49. twitter.com/mgechev
    s/s/<\/template/<\/ng-template
    Is it that easy?
    

    View Slide

50. twitter.com/mgechev
    twitter.com/mgechev
    @Component({
    selector: 'content-cmp',
    template: ''
    })
    class ContentComponent {
    content = ' is an HTML5 element';
    }
    

    View Slide

51. twitter.com/mgechev
    twitter.com/mgechev
    @Component({
    selector: 'content-cmp',
    template: ''
    })
    class ContentComponent {
    content = ' is an HTML5 element';
    }
    

    View Slide

52. twitter.com/mgechev
    Context Aware Replacement
    TEMPLATE
    AST
    TEMPLATE
    COMPONENT
    Demonstration
    github.com/mgechev/ngmigrate
    

    View Slide

53. View Slide

54. twitter.com/mgechev
    Code Visualization
    

    View Slide

55. Large Software Systems are Complex
    

    View Slide

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”
    

    View Slide

57. twitter.com/mgechev
    compiler provides primitives
    for parsing an Angular application
    

    View Slide

58. twitter.com/mgechev
    github.com/mgechev/
    ngast
    

    View Slide

59. twitter.com/mgechev
    ngast provides
    • Directives / components and their metadata
    • Providers and their relations
    • etc…
    A way to get all:
    

    View Slide

60. twitter.com/mgechev
    twitter.com/mgechev
    github.com/mgechev/
    ngrev
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. twitter.com/mgechev
    lets go
    one dimension above
    

    View Slide

67. twitter.com/mgechev
    We’re putting our source code in our
    own reality, instead, lets move to its
    own reality!
    

    View Slide

68. twitter.com/mgechev
    Visualization
    github.com/mgechev/ngworld
    Demonstration
    
    

    View Slide

69. View Slide

70. twitter.com/mgechev
    

    View Slide

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

    View Slide