Newest Gatsby, React and Node Releases - Frontend News #21

Watch the podcast about front end news. Are you looking for software solutions for your business? Fill the form on https://frontendhouse.com.

What’s in Frontend News #21?

• 0:00 - Intro
• 01:18 - Contents
• 02:31 - Gatsby 4
• 06:19 - React Native Testing Library v8
• 09:43 - New React Bootstrap
• 13:04 - Chrome 95 released
• 18:17 - Node v17

Let us know what you think in the comment section! Thank you for watching!

Transcription

Chris

Hello, welcome everyone. Today is the 21st episode of the Frontend News podcast. We are thrilled to show you five excellent news. But first things first. Tommy, How's your week?

Tommy

Chris, I need to prepare like, you know, the template for the answer, because every time I'm answering that, it was amazing. It was perfect. Blah, blah, blah. But this time I will say something else. So my week was good. How about yours?

Chris

Thank you for asking. My week was perfect. It was perfect because I know you're going to be a host at the Global React Summit, which is very soon. Guys, I strongly recommend you to check this one out. Tommy, any thoughts about this?

Tommy

Yes. It's a huge honour to be the host of React Global Summit 2021. It's one of the biggest React conferences in the world, so I'm really happy and I feel excited about it. There are big names from big companies from Microsoft, Netflix, Amazon, one big name from Frontend House.

Agenda

Chris

Exactly. Tommy, congratulations. I really enjoy this. Let's see how it goes. But in the meantime, let's check the agenda. I think that the first one is going to be about Gatsby 4.0, right?

Tommy

Yes, I know that we spoke about the Gatsby 4 Beta, last episode or last two episodes, but this time I just want to mention something more about CATSPY, but let's wait for more details after the agenda. And the second news is about the React Native Testing library, which has a new version - the 8th one.

Chris

The next one is going to be about React Bootstrap.

Tommy

Chrome 95 release.

Chris

And finally Node version 17 and packages. Guys, let's see the intro and let's get started. So it was an intro. I hope you guys like it. Maybe we will change it in future because it's like the 21st episode with the same intro. However, in the meantime, let's jump into the news and the first one about Gatsby. I'm curious: what’s in Tommy?

Gatsby 4

Tommy

As I mentioned, we spoke about Gatsby 4 Beta, the last episode or the last two episodes, so I don't want to dive into a lot of details. I just want to mention that the Gatsby 4 finally has been released so it's no longer beta. We can use it as a stable version. So guys, if you want, you can update your project. I just want to quickly summarize what's in it. The biggest feature that was added in the newest version is, for example, the different static generation, which is a new mechanism for how Gatsby generated static pages.

Server site rendering has been also added to the Gatsby 4. Parallel query running rebuilt, deploying pipeline new CMS integration API, which makes much easier to integrate Gatsby with most of the headless CMS that are on the market and React 18 future P Roofing so it will be easy to switch to the newest version of the React and much, much more from the minor things to insight. And as always, if you want to check the details, links are in the description under the video. So check it out.

Chris

I was wondering, what is your personal opinion about Gatsby and Gatsby 4. Do you find it better than Next generally and Gatsby from time to time? How does it work for you?

Tommy

Well, the Gatsby was the first framework of React I was working with to handle the static site generation, and it was pretty cool those days. And then Next.js was introduced and I fully switched to Next.js because it offers more mechanisms under the hood. I mean, like handling the server-side rendering was working those days in the Next.js and in Gatsby, that's not. And there were more features in Next.js that were giving us more boost to the development and helped to split the code that was running in the client browser and that was generated statically or rendered on the server.

Next.js came to me with more understandable tooling, I would say, and easier configuration, but it depends - Gatsby 4 or even Gatsby is still a cool framework, a cool tool that I really recommend to use, and it's not like I'm fully stuck to the Next.js. Gatsby 4 is also good. It's well optimized and it has a good performance now. It will also handle server-side rendering if you want to use it and it's really easy to integrate with all of the headless CMS, which makes it really cool what I really like in a Gatsby it was working with the GraphQL. I remember we have configured the API.

Chris

Sorry Tommy. Next.js works with GraphQL as well, right?

Tommy

Yes, I know. It depends on the configuration. To be honest, maybe it's not such a huge argument, but I remember that Gatsby has really easy integration with GraphQL. I don't remember if it's by default, I need to check it out, but maybe not, but yeah, I like Gatsby too. If I have to pick between those two, obviously I would go with NextJS, but if I will have to work with Gatsby 4. Okay, let's do this.

Chris

Tommy. I couldn't agree more. Let's have a look. Let's check. Let's use both and make your own opinion, guys, but in the meantime, let's jump into the next news, which is...

React Native Testing Library v8

Tommy

React Native Testing Library version 8.

Chris

Do you use it? Do you write tests?

Tommy

No, we don't have a budget for that. We don't have time. Why should we do that?

Chris

Every business says so, exactly.

Tommy

But to be serious for a while, tests are really important and we have a bunch of tooling, plenty of different libraries and tools to help us write tests. Unit tests, integration tests, end to end tests, all kinds of tests. But let's focus on the React native, so I don't know if you are familiar with testing the mobile apps written in React Native, but still, the concept about testing is the same as for the React because I know you are familiar with React Testing library.

Chris

Exactly. I love it. Yeah.

Tommy

So React Native testing library is something similar but dedicated to test the React native app instead of the web one, and you are able to test all the components and structures being done with the React native. Well under the hoods. There is a really hard implementation I don't want to dive into in this chapter. Guys, if you want to do this, do it on your own. It's not so easy, but the usage of this library is well explained in the documentation. We've got some breaking features in the newest version which is the update about throwing errors.

So now when the event handler is not being found, we do not receive an error that won't collapse the test. I don't know why they did this. I didn't find the explanation for that because if I would be the developer for those libraries, if something won't work, I would obviously want to throw an error and inform the developer that, hey, something is not working, but maybe it was an internal error done during the development, so I don't know, but for now you will not receive an error. Use real timers inside to internally fix awaiting fake timers.

So this update is around fake timer and how it's being implemented under the hood. And those changes are like the breaking ones. So you should not be probably forced to update your implementation, but keep an eye and track those changes because if something breaks, probably it's because of the fake timers.

Chris

Thank you for the update. I might say that today you are very well prepared for all the previous news. You were like, let's check the documentation, check this, check this. But today.

Tommy

Thank you, Chris, because all the time I'm presenting news before I do this, I open this article, news, video, any kind of material I'm gathering for you and I need to go through all of this and decide if it's interesting or if it's not. So everything stays in my head.

Chris

Guys, before we jump to the next news, if you want to work with that kind of guy, I mean, as you see, he's very well prepared. He knows everything about the front end. If you want to work with him, just jump to our website frontendhouse.com. Check the Join us section and yes, join our team. And with this smooth transition, then jump to the next news, which is React Bootstrap, right Tommy?

New React Bootstrap

Tommy

Yes, react Bootstrap version 2. And what's inside? We can find the incrementation of the Bootstrap library, which has been updated from the fourth version to the fifth version. So that's the main thing inside React bootstrap too. And I'm really happy that Bootstrap is still so strong on the market because I use that too plenty of times.

Chris

Really? I'm not a big fan, to be honest.

Tommy

Why not? What is the purpose that you don’t like Boostrap?

Chris

I find it a little bit redundant. I mean, when we work on a project, they are always custom and we need to write a lot of custom code anyway. Maybe I'm not that super-skilled Bootstrap developer after all, but yeah, I feel that when we build something custom for our customer, for us, it's easier to build our custom components, custom mixing and so on and so on instead of using Bootstrap and plenty of redundant code after all. So yeah, I’m not a big fan. I found it like when we built something internally when we use Quick MVP or prototype to just proof of work, proof that something might work, I use like Bootstrap or Material UI or something like that. But for the production of the project, I always go with custom codes. What do you think?

Tommy

That makes total sense. I use Bootstrap to prototype some proof of concept or to prepare MVP, but mostly for the dashboards products because if we are talking in terms of the landing pages or any kind of web apps, that should also look attractive and go with the current user experience and user interface hot trends. Obviously, it needs to be custom, but Bootstrap offers a really great set of tooling. If you want to build a really fast front end layer and mostly focus on the functionalities and for example, on the business logic on the back end. That's right. Yeah.

Chris

There is also one good thing about Bootstrap, so usually when we build components and we want to have it very reusable, we often check Bootstrap documentation and we try to match our custom component, like documentation to Bootstrap component documentation because they are really well with this. I mean, let's check the buttons, let's check the grid and everything they prepared. It's super reusable. That's why when we build our own components, we tend to check Boostrap documentation and try to reflect this in our custom code.

So yeah, good idea.

Tommy

Well said, my friend. Well said. So I think it's a good time to jump into the 4th news….

Chris

Oh, really? Which is a Chrome release.

Chrome 95 released

Tommy

It's the 95 version of Chrome, so it's almost 100. But still, we have some time before the 100 version before Chrome will arrive. It's next year. Probably there are some changes, obviously, as always, maybe not breaking changes. But worth mentioning is that the URL pattern is a new API that has been delivered with Chrome 95, and it helps to work with the routing pattern. For example, if you want to create a pattern for some files that you want to fetch and load into the browser, you can use the URL pattern to iterate over.

Let's say the whole directory and it gives a new set of tools around working on the rootings. Good. Yeah. Worth checking. Picking colours with the Eyedropper API is a totally new thing. So if you want to give the user the possibility to choose the colour, you will now be able to use the Eyedropper API, which has been done by the Microsoft Developers team, and it will give the possibility to pick a colour in an attractive way. So another thing worth checking. Thirds thing is about security.

So the user agent reduction is an effort to reduce passive fingerprint surface. So it means basically that information contained inside the user agent will be slightly reduced to display the information only about the browser itself and environment of the browser instead of sending a lot of data about the user because it helps to track the user and it could cause some security issues. So yeah, a good bunch of updates to search.

Chris

It can be a potential issue for all these projects, I guess because we're often scanning user agents to detect, like the browser, iOS, even machines that users use and display proper content for proper setup. So yeah, I'm wondering if it won't cause issues in the near future.

Tommy

And about the security! I have news. I have news outside of the list I have prepared. Can I share it with you, please?

ua-parser-js security issues

Chris

Of course. Do it.

Tommy

Okay. I don't know if you heard about it, but yesterday, there was a problem with the user agent parser, ua-parser-js library, which has been hacked and some malware has been put inside that library. And the ua-parser-js is a dependency for millions of projects all over the world.

And that malware infects your laptop, infect your machine and inject the code that will track your passwords and even install the cryptocurrencies mining stuff. So guys, just check it out if your machine is all right if you have the correct version of the ua-parser-js because it's a serious security problem nowadays. And I believe that this situation should open the discussion in our community about how open our front end up environment should be. How often should we track the changes in all of our dependencies?

Should we have the configuration that allows us to automatically install the newest versions? Or we should freeze the dependency version and track this manually. And we should also think about security. And if we need to use so many different tools that are not under our control.

Chris

Yes, apparently we need it. I mean, you are right. This happens from time to time, and I think it's going to be a real issue in the near future. Let's observe this. But it's like a serious backdoor for hacking applications.

Tommy

Exactly. And front end apps are really hard to secure. I know that there are a lot of articles about modern Web and Web 3.0 that use, for example, blockchain technology to secure those apps, but this is the topic for another episode. Maybe. But still, I believe that we should focus more on thinking about what we are using, why we are using and how we are using it.

Chris

Guys, well, it was a perfect summary. Tommy! You are a very mature developer. I'm impressed.

Tommy

Thank you.

Chris

And with this extremely sweet ending of the Chrome release topic, let's jump into the last news, which is our lovely guest note and its update.

Tommy

As always, Node.js is in almost all of our episodes. This time, I'm proud to announce that we received the 17th version of Node, which will be the new candidate for the stable release in the next couple of months. So now the version 16 something became a new stable release. So if you want to track the newest changes, switch to the 17th one. The newest version of the Node includes the open SSL 3 that will help to secure your app even better. The v8 JavaScript engine has been updated to version 9.5, and the last update worth mentioning from the Node is that we have a new interface that helps us read the data from the readable streams one line at a time. And so those three things are mostly the biggest ones, but under the hood, there are a lot of smaller updates and fixes, and they will be developed day by day. We will receive a newer version of the Node 17th.

Chris

And you're gonna talk about this in the next episode. I’m sure we're going to speak about this. And so, Tommy, that’s it for today, right?

Tommy

That's it. I have no more news for you. I prepared five news plus one extra.

Chris

Thank you, Tommy, and thank you, guys. Thank you for being with us. Such a lot of subscriptions, we love you. Follow us more, subscribe to us more, like our videos.

Tommy

Please leave a comment. We want to speak with you. So if you have any questions, if you want to ask something, if you want to suggest something, just leave a comment under this video. Subscribe to our channel, like this video. Check out the rest of the videos, Github, our Facebook and stay with us on the frontendhouse.com page. Stay tuned.

Chris

And, guys, see Tommy K at the two nearest conferences. Yeah, it's going to be a rockstar.

Tommy

Hopefully, fingers crossed. Thanks, Chris.

Chris

See you, Tommy. Thank you. See you, guys.