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

Angular Unplugged

Angular Unplugged

Minko Gechev

July 13, 2017
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    Angular Unplugged
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com

    View Slide

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

    View Slide

  3. twitter.com/mgechev

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. twitter.com/mgechev
    ANGULAR?
    WHAT IS

    View Slide

  10. twitter.com/mgechev

    View Slide

  11. twitter.com/mgechev
    AngularJS?
    Where is

    View Slide

  12. twitter.com/mgechev

    View Slide

  13. twitter.com/mgechev
    Angular 2, 4, …, n
    What about…
    n ϵ ℕ>4

    View Slide

  14. twitter.com/mgechev
    Where is Angular 1?
    Where is Angular 3?
    Do I know Angular 4 if I know Angular 2?
    Three questions:

    View Slide

  15. twitter.com/mgechev
    Where is Angular 1?
    Where is Angular 3?
    Do I know Angular 4 if I know Angular 2?
    Three questions:

    View Slide

  16. twitter.com/mgechev
    Where is Angular 1?
    Where is Angular 3?
    Do I know Angular 4 if I know Angular 2?
    Three questions:

    View Slide

  17. twitter.com/mgechev
    Angular
    It’s just

    View Slide

  18. twitter.com/mgechev

    View Slide

  19. twitter.com/mgechev
    X.Y.Z.
    Major Minor Patch
    Semantic versioning

    View Slide

  20. twitter.com/mgechev
    Modules
    …that Angular comes with

    View Slide

  21. twitter.com/mgechev
    core
    (di, abstractions, etc.)

    View Slide

  22. twitter.com/mgechev
    core
    (di, abstractions, etc.)
    RENDERER

    View Slide

  23. twitter.com/mgechev
    core
    (di, abstractions, etc.)
    RENDERER
    COMPILER

    View Slide

  24. twitter.com/mgechev
    core
    (di, abstractions, etc.)
    RENDERER
    FORMS
    COMPILER

    View Slide

  25. twitter.com/mgechev
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  26. twitter.com/mgechev
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  27. twitter.com/mgechev
    I18N
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  28. twitter.com/mgechev
    ANIMATIONS
    I18N
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  29. twitter.com/mgechev
    ROUTER
    ANIMATIONS
    I18N
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  30. twitter.com/mgechev
    ROUTER
    ANIMATIONS
    I18N
    UNIVERSAL
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  31. twitter.com/mgechev
    ROUTER
    MATERIAL
    ANIMATIONS
    I18N
    UNIVERSAL
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  32. twitter.com/mgechev
    ROUTER
    MATERIAL
    ANIMATIONS
    I18N
    UNIVERSAL
    LANGUAGE
    SERVICE
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  33. twitter.com/mgechev
    ROUTER
    NGUPGRADE
    MATERIAL
    ANIMATIONS
    I18N
    UNIVERSAL
    LANGUAGE
    SERVICE
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER

    View Slide

  34. twitter.com/mgechev
    ROUTER
    NGUPGRADE
    MATERIAL
    ANIMATIONS
    I18N
    UNIVERSAL
    LANGUAGE
    SERVICE
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER
    PWA

    View Slide

  35. twitter.com/mgechev
    ROUTER
    NGUPGRADE
    MATERIAL
    ANIMATIONS
    I18N
    UNIVERSAL
    ANGULARFIRE
    LANGUAGE
    SERVICE
    CLI
    core
    (di, abstractions, etc.)
    HTTP
    RENDERER
    FORMS
    COMPILER
    PWA

    View Slide

  36. twitter.com/mgechev
    is not?
    What Angular

    View Slide

  37. twitter.com/mgechev
    complete architecture
    Angular doesn’t provide

    View Slide

  38. twitter.com/mgechev
    MVVM
    MVC
    MVP
    Redux
    Flux

    View Slide

  39. twitter.com/mgechev
    start?
    How to

    View Slide

  40. twitter.com/mgechev

    View Slide

  41. twitter.com/mgechev

    View Slide

  42. twitter.com/mgechev
    • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Tooling overhead

    View Slide

  43. twitter.com/mgechev
    @angular/cli

    View Slide

  44. twitter.com/mgechev
    Advanced scenarios
    @angular/cli ng eject
    github.com/mgechev/angular-seed

    View Slide

  45. twitter.com/mgechev
    Text editors & IDEs
    VSCode
    WebStorm
    SublimeText
    VIM?
    (Language service)

    View Slide

  46. twitter.com/mgechev

    View Slide

  47. twitter.com/mgechev
    PWA

    View Slide

  48. twitter.com/mgechev
    @angular/service-worker

    View Slide

  49. twitter.com/mgechev

    View Slide

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

    View Slide