Angular 2: Quick Web Start

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