From cd8871ed9ee16755130bfe19cb7f49da73aa9170 Mon Sep 17 00:00:00 2001 From: Thanh Hai Date: Thu, 19 Dec 2024 09:50:22 +0700 Subject: [PATCH] meno: frontend market report first half of december 2024 --- ...tend-report-first-half-of-december-2024.md | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 Frontend/Report/frontend-report-first-half-of-december-2024.md diff --git a/Frontend/Report/frontend-report-first-half-of-december-2024.md b/Frontend/Report/frontend-report-first-half-of-december-2024.md new file mode 100644 index 00000000..72020c6a --- /dev/null +++ b/Frontend/Report/frontend-report-first-half-of-december-2024.md @@ -0,0 +1,104 @@ +--- +tags: + - frontend + - market-report +title: Frontend Report First Half of December 2024 +short_title: "Dec 2024 (First Half)" +description: A comprehensive update on key advancements in frontend development for the first half of December 2024, highlighting official release of React 19 and the cool updates in Next.js 15.1, along with some innovative tools that are making waves in the industry. +date: 2024-12-18 +authors: + - hthai2201 +--- + +## React + +### [React 19 is officially here](https://react.dev/blog/2024/12/05/react-19) + +The moment we've all been waiting for! React 19 has officially landed. React 19 is here with game-changing features! Actions simplify state management with built-in handling for errors and optimistic updates. New hooks like useOptimistic and useActionState make development smoother than ever. Plus, enhanced Suspense boosts performance for better user experiences. Dive into the future of React now! + +### [React 19: Ref callbacks - More than just DOM access](https://tkdodo.eu/blog/ref-callbacks-react-19-and-the-compiler) + +Ref callbacks in React 19 can now return cleanup functions, similar to useEffect, allowing for tasks like measuring DOM nodes with ResizeObserver. While ref callbacks are useful for accessing nodes, useEffect is better suited for side-effects unrelated to the node, and Tanstack React Query should be used for async operations. + +### Quick Links + +- [Mastering React internationalization with i18next](https://lingual.dev/blog/getting-more-out-of-i18next-in-react/) +- [Boost React app speed with INP optimization](https://kurtextrem.de/posts/improve-inp-react) + +## Next.js + +### [Next.js 15.1 embraces React 19!](https://nextjs.org/blog/next-15-1) + +Next.js 15.1 is here, embracing React 19 with official support! Enjoy seamless integration, enhanced debugging tools, and smarter error handling for a smoother development experience. + +### [Next.js on Deno deploy: A new frontier](https://deno.com/blog/nextjs-on-deno-deploy) + +Next.js SSR apps can now run on Deno Deploy. It’s fast, scalable, and a glimpse into the future of serverless tech. + +### [Scaling micro-frontends with Next.js multi zones](https://techhub.iodigital.com/articles/building-scalable-micro-frontends-with-next-js-multi-zones) + +Managing independent deployments for large teams just got easier! Next.js multi zones make building scalable micro-frontends a breeze. + +### Quick Links + +- [Introducing efficient Valkey-based caching for Next.js](https://blog.platformatic.dev/introducing-efficient-valkey-based-caching-for-nextjs) +- [SSR: Debunking myths and delivering real value](https://t3.gg/blog/post/ssr-is-not-expensive) +- [Why Dato CMS chose Astro over Next.js](https://www.datocms.com/blog/why-we-switched-to-astro) + +## Others + +### [Bring AI to your browser with Transformers.js](https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser) + +Run AI tasks right in the browser! Transformers.js leverages a pipeline API that is easy to use and can perform tasks like sentiment analysis and object detection. All processing occurs client-side, no server needed + +### [Architectures of modern front-end applications](https://blog.meetbrackets.com/architectures-of-modern-front-end-applications-8859dfe6c12e) + +This article goes over various front-end application architectures. The `classic` approach organizes projects into basic folders like pages, components, and helpers, but can quickly become chaotic and hard to maintain as the app scales. The `modular` approach divides applications into layers (pages, modules, components, and UI), making sure of encapsulated logic and clear separation of responsibilities. The `feature-sliced design` approach is a more refined modular approach that structures the project by functional features instead of layers. + +### [New HTML and CSS features: Making interactive elements easier without JavaScript](https://zeroheight.com/blog/the-lowdown-on-dropdowns-in-html-css/) + +The popover attribute allows developers to add popovers effortlessly, while CSS Anchoring offers more reliable positioning. The new calc-size() function makes it possible to animate elements to and from auto height, bringing more flexibility to animations. Plus, updates to `
` and `