Frontend Report July 2024
The report for July 2024 gives you a snapshot of what’s happening in the world of web development. React is evolving with Server Components, and Next.js continues to push the boundaries of performance. Vite is solidifying its position as a top build tool, while TypeScript and other frameworks hold steady. Whether you’re looking for the latest updates or just want to stay in the loop, this report has you covered with key trends, tools, and insights to keep you informed.
React
State of React: Aging like fine wine, now with Server Components
This year, React Server Components have shaken up the ecosystem, rivaling the impact of Hooks in 2018. As React 18 sees wide adoption, the future of Server Components is still being figured out. At the same time, SPAs dominate with a usage of 86%.
React Conf 2024: React 19, Server Components & other talks you don’t want to miss
From React 19’s newest features to breaking the rules and real-time server components, React Conf 2024 offers a dynamic lineup including spatial computing, error-solving strategies, and more.
Using React Native frameworks, such as Expo, is now the recommended approach to create new apps
React Native has streamlined the development process by recommending frameworks like Expo. These frameworks offer a complete toolbox for building production-ready apps, saving you from reinventing the wheel.
Quick links
- Using React 19 with Vite and Next.js (youtube.com)
- Sneaky React Memory Leaks: How the React compiler won’t save you | Kevin Schiener
- How Airbnb Smoothly Upgrades React
NextJS
Google’s JavaScript indexing: Myths busted, modern SEO practices embraced
This research has debunked several common myths about Google’s handling of JavaScript-heavy websites. Turns out Google can effectively render and index JavaScript content, including complex SPAs, dynamically loaded content, and streamed content!
Someone built a library that reduced TBT by 380% for NextJS
This component delays the hydration of your elements until they come into view. This can significantly improve initial load performance and reduce time-to-interactive for large pages.
Also see: I built a library that reduced TBT by 380% : r/nextjs (reddit.com)
Secret knowledge to self-host Next.js
Self-hosting Next.js apps can be complex, but Flightcontrol’s guide demystifies the process. They cover essential steps like environment setup, deployment strategies, and optimizing performance.
Quick links
- Flags as Code in Next.js – Vercel
- Differences between the Pages and App Router with RSC Diagram : r/nextjs (reddit.com)
Others
State of JS 2023: TypeScript ascends, React and Vue hold steady, and Next.js dominates
TypeScript continues its ascent, with smaller libraries making waves in the JavaScript world. React and Vue hold steady, while Angular sees a decline. Emerging frameworks like Qwik and Stencil are worth watching.
Next.js dominates the meta-framework space, with strong contenders in SvelteKit and Remix. Testing and build tools evolve, with Vitest and Vite on the rise. Monorepos favor Turborepo and pnpm.
In the backend, Express and Nest reign supreme.
Announcing TypeScript 5.6 Beta
TypeScript 5.6 Beta introduces several new features and improvements, including the using keyword for resource management, better type-checking for JSX, and performance enhancements. It also brings more precise control over tuple types and expanded capabilities for enums.
Vite - The Final Boss of Build Tools
Vite has achieved its goal of becoming a foundational tool in the web ecosystem, with widespread adoption from frameworks like Remix and Angular. The Vite team is creating a unified toolchain with Rust-based tools like Rolldown and OXC for faster and more comprehensive JavaScript and TypeScript handling.
Quick links
- Bytes #309 - War of the Bundlers
- JavaScript — What’s new with ECMAScript® 2024 (ES15) — In Depth Guide | by Igor Komolov | Medium
- Introducing Vercel AI SDK 3.2 – Vercel
Trending
ViteConf 2024: Mark your calendars for October 3rd
ViteConf 2024 promises a 24-hour marathon of talks from top innovators in the Vite ecosystem. From Astro to Svelte, and beyond, get ready to dive deep into the next-gen web.
Astro 4.12 introduces Server Islands, blending static HTML with server-generated components
Extending from islands architecture, Server islands make it easy to combine high performance static HTML and dynamic server-generated components for enhanced performance.
Eureka Labs is revolutionizing education with AI-native schools
Their first offering, LLM101n, is an undergrad course that teaches students to train their own AI, blending teacher expertise with AI assistance.
Quick links
- Accelerating Idea to Production: Using Visual Development + AI to Ship 10x Faster (youtube.com)
- Popover API 101 — Amit Merchant — A blog on PHP, JavaScript, and more
New tools
TurboPack: The Next-Gen Bundler
TurboPack is redefining bundling for JavaScript and TypeScript with its high-performance, incremental approach. Built by the creators of webpack, it promises lightning-fast development speeds by caching tasks at a granular level.
Meet es-toolkit - aka. “lodash on steroid”
A modern JavaScript utility library that’s 2-3 times faster and up to 97% smaller—a major upgrade to lodash, with built-in Typescript support.
React Flow - Node-Based UIs in React
Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more.
Quick links
- TinyBase: The reactive data store for local-first apps.
- Mako: An extremely fast, production-grade web bundler based on Rust.
- render.com: Unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.
- React CodeMirror: CodeMirror is a code editor component for the web. This React-specific component supports React hooks, TypeScript, and more.
- WorkOS — Your app, Enterprise Ready: The Modern Identity Platform for B2B SaaS (SSO, SCIM, and more).