Angular as an Integrated Development Platform

Transcript

1. ngular github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Development Platform

2. agenda

3. What is Angular

4. None
5. None

6. Mobile • Web apps • Ionic • NativeScript

7. None

8. Desktop • Web apps • Electron

9. core (zones, di, abstractions, etc.)

10. core (zones, di, abstractions, etc.) animations

11. compiler core (zones, di, abstractions, etc.) animations

12. http compiler core (zones, di, abstractions, etc.) animations

13. forms http compiler core (zones, di, abstractions, etc.) animations

14. forms http compiler core (zones, di, abstractions, etc.) router animations

15. forms http compiler core (zones, di, abstractions, etc.) router i18n

    animations

16. forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade

    i18n animations

17. PWA forms http compiler core (zones, di, abstractions, etc.) router

    ngUpgrade i18n animations

18. Universal PWA forms http compiler core (zones, di, abstractions, etc.)

    router ngUpgrade i18n animations

19. components Universal PWA forms http compiler core (zones, di, abstractions,

    etc.) router ngUpgrade i18n animations

20. CLI components Universal PWA forms http compiler core (zones, di,

    abstractions, etc.) router ngUpgrade i18n animations

21. language services CLI components Universal PWA forms http compiler core

    (zones, di, abstractions, etc.) router ngUpgrade i18n animations

22. angularfire2 language services CLI components Universal PWA forms http compiler

    core (zones, di, abstractions, etc.) router i18n ngUpgrade animations

23. angularfire2 language services CLI components Universal PWA forms http compiler

    core (zones, di, abstractions, etc.) router i18n ngUpgrade animations

24. angular-cli

25. $ npm i -g @angular/cli $ ng new hello-world

26. $ cd hello-world $ ng serve

27. None

28. Angular Core

29. Core • Components • Ultrafast Change Detection • More abstractions

    as you need them

30. @Component({ selector: 'hello-world', template: '<h1>Hello, {{user.name}}!</h1>' }) class HelloWorldComponent {

    getData() { fetch('https://example.com/data.json') .then(response => response.json()) .then(data => this.user = data); } } Hello world in Angular

31. Compiler

32. “Compiles your templates to JavaScript instructions”

33. template.html <section> Howdy! Here’s a list: <ul> <li>First</li> <li>Second</li> </ul>

    </section>

34. compiled.js elementStart(0, "section"); text(1, " Howdy! Here's a list: ");

    elementStart(2, "ul"); elementStart(3, "li"); text(4, "First"); elementEnd(); elementStart(5, "li"); text(6, "Second"); elementEnd(); elementEnd(); elementEnd();

35. compiled.js e(0, "section"); t(1, " Howdy! Here's a list: ");

    e(2, "ul"); e(3, "li"); t(4, "First"); n(); e(5, "li"); t(6, "Second"); n(); n(); n();

36. compiled.js e(0,"section"),t(1,"Howdy! Here's a list: "),e(2,"ul"),e(3,"li"),t(4,"First"),n(),e(5,"l i"),t(6,"Second"),n(),n(),n();

37. Development experience

38. Typical JavaScript experience

39. Angular is… • Built with TypeScript • Compile-time type checking

    • Great IDE/text editors support • Analyzable templates

40. Type-checking and IntelliSense in templates

41. None
42. None

43. codelyzer

44. “codelyzer is a project which aims to enforce common style

    and verify correctness of your program”
45. None
46. None

47. Client Server

48. Client Server

49. Client Server GET / GET * loop

50. Client Server GET / GET * loop Running JavaScript

51. Client Server GET / GET * loop GET * loop

52. Client Server GET / GET * loop GET * loop

53. server-side rendering

54. Client Server

55. Client Server

56. Client Server GET /

57. Client Server GET / Running JavaScript

58. Client Server GET / GET * loop

59. Client Server GET / GET * loop Running JavaScript

60. Client Server GET / GET * loop

61. ❤ Angular Community ❤

62. ngAtlanta " ngIndia # Angular NL $ ng-conf " ngVikings

    % Angular Day & Angular in Depth ' ngDenver " NG-MY ( ng-japan ) NG-DE * ng-SriLanka + Angular Connect , ngSpain - NGRome & NG Honduras . ngTaiwan / ngTalks ' NG-BE 0 ngBolivia 1 AngularMix " ngPoland 2 AngularUP 3 ngChina 4

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