Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Toolchain

Avatar for Fabian Gosebrink Fabian Gosebrink
October 22, 2017
Technology
0
87

Modern Web Toolchain

Slides for my talk about the modern web toolchain

Avatar for Fabian Gosebrink

Fabian Gosebrink

October 22, 2017
Tweet

More Decks by Fabian Gosebrink

See All by Fabian Gosebrink
Why State is the Most Important Part of Your Angular Application
Avatar for Fabian Gosebrink fabiangosebrink
0
61
Angular testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
94
Introducing state management into an application with NgRx
Avatar for Fabian Gosebrink fabiangosebrink
0
140
Scalable architectures in Angular with Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
120
My Biggest Angular Mistakes and How To Avoid Them
Avatar for Fabian Gosebrink fabiangosebrink
0
230
[iJS Munich] Better Angular Architectures with Libraries and Nx
Avatar for Fabian Gosebrink fabiangosebrink
0
140
Mastering State Management in Angular with the NgRx Signal Store
Avatar for Fabian Gosebrink fabiangosebrink
0
350
Angular Architectures with NgRx Stores & Effects
Avatar for Fabian Gosebrink fabiangosebrink
0
110
Angular Testing made easy with Jest and Cypress
Avatar for Fabian Gosebrink fabiangosebrink
0
110

Other Decks in Technology

See All in Technology
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
330
20250913_JAWS_sysad_kobe
Avatar for Takuya Yonezawa takuyay0ne
2
230
La gouvernance territoriale des données grâce à la plateforme Terreze
Avatar for BlueHats bluehats
0
180
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
Avatar for 株式会社ログラス loglass2019
4
64k
大「個人開発サービス」時代に僕たちはどう生きるか
Avatar for Sotaro Karasawa sotarok
20
10k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
490
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
130
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
3.5k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
Avatar for yud0uhu yud0uhu
0
230
テストを軸にした生き残り術
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
210
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
320
Practical Agentic AI in Software Engineering
Avatar for U-Zyn Chua uzyn
0
110

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k

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