Modern Web Toolchain

Modern Web Toolchain

Slides for my talk about the modern web toolchain

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

October 22, 2017
Tweet

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