---
title: "Learning JS framework concepts by building one"
publication: "JavaScript Weekly"
issue: 666
published_at: "2023-12-07"
canonical_url: "https://javascriptweekly.com/issues/666"
---

Plus WebAssembly vs JavaScript, Electron 28, how Prettier is getting faster, and a TypeScript diagramming system. |        

#​666 — December 7, 2023 

[Read on the Web](https://javascriptweekly.com/issues/666)  

Together with [![Postman logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_330,h_100/e_make_transparent/co_white,e_outline:7/ym5p9yhtqry2ntuhfxk4.png)](https://www.postman.com/product/workspaces/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=q4-newsletter-sponsorships&utm_term=december72023&utm_content=primary-workspaces)  

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/bvh4izdkrgragaw1mklc.jpg)](https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/)  

[Learn How Modern JS Frameworks Work by Building One](https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/) — Building things is a great way to learn, even if you don’t end up using what you built. Even better is when someone who’s _already_ built something successful introduces you to the process. Nolan doesn’t go super deep but far enough to whet your appetite and for you to learn a few things by taking it further. 

Nolan Lawson   

🚀 [Astro 4.0 Released](https://astro.build/blog/astro-4/) — The new major release of the [Astro](https://astro.build) content-site framework is just out, including a new dev toolbar, automatic i18n routing, new view transition APIs, and more. There’s also, experimentally, incremental content caching. [Upgrading is simple](https://docs.astro.build/en/guides/upgrade-to/v4/) – an `npx @astrojs/upgrade` away for most folks. 

Astro   [![\](https://copm.s3.amazonaws.com/1d8f83f1.jpeg)](https://www.postman.com/product/workspaces/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=q4-newsletter-sponsorships&utm_term=december72023&utm_content=primary-workspaces) 

[Streamline API Development With Postman Workspaces](https://www.postman.com/product/workspaces/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=q4-newsletter-sponsorships&utm_term=december72023&utm_content=primary-workspaces) — Postman workspaces give teams shared access to the API tools they need to solve problems together. They are the go-to place for development teams to collaborate and move quickly while staying on the same page. 

Postman sponsor   

[Maglev: V8’s Fastest Optimizing JIT](https://v8.dev/blog/maglev) — An interesting look under the hood of how the V8 JavaScript engine (as used in Chrome, Node.js and elsewhere) continues to get faster thanks to work on its Maglev JIT compiler which sits between the existing Sparkplug and TurboFan compilers (which both have distinct compilation speed vs code performance tradeoffs). 

The V8 Team   

**IN BRIEF:** 

- 📊 The [WebAssembly vs JavaScript](https://repositorio.inesctec.pt/server/api/core/bitstreams/0870fb76-d463-456b-9e34-5b33bb7c0dd1/content) (PDF) paper compares the energy requirements and performance of JS and WASM on the Web. Spoiler: _"WebAssembly is faster than JavaScript and even more energy efficient."_
- A [recap of the Electron ecosystem in 2023.](https://www.electronjs.org/blog/ecosystem-2023-eoy-recap)
- _The New Stack_ weighs up [the pros and cons of using React today.](https://thenewstack.io/the-pros-and-cons-of-using-react-today/)
- Talk about going down a rabbit hole, but did you know it's possible to [use Nuxt, Vue and Tailwind CSS to build an Adobe Premier Pro plugin?](https://twitter.com/steve_tenuto/status/1730967662426239069?s=20)
- Popular ingress service [ngrok](https://ngrok.com/) has unveiled [a JavaScript SDK](https://ngrok.com/blog-post/ngrok-js) to add secure ingress to Node apps.
- The _Construct 3_ 2D game engine [now supports TypeScript.](https://www.construct.net/en/blogs/construct-official-blog-1/construct-supports-typescript-1872)   

**RELEASES:** 

- [Electron 28](https://www.electronjs.org/blog/electron-28-0) – Now with ESM support, Chromium 120 & Node.js 18.18.2.
- [Fresh 1.6](https://deno.com/blog/fresh-1.6) – The Deno-based web framework.
- [React Native 0.73](https://reactnative.dev/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks) – Now with full Android 14 support, Kotlin becomes the recommended language for Android, and more.
- [HTML5 Boilerplate v9.0](https://htmlcssjavascript.com/web/html5-boilerplate-v9-0-0-released/) – Blast from the past!
- [Redux 5.0, Redux Toolkit 2.0, and more.](https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0)
- [Node.js v21.4.0 (Current)](https://nodejs.org/en/blog/release/v21.4.0), [Qwik 1.3](https://github.com/BuilderIO/qwik), and [Redwood 6.5](https://github.com/redwoodjs/redwood)  

📄 Articles & Tutorials 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kzbits52w06xuh065vhh.jpg)](https://prettier.io/blog/2023/11/30/cli-deep-dive.html)  

[Prettier's CLI: A Performance Deep Dive](https://prettier.io/blog/2023/11/30/cli-deep-dive.html) — We’ve recently written about the bounty the Prettier project put up ([and how Biome won it](https://biomejs.dev/blog/biome-wins-prettier-challenge/)) but Prettier has also been working on itself by hiring the author of this post to find and implement performance improvements, all while sticking with JavaScript. 

Fabio Spampinato   

[The Complete Puppeteer Cheatsheet](https://proxiesapi.com/articles/the-complete-puppeteer-cheatsheet) — If you want to control a headless Chrome browser from JavaScript, Puppeteer is for you. 

Mohan Ganesan   

[Accelerate Your API Development with Postman Collection Templates](https://www.postman.com/templates/?utm_source=javascriptweekly&utm_medium=email&utm_campaign=q4-newsletter-sponsorships&utm_term=december72023&utm_content=secondary-collection-templates) — Browse 70+ free and customizable templates to jump-start your API design, documentation, development, and testing workflows. 

Postman sponsor   

[How Marketing Changed OOP in JavaScript](https://www.smashingmagazine.com/2023/12/marketing-changed-oop-javascript/) — A look at JavaScript’s earliest history and its prototypal nature. 

Juan Diego Rodríguez   

[Goodbye, Clean Code](https://overreacted.io/goodbye-clean-code/) — Much as Donald Knuth warned us away from premature _optimization_, here Dan Abramov tells us to beware of premature _refactoring_ and de-duplication. _(A golden oldie post from 2020.)_ 

Dan Abramov   

[I Replaced `npm`, `yarn` and `nvm` with `pnpm`](https://pawelgrzybek.com/i-replaced-npm-yarn-and-nvm-with-pnpm/) — npm hasn’t been the only package manager in town for _many_ years. 

Pawel Grzybek   

[Advanced Patterns for Taking Page Element Screenshots with Playwright](https://lirantal.com/blog/advanced-usage-patterns-for-taking-page-element-screenshots-with-playwright/) 
Liran Tal   

[TypeScript's Hidden Feature: Subtypes](https://timjohns.ca/typescripts-hidden-feature-subtypes.html) 
Tim Johns  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wfkaufdfgjeacvdsbmvv.jpg)](https://tsdiagram.com/)   

[TSDiagram: Diagrams as Code with TypeScript](https://tsdiagram.com/) — Draft diagrams quickly with TypeScript. Define data models through top-level type aliases and interfaces and it automatically lays out things out in an efficient way. [GitHub repo.](https://github.com/3rd/tsdiagram) 

Andrei Neculaesei   

[StyleX: Meta's CSS-in-JS Styling System](https://stylexjs.com/blog/introducing-stylex/) — A newly open sourced “CSS-in-JS” library from Meta made up of a JavaScript syntax and compiler for styling web apps. Jack Herrington has [▶️ a 13-minute screencast](https://www.youtube.com/watch?v=6ZDiGtg1jN4) taking a practical look. 

Goel and Gallagher (Meta)   

[Simplify Debugging with Console Ninja's Predictive Logging](https://console-ninja.com/?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) — Smart predictions and ahead of time logging saves you multiple iterations of adding logs and re-running your app to get the values you need. 

Wallaby Team sponsor   

[tsParticles 3.0: Particles, Confetti and Fireworks for Your Pages](https://particles.js.org/) — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support. 

Matteo Bruni   

[Culori: A General-Purpose Color Manipulation Library](https://culorijs.org/) — Supports most color spaces and formats defined in the CSS Colors Level 4 spec and can parse, convert, mix, create color differences, and more. [GitHub repo.](https://github.com/Evercoder/culori) 

Moqups   

[Perfume.js 9.2: Web Performance Library for Measuring User-Centric Metrics](https://github.com/Zizzamia/perfume.js) — A tiny web perf monitoring library that reports data back to your favorite analytics tool and supports the latest browser performance APIs for precise metrics on things like first paint, total blocking time, etc. 

Leonardo Zizzamia   

[Timenames: A Unique Name for Each Second of the Day](https://github.com/iaseth/timenames) — The author had an app and wanted to create more interesting unique filenames without using the time directly. There’s [a live demo](https://timenames.redpapr.com/) showing the names in action. 

Ankur Seth   

[YouTube.js 8.0: A Wrapper Around YouTube's Private 'InnerTube' API](https://github.com/LuanRT/YouTube.js/releases/tag/v8.0.0) — It uses the same behind the scenes API as official YouTube clients, rather than the official developer API, so, as always, your mileage may vary. 

LuanRT   

[Feel the Power of More Than 420,000 Teammates and Work #LikeABosch](https://www.bosch.com/careers/why-bosch/culture-and-benefits/?utm_campaignid=javascript&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=brief&utm_content=recognition) 

Bosch sponsor   

- [Storybook 7.6](https://storybook.js.org/blog/storybook-7-6/) – The frontend UI component workshop.
- [Mantine 7.3](https://github.com/mantinedev/mantine) – Full featured React component suite.
- [swup 4.5](https://github.com/swup/swup) – Page transition library for server-rendered sites.
- [wavesurfer.js 7.5](https://github.com/katspaugh/wavesurfer.js) – Audio waveform rendering and playing.
- [Nano Events 9.0](https://github.com/ai/nanoevents) – An event emitter library in 107 bytes.
- [AdminJS 7.5](https://adminjs.co/) – Admin interface for webapps.
- [AVA 6.0](https://github.com/avajs/ava/releases/tag/v6.0.0) – Popular test runner for Node.         

Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/cooperx86) 

'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