15 crazy new JS framework features you don’t know yet - Bilingual Subtitles
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.
Unlock More Features
Install the Trancy extension to unlock more features, including AI subtitles, AI word definitions, AI grammar analysis, AI speaking, etc.
Compatible with Major Video Platforms
Trancy not only provides bilingual subtitle support for platforms like YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, but also offers AI word/sentence translation, full-text immersive translation, and other features for regular web pages. It is a true all-in-one language learning assistant.
Supports All Platform Browsers
Trancy supports all platform browsers, including iOS Safari browser extension.
Multiple Viewing Modes
Supports theater, reading, mixed, and other viewing modes for a comprehensive bilingual experience.
Multiple Practice Modes
Supports sentence dictation, oral evaluation, multiple-choice, dictation, and other practice modes.
AI Video Summary
Use OpenAI to summarize videos and quickly grasp key content.
AI Subtitles
Generate accurate and fast YouTube AI subtitles in just 3-5 minutes.
AI Word Definitions
Tap on words in the subtitles to look up definitions, with AI-powered definitions.
AI Grammar Analysis
Analyze sentence grammar to quickly understand sentence meanings and master difficult grammar points.
More Web Features
In addition to bilingual video subtitles, Trancy also provides word translation and full-text translation for web pages.