Modern Web Toolchain

Transcript

1. 1.

   The modern web toolchain @FabianGosebrink

2. 2.

   Fabian Gosebrink

3. 3.

   @FabianGosebrink

4. 4.

   None
5. 5.

   The modern web toolchain

6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    None
11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    > npm install rimraf -g

20. 20.

    > npm install rimraf

21. 21.

    None
22. 22.

    None
23. 23.

    None
24. 24.

    None
25. 25.

    > yarn add ...

26. 26.

    None
27. 27.

    None
28. 28.

    None
29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    None
33. 33.

    None
34. 34.

    None
35. 35.

    ES5 ES6 TS

36. 36.

    > npm install typescript

37. 37.

    > tsc myTypescriptFile.ts

38. 38.

    None
39. 39.

    None
40. 40.

    None
41. 41.

    None
42. 42.

    Root Child Child GrandChild GrandChild

43. 43.

    None
44. 44.

    None
45. 45.

    SystemJS

46. 46.

    None
47. 47.

    None
48. 48.

    // import the entire utils object with CommonJS var utils

    = require('utils ); var query = 'test'; utils.ajax('https://api.example.com?search=' + query) .then(handleResponse);
49. 49.

    // import the ajax function with an ES6 import statement

    import { ajax } from 'utils'; var query = 'test ; // call the ajax function ajax('https://api.example.com?search=' + query ) .then(handleResponse);
50. 50.

    None
51. 51.

    None
52. 52.

    None
53. 53.

    None
54. 54.

    > npm install webpack-dev-server --save-dev

55. 55.

    None
56. 56.

    Ahead-of-time (AOT) vs. just-in-time (JIT)

57. 57.

    None
58. 58.

    None
59. 59.

    None
60. 60.

    None
61. 61.

    None
62. 62.

    Testing

63. 63.

    Protractor Jasmine Karma

64. 64.

    J asmine Behaviour Driven Development Fast

65. 65.

    Karma Test runner Spawns browser & runs tests Also on

    CommandLine
66. 66.

    None
67. 67.

    None
68. 68.

    Pr otr actor End-to-end test framework Runs in a real

    browser Test like a user
69. 69.

    None
70. 70.

    None
71. 71.

    None
72. 72.

    How do you keep up 2 date?

73. 73.

    None
74. 74.

    Conferences!

75. 75.

    None
76. 76.

    None
77. 77.

    https://github.com/FabianGosebrink https://offering.solutions https://swissangular.com @FabianGosebrink