Guy with notebook

May 13, 2022

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

Olga

Olga Vasylenko

Marketing Specialist
Bartosz

Bartosz Antoszczyk

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

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? 

Frontend News #25

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. 

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Microphone
Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Olga
Olga
Bartek

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts

Olga

Olga Vasylenko

Marketing Specialist

Bartosz

Bartosz Antoszczyk

Frontend Developer

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.