What's new in the world of Frontend?
- NextJS 13.2
- Gatsby & Netlify
- Turborepo 1.8
- What's New In DevTools (Chrome 110)
- Lighthouse 10
NextJS 13.2
The first news in our today’s agenda is the latest release of NextJS. It brings plenty of major improvements to the App Router:
- Built-in SEO Support
- Route Handlers
- MDX for Server Components
- Rust MDX Parser
- Improved Error Overlay
- Statically Typed Links (Beta)
- Turbopack Improvements (Alpha)
- Next.js Cache (Beta)
We're gonna now tell you a little bit about some of them.
Route Handlers
In short, it is a new, more modern version of API Routes that was deeply integrated into the new routing system for the app.
Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.
They have an isomorphic API to support both Edge and Node.js runtimes seamlessly, including support for streaming responses.
Route Handlers are available in 13.2 for the App Router (app) using the route.ts special file. They are not available in the pages directory, as they are a replacement for API Routes.
Improved Error Overlay
NextJs team made a number of improvements to the error overlay. Stack traces are now separated, making it easier to identify where the error is coming from. What is more, the error overlay now displays the current version of Next.js, to help you understand whether your version is up to date.
NextJS Cache
With the latest version of NextJS - the team introduces an evolution of ISR that enables progressive ISR at the component level, faster refreshes without network requests and also faster redeploys of code changes to static pages. It is especially crucial for pages that have more gradual data fetching process, mixing static and dynamic, now Next JS uses a more granular cache. It means that you can now encapsulate static or dynamic data alongside their consuming component.
Of course, there are much more things to cover and talk about - you can check the documentation and full list of them at the official next js website or in the link attached to our video description.
Gatsby & Netlify
This news is about to announce to you that Gatsby js is joining Netlify in order to grow and collaborate with Gatsby's technology and share its composable and reusable javascript architectures across the web.
What does it really mean for Gatsby? Generally, there are a few important pieces updates and upcoming fun things that will gonna happen for Gatsby users and the community that we will gonna mention:
The first one - Gatsby will continue to evolve and grow - many of Gatsby’s core contributors will join Netlify and continue to maintain the Gatsby framework contributing also to notify’s mutual open source software commitment.
Second - a lot of Gatsby features, concepts and optimizations will be incorporated into Netlify. It means that many innovations, especially for large heavy websites, and collaboration workflows, will be integrated into the Netlify platform and for sure make a huge impact across available across popular frameworks everywhere.
Last but not least - the newest Gatsby product - Valhalla Content Hub, which takes Gatsby graph ql data layer and provides it for any frontend framework will at build time become available as a part of Netlify’s platform. It will be then available to all frameworks.
What it all means? These composable architectures are chosen for increased website performance, to enable using the best tools and services available, to increase velocity and improve the client, developer and marketer experience, and to build a website that you can confidently scale.
We encourage you to follow this collaboration by the link we provided in our description or just visit the official Gatsby/Netlify website to explore and follow the latest news about that.
Turborepo 1.8
The third news on our agenda is the latest release of turborepo which reached version 1.8.
It brings better flexibility, to our codebase by improving its structure and implementation of workspaces. We’re gonna mention the most important one so:
Workspace configuration - you are now able to add json turbo file configuration to override the root configuration in your repository.
This functionality will enable teams to scale ownership of the projects in their monorepos by moving away from global project configuration to fine-grain control over tasks in workspaces.
The second thing - automatic workspace scoring - automatically infers your browser's current workspace so that it runs that workspace’s tasks only.
It means that with version 1.8, turbo will automatically detect the workspace you are creating something in and generate the --filter syntax to scope your task to that workspace.
Last but not least - the easier migrations - automatically migrate to a new version of turbo with the new command. Turbo/codemod now provides a simple migrate command which both upgrades your repo to the specified versions. You can try it with nix @turbo/codemod migrate command and it will do everything for you.
If you want to check the full list of the latest turborepo release improvements and features - please check our link attached in the video description.
Chrome 101 news
The next news from our today’s list which we’re gonna talk about is a bunch of new improvements in chrome 101.
The first big thing is the recorder update. It offers now a split code view, which makes it easier to view your user flow code. The Recorder highlights the corresponding code as you hover over each step on the left, making it easy to track your flow. You can change the code format using the dropdown, which lets you switch between formats such as the Nightwatch Test script. What is more, you can also Customize selector types of a recording and edit this user flow.
The second key thing is the Clearing Performance Panel on reload. It means that now The Performance panel clears both the screenshot and trace when you click the Start profiling and reload page button. What's the difference? The panel now always provide navigating to the about:blank page first to guarantee that the recording begins with a blank trace. This aligns with the Performance Insights panel which already did the same.
Another worth mentioning improvement is a more ergonomic and consistent Autocomplete feature in the console. This means that DevTools enhances the autocompletion experience by implementing the following changes:
- The tab is always used for auto-completion.
- The behaviour of Arrow right and Enter varies based on context.
- The auto-completion experience is consistent across text editors, in the Console, Sources, and Elements panels
For the full list of the Chrome 101 new features - please feel free to check the link attached to our video description.
Lighthouse 10
The last news for today is Lighthouse 10 and the new changes that come up with this version.
For those who don’t know - Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites.
The major improvement which we’re gonna mention regarding this particular release is the Back/Forward cache tool. It is one of the most powerful tools available for improving a page's performance for real users. Beyond the normal browser cache, a page loaded from the bfcache will restore page layout and execution state nearly instantly, largely skipping all page load activity and getting your page in front of your users immediately as they navigate backward and forward through their history. This new Lighthouse audit actually navigates away from the test page and back again to test if it's back/forward cache, and lists the reasons if it fails.
And also some good news for the node users - If you use Lighthouse as a Node library, there are a few programmatic breaking changes in this release you may need to account for. Lighthouse 10 also ships with full TypeScript type declarations! Anything written or imported from Lighthouse should now be typed, which could be really helpful.
