Node v18, Redux v8 and new plugins - Frontend News #25

The 25th episode full of fresh news is on the channel! What’s in?

1. Node v18.0 release
2. Jest 28: changes and features
3. New Figma Plugin For Storybook
4. Typescript 4.7 BETA
5. React-Redux v8.0.0
6. React Native 0.68
7. Firefox 100

Transcription

Olga

Hi guys. Nice to see you here today in our studio. Today we have frontend news for you. My name is Olga and here is Bartosz.

Bartosz

Hello guys. We have seven pieces of news for you from the frontend world.  

Olga

The first news is note version 18. 

Bartosz

Another news will be Jest v28. 

Olga

Then Figma plugin for Storybook. 

Bartosz

Then we're going to talk about TypeScript 4.7 beta. 

Olga

We will also talk about React Redux version eight. 

Bartosz

Then we're going to talk about React native zero point 68 and Firefox 100. 

Olga

So let's go. So what's the first news? 

1. Node v18.0

Bartosz

The first news will be NodeJS version 18. And what's the most important thing in it? So the most breaking change is V eight engine upgrade to version 10.1. So I will start by speaking about an update for the V8 engine to version 10.1 which is basically the part of chromium 101. 

In short, it adds

- findLast() and findLastIndex() array methods
- improvements to the Intl.Locale API
- improved performance of classifieds and private class methods (the initialization of them is now much faster)

The new set of globally available browser compatible APIs

Bartosz

The next new thing which we would like to mention is a set of the new globally available browser-compatible APIs. We have now a global fetch API available by default in the Node.js core. Although It will be experimental for now until more test coverage is added. You can now try it out on your own.  

Olga

Have you already? No, but we will. 

Bartosz

Yes. The next API added in version 18 is Web Streams API - also in the experimental stage. It means that we have now access globally to methods like ReadableStream, WritableStream, TransformStream and others - you can check the full list of all APIs on the official Node.js site. What is more about the new version of Node.js? We have also now test runner module in the experimental stage, which facilitates the creation of Javascript tests, we can use it now by importing it with the „node:” prefix. Besides that, we have also some toolchain and compiler upgrades.

Olga

Is that it for the first news? 

2. Jest 28: changes and features

Bartosz

Yes, that's it. And we can now switch for the next news which is Jest 28, which comes with really long-requested features and breaking changes and we are going to speak about some of them. 

Olga

Cool. So let's speak about them.  

Bartosz

Yeah. So firstly we have sharding of test run - and what exactly does it mean?

It means that we have now —a shard CLI option, which allows us to run parts of our tests across different multiple machines. It’s really one of the Jest’s oldest requested features from the community.

Package.json exports

Bartosz

The next thing which we are going to talk about is Package.json exports. With JEST version 28 we have now full support for exports which was previously introduced and minimally shipped in version 27.3 when it supported only the main entry point. 

Now it provides notes and notes addon condition and browser condition. And this basically resolves once and for all. One of the biggest compatibility issues of Jest. 

Fake timers

Bartosz

Another new feature regarding the latest version of JEST is the ability to customize the behaviour of fake timers. Just to remember - Fake timers were previously introduced as a concept in version 26 of Jest, then in 27 made by default. In Jest 28, we have now more of the underlying implementation through both configuration and runtime APIs

There are also plenty of other new features which we can highlight for you now so we have also GitHub Actions Reporter, some new ECMAScript Modules added, asynchronous resolvers and setup files, some extensions and improvements regarding using JEST with typescript and custom plugins, and much more - if you guys want you can check the full list of new features and improvements on the official JEST website.

Olga

All links will be in the description. 

Bartosz

So we're going to switch now for the third news. 

3. Figma Plugin For Storybook

Olga

And the third news is Storybook.

Bartosz

Yes, it's Storybook Connect for Figma to be exact. And it's the plugin which links Storybook stories to Figma designs! What is this about? It helps you compare implementation to design specs and definitely speeds up handoff and UI review processes. So we're going to speak about some core features provided with this new plugin. 

Olga

Which one is your favourite? 

Link stories to component variants

Bartosz

My favourite is the possibility to link stories to component variants. So it will be the first which we're going to talk about. And by this feature, you can link assets once and they automatically stay up to date with the latest version of design or implementation. 

Olga

Sounds great. 

Bartosz

Yes. And this link also propagates to all component instances. So basically you are able to share everything across the team and other depths or designers don't have to link components over and over again. The next one is that with this plugin we can handoff design specs to developers for implementation directly because this plugin streamlines handoff by calling out which design components have already been implemented directly, you can use it in the Figma Sidebar. 

Review UI implementation with designers

Bartosz

Then after the process, we can speak about the first feature so you as a developer can gather feedback on UI implementation for designers. The plugin helps designers check whether the rendered implemented UI matches the design via the Storybook addon so they can sign off that the implementation meets the design specs. They can compare dimensions and spacing, colours etc of DOM elements to design specs. 

Olga

The fourth news is about TypeScript 4.7. 

4. Typescript 4.7 (Beta)

Bartosz

Yes, this is our next point from our news lineup is Typescript 4.7 (Beta Version) - you can now install the latest beta version and test the new features and changes - we will highlight a few of them for you.

EcmaScript Module Support

Bartosz

So the first one is that we have ECMAScript Module support in Node js. The latest version of typescript adds this new module's functionality with the two new module settings: node 12 and node next which brings a few high-level features. 

type in package.json and New Extensions

Bartosz

The second one is to type in package.json and New Extensions which it brings. Now, Node.js supports a new setting in package.json called type, and it can be set either to module or commonJS. Js. This setting controls whether js files are interpreted as ES modules or Common JS modules, and defaults to CommonJS when not set.

Control-Flow Analysis for Computed Properties

Bartosz

The next one which I'm going to talk about is Control flow analysis for computed properties. It basically means that TypeScript 4.7 now analyzes the type of computed properties and narrows them correctly. 

Improved Function Inference in Objects and Methods

Bartosz

Another thing which we're going to talk about is improved function inference in objects and methods. TypeScript 4.7 can now perform more granular inferences from functions within objects and arrays. This allows the types of these functions to consistently flow in a left-to-right manner just like for plain arguments. 

Object Method Snippet Completions

Bartosz

The last one which we're going to talk about is object method snippet completions. So TypeScript now provides snippet completions for object literal methods. When completing members in an object, TypeScript will provide a typical completion entry for just the name of a method, along with a separate completion entry for the full method definition. 

There are other things in TypeScript 4.7 Beta which you can see on the official TypeScript website. 

5. React-Redux v8.0.0

Olga

So now we can move to the fifth news which is React Redux version eight. 

Bartosz

And there are some major updates regarding compatibility with the latest version of React 18 which came up last month. So the first big updates are for Use Selector, Connect and Provider for compatibility with React version 18. Basically, the updates are all about the above meshing hooks and methods for compatibility with the latest version of React. The public API is still the same ( <Provider>, connect and useSelector/useDispatch), but the updated parts are the internals to use the new useSyncExternalStore hook from the latest version of React.

SSR and Hydration

Bartosz

There are also some updates regarding support for SSR and Hydration which is also React 18 new feature. React 18 introduces a new hydrateRoot method for hydrating the UI on the client in Server-Side Rendering usage.  React-Redux v8 supports this by adding a new serverState prop for <Provider>. If you're using SSR, you should pass your serialized state to <Provider> to ensure there are no hydration mismatch errors.

TypeScript Migration and Support

Bartosz

The last thing, and in my opinion, the biggest one is the TypeScript migration and support. So it is a big update from React-Redux in the typescript migration and support. We know that this library source code was always written in plain JS and the community maintained typings separately as external types package. Now the react-redux team migrated the React-Redux codebase to TypeScript, using the existing typings as a starting point and that basically means that we no longer need the @types/react-redux package and we can get rid of it as a dependency. 

It's really great news. There are of course some other updates, new features and bug fixes and you can also check this out on the React-Redux official GitHub page and in the description. 

6. React Native 0.68

Olga

And now we're going to tell you shortly something about React Native version 0.68 and version bumps in it. 

Updated Node 16, the latest LTS

Bartosz

What does it exactly bring up? So with the new version of React-Native the team have updated the version of Node to 16th - it means that as on the CI React-Native team test for LTS and the previous LTS, users are now required to use a version of Node >= 14.

Android Gradle Plugin updated to 7.0.1

Bartosz

The new version of React-Native has Android Gradle Plugin  updated to 7.0.1, it enforces JDK 11 for Android builds, so we all have to make sure to upgrade our configurations - the official website recommends (zulu11 JDK flavour for both Intel and M1 Macs)

Besides that, in the latest version of React-Native, you can optionally enable and see how the newly introduced architecture with opt-in support for the Fabric Renderer and the TurboModule system. This marks a crucial milestone for the rollout of the New React Native Architecture. You can check out the full list of changes and bug fixes on the official React Native website.

7. Firefox 100

Bartosz

Firefox 100 - starting from 2004 from version 1 Firefox this year reached version 100! It’s over 18 years of constant improvements and development for the Firefox team.

Firefox on Android and iOS: Your history and tabs are now clutter-free

Bartosz

For clutter-free history, instead of an endless sea of URLs leaving, we have it now organized in an intuitive way. One of the ways they have done this is by grouping history items by the original item Another way they organized history is by removing duplicate sites thus reducing the visual clutter. Lastly, you can now search within your history. 

Firefox for Android. HTTPS-only mode. Android app users could now benefit from this privacy-first feature and  HTTPS-only mode is available on Android.

Credit card autofill

Bartosz

The new credit card autofill feature was launched previously in North America and is now enabled in the United Kingdom, France and Germany.  So we have to wait a little bit for it.

Olga

We'll wait, we have no choice. And that's it for today, right? 

Bartosz

Yes. That's it. That's all the news for today.  

Olga

Yes. I hope you liked it and follow our channel. Give thumbs up if you liked the video and leave comments. We will meet soon with the Frontend News to talk about other libraries and more news from the frontend world. Thank you so much. Thank you, Bartosz.

Bartosz

Thank you very much, Olga. Bye.