Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

Minko Gechev

April 05, 2017
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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 [email protected]^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 [email protected]^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