What you missed in Front End in 2024.

Happy New Year! A lot has happened in 2024. Here's a rundown of the biggest news of Front End that you may have missed.

Welcome to 2025!

All lot has happened in Front End in 2024. If you blinked, you missed some important updates. From major releases of frameworks to cool AI tools that are reshaping how we write code, there’s a lot to keep up with.

Before we jump into the updates, I want to take a moment to express my gratitude for your support. Creating educational content is my passion, and your encouragement fuels my efforts. If you find my work valuable, consider supporting me on GitHub or Patreon. Your contributions help me continue producing high-quality courses and resources for all of you.

Now, let's do a recap of front end updates in 2024.

React 19 Is Stable!

The long-awaited React 19 is now stable.

React Actions: Simplifies form handling with server-side actions, reducing the need for manual submission handlers.

React Compiler: Introduces auto-memoization, optimizing slow components automatically and reducing unnecessary re-renders.

New hooks:

• useFormStatus: Tracks form submission status, including pending and submitted states.

• useActionState: Simplifies state updates during form submissions.

• useOptimstic: Supports optimistic UI updates for instant feedback.

Server Components: Server Components are now stable!

Next.js 15 Released!

Next.js 15 brings some major updates and breaking changes:

• Async APIs for headers, cookies, params, and searchParams:

  • These APIs are now asynchronous, which is a breaking change. For example, params now returns a promise.

  • A codemod is available to assist with upgrading your codebase to the new API.

• Turbopack: Now stable, Turbopack is Next.js’s answer to faster builds and live refreshes, making the development process smoother and faster.

• Caching:

  • The default caching behavior has shifted from force-cache to no-store. Developers can now opt-in to specific caching strategies.

  • GET functions are no longer cached by default.

Angular 19 Released

Angular 19 is here with some cool updates:

Standalone Components by Default:

• You no longer need to specify standalone: true to define standalone components.

• For module-based components, ng-update automatically adds standalone: false.

• Linked Signals (Experimental):

  • Writable signals that reset based on a computed value, ideal for optimistic updates.

• Incremental Hydration (Developer Preview):

  • Angular now allows incremental hydration through `@defer` attribute.

  • Incremental hydration is a technique through which we delay a component’s hydration on the client side.

  • This can be helpful for a server side rendered page with a long list of components. Instead of hydrating the entire page at once, we can selectively delay hydration of some components in order to make the page faster.

Astro Updates

Astro continues to redefine the static web with:

• Content Layer: A game-changer for content-heavy websites. Developers can now seamlessly pull data from various sources, such as Markdown, MDX, databases, or APIs, and integrate it directly into Astro projects. This makes it easier to compile data from multiple sources into a unified application!

• Server Islands: Building on Astro's island architecture, server islands enable embedding server-side logic directly into static sites, allowing for dynamic features like user authentication or live updates without compromising on speed.

Solid Start

SolidStart, the opinionated framework for SolidJS projects, has a major release. It includes built-in routing, SSR support, and tooling for a fast, best-practices foundation.

Svelte 5

Svelte 5 is here!

CSS Enhancements

CSS keeps evolving with powerful new features:

• New Color Systems (LCH, LAB, HWB): Provide a broader spectrum of vibrant and precise color options.

• calc-size(): A new property for dynamic size calculations, making responsive design even more powerful.

• Subgrid: Enhances the CSS Grid layout by allowing nested grids to align with their parent grids.

• :has() and :is() Selectors: Simplify complex CSS selections, making it easier to apply styles based on element relationships.

Full details in this blog.

JavaScript Updates

1. Temporal API

2. Top-Level Awaitt

3. Object.groupBy

4. Promise.withResolvers

5. RegEx /v flag

A well-written blog here

TanStack Start

A Next.js alternative designed with client-side rendering by default. Developers can opt-in for server-side rendering only when necessary, offering a lightweight approach to building modern web apps.

AI Tools Spotlight

AI tools to watch :

• Cursor: AI-assisted code editor.

• CoPilot: GitHub's AI assistant for code suggestions and best practices.

• Claude: Conversational AI for brainstorming and planning.

• Augment: AI-driven productivity insights for project management.

Vite 6

Vite 6 introduces several significant enhancements:

• Experimental Environment API: Lets framework authors replicate production environments in development.

• Performance Boosts: Integration with tools like Rolldown and Oxc, developed by VoidZero, is set to boost both build and development performance, streamlining the development process.

• Ecosystem Expansion: Adds support for TanStack Start, One, and Ember.

Check out the official Vite 6 announcement.

What’s new from me?

• I Launched a React Course! Check it out here

• AMA to celebrate 2,000 YouTube Subscribers: THANK YOU for your support! I couldn’t have achieved this without you. I am hosting an AMA on Friday, January 16 at 10:00 AM PST. Come and join!

• 30-Day Livestream Challenge: I am building an OpenAI app in public for 30 days and livestreaming every single day to share progress. Come and hang out, while learning how to build OpenAI apps.

My BIG GOALS this year

1. Get monetized on YouTube.

   This is where I am today. I will report back at the end of the year how it goes.

   

2. Write a book. I am currently brainstorming topics. Know of a good topic? Let me know!

3. Create TWO more courses. I am already working on these! I am excited to show you what I create.

What do I need from you?

Creating educational content is my passion, and I pour my heart into it for you. If my work has been helpful, here’s how you can help keep me motivated:

Ways to Support

1. GitHub Sponsorship. I’m aiming for 10 monthly sponsors, and I’m currently 30% there. Your support would mean the world to me!

2. Patreon: Supporting me on Patreon directly contributes to the creation of more courses and resources.

3. Subscribe and Share
   Not in a position to support financially? That’s okay! You can still help by subscribing to my YouTube channel, sharing this newsletter with friends, or dropping a kind comment.

Your support—big or small—makes a huge difference. Thank you for being part of this journey!

Have a great year ahead. I hope this year brings you new heights of success.