--- title: "Let's build a JavaScript bundler" publication: "JavaScript Weekly" issue: 587 published_at: "2022-04-29" canonical_url: "https://javascriptweekly.com/issues/587" --- Plus React 18.1, why the npm ecosystem is so susceptible to supply chain attacks, and Node 16 gets Fetch. | 🇺🇦 #​587 — April 29, 2022 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/587) JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/nzq66s7rp0anck8k2sj3.jpg)](https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks) [Four Eras of JavaScript Frameworks](https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks) — While the pre-2012 history is a bit fuzzy given the author’s experiences, this is a nice retrospective and attempt to break down the history of JavaScript frameworks into four _eras_, each of which builds upon what came before. Chris Garrett [Building a JavaScript Bundler from Scratch](https://cpojer.net/posts/building-a-javascript-bundler) — You’ve built a to-do list, you’ve built a static site generator.. maybe even a [testing framework?](https://cpojer.net/posts/building-a-javascript-testing-framework) Christoph, known for his role in building Jest, Yarn and MooTools, takes us to the next step: building a bundler. There’s a [livestream version](https://www.youtube.com/watch?v=xZlXR3pXAOk) too. A great way to understand how such tools work under the hood. Christoph Nakazawa [![\](https://copm.s3.amazonaws.com/edd4a08f.jpg)](https://frontendmasters.com/courses/complete-react-v7/?utm_source=javascriptweekly&utm_medium=email&utm_content=reactv7) [Updated Course: Complete Intro to React](https://frontendmasters.com/courses/complete-react-v7/?utm_source=javascriptweekly&utm_medium=email&utm_content=reactv7) — Join Brian Holt for this updated look at getting started with React. Covering things like hooks, effects, context, and portals. Throughout this video course you’ll learn about tools from across the entire React ecosystem (like Parcel, ESLint, TailwindCSS, and React Router). Frontend Masters sponsor [Jest 28: JS Testing Gets Lighter, Faster, More Productive](https://jestjs.io/blog/2022/04/25/jest-28) — [Jest](https://jestjs.io/) is one of the most popular JS testing frameworks and v28 packs in a lot: sharding tests across multiple machines, a GitHub Actions reporter, improved support for package entry points with `exports`, and more. Simen Bekkhus **IN BRIEF:** - [Node 16.15.0 (LTS)](https://nodejs.org/en/blog/release/v16.15.0/) has been released and has Node 18's [experimental Fetch API support](https://www.stefanjudis.com/notes/global-fetch-landed-in-node-18/) backported to it. - [A 5 minute video](https://www.youtube.com/watch?v=RSGNzEOk6bA) where Beth Griggs and Michael Dawson explain the Node 18 release process and the key features of the release. - [Someone asked Hacker News](https://news.ycombinator.com/item?id=31152148) why the npm ecosystem seems more susceptible to supply chain attacks than, say, PHP's. - Did you know about some of JavaScript's [legacy string methods](https://davidwalsh.name/legacy-string-methods) for generating HTML? `"text".link(url)` is a pretty neat one. - [This is a fantastic visual demo](https://twitter.com/KilledByAPixel/status/1517294627996545024) in just 256 bytes of JavaScript and [this is an attempt](https://observablehq.com/@darabos/decoding-a-city-in-a-bottle) to figure out how it works.. **RELEASES:** [React 18.1](https://github.com/facebook/react/releases/tag/v18.1.0) – A bug fix release. [Figma Plugin for Storybook](https://storybook.js.org/blog/figma-plugin-for-storybook/) – Now GA. [RxDB 12.0](https://github.com/pubkey/rxdb/blob/master/orga/releases/12.0.0.md) – Offline-first, reactive database system. [Postgres.js 3.1](https://github.com/porsager/postgres/releases/tag/v3.1.0) – High perf PostgreSQL client library. [Faker.js 6.2.0](https://github.com/faker-js/faker/releases/tag/v6.2.0) – Fake data generator. 💻 Jobs [JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Frontend Engineer](https://jobs.lever.co/strapi/4b42d95e-63e9-4e75-baf5-bcac54d02231) — We've built the next-generation CMS. We're open-source. JavaScript. Headless. Community & People first. And free. And will stay that way. Forever. Strapi [Ashby (YCW19) Is Hiring Remote Engineers to Change How Companies Hire](https://www.ashbyhq.com/careers?utm_source=zNgj8wDMB9) — Join a kind, thoughtful team that values ownership & collaboration. <2h meetings/wk. Ship >8x per day. CI/CD takes <10min 🚀 Ashby 📅 [Register for Our May 5th State of Software Engineers Event](https://insightstomakethejobmarketworkforyou.splashthat.com/Newsletters) — Join our panel discussion with experts from Hired, Amazon, Educative, and Signify Health as we discuss Hired’s 2022 State of Software Engineers Report. Hired 📒 Articles & Tutorials [How a Team Reduced Startup Time by 80% with Webpack](https://www.rudderstack.com/blog/how-we-reduced-startup-time-by-80-with-webpack/) — Admittedly, this team began from a reasonably inefficient starting point, such as using ts-node in production, but this post contains experiences or findings many teams could empathize with. Aris Konstantoulas ▶[TypeScript Tips and Tricks with Matt Pocock](https://www.youtube.com/watch?v=hBk4nV7q6-w) — [Matt](https://twitter.com/mpocock1) has been developing a strong reputation on Twitter recently for his useful TypeScript tweets and videos, so it’s nice to see him digging deep on the VS Code YouTube channel with Burke Holland. 55-minutes, but if you’re a TypeScript user, you will learn something. Burke Holland [Breaking Down JSON Web Tokens (JWTs) - Free eBook](https://go.fusionauth.io/nl-breaking-down-json-web-tokens?utm_campaign=Newsletter%20Ads&utm_source=tldr&utm_medium=referral&utm_term=jwt-ebook) — We'll teach you how to build a secure signed JWT, the pros and cons of JWTs, and how to revoke them. Get the eBook today. FusionAuth sponsor [Node 18's 'Prefix-Only' Core Modules Explained](https://fusebit.io/blog/node-18-prefix-only-modules/) — A look at a new type of core module that can’t be imported quite like the others, e.g. `import test from 'node:test'`. Colin Ihrig [Running JavaScript in a .NET App with JavaScriptEngineSwitcher](https://andrewlock.net/running-javascript-in-a-dotnet-app-with-javascriptengineswitcher/) Andrew Lock [Upgrading to React 18 with TypeScript](https://blog.logrocket.com/upgrading-react-18-typescript/) John Reilly [Build a Lightweight Web Component with Lit.js](https://blog.openreplay.com/build-a-lightweight-web-component-with-lit-js) Clara Ekekenta [How to Use Serverless Cloud with SvelteKit](https://www.serverless.com/blog/how-to-use-serverless-cloud-with-sveltekit) Doug Moscrop 🛠 Code & Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,g_center,h_280,c_crop/k6ejykvgsu47pjo9lsh0.jpg)](https://www.remotion.dev/blog/3-0) [Remotion 3.0: 'Write' Videos in React](https://www.remotion.dev/blog/3-0) — [Remotion](https://www.remotion.dev/) lets you use your React skills to create videos by writing what you want to happen in code with Remotion handling the rendering and encoding. [This video](https://www.youtube.com/watch?v=GN2jkJphR5M), built in Remotion, shows off a new AWS Lambda-based serverless rendering mechanism. Jonny Burger (Remotion) [Frappe Gantt: An Open Source JavaScript Gantt Chart Control](https://frappe.io/gantt) — Gantt charts are commonly used in project management to show the progress and connection between activities spread over a timeline. There’s a live demo on this page, or you can head to the [GitHub repo](https://github.com/frappe/gantt). Frappe [Couchbase Capella DBaaS: Store in JSON, Access with SQL](https://www.couchbase.com/products/capella/get-started?utm_source=cooperpress_javascript_weekly&utm_medium=newsletter&utm_content=sponsored_link) — Build faster w/ in-memory performance & automatic replication & scaling. Try it now for free & be live in under 3 minutes. Couchbase sponsor [htmlparser2 8.0: A 'Fast and Forgiving' HTML and XML Parser](https://github.com/fb55/htmlparser2) — Consumes documents and calls callbacks, but it can generate a DOM as well. There’s [a live demo here.](https://astexplorer.net/#/2AmVrGuGVJ) Works in both Node and browser. Felix Böhm [FortuneSheet: An Excel-Like JS Spreadsheet Control](https://github.com/ruilisi/fortune-sheet) — It’s early days, but this looks promising. There’s [a live demo](https://ruilisi.github.io/fortune-sheet-demo/?path=/story/workbook--basic), of course. Suzhou Ruilisi Technology Co., Ltd [React Responsive Pagination: Component for Smart Pagination](https://github.com/jonelantha/react-responsive-pagination) — A responsive React pagination component which intelligently renders to the available width. You can [try it out live here](https://react-responsive-pagination.elantha.com/live-demo/). Jon Elantha [Integrate eSignatures in Your App in Less Than a Week](https://www.hellosign.com/products/api?utm_campaign=cooperpress_direct_42922&utm_medium=cpm&utm_source=programmatic&utm_content=newsletter) HelloSign, a Dropbox Company sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/l5p8rdml0q0uiksuqlov.jpg)](https://github.com/missive/emoji-mart) [Emoji Mart 5.0: A Customizable Emoji Picker for the Web](https://github.com/missive/emoji-mart) — You can [test it out here](https://missiveapp.com/open/emoji-mart). Missive [Peaks 2.0: UI Component for Interacting with Audio Waveforms](https://github.com/bbc/peaks.js) BBC Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 'JavaScript' is a trademark of Oracle Corporation in the US We are not endorsed by or affiliated with Oracle. [Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom