Angular 2 Toolset Support

This talk is about the design decisions that make Angular easy for static code analysis, and some of the tools that can help your Angular code be less error-prone and follow a common style.

Last but not least, I'll introduce you to the cross-browser progressive applications support that's now introduced by angular/mobile-toolkit.

Transcript

1. ngular
   Minko Gechev
   github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   toolset support
   

   View Slide

2. View Slide

3. View Slide

4. agenda
   

   View Slide

5. Angular 2
   Design
   

   View Slide

6. Modular, decoupled design
   which allows you to use only
   what you need
   

   View Slide

7. Angular 2’s Core
   

   View Slide

8. Angular 2’s Core
   • Ultra-fast Change detection
   • Rendering Engine
   • Compiler
   • Dependency Injection
   • View Encapsulation
   • Zone.js
   

   View Slide

9. Angular 2’s Core
   • Ultra-fast Change detection
   • Rendering Engine
   • Compiler
   • Dependency Injection
   • View Encapsulation
   • Zone.js
   

   View Slide

10. View Slide

11. View Slide

12. Optimizations
    

    View Slide

13. offline
    pre-compilation
    

    View Slide

14. template.html
    
    Howdy! Here's a list
    
    ...
    
    
    

    View Slide

15. compiled.js
    ...
    var parentRenderNode = renderer
    .createViewRoot(declarationAppElement.nativeElement);
    _el_0 = renderer
    .createElement(parentRenderNode,'p',debug(0,0,0));
    _text_1 = renderer
    .createText(_el_0,'\n Howdy! Here\'s a list',debug(1,0,3));
    _text_2 = renderer
    .createText(parentRenderNode,'\n\n',debug(2,3,4));
    _el_3 = renderer
    .createElement(parentRenderNode,'form',debug(3,5,0));
    ...
    

    View Slide

16. Development
    experience
    

    View Slide

17. Typical JavaScript experience
    

    View Slide

18. Angular is…
    • Built with TypeScript
    • Compile-time type checking
    • Great IDE/text editors support
    • Analyzable templates
    

    View Slide

19. Type-checking and IntelliSense in
    templates
    

    View Slide

20. View Slide

21. Already supported by
    some IDEs
    

    View Slide

22. View Slide

23. codelyzer
    

    View Slide

24. “codelyzer is a project which aims
    to enforce common style and verify
    correctness of your program”
    

    View Slide

25. View Slide

26. Why not
    instant feedback
    

    View Slide

27. View Slide

28. angular/mobile-toolkit
    

    View Slide

29. Progressive enhancement
    for web applications
    

    View Slide

30. mobile-toolkit
    • Offline access to static content
    • Notifications for new versions
    • Efficient download of deltas
    • Support of push notifications
    

    View Slide

31. Service Workers
    &
    AppCache
    

    View Slide

32. AppCache
    Service Workers AppCache
    Service Workers
    

    View Slide

33. AppCache
    Service Workers
    =
    ~91.8%
    

    View Slide

34. How to start?
    

    View Slide

35. angular-cli
    

    View Slide

36. ng new hello-world
    

    View Slide

37. angular-cli
    • Quick bootstrap of projects
    • Generating:
    • Components
    • Services
    • Directives
    • Pipes
    • Support for offline apps
    • many others…
    

    View Slide

38. angular2-seed
    

    View Slide

39. angular2-seed
    • TypeScript transpilation
    • Statically typed dev and prod builds
    • Out of the box unit-testing
    • Test coverage
    • e2e testing with protractor
    • Static code analyzer
    

    View Slide

40. Resources:
    • angular.io
    • github.com/angular/angular
    • github.com/angular/mobile-toolkit
    • github.com/angular/angular-cli
    • github.com/mgechev/angular2-seed
    

    View Slide

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

    View Slide