The modern web toolchain

Slides for my talk at the BASTA! Spring 2018 about the modern web toolchain

Transcript

1. @FabianGosebrink
2. @FabianGosebrink
19. > npm install <myPackage>
20. > npm install <myPackage> -g
23. > npm install rimraf -g
24. > rimraf node_modules
28. > yarn add ...
37. ES5 ES6 TS
38. > npm install typescript
39. > tsc myTypescriptFile.ts
41. { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } }
44. Rx.Observable .interval(1000) .take(4);
45. Rx.Observable .fromEvent(document, 'mousemove') .pipe( map(event => event.clientX), throttleTime(300));
46. Rx.Observable .fromEvent(input, 'keydown') .pipe(map(e => e.key), filter(key => key !== ' '));
48. Component Services
49. Component
50. Store Component
51. Store Component store.select(…)
52. Store Component Reducer store.select(…) store.dispatch(…)
53. Store Component Reducer store.select(…) store.dispatch(…)
54. Store Component Reducer store.select(…) store.dispatch(…) Effects Services
56. Root Child Child GrandChild GrandChild
60. SystemJS
63. // import the entire utils object with CommonJS var utils = require('utils’); var query = 'test'; utils.ajax('https://api.example.com?search=' + query) .then(handleResponse);
64. // 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);
69. > npm install webpack-dev-server --save-dev
71. Root Child Child GrandChild GrandChild
79. Protractor Jasmine Karma
80. Behaviour Driven Development Fast
81. Test runner Spawns browser & runs tests Also on CommandLine
84. End-to-end test framework Runs in a real browser Test like a user
93. https://offering.solutions http://angular-academy.ch https://swissangular.com @FabianGosebrink