Modern Web Toolchain

Transcript

1. The modern web toolchain @FabianGosebrink

2. Fabian Gosebrink

3. @FabianGosebrink

4. None

5. The modern web toolchain

6. None
7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None
15. None
16. None
17. None
18. None

19. > npm install rimraf -g

20. > npm install rimraf

21. None
22. None
23. None
24. None

25. > yarn add ...

26. None
27. None
28. None
29. None
30. None
31. None
32. None
33. None
34. None

35. ES5 ES6 TS

36. > npm install typescript

37. > tsc myTypescriptFile.ts

38. None
39. None
40. None
41. None

42. Root Child Child GrandChild GrandChild

43. None
44. None

45. SystemJS

46. None
47. None

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. // 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. None
51. None
52. None
53. None

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

55. None

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

57. None
58. None
59. None
60. None
61. None

62. Testing

63. Protractor Jasmine Karma

64. J asmine Behaviour Driven Development Fast

65. Karma Test runner Spawns browser & runs tests Also on

    CommandLine
66. None
67. None

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

    browser Test like a user
69. None
70. None
71. None

72. How do you keep up 2 date?

73. None

74. Conferences!

75. None
76. None

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