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

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.