Transcription

Hey, folks, I'm Addy Osmani. And I'm Katie Hampenius. Blink and you'll miss it. That's how fast the JavaScript framework ecosystem is moving these days. Just when you think you've got a handle on the latest tools and techniques, a new wave of innovation comes along and changes everything. Help you stay up to date. Today we're going to help you navigate the JavaScript framework ecosystem. We'll cover key updates and trends from the last year. We've all been there. You come across a problem that would take just a few minutes to solve manually. But where's the fun in that? No, no, no. As programmers, we embrace the challenge of spending hours, if not days, trying to automate the solution. Even if we fail, at least we tried, right? Today we'll cover some of the latest updates in tooling and ways that modern frameworks automate some of the problems for you. Now we love JavaScript in moderation. Don't throw everything into the kitchen sink. JavaScript can have a positive effect on user experience. Smoother transitions, faster loading of dynamic content, and better interactivity. But much like cake, there is such a thing as having too much of it. And this has become a bit of an unfortunate norm in recent years. This can impact things like interactivity. So do feel free to use JavaScript libraries and frameworks, but in moderation. Did you know that JavaScript frameworks power 45% of the top 1 million sites? That's amazing. Now thankfully folks aren't using them all at the same time, to the best of our knowledge and my mental health. But frameworks can be really powerful, and they're constantly evolving. Now JavaScript frameworks also power 100% of the top AI chat interfaces. Gemini, Google's assistive chatbot, is powered by Angular. JetGPT and Cloud are powered by React and Next.js. Now in the blink of an eye, server-side rendering has gone from a relic of the past to a critical tool for building fast, responsive web apps. Edge computing has emerged as a powerful way to deliver personalized, real-time experiences. And AI is starting to transform the way that we write code itself. Now if you're not paying attention, it is easy to get left behind. But don't worry, that's why we're here. Here's a look at the common features and recent trends in JavaScript meta-frameworks in 2024. Now meta-frameworks are higher-level frameworks that are more opinionated and provide a cohesive structure for building applications. We can see that there's been a lot of convergence across the board in terms of the common features, and many meta-frameworks offer similar features, such as file-based routing being component-based and having a modern SSR story. Recent trends and areas of active evolution include work on fine-grained reactivity, partial hydration, and opinionated components for concerns like image loading. Now Chrome and frameworks care a lot about delivering a great user experience, but we know that not everybody is a performance expert. This is why, for the last five years, we've partnered with some of the largest frameworks to design and ship what's effectively an SDK of components for loading images, fonts, and scripts effectively. They set you up for success. Underpinning this work is modern server-side rendering and hydration. So whether you're using Angular or React server components, we've got you covered. This work has enabled the next generation of user experiences, such as the recent relaunch of The Verge, which uses the image, script, and font components that we built in collaboration with the Next.js team at Vercel. Similarly, Virgin Media 02 observed a 112% increase in sales and a 99.4% reduction in QnA layout shift after moving to the latest Angular hybrid rendering and ng-optimized image that our teams have been collaborating on. Speaking of rendering, server-side rendering, once thought to be a relic of the past, has made a stunning comeback in recent years. Driven by the need for faster initial load times, better search engine optimization, and improved performance, frameworks like Next.js, Nuxt, Astro, and SvelteKit have emerged as the new champions of server-side rendering. Now by rendering pages on the server and delivering the fully forwarded HTML to the client, these frameworks provide an instant loading experience that feels like a traditional multi-page application, but they don't stop there. They also seamlessly integrate client-side rendering and smarter hydration for subsequent page navigations, giving users the feeling of a snappy single-page app. This can improve metrics like largest contentful paint and interaction to Next Paint. Now, it's the best of both worlds, and it's really changing the way that we think about web development. Another example of this is streaming SSR. We can improve interactivity while still server-rendering our application by streaming server-rendering the contents of our app. Instead of generating one large HTML file containing the necessary markup for the current navigation, we can split it up into much smaller chunks. Node streams allow us to stream data into the response object, which means that we can continuously send data down the client. The moment that the client receives the chunks of data, it can then start rendering the contents. Edge computing is the perfect companion to server-side rendering, allowing developers to run server-side logic way closer to the end user. By leveraging edge networks like Cloudflare Workers for cell edge functions and others, we can now perform tasks like personalization, real-time data processing, and dynamic content generation at the edge, significantly reducing latency and really improving the user experience. Now, the newfound ability to run server-side code at the edge is opening up a world of possibilities. Imagine being able to serve fully personalized content to each user, tailored to their preferences and behavior, all without sacrificing performance. Or processing real-time data streams at the edge, enabling instant updates and notifications. The potential applications are truly endless, and the JavaScript framework ecosystem is quickly adapting to make most of this exciting new technology possible. I have a question for you all. What gives you a feeling of power? Is it money? Is it status? Or is it opening up your terminal in front of non-programmers? Now we've got lots of updates on framework tooling coming up, so we'll hopefully have you covered. As we've seen, the JavaScript framework ecosystem is undergoing a period of rapid change and innovation. Server-side rendering, edge computing, and AI-powered developer tools are just a few of the trends reshaping how we build for the web. All the frameworks that will thrive in this new landscape are those that can adapt and evolve to meet these challenges head-on. Let's dive right into better understanding these changes, starting off with Angular. Angular has really been on a roll recently. So much so that the Angular ecosystem is calling it the Angular Renaissance. Today I'm excited to talk you through some of the highlights of these recent releases. In addition, make sure to check out this week's Angular keynote for more information on Angular 18. Signals are not a new concept, but Angular's choice to adopt them certainly generated a lot of buzz. Simply put, Angular signals are a system for granularly tracking where and how state is used in your application. Signals wrap a given value and then notify interested consumers when that value changes. Signals can be used with any type of value, whether it is a simple primitive or a complex data structure. Although Angular is working on making it possible to create new Angular projects without using RxJS as a dependency, Angular signals are designed to work seamlessly with RxJS. Angular's non-destructive hydration, which was introduced in the Angular version 16 developer preview, is a game-changer for Angular applications that use server-side rendering. Simply put, non-destructive hydration eliminates the flicker that would occur when hydrating a server-rendered Angular application. During destructive hydration, the server-rendered DOM would be destroyed and then rebuilt on the client side. When the DOM was destroyed, the flicker would occur. Non-destructive hydration solves this problem by reusing the server-rendered DOM. Not only does eliminating this flicker make for a better-looking user experience, but it also helps improve Core Web Vitals like LCP and CLS. Angular sites that make the switch to server-side rendering typically see a median LCP improvement of 200 milliseconds. So if you've been holding off on adopting server-side rendering in your Angular application, now would be a great time to make the switch. In addition, Angular has also been working on an optimization over non-destructive hydration called partial hydration. With partial hydration, by default, the browser will not load any of the page's JavaScript when the page is rendered. Instead, specific parts of the application are hydrated as the user interacts with the page. This fine-grained code loading results in faster initial rendering. The developer preview of partial hydration will be available in the next couple of weeks. Energy-optimized image, or the Angular image directive, was a collaboration between the Aurora team and the Angular team that seeks to automate the adoption of image-loading best practices. When you use the image directive, you can mark images as priority. Doing so will ensure that these images are loaded with a high fetch priority. In addition, when appropriate, the image directive will also add pre-connect and or pre-load resource hints for these images. The image directive is also designed to be convenient. It will handle things like URL and source set generation for your images. And it will also enforce setting width and height attributes on images in order to prevent CLS. In addition to adopting the image directive in your component templates, you may also want to try out Angular's new built-in control flow. This new syntax is an alternative to using directives like ng-if, ng-for, ng-repeat, and so on when authoring component templates. One way that the Angular team has put the new built-in control flow to use is in their new deferrable views feature. Deferrable views is a feature that makes it possible to defer the loading of specific components, directives, and pipes. For example, you can defer loading a dependency for a specific period of time until the content enters the viewport, until the main thread is idle, and so on. Deferrable views are implemented using a defer block in your component template. This block wraps the section of the template that you want to delay loading. In addition, you can specify a placeholder that is displayed before the content is loaded and or a placeholder that is displayed while the content is being loaded. If your Angular app has any expensive components or dependencies that aren't used right away, deferrable views can be a great way to help reduce your initial bundle size and startup time. In addition, keep an eye out for future work from the Angular team that builds upon deferrable views. For more information on these Angular features, check out Angular's new website, angular.dev. React is constantly evolving, and the team has been hard at work researching and developing new features to improve developer experience and user experience. React Server Components combine the benefits of server-centric and client-side rendering for efficient data fetching. The framework is also working on Asset Loading APIs for seamless loading of scripts, styles, fonts, and images across all React environments. Offscreen rendering, which improves performance by deprioritizing hidden content and enabling new patterns, is also pretty exciting. Transition Tracing is a new profiling API that assists developers in tracking interactions and identifying performance bottlenecks more effectively. Today, I'll be diving into two of these features more deeply, React Compiler, which automatically generates memoization code to optimize re-renders, and Server Actions, which simplify communication between components and the server for data mutations and form handling. We'll explore how they work, what their benefits are, and how they can help you build better React apps. Let's get started. As React developers, we strive to build apps that provide a great user experience. However, achieving optimal performance often comes at the cost of developer experience. You really want to write component code that's like this to-do list that's clean and readable. But what about once performance becomes a concern? Imagine if we have to execute changes hundreds of times. We find ourselves resorting to manual memoization techniques, such as UseMemo, UseCallback, and ReactMemo, to optimize our components. Now, while these techniques work, they can make our code harder to read, understand, and maintain. Here's an example of a to-do list component that uses manual memoization. As you can see, the code is more verbose and harder to reason about. We have to wrap the to-do component with ReactMemo, UseUseCallback for the handle change function, and UseMemo for filtering the to-dos based on visibility. These optimizations come at the cost of readability and maintainability. Imagine if we could write React code without worrying about manual memoization. What if we could have the best of both worlds? A great developer experience with regular JavaScript values and syntax, and a great user experience with fast, fine-grained Reactive updates. This is where React Compiler comes in. React Compiler is a new build tool that automatically optimizes your React app. It works with plain JavaScript and understands the rules of React, so you don't need to rewrite any code to use it. The React team has been testing it out in meta and is already powering a few production surfaces like Instagram. The biggest impact the React team has seen from the compiler is preventing the cascade of unnecessary renders. React can sometimes do more work than needed when an entire subtree needs to be re-rendered, even though not much has changed in the UI. The compiler can figure out exactly what's needed to prevent cascading renders and compile fine-grained memoization versions of your code to stop that. The React team has seen that the compiler can do this even more precisely and granularly than if you'd used useMemo or useCallback by hand. In this example, we have the same Todoist component, but without any manual memoization. The React compiler optimizes the code by creating memoized versions of the handleChange function, the filtered todos, and the rendered JSX. It also intelligently updates the memoized values only when the relevant dependencies change. So just write in the idiomatic React code. With React Compiler, we can write idiomatic React code and let the compiler handle the optimizations for us. Auto-memoization is the main optimization that's been built so far, so other ideas like autodependency arrays for APIs like useEffect haven't been worked on just yet, but the team is discussing it. Auto-memoization is just the first step in the journey of optimizing your React app. The goal of React Compiler is to provide the best of both worlds, a great developer experience and a great user experience, without any compromises. By automating the memoization process, React Compiler allows you to focus on building amazing apps rather than worrying about low-level optimizations. If you want to prepare for React Compiler, the React team highly recommends using strict mode and React's ESLint rules to fix issues that these tools highlight. By following the rules of React, you'll have a healthier code base, and it'll also give the compiler an easier time when it's ready. Next up are server actions. Server actions are a game-changing feature in React that allow you to seamlessly integrate server-side logic with your React components. They maybe missed a trick here in not calling them reactions. Server actions provide a declarative way to handle data mutations and form submissions, making it easier to build interactive apps. With server actions, you can define server-side functions that can be invoked directly from your React components, eliminating the need for manual API calls and complex state management. Let's see server actions in action using a todo example. First, we define our server-side function addTodo using the useServer directive. This function receives the form data as a parameter and performs the necessary server-side mutations, such as adding the todo to a database. In our React component, we create a form and specify the action prop with the addTodoServer action. When the form is submitted, React automatically invokes the addTodo function on the server, passing the form data as an argument. Server actions handle the form submission and perform the server-side mutations seamlessly. Now, beyond handling actions, server actions also streamline fetching data from the server. Unlike that last example where we focused on adding todos, here we use server actions to fetch and display todos. This shift demonstrates server actions' versatility in both sending data to the server and retrieving it. By using a getTodoServer action, we can directly fetch the list of todos from the server and render them in our React component, showcasing the power of server-side logic integration for both read and write operations. Now, while we won't be going deep into React performance, I did want to give a shout-out to INP, Interactions to Next Paint. It's the new Core Web Vital metric that assesses page responsiveness, like the latency of all click, tap, and keyboard interactions within a page. Check out our guide to learn how you can use features like startTransition to improve the responsiveness of your pages. As we've seen, React Compiler and server actions represent a significant leap forward in React development. By leveraging these powerful tools, developers can achieve optimal performance and productivity without sacrificing code quality or maintainability. React Compiler automatically optimizes our code, allowing us to focus on writing clean, idiomatic React. Server actions revolutionize server-side logic integration, enabling a declarative approach that eliminates complex boilerplate and enhances the developer experience. I encourage you to embrace these cutting-edge tools and witness their transformative power firsthand. Dive into the React Conf talks, explore the code examples, and experience the joy of writing clean, performant, and maintainable React code. The future of web development with React is bright, and adopting React Compiler and server actions is going to help you stay at the forefront. Next.js is a framework built on top of React that has exploded in popularity over the past couple of years. Next.js started off as a project that provided server-side rendering, code splitting, and other functionality for React apps. Today, many years later, Next.js continues to introduce new functionalities into the React ecosystem, and is currently the only framework to support some of React's newer features like React Server Components, Suspense, and Server Actions. One of the biggest changes to Next.js in recent memory was the introduction of App Router. App Router is a new way of structuring and managing routing within your Next.js application. Perhaps even more importantly though, App Router makes it possible to use new Next.js features like shared layouts and nested routing, as well as new React APIs like React Server Components, Suspense, and Server Actions in your Next.js application. We don't have time to deep dive on App Router today, however, luckily, Next.js has released a complete course on this. You can find this course at nextjs.org slash learn. App Router is a big change for Next.js. Another big change that Next.js has been working on is their TurboPack build tool. Currently, Next.js apps typically use Webpack. However, Vercel has been working on a successor to this called TurboPack. Once ready, TurboPack should provide significantly faster development builds and will also support hot module replacement. Another experimental feature we're excited about is partial pre-rendering. Partial pre-rendering is a new approach to page rendering that is built on top of React Suspense API. Partial pre-rendering renders a page using a static loading shell. However, the shell leaves holes for the dynamic content within the page, and this content is loaded asynchronously. As a result, you can get many of the performance benefits that come from serving a cacheable static page while simultaneously being able to incorporate dynamic data into your page content. One last feature that I want to mention is Vercel's v0. v0 is a free-to-try tool that uses AI to generate user interfaces built using React, Tailwind CSS, and ShadCN. To do this, you can either prompt v0 by describing what you want to create, for example, a contact form or a to-do list, or you can upload an image of the desired results. Not only is this a cool idea, but I also think it is probably one of the first examples we've seen of AI being incorporated into framework tooling. With AI being such a hot topic, it's going to be super interesting to see how v0 and simpler tools evolve over the coming years. Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. With the latest release of Remix, we're entering a new era of extensibility and versatility for the framework, bringing exciting new features and improvements. With the release of Remix 2.7, the Remix Vite plugin is now stable. Vite, a next-generation front-end build tool, provides a lightning-fast development server and optimized production builds. By integrating Vite, Remix gains powerful new capabilities and access to the extensive Vite plugin ecosystem. In fact, with Vite, Remix is no longer a compiler. Remix itself is just a Vite plugin. With this, you'll get access to the entire ecosystem of Vite plugins. This lets the team focus on making the core of Remix the best that it can be, while letting Vite plugins handle the rest. Remix is being used in production a lot these days. Shopify chose Remix to bring their successful Shop mobile app to the web due to its flexibility, performance, and seamless integration with their existing infrastructure. Using Remix, the Shop team rapidly developed and launched a web version of their app in just three months. The switch to using Remix with Vite significantly improved the developer experience, resulting in a 90x improvement in hot module replacement times. This allowed for a fast feedback loop and enabled the team to iterate quickly on new features and improvements. One of the most significant additions to Remix is SPA mode. This allows building purely static sites that don't require a JavaScript server in production, while still benefiting from Remix's conventions like file-based routing, automatic code splitting, route module prefetching, and much more. SPA mode unlocks new migration paths for existing React router users to adopt Remix without having to switch to a fully server-rendered architecture. It provides an easier on-ramp to Remix's features and its conventions. And for those who want to introduce a server later on, the transition is now much smoother. Remix Vite includes several other valuable enhancements, such as first-class support for Cloudflare pages, support for splitting Remix server code into multiple bundles, and a new plugin preset system for customization, as well as improved conventions for splitting server-only and client-only code. These enhancements make Remix an even more powerful and flexible framework for building modern web apps. Remix also recently introduced experimental support for the View Transitions API, allowing developers to create smooth, animated transitions between pages. This can be easily implemented using the new LinkUnstableViewTransition prop, the ViewsViewTransitionStateHook, or the NavLinkUnstableViewTransitionHelper. For more granular control, the ViewsViewTransitionStateHook can be used to apply styles based on the transition state. The NavLinkUnstableViewTransitionHelper also makes it possible to apply transition classes to links. For a more complete example, check out the Remix fork of the Astro Records demo. Looking ahead, Remix V will become the default in upcoming Remix releases. Users are encouraged to begin migrating to Remix V soon. Expect continued evolution of Remix's SPA and hybrid server-client strategies in future releases, with advanced techniques becoming more practical to deploy as the ecosystem matures. Remix's collaboration with the V team will continue to make both tools better for everyone, allowing Remix to focus on innovating at the framework level to provide the best user experience for developing web apps. VIEW is a well-loved framework that needs no introduction. It has stood the test of time, and its features have not only impacted VIEW users, but also the larger ecosystem. For example, many implementations of signals draw their inspiration from VIEW. And widely used tooling, like VEET, also trace their roots back to the VIEW ecosystem. VIEW recently released VIEW 3.4, which includes a wide variety of performance improvements. To start, some of these performance improvements involve improvements to VIEW's reactivity system. For example, computed properties will now only trigger effects when the computed value has changed. In addition, the shift, unshift, and splice array methods now only trigger synchronous effects once. Lastly, multiple computed dependency changes will only trigger synchronous effects once. Collectively, the end result of these various improvements is a reduction in the number of unnecessary component re-renders. In addition, VIEW 3.4 also contains a complete rewrite of VIEW's template parser. As a result of this change, the parser can now parse single file components in about half the time. As an end user, the result of these changes is that you should see slightly faster build times, as well as improvements to the execution times of plugins like VIEW TypeScript and other plugins that rely on the VIEW parser. Moving forward, one of the VIEW features that I'm most excited about is VIEW Vapor Mode. Vapor Mode is a performance-oriented, opt-in compilation strategy for single file components that is currently under development. Given the same VIEW single file component, Vapor Mode will generate JavaScript code that is more efficient than the code that is currently generated by the standard VIEW compilation strategy. You don't have to use Vapor Mode for your entire app. You can pick and choose where you use it on a per-component basis. However, if you do use Vapor Mode throughout your entire app, it eliminates the need for the VIEW virtual DOM, and this will reduce your bundle size. Nuxt is an application framework for VIEW that is known for providing a great developer experience. Nuxt comes with built-in server-side rendering capabilities, support for modern tooling like Nitro and Vite, and boasts a rich ecosystem of over 200 Nuxt modules that provide a plug-and-play interface for integrating anything from analytics and databases to SEO and UI into your Nuxt app. One of the ways that Nuxt has recently been working on further improving the developer experience is through their Nuxt DevTools. Rather than being a browser extension, Nuxt DevTools show up as a floating panel alongside your app in the browser. This makes it possible for them to provide a wide variety of incredibly detailed and visually rich interfaces. In addition to that, Nuxt DevTools also supports community modules. This means that if you use a tool like Vite Test or Tailwind CSS that has a UI for Nuxt DevTools, those UIs will show up in the Nuxt DevTools as well. Recently, the Nuxt Core team has also been working on a variety of new modules for Nuxt. One of these modules is Nuxt Fonts. Nuxt Fonts is designed to make it easy to use and configure fonts in your Nuxt application. Nuxt Font takes care of many of the font-related best practices that can be easy to forget. For example, adding resource hints, generating fallback fonts, and caching fonts from third-party font providers. Another module that Nuxt has been working on recently is Nuxt Scripts & Assets. Nuxt Scripts & Assets provides a variety of utilities to help you optimally load third-party resources. For example, the UseScript composable gives you fine-grained control over how you load a third-party script. However, if you're loading a popular third-party library like Google Analytics or YouTube, you can instead take advantage of the third-party wrapper feature. If some of the new Nuxt features that I've mentioned sound interesting, but you're still on Nuxt 2, you might want to check out version 3 of Nuxt Bridge. Nuxt Bridge is a tool designed to help ease the migration process from Nuxt 2 to Nuxt 3. This is important given that the end of life for Nuxt 2 is June 2024. Moving to Nuxt 3 will become even more important when Nuxt 4 is released in the near future. Keep an eye out for the release of Nuxt 4, as well as the release of upcoming Nuxt modules like Nuxt Accessibility, Nuxt Auth, and Nuxt Hints. One of the standout features of Astro is its island architecture, which encourages small, focused chunks of interactivity within server-rendered web pages. The output of islands is progressively enhanced HTML, with more specificity around how the enhancement occurs. Instead of a single application controlling full page rendering, there are multiple entry points. The script for these islands of interactivity can be delivered and hydrated independently, allowing the rest of the page to be just static HTML. This approach offers a more granular and efficient way of adding interactivity to your site without compromising performance or user experience. View transitions are a game-changer when it comes to creating seamless, app-like experiences on the web. With Astro's built-in support for view transitions, developers can easily implement smooth transitions and animations between different pages or states on their sites. The Astro community has heavily embraced this feature early on, recognizing its potential to elevate the user experience and create more engaging sites. By leveraging view transitions, you can create a more polished and professional look for your sites, keeping users engaged and focused on the content. Implementing view transitions in Astro is incredibly simple, as demonstrated in the code example. With just two lines of code, you can add a fade transition to your pages, instantly enhancing the overall look and feel of your site. As users navigate through your site, they'll appreciate the smooth, polished transitions that keep them engaged. When combined with Astro Islands, view transitions can be even more powerful. Astro Islands can be persisted across page navigations, maintaining their state and interactivity. This is particularly useful for components like audio or video players, where users expect the content to continue playing seamlessly as they navigate through the site. One common surprise when using view transitions is that inline scripts don't automatically rerun when the page changes. To address this, Astro now includes a DataAstroRerun attribute that can be added to inline script tags to automatically rerun the script whenever the page changes. This makes it easier for developers to create a cohesive and engaging user experience. Streaming is a powerful technique that allows Astro to partially render your site, sending chunks of content to the user's browser as soon as they're ready. This approach can significantly boost your website's performance, providing a faster, more responsive experience to your users during loading. In Astro 4.4, the team discovered that using node-async-iterable instead of readable stream could lead to substantial performance improvements when streaming content. This optimization reduced build times for sites with things like large sidebars, up to 47% in some cases. By leveraging streaming and the optimizations introduced in Astro 4.4, developers can achieve faster build times and improved runtime performance without any additional configuration or changes to their code. Speculation rules are a cutting-edge web API that allow developers to pre-render pages on the client side, preparing content before the user navigates to it. Astro has experimental support for pre-rendering pages using this API, as detailed in the Astro 4.2 release. By leveraging speculation rules, Astro can pre-render pages that users are likely to visit next, allowing for faster navigations and improved perceived performance. Astro also provides a fallback for browsers that don't yet support the speculation rules API, ensuring that all users can benefit from this performance optimization. Next up is images. Astro's new image handling capabilities make it easier than ever to optimize images for your site. The centerpiece of this update is the image component, which allows you to effortlessly integrate optimized images into your Astro pages. When you use the image component, Astro automatically optimizes your image using the modern WebP format by default. It also includes important attributes like width, height, loading, and decoding to improve accessibility, page load performance, and user experience. The output is a simple image element with the optimized image source and all the necessary attributes, ensuring that your images load quickly and efficiently without causing layout shifts. In addition to the image component, Astro also provides the getImage function for more advanced use cases. This function allows you to optimize remote images on demand, without using the component directly. For example, you can use getImage to apply an optimized image as a background to a div using inline CSS. This flexibility allows you to create custom image components tailored to your specific needs, while still leveraging all of Astro's powerful image optimization capabilities. One of Astro's other standout features is the Dev Audit UI, a powerful tool that helps developers identify and address accessibility and performance issues. With the Dev Audit UI, you can easily spot potential problems and receive real-time feedback and guidance on how to fix them. Accessibility is a crucial aspect of web development, and ensuring that your site is usable by everyone, including those with disabilities, is important. Astro's accessibility audits will flag any issues related to color contrast, keyboard navigation, and a lot more, helping you create a more inclusive web experience. Similarly, performance audits will highlight areas where your site can be optimized for speed, such as reducing the size of images or minifying CSS and JavaScript files. By utilizing the Dev Audit UI, you can ensure that your site is both accessible and performing, providing a better user experience for all. The Astro ecosystem is constantly growing, with new integrations, themes, and tools being developed to support and enhance the framework. By embracing Astro, you're not just adopting a cutting-edge tool, but also joining a community of like-minded individuals who are committed to building a better web. So, I invite you to explore Astro further, dive into the docs, and join the conversation. Svelte is a framework known for performance. Part of this is due to the Svelte compiler, which rather than ship your code directly to the browser, takes your Svelte code and in return generates highly optimized JavaScript. This approach helps reduce bundle sizes and makes Svelte a great choice for use cases where responsiveness is important. Runes are a new feature in Svelte 5 that changes how you manage reactivity within Svelte applications. Behind the scenes, runes use signals to achieve fine-grained reactivity. Using runes, you declare a piece of reactive state by using the state rune. Unlike simply declaring state using a let declaration, using the state rune clearly indicates to both you and the compiler that a given piece of data declares reactive state. To declare derived state, in other words, state that is derived from another state, use the derived rune. And lastly, to trigger effects, use the effect rune. The effect function will automatically subscribe to any state values that it reads, and then trigger its callback after the DOM has been updated. This is just a high-level overview of Svelte 5's new rune syntax. You can try it out today, either on a per-component basis, or throughout your entire app. SvelteKit is the application framework for Svelte. As such, it provides features like routing, server-side rendering, and static site generation, as well as deployment tools. Svelte recently released SvelteKit 2. It includes a variety of improvements, such as the adoption of Vite 5, support for shallow routing, and the introduction of an image component. The image component contains many of the features that you would have come to expect in an image component. However, in my opinion, one of the coolest things about it is that you don't even have to use Svelte to take advantage of it. The Svelte image component will work with any Vite-based project. You know, they say Googling your symptoms doesn't make you a doctor. Well, as programmers, we might be guilty of looking the other way when it comes to this advice. Thankfully, there's been a lot of work put into baking in better defaults into frameworks, so you have a few less problems you have to solve yourself. As we conclude our journey through the JavaScript framework ecosystem, it's clear that the landscape is dynamic, ever-evolving, and filled with possibilities. We've explored the unique strengths and features of popular frameworks. Remember, the true power lies in your skills, creativity, and ability to harness those frameworks to build remarkable web experiences. The frameworks are tools, but it's your vision and dedication that will bring your ideas to life. So go forth and build what's next. Push the boundaries of what's possible with JavaScript frameworks. Combine their strengths, leverage their unique features, and create apps that make a difference. The future of web development is in your hands, and with the right framework by your side, there's no limit to what you can achieve. Stay curious, stay passionate, and keep building. Thank you, and happy coding! Microsoft Mechanics www.microsoft.com www.microsoft.com www.microsoft.com