The freshest news from the frontend world are already here. What’s in today?
- Next.js 13
- Node js 19
- Visual Studio Code new release & updates
- Foal 3.0
We added a transcription of the podcast for you to read. :)
- Hi everybody. You are watching Frontend News.
- 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.
- Yeah, but first tell me please, are you ready for Christmas?
- I'm not ready. But I already started preparation for Black Friday and Cyber Monday.
- What kind of preparation? You prepare your money?
- Yeah, I'm saving my money, I'm looking for some deals. I guess there will be some deals regarding maybe some cyber items.
- Good idea, I'm not prepared to say truly.
- You're not prepared, you're waiting for Santa Claus to come to your house.
- That's true. Okay, that's also a solution.
- Yes. I believe in miracles. But now, we are not waiting for miracles. And we are starting our frontend news content.
- Yes. So the first one is Next JS 13.
- Another news will be Turbopack.
- The third one is NodeJS, version 19.
- Fourth news will be Visual Studio Code new release & updates.
- The last one is Foal version 3.
Next JS v13
- 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.
- 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
- 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.
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)
- 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
- 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.
Visual Studio Code new releases and updates
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- Yeah, see you next time. Thank you and bye.