15 crazy new JS framework features you don’t know yet - 雙語字幕
Last week, Vercel unveiled Next.js 15, and it's got some awesome new features you don't need, like partial pre-rendering.
However, this is just the tip of the iceberg for game-changing new JavaScript framework updates in the last few months.
The good news is that web developers have all sorts of shiny new tools to play with,
but the bad news is that any web app you built before watching this video contains totally legacy code,
and will need to be rewritten immediately.
In video,
we'll look at not one, not two, but a ridiculous 15 new features in front-end JavaScript frameworks that you probably don't know yet.
It is May 28th, 2024, and you're watching the code report.
But first, we need to talk about React 19 and its new compiler feature.
I made a full video about this a few weeks ago,
but basically it takes a hint from frameworks like spelt and solid to compile code ahead of time
instead of using the virtual DOM which allows the framework to eliminate hooks like use memo and
use callback because now it already knows what needs to be re-rendered and you don't need to
jump through these hoops to do it in your code.
That's a huge win for react and brings us to the updates and next JS15.
Next 15.
already has support for the React 19 compiler.
But I think the most interesting new feature is something called partial prerendering.
Normally, when you render a web page in next, it's either static when the data doesn't change very often, or it's dynamic when the data is uncached
and it's constantly changing.
But sometimes you might have a page that requires both.
Like maybe you have a blog post that could be statically rendered.
but then it has a bunch of comments below it that should be dynamically rendered.
Well, now you can put static content and dynamic content on the same page, but handle everything from a single HTTP request.
But if you're not using Next.js, there's a good chance you're using its arch nemesis, Remix, or React Router.
Well, a couple weeks ago, they announced that these two tools are now becoming one and the same.
It's called Remix for a Remix.
reason.
In the future,
you'll get to remix your remix code back into React Router code,
but if that exceeds your tolerance for ridiculousness, another routing option can be found in the TAN stack.
It provides a variety of tools that work on multiple frameworks,
including React,
but what's interesting is that it's cooking up a new project called TAN stack start that provides features like server-side rendering,
thus making next- JS and Remix completely obsolete.
Now of React, another hugely awesome new feature is MillionLint.
This comes from the same guy who figured out how to make React a million times faster.
And basically it's an editor plugin that can analyze your code to find performance issues.
It's really a no-brainer for any React project.
But you know what, screw React.
It's time to move on to post React frameworks like solid.js, which just released solid start version 1.0.
It's a meta framework like next.js for solid, but everything is served minimal and all a cart.
Like you can even take the default file system routing and customize it to work the way you want it to.
Pretty cool, but Svelte has even bigger changes in store.
A few weeks ago, they dropped the Svelte version 5 release radical new RuneScape-like experience.
Instead using plain JavaScript to identify reactive data, you now use runes, which are like compiler macros, that tell Svelte how to identify reactive data.
Under the hood, these are backed by signals, just like SolidJS, but another big framework also just got signals.
Angular was released a few days ago, and now officially supports Zoning.
homeless change detection.
You advantage of it by writing signals,
which make your code easier to read and debug,
while also reducing the bundle size, thus making the greatest JavaScript framework of all time even better.
Vue.js is also cooking up some new vaporware called View Vapor Mode.
It's a new compilation strategy that vaporizes the virtual DOM and instead surgically updates the regular DOM.
It's too squishy.
out every last bit of performance from an already very fast framework.
Another big update is the release of Quick 2.0, a highly underrated JavaScript framework.
However, if you're having a hard time keeping track of all these frameworks, an adjacent tool you should know about is Mitosis.
It comes from the same team that built Quick, and basically it allows you to write components using a subset of JSX, then can pop.
them to any framework, like react, view, spelt, etc.
It's a JavaScript framework for frameworks for frameworks for frameworks, and can even turn your Figma components into framework code.
It was pretty cool, but we also have a huge update from the anti framework, HTMLX.
They just dropped version 2.0, and this changes everything.
It's a JavaScript framework update where literally almost it's nothing changed at all.
But you're a real OG who never bought into the JavaScript framework hype, you're likely still using jQuery, and they just released version 4.0.
This release doesn't add a bunch of new unnecessary features,
instead it removes a bunch of bloat, which is the final phase of enlightenment for a JavaScript framework.
But I'm still on this side of the bell curve, and just updated my astro project to use the reason.
the 19 compiler, which enables a cool new feature called Astro Actions.
With Actions,
we can submit an HTML form,
then write a function that handles that form submission on the server,
making it easy to handle the form state as well as UI updates on both the back end and front end.
But one of my favorite new back end JavaScript frameworks is HONO.
I used it in my new Stripe course for Fireship.
Pro members,
but the framework authors just released a new project called HONO X,
which provides server-side rendering like Next.js with client-side hydration for your front-end components,
but allows you to bring your own renderer to truly customize the way the framework works.
But in order to use any JavaScript framework, you'll likely need a package manager like NPM.
Well, there's a new package manager in 10.
called JSR, and it comes from the team behind Dino.
It transpiles all your TypeScript code and generates the API documentation.
But most importantly,
it finally puts JavaScript developers on a registry so you can identify where they live in your neighborhood and keep your children away from them.
And there you have it, 15 awesome new JavaScript framework features for 2024.
But if you really want to learn how to build cool web apps,
it's far more important to learn how to problem solve like a programmer.
You can start making that happen for free thanks to this video's sponsor, Brilliant.
As I've said many times before, the best way to learn is to learn by doing it.
Brilliant's platform will introduce you to essential programming concepts,
but most importantly,
the hands-on exercises will develop your brain to recognize and solve complex problems that developers need to overcome on a daily basis.
Best of all, every lesson is concise and rewarding.
By investing just a few minutes each day, you'll develop habits that can level up your programming skills for the rest of your life.
And you can do it anywhere, even from your phone.
To try everything brilliant has to offer for free for 30 days.
visit brilliant.org slash fireship or scan this QR code for 20% off their premium annual subscription.
If this has been the code report, thanks for watching and I will see you in the next one.
解鎖更多功能
安裝 Trancy 擴展，可以解鎖更多功能，包括AI字幕、AI單詞釋義、AI語法分析、AI口語等
兼容主流視頻平台
Trancy 不僅提供對 YouTube、Netflix、Udemy、Disney+、TED、edX、Kehan、Coursera 等平台的雙語字幕支持，還能實現對普通網頁的 AI 劃詞/劃句翻譯、全文沉浸翻譯等功能，真正的語言學習全能助手。
支持全平臺瀏覽器
Trancy 支持全平臺使用，包括iOS Safari瀏覽器擴展
多種觀影模式
支持劇場、閱讀、混合等多種觀影模式，全方位雙語體驗
多種練習模式
支持句子精聽、口語測評、選擇填空、默寫等多種練習方式
AI 視頻總結
使用 OpenAI 對視頻總結，快速視頻概要，掌握關鍵內容
AI 字幕
只需3-5分鐘，即可生成 YouTube AI 字幕，精準且快速
AI 單詞釋義
輕點字幕中的單詞，即可查詢釋義，並有AI釋義賦能
AI 語法分析
對句子進行語法分析，快速理解句子含義，掌握難點語法
更多網頁功能
Trancy 支持視頻雙語字幕同時，還可提供網頁的單詞翻譯和全文翻譯功能