What's New in React 18 and More News from Frontend World - Frontend News #12 | frontendhouse.com
Guy with notebook

June 25, 2021

What's New in React 18 and More News from Frontend World - Frontend News #12

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

Watch the Frontend News #12 - the podcast about tech and front end innovations with our hosts - Chris and Tommy K. Looking for a team for your project? Ask us for free consultation.

What is Frontend News #12 about?

  • 00:00 - Intro
  • 01:06 - Contents
  • 02:11 - King with new crown - React 18. JavaScript library for building user interfaces - announced new releases. Check them out
  • 06:08 - Stack Overflow sold!. Stack Overflow is a Q&A platform for software developers and people who need coding skills
  • 07:15 - Aurora project. The next topic in Frontend News #12 is the result of collaboration between Chrome and open-source tools and frameworks - Aurora
  • 09:36 - WebExtensions Community Group
  • 11:31 - Safari 15 Beta Release. Check the new Safari Technology Preview 126 release with Safari 15 Features
  • 12:55 - Strapi v4. Strapi is the open-source fully customizable headless CMS based on JavaScript
  • 14:45 - How to measure CPU use in a browser?. Compute Pressure is a new API that allows web apps to gain insights into CPU utilization

If you have any development issues or have an idea for application you can always contact our Frontend House experts and have a free consultation.

Transcription

Chris
Hey, everyone, we are going to have yet another news podcast. Today is the 12th episode, and it's going to be epic. Epic because we have a bunch of news: six, seven, eight? I'm not even sure. But first thing first. Tomasz. How is your week?
Tommy
Chris, thank you. Thank you for asking. My work was perfect. My life is beautiful. Nothing to complain about and how about your life?
Chris
My life is even more beautiful because we are going straight to the agenda.
Tommy
Great, I want to begin with something big. And I want to speak about React 18 release. Yeah, React 18.
Chris
Guys, if you want to build something in React 18, reach us definitely, we gonna do it for you. Visit our website. Visit our contact form. We are here, ready to answer your questions. And the website is frontendhouse.com. Am I correct? So you know what to do.
Tommy
But moving forward, the second thing I want to speak about is our lovely Stack Overflow system and it has been sold. I don't know if you heard that.
Chris
What? OK, I'm well, I'm even surprised. I haven't seen that.
Tommy
I know the price. The third news is about the Aurora Project. The fourth one is about the WebExtensions community group.
Chris
The next one is about Safari and its Beta Release. The next one is about Strapi and its 4th version. And the last one - we will show you how to measure the CPU in a browser. Are you excited? I am. Let’s watch the intro. So let's get down to business.

King with new crown - React 18


Tommy
OK, guys, I'm really excited that I can speak about the new major release for the reactor, which is the 18th version. Just to explain something. We do not have a fully working React 18 available now. But what we have is the alpha version of this library. So if you are interested in checking out the new features, it will probably be something for you to test and to play with. But what do we get in the newest React 18?
Chris
Yes, I’m super curious, what’s in it?
Tommy
I won’t speak about everything because this is still being developed. So we do not have the final list of the new features, improvements, and fixes. But what I'm really excited about is really interesting is that we've got a lot of improvements around server-side rendering and the suspense modes. We heard about suspenses in React performance, so in the 18th version, it has been optimized and it has a completely new architecture for handling the server-side rendering. The next thing is the bunching mechanism has been improved, so imagine that you create the handle click function. And inside this function you are changing the two states, for example, counter and let's say the user name, because just because. So you've got two set states in a single function. Nowadays, it will mean that we will render our components two times. The first one for the first state change and the second one for the second state change. All right. So right now the batching has been improved. And if we use two-state updates inside the single function, the components will wait until both of them are executed. Sounds good?
Chris
Sounds great. Next, I think that I'm really curious about new APIs, which is really interesting. I mean, all will be interesting, but I want to speak about this single one. It's about the start transition. So a simple example. I believe you’ve created a lot of search inputs in your life.
Tommy
Stupid question: I know you know, the bounce are throttle functions that have been used to trigger the necessary updates. The start of transition API will be something that will handle this case. So you won't need anything like the bounce or throttling you can put inside the body of the start transition function. The things that have to occur after, for example, the input state will change. But if you want to track all the changes that React team has created something that's called a working group and that's a group that the main purpose is to share the new ideas and new improvements from the Reactor 18 to the community and to exchange the information to give the feedback about this new features.

So thanks to the working group, you can track all the changes, all the improvements, and give your feedback to the React team. And that’s it from the react world. Sounds amazing, it's the alpha version. Do you have an estimation when they go through this? Yeah.
Tommy
So after the Alpha version, it has been said that it's a few months until we receive a beta release and after a better release, it's like a few weeks to receive the final production version.
Chris
So we are still waiting.
Tommy
But what is interesting here - all the changes that have been put into the newest version of the react want to break the currently existing code so it supports the previous versions of the React. All the improvements are out of the box. You do not have to update your code.
Chris
There's good news, but let's update anyway. But what is even more interesting for me is not for how much they sell Stack Overflow.

Stack Overflow sold!


Tommy
OK guys, the big news: Stack Overflow has been sold and the price is 1.8 billion dollars.
Chris
Solid, solid amount of money. Who bought it?
Tommy
One of the biggest tech companies in the world. Believe me or not, but they cooperate with a lot of famous names like Brainly, Codecademy or OLX, PayU or even Udemy. And they are behind those community groups. The process company supports the initiatives that are connected with the community, with creating the technology that is open-sourced or just to share the knowledge over the community and make the IT world, tech world better day by day.
Chris
It's interesting because what does it mean for Stack Overflow? We will see in a few months, I guess?
Tommy
Yeah, exactly. We need to track the changes.
Chris
So what's next on the plate?

Aurora project


Tommy
Next thing is the Aurora project. I know, guys today there is a lot of information about different communities, but come on, we cannot speak only about the releases. Am I right, Chris?
Chris
As always, Tomasz.
Tommy
I love when you answer in such a way. OK, guys. So the Aurora project is the collaboration between the Chrome team that works on the browser and different web frameworks and tools creators. OK, they created this collaboration because, you know, they want to standardize a few things around how the tool has been used. And when I say tools, I mean all the tools. It's like View, React, Angular or whatever you're using.

So this collaboration should, I would say, elevate our daily work and the quality of the functionalities and what I mean. OK, so they present a scheme of how they want to process the updates and that changes propositions. So starting from the beginning, they want to identify the future together. What will be really useful for all the developers and users? The second thing is the research and development phase where they are working on the solution. Third thing is to validate this feature in the production app.

So this is like QA checking if it works well. The first step is to enable this feature in the production up and get the feedback from the users to do more QA. And once the feature will be approved by the users and by the QA, it will be used by default by all the frameworks and tools that are in this collaboration. So it's like the community will put more of themselves to actually impact on the browser's word and on the tooling work. Doesn't it sound amazing?
Chris
It is. And I'm very surprised how you prepared to this. Yes. I mean, I have no questions.
Tommy
Thank you. Thank you. I hope our lovely guests will also appreciate this news and check by themselves what's about in the Aurora project. Probably we have some collaborators in our lovely audience. So, guys, good job.
Chris
Exactly. That's it. So we have an extension community group.

WebExtensions Community Group


Tommy
Exactly. Another community group has appeared. It's really nice that we put a lot of effort nowadays to collaborate with each other. Sharing knowledge and experience in the community is really important also for us. So if you have any questions or you are interested in collaboration or you have some suggestions, please don't hesitate and visit our website, Frontendhouse.com and the contact form. Or you can leave a comment on our YouTube video. Guys, let's get in touch!

After this beautiful advertisement...
Chris
Yes, I’m still curious about this group!
Tommy
Yeah, I know. Me too. Me too. I really want to share this news with you, Chris, and obviously with our audience. So, yeah, a web extensions community group is something that has been created. I mean, at the beginning, the foundations have been put by different companies, well-known companies like Apple, Google, Microsoft or even Mozilla. So they have initiated this community group, but it has been dedicated for all of the developers and people that are around the front end technologies to work on some propositions for the Web extensions, maybe not to create a standards that will be widely used, but to work on some solutions and features around web extensions and to make them work on the different platforms.

This community group will work on making this Web extension closer to the developer and make it easier to work with. Ok, so it's worth the track they work and yeah, looking forward to seeing what will be the outcome of their work. And that's it.
Chris
Sounds good. It's great to see big brands collaborating with each other and to make things better. So keep my fingers crossed. Safari 15 Release. Go ahead.

Safari 15 Beta Release


Tommy
Oh man. A lot of improvements in the Beta release, finally. I want to speak about all of them because the list is really huge and I really encourage you to check it for yourself, but several things that will be updated in Safari 15. So they redesigned the safari user interface for MacOS 12 and iOS and iPad OS, along with top grouping functionality and customization of our sinking in the browser, more features about sinking on different devices.

They also added support for the verification codes to the iCloud keychain password manager. The technology preview of PassKeys in iCloud Keychain and a lot of stuff in the CSS, HTML, JavaScript Web Extension, Web APIs, Inspector and many, many more I just don't want to speak about because it's too big. But yeah, it sounds like a lot of things have changed. So it's worth checking the Beta Release, it's still beta. So remember, not everything probably will work as expected.

But hey guys, we are here to test it and give our feedback to the creators of Safari.

Strapi v4


Chris
Nice one. I'm curious, what are the updates for JavaScript and Web APIs? So, yeah, I'm going to check it by myself. Let’s go to Strapi V4.
Tommy
Strappy gets a lot of popularity, this year, will also be really positive for Strapi. The fourth version is really close and there are a lot of improvements again and other improvements, changes, update fixes, all of that stuff. But that strategy team decided to optimize a lot of things and simplify the GraphQL and the rest API has become more flexible and easier to be used and extended, and it's more consistent. So you will probably find the necessary details in the documentation. It will be the breaking change. So it will work a little bit differently than the previous versions of the Strappy. So it's worth it to check if you write the new plugins for the therapy and the app before that will be also improved.

So it will be even easier to write multiple plugins and add them to your Strappy. The database layer has been improved, so probably there will be a better connection between the application and the database itself. The updates, yeah. What's more, just check the release notes because they are adding more and more to the Strappy 4. I am really waiting for the new release and I'm going to use it a lot.
Chris
Yeah, you're right. We are going to use it a lot in upcoming projects. It's always a pretty solid choice. So the last one, the last one is going to be about measure.

How to measure CPU use in a browser?


Tommy
I don't know anything. I have no information.
Chris
You can’t share any data, right?
Tommy
Yeah, but I want to share something today. It won’t be live measurements. I just want to do a short sneak peek of the code, how easily we can use the experimental API to check the CPU usage in our browser. OK, I mean, it won’t be the CPU usage by our browser, but the overall usage of our CPU and let me share my screen so you should be able to see what am I doing on my computer. Cool.

So we have got an experimental API to measure the CPU usage and yet there is some theory that is put in here. But the most interesting part is how easily with a small amount of code we can react to the CPU usage and believe me or not, but this is all the code that is required to track your CPU usage. So as you can see, the new API experimental is named the Compute Pressure Observer. So this is the observer that will react on the different thresholds that we can set up here.

We can react on CPU utilization or CPU speed, three thresholds. And as you can see, we can trigger observation and here we can observe and the callback function, we just react to different states. So if we point to the CPU utilization and CPU speed, we can react to them in the if-else statement block and do whatever we want with this information. But thanks to that, we can, for example, utilize our application. Let's say we have a video call application and somehow it consumes a lot of resources.

And if we want, for example, to display the information that the connection may probably be lost because you don't have a CPU. This is maybe a dummy example, but you know what I mean.
Chris
This is very I mean, this very amazing news because there is a lot of CPU, extensive applications we build like 3D and that kind of stuff. And like previously, we had to do things like frame rate or something to like downscale experience. But also with this CPU measurement, we could pick up low quality assets for when there is no CPU for this experience. So it's very good news which will make our life easier for sure.
Tommy
Hopefully it won't be an experimental feature in the future and it will become the default feature in our process as well. Thanks, man, and that's everything from my side.
Chris
What a pity. But we see each other next week and week after week and forever, right?
Tommy
Hopefully, yeah. Fingers crossed for that.
Chris
But apart from seeing our stars on the YouTube channel, guys, I think we need a lot of senior, regular junior frontend developers, backend developers. Just check our website, check our offers. We are here waiting for you.
Tommy
Yeah. If you want to drink a coffee with me and Chris, just take a look at our website, frontendhouse.com, and join our lovely team.
Chris
Yes, indeed. Guys, see you in our office and YouTube channel. Thanks for this episode.
Tommy
Thank you, Chris. Bye-bye. Bye-bye, guys.

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
hexagon

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
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

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

Krzysztof
Diamond logo icon
LinkedIn logo
Diamond logo icon
Mail logo

Krzysztof Wyrzykowski

CTO

I specialize in creating advanced digital experiences, often taking part in interactive web campaigns and playing a leading role in combining modern technologies, usability and accessibility.

Tomasz
Diamond logo icon
Mail logo

Tomasz Krajewski

Head of Frontend

I'm Senior JS Developer with more than 8 years of practice and specialize in creating the software architecture and implementing advanced solutions in JS and RoR.

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.