# Talk Notes: Third Age of JavaScript - Three Years In

Original: https://swyx.io/third-age-2022
Published: 2022-05-07

> Slides and show notes for my updated Talk at Reactathon

> Edit: This talk was also picked up on [The New Stack](https://thenewstack.io/the-third-age-of-javascript-an-update-from-reactathon/) and on the [JSParty podcast](https://changelog.com/jsparty/226), thanks to Richard and Jerod for the feature!

For the first time, I presented an updated version of my [Third Age of JS talk](https://www.swyx.io/js-third-age/) at Reactathon 2022 this past week. The full talk is available on livestream ([timestamp here](https://youtu.be/Ck-e3hd3pKw?t=19926)) and I will update this post when the separate video is out.


{% youtube CGnlBU3K_eM %}

<details>
	<summary>
Livestream version
	</summary>

{% youtube Ck-e3hd3pKw %}

</details>



Meanwhile, please check out [the slides](https://docs.google.com/presentation/d/1O6m6J3UR49Cw91xgD9_Zz6SactPglGYqWlDHLRCz_-Q/edit#slide=id.g8c6e57bea8_0_71) and the raw talk plan below, as well as [Richard McManus' fantastic writeup about the talk](https://thenewstack.io/the-third-age-of-javascript-an-update-from-reactathon/) over at the New Stack!

swyx

## Original talk

- If the First Age was about building out a language, and the Second Age was about users exploring and expanding the language, the Third Age is about clearing away legacy assumptions and collapsing layers of tooling.
- In summary: Third Age JS tools will be
	-   Faster
	-   ESM first
	-   Collapsed Layers (One thing doing many things well instead of many things doing one thing well)
	-   Typesafe-er (built with a strongly typed language at core, and supporting TS in user code with zero config)
	-   Secure-er (from dependency attacks, or lax permissions)
	-   Polyglot
	-   Neo-Isomorphic (recognizing that much, if not most, JS should run first at buildtime or on server-side before ever reaching the client)
- The result of all of this work is **both a better developer experience** (faster builds, industry standard tooling) and **user experience** (smaller bundles, faster feature delivery). It is the final metamorphosis of JavaScript from site scripting toy language to full application platform.


## Updated talk

Framework for new developments
- 1. Validation of current bets
	- ESM is growing
	- IE11 deader
	- State of JS 2021
		- React ecosystem npm charts/downloads https://twitter.com/swyx/status/1498761714153947137/photo/1
		- Nextjs default
- 2. Incrementally adoptable tools
	- eng manager whose #1 priority is reducing yarn start time from minutes to seconds
	- Tooling shift
		- Node -> Deno
			- https://github.com/elsaland/elsa
			- https://github.com/boa-dev/boa
		- Webpack -> Vite
		- Babel -> swc
		- Jest -> vitest
		- Prettier ->  dprint?
		- eslint -> rslint?
		- nvm -> fnm
		- dprint / rslint
		- TypeScript -> notypescript??
			- Prisma
			- edgedb builder https://www.edgedb.com/
		- Rust won?
			- but swc choosing go
			- https://leerob.io/blog/rust
		- Qwik, Solidjs
		- bun: https://github.com/Jarred-Sumner/bun (zig)
		- Partytown
		- Module federation/microfrontends fail
	- Browser IDEs
		- Stackblitz - WebContainers
		- Gitpod
		- GH Codespaces https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/
		- Coder.com, Replit
	- Monorepos emerging
		- turborepo
		- nx
- 3. New architectures
	- VC funding - Deno, Rome, Remix, Flightcontrol, Xstate
	- "Neo-isomorphic": ISR, bootloaders, No SSGs
		- eleventy
		- gatsby v4
		- React 18/server components
		- metaframeworks
			- Nestjs, Remix, Redwood and Blitz
	- Smart client vs Smart servers
		- https://www.swyx.io/client-server-battle
		- https://github.com/jlongster/absurd-sql
	- Incremental First, Edge Second
		- no need for node
		- cheaper than lambda
		- minimal build times
		- deno, cloudflare workers
		- https://nextjs.org/docs/advanced-features/middleware
	- Rise of Web Standards
		- clientside: Remix
		- serverside: CF Workers and Deno- Wordpress
		- by 2025 more than 50%
- 4. New languages
	- WASM
		- https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en
		- https://suborbital.network/ vs fermyon? v different
		- https://www.infoworld.com/article/3651503/the-rise-of-webassembly.html
			- https://medium.com/disney-streaming/introducing-the-disney-application-development-kit-adk-ad85ca139073
		- Replit used LLVM + WASM to run Python in JS
		- PyScript uses WASM to run Python in Browser
		- Blazor/.NET
		- JavaScript has a WASM story too [via QuickJS](https://blog.scottlogic.com/2022/06/20/state-of-wasm-2022.html)!
	- Flutter/Dart
	- Liveview/Phoenix
	- Hotwire/Rails
	- Streamlit/Python?
	- React for everything else
		- Dagster
		- Temporal

- opportunities
	- Beginner: Teach
		- scrimba
		- courselift ryan chenkie
		- josh comeau
		- egghead
		- frontendmasters
	- Intermediate: self provisioning runtimes
		- serverless cloud
		- begin/temporal
		- dev/prod isolation??
	- Advanced: **Bring back the open web**
		- wordpress https://twitter.com/swyx/status/1507028477345558531
			- JS weight - 500kb https://httparchive.org/reports/state-of-javascript - rising 19% in 2020
				- 36% unused https://almanac.httparchive.org/en/2021/javascript#fig-4
				- 84% jquery 8% react https://almanac.httparchive.org/en/2021/javascript#fig-25
			- low code/no code - budibase, builder.io, prismic/plasmic/stackblitz
			- "visual basic for React"  utopia.app
		- desktop vs mobile
			- https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-200901-202203 56% mobile 41% desktop
			- https://www.mobiloud.com/blog/mobile-apps-vs-mobile-websites
			- make hardware


## discard pile
- BaaS
	- supabase, convex, hasura, 
	- planetscale, xata
- telemetry back into dev - sentry, replay, apollo engine
	- https://www.apollographql.com/docs/devtools/editor-plugins/#performance-insights