Angular Unplugged

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