State of front-end tooling and infra

🤔 Why should I care about tooling and infra?

• The Web is moving fast
• JavaScript is becoming faster? But how?
• Et al. apps are becoming faster
• We should know how to pick tooling
• Developer experience

🤯 Few Thiiiings

• JavaScript Runtimes 🏎️
• Transpilers 📑
• Bundlers 🧵
• Build systems 🔨
• Architectures: Micro front-ends, Islands 🏝️
• Vite, React RSC, Next, Remix, Astro, SvelteKit, Qwik 🗿
• Edge computing 🤖

🦀 Rust

• Systems programming language - control of low-level primitives
• Statically typed
• Memory safe
• Compiled
• No garbage collection
• Different memory management model - ownership and borrow

Go

• Statically typed
• Memory safe
• Garbage collected
• Concurrent
• Compiled
• Efficient
• Simple syntax
• Built-in support for testing and benchmarking

🏎️ JavaScript Runtimes

• Node.js
• Deno Fresh
• Bun Elysia

📑 Transpilers

Transpiler-Architecture.001.jpeg

ref: https://tomassetti.me/how-to-write-a-transpiler/

• Babel
• ESBuild https://esbuild.github.io/ https://github.com/evanw/esbuild/blob/main/internal/ast/ast.go
• SWC

🧵 Bundlers

webpack.png

ref: https://webpack.js.org/

• Rollup
• Webpack
• Parcel
• ESBuild
• TurboPack
• SWCPack
• Rome (more than a bundler)

🔨 Build Systems

• TurboRepo

🏝️ Architectures

• Micro front-ends
• Islands

🗿 Vite, React RSC, Next, Remix, Astro, SvelteKit, Qwik

• Vite
• React RSC https://www.patterns.dev/posts/react-server-components https://beta.nextjs.org/docs/rendering/server-and-client-components
• Next
• Remix
• Astro
• Qwik
• SvelteKit

🤖 Edge Computing

• Computing
• Vercel
• Netlify
• Deno Deploy
• Cloudflare workers
• Fly
• Database
• Turso
• PlanetScale
• Fauna
• Neon