Angular 2: Quick Web Start

Angular 2: Quick Web Start

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

March 10, 2016
Tweet

Transcript

  1. ngular 2: quick web start Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com

  2. None
  3. None
  4. None
  5. github.com/mgechev twitter.com/mgechev blog.mgechev.com

  6. None
  7. Agenda

  8. https://www.flickr.com/photos/jackson22/16706843701 Tooling…

  9. Angular 2 is language agnostic

  10. Angular 2 with ES5

  11. angular2-seed

  12. Seed project for Angular 2 apps with statically typed build

  13. Seed project for Angular 2 apps with statically typed build

  14. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  15. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  16. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  17. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  18. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  19. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  20. Seed project… • Development and production builds • TypeScript transpilation

    • BrowserSync support • Karma with Jasmine integration • e2e testing with protractor • Test coverage • Follows best practices • ng2lint
  21. None
  22. None
  23. Introducing Best Practices

  24. Section agenda • Use common style & best practices •

    Angular 2 (will) have great IDE support • Use static code analysis for less bugs
  25. None
  26. None
  27. None
  28. Angular 2 has “runtime-type checking”

  29. None
  30. Why not build-time

  31. None
  32. None
  33. None
  34. ng2lint

  35. “ng2lint is a project which aims to enforce common style

    and verify correctness of your program”
  36. Angular in Web Workers

  37. – MDN “Web Workers provide a simple means for web

    content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.”
  38. – MDN “Web Workers provide a simple means for web

    content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.”
  39. Angular 2 is platform agnostic

  40. Angular 2 can run… • In the browser • On

    the server • In WebWorkers • In native mobile apps
  41. Angular 2 can run… • In the browser • On

    the server • In WebWorkers • In native mobile apps
  42. Angular 2 can run… • In the browser • On

    the server • In WebWorkers • In native mobile apps
  43. Angular 2 can run… • In the browser • On

    the server • In WebWorkers • In native mobile apps
  44. Angular 2 can run… • In the browser • On

    the server • In WebWorkers • In native mobile apps
  45. WebWorker UI thread App Change Detection Web Worker renderer …

    UI Renderer Do whatever you want
  46. JSON WebWorker UI thread App Change Detection Web Worker renderer

    … UI Renderer Do whatever you want
  47. …but

  48. Can’t touch DOM

  49. What about? document.body.style .backgroundImage = 'url(background.png)';

  50. None
  51. …at least…? document.querySelectorAll('.foo');

  52. None
  53. WebWorkers recap • Angular is platform agnostic • Running apps

    in background • WebWorkers can’t touch the DOM
  54. angular/offline

  55. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support off push notifications
  56. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support off push notifications
  57. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support off push notifications
  58. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support off push notifications
  59. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support of push notifications
  60. angular/offline: • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support of push notifications
  61. None
  62. – MDN “Service workers essentially act as proxy servers that

    sit between web applications, and the browser and network (when available)....”
  63. None
  64. – MDN “HTML5 provides an application caching mechanism that lets

    web-based applications run offline. Developers can use the Application Cache...”
  65. AppCache Service Workers AppCache Service Workers = ~91.8%

  66. In progress integration with angular2-seed

  67. Alright…but when?

  68. None
  69. Soon…

  70. STANG2 50% off

  71. Use with us

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