This report provides a detailed look at the significant developments in frontend development during the first half of November 2024. It covers the latest updates, tools, and approaches shaping the frontend scene, including React 19's full-stack features, XState for managing state, Shopify's move to React Native, improvements in Next.js 15, and how container queries impact responsive design.
React
TanStack Start: Challenging Next.js
TanStack Start is emerging as a formidable competitor to Next.js, focusing on its client-first approach, while providing a full-featured server-side capable system, which contrasts with Next.js's server-first model.
XState in React: Streamlining state management for complex UIs
Dive into the power of XState in React applications. Learn how this state machine library simplifies handling complex state logic, enhances UI reliability, and integrates seamlessly with React for predictable and scalable state management.
Shopify’s React Native migration success story
Shopify overhauled its decade-old mobile app using React Native, reducing 1.8M lines of code and achieving faster load times (44% faster), better performance, and higher user ratings.
Quick links
- Seamless React upgrades in micro-frontends
- React Navigation 7: Enhanced developer experience and powerful new features
Next.js
Exploring Next.js 15: What's new and why it's better than ever
Next.js 15 enhances build speed, improves developer experience, and adds new features like full support for React Server Components and expanded App Router functionality. It also improves image optimization with dynamic resizing and global caching.
Advanced search param filtering
Comprehensive guide on implementing search parameter filtering using App Router with startTransition and useOptimistic.
Quick links
- Vercel simplifies Next.js self-hosting
- Integrating WordPress as a headless CMS with React or Next.js
Others
Why frameworks outperform Web components: A deep dive into key drawbacks
Explore the fundamental limitations of Web Components compared to modern frameworks like React, including issues with state management, integration challenges, server-side rendering, and real-world adoption. Understand why frameworks remain the practical choice for developers today.
Enhancing web design with Container queries and the Containment API
Container queries enable responsive design by allowing elements to adjust based on their parent’s size. With widespread browser support, these tools promise to transform design practices, and the author will share practical examples in a future post.
Quick links
Trending
TanStack Start: A Full-Stack React framework for modern web apps
TanStack Start is a powerful full-stack React framework featuring type-safe APIs, robust routing, full-document SSR, streaming, and server functions—perfect for building modern, scalable web applications.
How Recall.ai Cut AWS Costs by $1M with Shared Memory Optimization
Recall.ai reduced AWS costs by $1M annually and cut CPU usage by 50% by leveraging Shared Memory for direct access between processes, eliminating the need for data copying.
Quick links
New tools
HTML to React Chrome extension
Browser extension for converting HTML snippets to React or Figma.
Streamlining Frontend testing with Storybook Test
Storybook Test revolutionizes frontend testing by integrating component, visual, and accessibility tests into one workflow, delivering fast, browser-based results. Developers are invited to shape this game-changing tool through the early access program.
