15 crazy new JS framework features you don’t know yet

Summary

In this video, viewers are introduced to 15 groundbreaking features in JavaScript frameworks, including React 19's compiler and Next.js 15's partial pre-rendering. The script also covers new tools like Remix, TAN Stack, and Million Lint, alongside updates to Solid JS, Svelte, Angular, and Vue.js. It highlights the evolution of frameworks like Astro, HTMX, and even the classic jQuery. The video emphasizes the importance of learning to problem-solve like a programmer, with a special offer from Brilliant to enhance programming skills.

Takeaways

• 🌟 Versell introduced NEX js15 with new features like partial pre-rendering, indicating a wave of updates in JavaScript frameworks.
• 🔄 The update to React 19 includes a new compiler feature inspired by frameworks like Svelte and Solid, allowing for ahead-of-time compilation and eliminating the need for certain hooks.
• 📈 Next.js 15 supports the React 19 compiler and introduces partial pre-rendering, enabling a mix of static and dynamic content on the same page with a single HTTP request.
• 🔧 Remix and React Router are merging into one tool called Remix, suggesting future compatibility between the two for routing in web development.
• 🚀 Tan Stack Start is a new project that aims to provide server-side rendering, potentially making Next.js and Remix obsolete.
• 🛠️ Million Lint is a new editor plugin for React that helps identify performance issues in code, enhancing development efficiency.
• 📚 Solid Start version 1.0 offers a meta framework approach similar to Next.js but with minimalism and customizable routing.
• 🔮 Svelte's version 5 introduces a radical new approach using 'runes' for reactive data identification, a compiler macro system.
• 🔄 Angular 18 now supports signal-based change detection with the introduction of 'signals', simplifying code and reducing bundle size.
• 🌬️ Vue.js is developing 'Vue Vapor' mode, a new compilation strategy that aims to maximize performance by surgically updating the DOM.
• 🔄 Quick 2.0 is a notable update in the JavaScript framework space, though specific details are not provided in the script.
• 🔄 Mitosis is a tool that allows writing components in a subset of JSX and compiling them to various frameworks, including React and Svelte.
• 📦 HTM X version 2.0 represents a minimal update, focusing on removing bloat rather than adding new features.
• 🌐 The release of jQuery 4.0 emphasizes the removal of unnecessary features, showing a trend towards streamlined frameworks.
• 📈 Astro project now uses the React 19 compiler and introduces 'Astro Actions' for handling form submissions on both client and server sides.
• 🌐 Hono X is a new project offering server-side rendering with client-side hydration, allowing customization of the rendering process.
• 📦 JSR is a new package manager that transpiles TypeScript and generates API documentation, also providing a registry for JavaScript developers.
• 🎓 The video ends with a promotion for Brilliant, an educational platform focusing on problem-solving skills in programming with hands-on exercises.

Q & A

What new JavaScript framework features were introduced in the last few months according to the transcript?

The transcript mentions 15 new features in frontend JavaScript frameworks, including partial pre-rendering in Next.js 15, a new compiler in React 19, and updates in other frameworks like Remix, React Router, Svelte, Angular, and Vue.js.

What is the significance of the new compiler feature in React 19?

The new compiler feature in React 19 allows for ahead-of-time code compilation, eliminating the need for hooks like use memo and use callback, as the framework can now determine what needs to be rendered without these hooks.

What is partial pre-rendering and how does it work in Next.js 15?

Partial pre-rendering in Next.js 15 allows developers to have both static and dynamic content on the same page, handling everything from a single HTTP request. This is useful for pages that require a combination of static content that doesn't change often and dynamic content that changes frequently.

What is the new project called Remix for a Reason and how does it relate to React Router?

Remix for a Reason is a new project that merges Remix and React Router into one tool. This means that in the future, developers will be able to integrate their Remix code back into React Router code.

What does the new TAN stack project, TAN stack start, aim to provide?

TAN stack start aims to provide features like server-side rendering, which could potentially make Next.js and Remix obsolete by offering similar functionalities across multiple frameworks, including React.

What is Million Lint and how does it benefit React projects?

Million Lint is an editor plugin that analyzes code to find performance issues. It is beneficial for any React project as it helps identify and fix issues that could affect the performance of the application.

What is Solid Start and how does it differ from Next.js?

Solid Start is a meta framework like Next.js for SolidJS, but it serves everything minimal and a la carte, allowing developers to customize even the default file system routing to work the way they want.

What changes were introduced in Svelte version 5?

Svelte version 5 introduced a radical new approach to identifying reactive data using runes, which are compiler macros that tell Svelte how to identify reactive data under the hood, backed by signals like in SolidJS.

What is the significance of Angular 18's support for signals?

Angular 18's support for signals allows developers to write code that is easier to read and debug while also reducing the bundle size, enhancing the performance of the application.

What is Vue Vapor mode and how does it improve performance?

Vue Vapor mode is a new compilation strategy that eliminates the virtual DOM and instead updates the regular DOM surgically, squeezing out every last bit of performance from Vue.js, which is already a very fast framework.

What is the role of Mitosis in relation to JavaScript frameworks?

Mitosis is a tool that allows developers to write components using a subset of JSX and then compile them to any framework like React, Vue, or Svelte. It is essentially a framework for frameworks, even capable of converting Figma components into framework code.

What are Astro actions and how do they simplify form handling?

Astro actions are a feature that allows developers to submit an HTML form and write a function to handle that form submission on the server. This simplifies handling form state and UI updates on both the backend and frontend.

What is the new project Hono X and how does it differ from traditional server-side rendering?

Hono X is a new project that provides server-side rendering with client-side hydration for frontend components but allows developers to bring their own renderer, offering customization in how the framework works, unlike traditional server-side rendering approaches.

What is the JSR package manager and how does it differ from existing package managers?

JSR is a new package manager that automatically transpiles TypeScript code and generates API documentation. It also puts JavaScript developers on a registry, offering a unique feature not found in other package managers.

How does the Brilliant platform help in learning programming concepts and problem-solving?

The Brilliant platform introduces essential programming concepts and provides hands-on exercises that develop the brain to recognize and solve complex problems. It encourages daily learning habits that can improve programming skills over time.

Outlines

00:00

🚀 New JavaScript Framework Features in 2024

The script introduces a plethora of new features in JavaScript frameworks, emphasizing the rapid pace of development in web technologies. It starts with the unveiling of Next.js 15, which includes partial pre-rendering and support for React 19's compiler, allowing for more efficient rendering by eliminating the need for certain hooks. The video promises to cover 15 new features, but also discusses the merger of Remix and React Router, the emergence of the TAN stack with its server-side rendering capabilities, and editor plugins like Million Lint for performance analysis. The script also touches on post-React frameworks like Solid JS and Svelte, which have introduced innovative approaches to reactive data with the release of Solid Start 1.0 and Svelte 5, respectively. Angular 18 and Vue.js are highlighted for their updates, with Angular adopting signal-based change detection and Vue.js introducing a new compilation strategy. The mention of Quick 2.0, Mitosis, and HTMX 2.0 rounds out the discussion on the evolution of JavaScript frameworks, with a nod to the more traditional jQuery 4.0 for its streamlined approach.

05:01

🎓 Learning to Code with Problem-Solving Skills

The second paragraph shifts focus from the technical updates to the importance of learning how to problem-solve like a programmer. It promotes the video sponsor, Brilliant, as a platform for learning essential programming concepts through hands-on exercises that develop the ability to tackle complex problems. The script highlights the benefits of daily practice with concise, rewarding lessons accessible from any device. A special offer for the audience is presented, inviting them to try Brilliant's premium subscription at a discount for 30 days, using a provided URL or QR code. The video concludes with a sign-off, promising more content in the next episode.

Keywords

💡NEX js15

NEX js15 is a new JavaScript framework update mentioned in the script. It is part of the theme of evolving web development tools. The framework introduces features like partial pre-rendering, which is a technique to improve web page performance by mixing static and dynamic content rendering. The script highlights this as an example of the continuous innovation in the JavaScript ecosystem.

💡Partial Pre-rendering

Partial Pre-rendering is a feature of Next.js 15 that allows for a combination of static and dynamic content on the same page. This concept is central to the video's theme of new JavaScript framework updates, as it represents a game-changing approach to web page rendering. In the script, it is used to illustrate how modern frameworks are adapting to handle complex web applications more efficiently.

💡React 19

React 19 is a significant update to the popular React JavaScript library, which is mentioned in the context of introducing a new compiler feature. This feature compiles code ahead of time, eliminating the need for certain hooks like 'useMemo' and 'useCallback', thus streamlining the development process. The script positions React 19 as a crucial update in the landscape of JavaScript frameworks.

💡Remix

Remix is a JavaScript framework that is highlighted in the script as having merged with React Router, creating a unified tool for web development. This merger is part of the broader narrative of the video, which discusses the convergence and evolution of different JavaScript frameworks and tools.

💡Tan Stack

Tan Stack is introduced as a new project in the script, offering a variety of tools that work across multiple frameworks, including React. It is particularly noted for its server-side rendering capabilities, which could potentially make other frameworks like Next.js and Remix obsolete. This concept is tied to the video's theme of innovation and competition among JavaScript frameworks.

💡Million Lint

Million Lint is an editor plugin mentioned in the script as a tool that can analyze code to find performance issues. It is related to the video's theme by showcasing the support tools that accompany the development of JavaScript frameworks, aiming to enhance the efficiency and quality of web development.

💡Solid JS

Solid JS is a post-React framework that is highlighted in the script for its recent release of Solid Start version 1.0. It is described as a meta framework that serves minimalism and customization, which is relevant to the video's theme of the diverse and evolving options available to web developers.

💡Spelt

Spelt is another JavaScript framework discussed in the script, which has introduced a radical new approach to identifying reactive data using 'runes'. This change is part of the video's exploration of how frameworks are innovating to provide more efficient and unique solutions for web development.

💡Angular 18

Angular 18 is mentioned in the script as having officially supported 'zones' change detection, a feature that simplifies code readability and debugging while reducing bundle size. This update is an example of how established frameworks are continuously improving to stay competitive in the JavaScript ecosystem.

💡Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. In the script, it is noted for its development of 'Vue Vapor mode', a new compilation strategy that aims to maximize performance. This aligns with the video's theme of ongoing advancements in JavaScript frameworks.

💡Quick 2.0

Quick 2.0 is a JavaScript framework that is described in the script as 'highly underrated'. It is part of the video's broader discussion of the various frameworks available to developers, emphasizing the range of options beyond the most well-known ones.

💡Mitosis

Mitosis is an adjacent tool to JavaScript frameworks, as mentioned in the script. It allows developers to write components using a subset of JSX and then compile them to any framework, including React, Vue, and Svelte. This tool exemplifies the video's theme by demonstrating the interconnectedness and flexibility of modern web development tools.

💡HTM X

HTM X is a JavaScript framework update discussed in the script, which is noted for its minimal changes in version 2.0. This update is positioned as a counterpoint to the rapid innovation seen in other frameworks, suggesting a different approach to development that prioritizes stability over constant change.

💡jQuery 4.0

jQuery 4.0 is highlighted in the script as a release that removes bloat rather than adding new features. This is tied to the video's theme by illustrating the different paths frameworks can take, with some focusing on simplification and refinement rather than constant innovation.

💡Astro Actions

Astro Actions is a feature enabled by the React 19 compiler in the Astro project, as mentioned in the script. It allows for form submissions to be handled on the server, simplifying both form state management and UI updates. This feature is an example of how updates to underlying technologies can introduce new capabilities to frameworks.

💡Hono X

Hono X is a project mentioned in the script that provides server-side rendering with client-side hydration for frontend components. It allows developers to bring their own renderer, offering customization. This project is part of the video's exploration of the expanding capabilities and flexibility of JavaScript frameworks.

💡JS Registry

The JS Registry is a new package manager introduced in the script, which comes with features like automatic TypeScript transpilation and API documentation generation. It is also humorously noted for allowing JavaScript developers to identify colleagues in their neighborhood, adding a light-hearted touch to the video's discussion of tooling advancements.

Highlights

Versell introduced NEX js15 with new features including partial pre-rendering.

Web developers have access to new tools but must rewrite existing apps due to updates in JavaScript frameworks.

React 19 includes a new compiler feature inspired by frameworks like Svelte and Solid.

Nextjs 15 supports React 19's compiler and introduces partial pre-rendering for mixed content rendering.

Remix and React Router are merging into one tool called Remix, allowing for code remixing.

Tan Stack Start is a new project offering server-side rendering, potentially making Next.js and Remix obsolete.

Million Lint is a new editor plugin for identifying performance issues in React projects.

Solid Start 1.0 is a meta framework that allows for minimal and customizable file system routing.

Svelte 5 introduces a radical new RuneScape-like experience for identifying reactive data.

Angular 18 now officially supports signals for change detection, enhancing readability and reducing bundle size.

Vue.js is developing Vue Vapor mode, a new compilation strategy for performance optimization.

Quick 2.0 is an underrated JavaScript framework with a significant update.

Mitosis allows writing components in a subset of JSX and compiling them to various frameworks.

HTM X 2.0 is a minimal update to the JavaScript framework, focusing on removing bloat.

jQuery 4.0 has been released, focusing on removing unnecessary features for a streamlined framework.

Astro project now uses the React 19 compiler and introduces Astro actions for form handling on the server.

Hono X is a new project providing server-side rendering with client-side hydration for frontend components.

JSR is a new package manager that transpiles TypeScript code and generates API documentation.

Brilliant is a platform for learning programming concepts and problem-solving skills with hands-on exercises.

Transcripts

last week versell unveiled NEX js15 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 gamechanging 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 obsolete Legacy

code and will need to be Rewritten

immediately in today's video we'll look

at not one not two but a ridiculous 15

new features in frontend JavaScript

Frameworks that you probably don't know

yet it is May 28th 2024 and you 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

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 in nextjs 15

next1 15 already has support for the

react 19 compiler but I think the most

interesting new feature is something

called partial pre-rendering 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 uncashed 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 if

you're not using nextjs 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 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 speaking of

react another hugely awesome new feature

is million lint 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 nextjs 4 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 spelt has even bigger changes in

store a few weeks ago they dropped the

spelt version 5 release candidate with a

radical new RuneScape like experience

instead of using plain JavaScript to

identify reactive data you now use runes

which are like compiler macros that tell

spelt how to identify reactive data

under the hood these are backed by

signals just like solid JS but another

big framework also just got signals

angular 18 was released a few days ago

and now officially supports zoness

change detection you take 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 Vue Vapor

mode it's a new compilation strategy

that vaporizes the virtual Dom and

instead surgically updates the regular

Dom to squeeze 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 quii and

basically it allows you to write

components using a subset of jsx then

compile 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

pretty cool but we also have a huge

update from the anti-f framework HTM X

they just drop version 2.0 and this

changes everything it's a JavaScript

framework update where literally almost

nothing changed at all but if 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 react 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 backend 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 serers side rendering like

nextjs with client side hydration for

your frontend 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 town called jsr and

it comes from the team behind Dino it

automatically 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

sponsor brilliant as I've said many

times before the best way to learn is to

learn by doing Brilliance 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 fireship or

scan this QR code for 20% off their

premium annual subscription this has

been the code report thanks for watching

and I will see you in the next one