Next.js 13, Turbopack, Node.js 19 and more. November edition - Frontend News #30

The freshest news from the frontend world are already here. What’s in today?

• Next.js 13
• Turbopack
• Node js 19
• Visual Studio Code new release & updates
• Foal 3.0

We added a transcription of the podcast for you to read. :)

Transcription

Olga

Hi everybody. You are watching Frontend News.

Bartosz

My name is Bartosh and here it's Alda. Okay, let's go. Today we're gonna have five pieces of news for you and we are so happy to share it with you.

Olga

Yeah, but first tell me please, are you ready for Christmas?

Bartosz

I'm not ready. But I already started preparation for Black Friday and Cyber Monday.

Olga

What kind of preparation? You prepare your money?

Bartosz

Yeah, I'm saving my money, I'm looking for some deals. I guess there will be some deals regarding maybe some cyber items.

Olga

Good idea, I'm not prepared to say truly.

Bartosz

You're not prepared, you're waiting for Santa Claus to come to your house.

Olga

That's true. Okay, that's also a solution.

Bartosz

Yeah.

Olga

Yes. I believe in miracles. But now, we are not waiting for miracles. And we are starting our frontend news content.

Bartosz

Yes. So the first one is Next JS 13.

Olga

Another news will be Turbopack.

Bartosz

The third one is NodeJS, version 19.

Olga

Fourth news will be Visual Studio Code new release & updates.

Bartosz

The last one is Foal version 3.

Next JS v13

Bartosz

So, jumping to the first news, which is Next JS version 13. It comes up with plenty of new things and we're gonna highlight a few of them. First thing which we are going to talk about are layouts. The second thing which we’re gonna mention are this first point - layouts.

The app/ directory makes it easy to lay out complex interfaces that maintain state across navigations, avoid expensive re-renders, and enable advanced routing patterns. You can then define layouts through the file system. Layouts share UI between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

Another thing is Streaming. The app/ directory introduces the ability to progressively render and incrementally stream rendered units of the UI to the client.

With Server Components and nested layouts in Next.js, you're able instantly render parts of the page that do not specifically require data, and show a loading state for parts of the page that are fetching data. With this approach, the user does not have to wait for the entire page to load before they can start interacting with it.

The thing which we have to also mention in terms of the new next js release are Server Components.

The app/ directory introduces support for React's new Server Components architecture. With Server Components, we can build complex interfaces while reducing the amount of JavaScript sent to the client, enabling faster initial page loads. When a route is loaded, the Next.js and React runtime will be loaded, which is cacheable and predictable in size. This runtime does not increase in size as your application grows.

Turbopack

Olga

Turbopack: is the successor to Webpack and will be the Web’s next-generation bundler. It is high-performance bare-metal tooling—open source today, for all frameworks in the future.

Turbopack is built on a new incremental architecture for the fastest possible development experience. On large applications, it shows updates 10x faster than Vite and 700x faster than Webpack.

On even larger applications, the difference is greater—often 20x faster than Vite.

Turbopack only bundles the minimum assets required in development, so startup time is extremely fast. On an application with 3,000 modules, Turbopack takes 1.8 seconds to boot up, while Vite takes 11.4 seconds.

To start, Turbopack will be used for the Next.js 13 development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more.

NodeJS in version 19

Bartosz

Third news which we're going to speak about is NodeJS in version 19. So we are excited to tell you that NodeJS 19 was released.

Highlights include the update of the V8 JavaScript engine to 10.7, and HTTP(s)/1.1 KeepAlive enabled by default.
Node.js 19 will replace Node.js 18 as ‘Current’ release line when Node.js 18 enters long-term support (LTS) later

Whats interesting about it ?

node --watch (experimental)

Bartosz

An exciting recent feature addition to the runtime is support for running in ‘watch’ mode using the node --watch option. Running in ‘watch’ mode restarts the process when an imported file is changed.

HTTP(S)/1.1 KeepAlive by default

Bartosz

Starting with this release, Node.js sets keepAlive to true by default. This means that any outgoing HTTP(s) connection will automatically use HTTP 1.1 Keep-Alive. The default keep-alive duration is 5 seconds.

Enable keep-alive will deliver better throughput as connections are reused by default.

Additionally, the agent is now able to parse the response Keep-Alive which the servers might send.

V8 10.7

Bartosz

The V8 engine is updated to version 10.7, which is part of Chromium 107. This version includes a new feature to the JavaScript API: Intl.NumberFormat.

Visual Studio Code new releases and updates

Bartosz

Now it's time for Visual Studio Code new releases and updates. Visual Studio code comes up with the October release and there are many updates in this version that we hope you will like.

There are many updates in this version that we hope you'll like, some of the key highlights include -

- Search include/exclude folders - Quickly set folders to include/exclude in the tree view.
- Command Center mode shortcuts - Displays commonly used modes before recent files list.
- Merge editor improvements - Access Combination option to auto merge conflicts.
- Markdown automatic link updates - File and image links updated on rename/move.
- More audio cues - Task completed or failed, Terminal Quick Fix available.
- vscode.dev protected branch workflow - Create new branch when committing to protected branch.
- New Python extensions - New standalone extensions for isort, Pylint, and Flake8.
- Dev Container Templates - Create new Dev Containers based on existing templates.

Foal 3.0

Olga

And the last but not least is Foal version 3.0. For those who don't know, Foal is a Full-featured typescript based Node.js framework.

Foal is a Full-featured typescript based Node.js framework. The version 3 comes up with the new features and upgrades and we’re gonna make a quick overview over some of them.

Full support of TypeORM v0.3

Olga

For those new to Foal, TypeORM is the default ORM used in all new projects. But you can use any other ORM or query builder if you want, as the core framework is ORM independent.

TypeORM v0.3 provides greater typing safety and this is something that will be appreciated when moving to the new version of Foal.

Authentication

Olga

The @UseSessions and @JWTRequired authentication hooks called obscure functions such as fetchUser, fetchUserWithPermissions to populate the ctx.user property. The real role of these functions was not clear and a newcomer to the framework could wonder what they were for.

File upload

Olga

When uploading files in a multipart/form-data request, it was not allowed to pass optional fields. This is now possible.

The interface of the @ValidateMultipartFormDataBody hook, renamed to @ParseAndValidateFiles to be more understandable for people who don't know the HTTP protocol handling the upload, has been simplified.

Better typing

Olga

The use of TypeScript types has been improved and some parts of the framework ensure better type safety. And that's all news for today.

Bartosz

Yeah, unfortunately that's it. You can watch other videos on our channel and check frontendhouse.com and maybe our open positions if you're interested. If you are not, you can check also the links of our news which are linked below.

Olga

Yeah, see you next time. Thank you and bye.