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
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
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
21. Already supported by some IDEs
23. codelyzer
24. “codelyzer is a project which aims to enforce common style and verify correctness of your program”
26. Why not instant feedback
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