Die moderne Web-Toolchain: webpack, npm und Yarn, Linting und Co.

Die moderne Web-Toolchain: webpack, npm und Yarn, Linting und Co.

Wer heutzutage in die Webentwicklung einsteigt, wird von den vielen Varianten und Tools erschlagen, die die Frontend-Entwicklung mittlerweile hergibt. Es gibt für fünf verschiedene Probleme mindestens doppelt so viele Lösungen, und welches Framework für welches Problem verwendet werden sollte, verschwimmt wöchentlich hinter neuen Keywords. In diesem Talk haben wir Zeit, um mit Begriffen aufzuräumen und zu definieren, welches Tool wo angewandt werden kann. Wir werfen einen Blick auf die Vielfalt der Frameworks im JavaScript-Bereich und bringen Licht in den Dschungel voller Helferlein und Tools.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

September 26, 2018
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  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. Naughty Push Message Never Program Mad Never Push to Master

    Nice Poodle, Mister Nineties Party Mix Null Pointer Missing Neapolitan Pizza Margherita Nuclear Potato Monster Nanananananananana.. Pat Man!
  20. None
  21. > npm install <myPackage>

  22. > npm install <myPackage> -g

  23. None
  24. None
  25. > npm install rimraf -g

  26. > rimraf node_modules

  27. None
  28. None
  29. None
  30. > yarn add ...

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. ES5 ES6 TS

  41. > npm install typescript

  42. > tsc myTypescriptFile.ts

  43. None
  44. None
  45. None
  46. None
  47. Root Child Child GrandChild GrandChild

  48. None
  49. None
  50. None
  51. SystemJS

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. Root Child Child GrandChild GrandChild

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. Component Services

  71. Component

  72. Store Component

  73. Store Component store.select(…)

  74. Store Component Reducer store.select(…) store.dispatch(…)

  75. Store Component Reducer store.select(…) store.dispatch(…)

  76. Store Component Reducer store.select(…) store.dispatch(…) Effects Services

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. Protractor Jasmine Karma

  84. Behaviour Driven Development Fast

  85. Test runner Spawns browser & runs tests Also on CommandLine

  86. None
  87. None
  88. End-to-end test framework Runs in a real browser Test like

    a user
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. @FabianGosebrink

  97. None
  98. None
  99. None
  100. https://offering.solutions http://developer-academy.ch @FabianGosebrink