Welcome to 2023 May edition of Frontend News. What's in?
- New Javascript features in ECMAScript 2023
- Next JS 13.4
- Firefox 113
- Babylon JS version 6.0
New Javascript features in ECMAScript 2023
The first point from our list today is a quick overview of new proposals that are about to be applied regarding the 2023 annual update to ECMAScript, which is planned for July 2023
The first one - are symbols as weak map keys - this proposal extends the weak map API to allow the usage of unique symbols as keys.
The symbol is the only primitive in ECMAScript that allows unique values. That value by calling symbol expression can be identified then to access its original production. But any reproduction of the same expression - will not restore the original value of any previous production. Objects are used as keys for Weakmaps because they share the same identity aspect.
So symbols as weak maps will make it easier to create and share keys because instead of requiring creating a new object to be only used as a key, it would provide more clarity for the ergonomics of a weak map and the proper roles of its keys and mapped items.
Two other proposals coming up with ECMAScript update are about improving working with arrays, avoiding the need to write functions and loop over data to process it. So we have changed the array by copy method - which gives developers new methods for sorting, reversing and overwriting data without mutating the array it's stored in. This proposal lets developers call a method to change a single element in the array, using with or splice, and get a new array with that single change — or sort and reverse an array into a fresh array but leave the original array unmodified.
The next method is array find from last - it’s returning matching elements in the array starting at the end and working back. It can improve performance and for sure save writing extra code. If it comes to big arrays you don’t have to look through the whole thing or reverse it before you look it up so you don’t have to make a temporary duplicate.
There are also plenty of proposals like iterator helpers and decorators, you can check the full list by following the link attached in the video description.
Next JS 13.4
Another topic for today which we going to speak about now is the 13.4 version of the Next JS, which is marking stability for the App Router and mainly focuses on improvements. It basically means that the App Router can now be adopted as stable for production.
There are plenty of improvements/ features regarding react server components, nested routes and layouts, simplified data fetching, streaming & suspense, built-in set support and more things like Turbopack (beta version) and server actions released in the alpha stage.
We’re gonna make a real quick overview of some of these things.
- This new router (which can be incrementally adopted through the app directory) has an entirely different architecture, built on the foundation of React Server Components and Suspense.
- This foundation has allowed us to remove Next.js specific APIs that were initially developed to extend the React primitives.
- With the new App Router - server components are not included in the JavaScript bundle for the browser. Client components are automatically code split by default (either with webpack or Turbopack in Next.js). Further, since the entire router architecture is streaming and Suspense enabled, we can progressively send parts of our UI from the server to the client.
- What is more - with the App Router - you no longer need to import Html, Head, and Body from Next.js. Instead, you just use React.
- The router is the core of what makes Next.js work. But it's not about the router itself, but how it integrates the rest of the pieces of the framework—like data fetching.
You can read more about all of the latest upgrades in the official next js website post which is linked in the video description.
Firefox 113
The next news from our list is the 113 version release of Firefox. We have plenty of new things, changes, fixes and improvements.
From the developers' perspective, It is now possible to override a JavaScript file in the debugger. In the Debugger, under the Sources tree, you can use the "Add script override" context menu entry. This action will download the file onto your machine, allowing you to edit it.
Also, there have been a few improvements to the debugger search in files feature:
- The panel has been moved to a regular side panel, which allows you to keep the results list visible while opening scripts in the editor;
- Results from minified and pretty-printed tabs, as well as matches from the node_modules folder, are displayed;
- Results from ignored files are hidden;
- Glob patterns and search modifiers are also supported, making it possible to execute case-sensitive or regex searches on specific parts of your project.
What is more, Firefox 113 comes up with redesigned accessibility engine which significantly improves the speed, responsiveness, and stability of Firefox when used with:
- Screen readers, as well as certain other accessibility software;
- East Asian input methods;
- Enterprise single sign-on software;
- Other applications which use accessibility frameworks to access information.
Besides some security fixes, we can also tell you that on macOS can now access the Services sub-menu directly from Firefox context menus. and on Windows, the elastic over-scroll effect has been enabled by default. When two-finger scrolling on the touchpad or scrolling on the touchscreen, you will now see a bouncing animation when scrolling past the edge of a scroll container.
You can check out the full list of improvements, new features and upgrades by following the link in the description.
Babylon 6.0
The last news from our today's list is the latest Babylon 6.0 release.
It brings a smorgasbord of performance improvements, rendering enhancements, and exciting new features. We will mention a few of them. Babylon.js 6.0 brings a complete overhaul of the new Physics API. More power. More control. More features. Easier to use.
Power and performance are at the heart of Babylon.js and version 6.0 comes up with the new Performance Priority Modes that produce up to 50x faster rendering and performance! These new modes give developers new controls over dialling up the performance of their experience by choosing between Backwards Compatibility Mode, Intermediate Mode, or Aggressive Mode. Choosing between these 3 different modes gives you varying levels of functionality and flexibility
What is more - With Babylon.js 6.0, you can now render fluids! This unlocks truly breathtaking imagery right in the browser, running at 60fps!
This new version of Babylon.js also brings a completely updated screen space reflection model, allowing you to render stunning reflections throughout your scene with the highest performance levels possible.
