⚡ 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 - https://nodejs.org/en
• Deno - https://deno.com/runtime Fresh - https://fresh.deno.dev/
• Bun - https://bun.sh/ Elysia - https://elysiajs.com/

📑 Transpilers

Transpiler-Architecture.001.jpeg

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

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

🧵 Bundlers

webpack.png

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

• Rollup - https://rollupjs.org/
• Webpack - https://webpack.js.org/
• Parcel - https://parceljs.org/
• ESBuild - https://esbuild.github.io/
• TurboPack - https://turbo.build/pack
• SWCPack - https://swc.rs/docs/usage/bundling
• Rome (more than a bundler) - https://rome.tools/

🔨 Build Systems

• TurboRepo - https://turbo.build/repo

🏝️ Architectures

• Micro front-ends - https://martinfowler.com/articles/micro-frontends.html
• Islands - https://www.patterns.dev/posts/islands-architecture

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

• Vite - https://vitejs.dev/
• React RSC https://www.patterns.dev/posts/react-server-components https://beta.nextjs.org/docs/rendering/server-and-client-components
• Next - https://nextjs.org/
• Remix - https://remix.run/
• Astro - https://astro.build/
• Qwik - https://qwik.builder.io/
• SvelteKit - https://kit.svelte.dev/

🤖 Edge Computing

• Computing - https://blog.cloudflare.com/cloud-computing-without-containers/
• Vercel - https://vercel.com/
• Netlify - https://www.netlify.com/
• Deno Deploy - https://deno.com/deploy
• Cloudflare workers - https://workers.cloudflare.com/
• Fly - https://fly.io/
• Database - https://edge-data-latency.vercel.app/
• Turso - https://turso.tech/
• PlanetScale - https://planetscale.com/
• Fauna - https://fauna.com/
• Neon - https://neon.tech/