Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2: Quick Web Start

Angular 2: Quick Web Start

Minko Gechev

March 10, 2016
Tweet

More Decks by Minko Gechev

Other Decks in Technology

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. github.com/mgechev
    twitter.com/mgechev
    blog.mgechev.com

    View Slide

  6. View Slide

  7. Agenda

    View Slide

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

    View Slide

  9. Angular 2 is
    language agnostic

    View Slide

  10. Angular 2 with ES5

    View Slide

  11. angular2-seed

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  21. View Slide

  22. View Slide

  23. Introducing
    Best Practices

    View Slide

  24. Section agenda
    • Use common style & best practices
    • Angular 2 (will) have great IDE support
    • Use static code analysis for less bugs

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Angular 2 has
    “runtime-type checking”

    View Slide

  29. View Slide

  30. Why not
    build-time

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. ng2lint

    View Slide

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

    View Slide

  36. Angular in
    Web Workers

    View Slide

  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.”

    View Slide

  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.”

    View Slide

  39. Angular 2 is
    platform agnostic

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. WebWorker
    UI thread
    App
    Change Detection
    Web Worker renderer

    UI Renderer
    Do whatever you want

    View Slide

  46. JSON
    WebWorker
    UI thread
    App
    Change Detection
    Web Worker renderer

    UI Renderer
    Do whatever you want

    View Slide

  47. …but

    View Slide

  48. Can’t touch
    DOM

    View Slide

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

    View Slide

  50. View Slide

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

    View Slide

  52. View Slide

  53. WebWorkers recap
    • Angular is platform agnostic
    • Running apps in background
    • WebWorkers can’t touch the DOM

    View Slide

  54. angular/offline

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. View Slide

  62. – MDN
    “Service workers essentially act as proxy
    servers that sit between web
    applications, and the browser and
    network (when available)....”

    View Slide

  63. View Slide

  64. – MDN
    “HTML5 provides an application caching
    mechanism that lets web-based
    applications run offline. Developers can
    use the Application Cache...”

    View Slide

  65. AppCache
    Service Workers AppCache
    Service Workers
    =
    ~91.8%

    View Slide

  66. In progress integration with
    angular2-seed

    View Slide

  67. Alright…but when?

    View Slide

  68. View Slide

  69. Soon…

    View Slide

  70. STANG2
    50% off

    View Slide

  71. Use
    with us

    View Slide

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

    View Slide