Modern JavaScript For Web Dinosaurs
summary
Starts from a jQuery page and shows exactly how code moves through npm modules turned into one bundle via Browserify/webpack, how Babel and TypeScript transpile ES2015/TS into browser JS, and how webpack-dev-server and create-react-app produce a live dev loop. The demo re-implements a date widget using webpack + Babel + TypeScript and then as a React component with create-react-app + react-moment, the build briefly breaks during the live demo but ultimately produces a working React app and inspectable bundle.
AI-written summary · about
chapters (9)
- 0:00Start
- 1:49The JavaScript ecosystem is unrecognisable
- 10:01Modules: A Quick Primer
- 12:15Module Bundlers
- 13:58Using Webpack for Modules
- 16:53Transpiling - AKA Development Witchcraft Transpiling means converting code in one language to code in another similar language
- 19:28Using babel to support new language features
- 29:12Bonus Round: Task Runners . A way to automate build tasks
- 32:22Anatomy of a React project
related talks
30mWebpack – The React Parts
41mOnce you go webpack you never go back
44mJavaScript in 2017: You might (not) need a framework
27mUnderstanding JavaScript Libraries via React and the React Ecosystem
01h 03mIntroduction to webpack
01h 07mModern Frontend Engineering
53mBuilding Web Apps with React.js
36mModern Javascript with React and Redux