Angular 2 Toolset Support

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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 26, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. agenda

  5. Angular 2 Design

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

    you need
  7. Angular 2’s Core

  8. Angular 2’s Core • Ultra-fast Change detection • Rendering Engine

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

    • Compiler • Dependency Injection • View Encapsulation • Zone.js
  10. None
  11. None
  12. Optimizations

  13. offline pre-compilation

  14. template.html <p> Howdy! Here's a list <form> ... </form> </p>

  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)); ...
  16. Development experience

  17. Typical JavaScript experience

  18. Angular is… • Built with TypeScript • Compile-time type checking

    • Great IDE/text editors support • Analyzable templates
  19. Type-checking and IntelliSense in templates

  20. None
  21. Already supported by some IDEs

  22. None
  23. codelyzer

  24. “codelyzer is a project which aims to enforce common style

    and verify correctness of your program”
  25. None
  26. Why not instant feedback

  27. None
  28. angular/mobile-toolkit

  29. Progressive enhancement for web applications

  30. mobile-toolkit • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support of push notifications
  31. Service Workers & AppCache

  32. AppCache Service Workers AppCache Service Workers

  33. AppCache Service Workers = ~91.8%

  34. How to start?

  35. angular-cli

  36. ng new hello-world

  37. angular-cli • Quick bootstrap of projects • Generating: • Components

    • Services • Directives • Pipes • Support for offline apps • many others…
  38. angular2-seed

  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
  40. Resources: • angular.io • github.com/angular/angular • github.com/angular/mobile-toolkit • github.com/angular/angular-cli •

    github.com/mgechev/angular2-seed
  41. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com