Angular 2: Quick Web Start

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