What’s new in Angular, React Router, Cypress and Other News - Frontend News #22

Watch the 22nd episode of Frontend News. Are you looking for software solutions for your business? Fill the form on https://frontendhouse.com.

What’s in Frontend News #22?

• New Github CEO
• Creator of Svelte join Vercel
• Identify NPM libraries
• Update to AirBnb style guide
• Cypress 9.0.0 release
• Deno 1.16 release
• React Router v6
• Angular v13 is on!

Don't forget to leave comments and likes. Thank you for watching!

Transcription

Chris

Hey, everyone, welcome to the 22nd episode of the Frontend News podcast. Today we have eight amazing pieces of news. We have me, Chris. We have Tommy K. I'm sure his week was amazing, but just to be sure to be, how was your week?

Tommy

Perfect, Chris. Amazing. Awesome. I enjoyed React Global Summit as a host. I enjoyed Just Join IT Webinar as a speaker and I enjoyed the weekend. So it was amazing. And how was your weekend?

Chris

Mine was amazing too. But guys, hopefully, you've seen Tommy K as a host and Tommy K as a speaker. He was truly, truly professional. He did a very good job. I'm proud of you, Tommy, and you can jump into the agenda because again, that’s news. And the first one is the new CEO of GitHub.

Tommy

The second one is about the creator of Svelte that has joined the Vercel team. We are going to talk about NPM libraries and we are going to present the Airbnb updates for the Style Guide.

Chris

New Cypress 9.0 release.

Tommy

And guys, I believe, you know Deno. So there is a new release of this framework and we are going to speak about it a little more.

Chris

React Router version six

Tommy

And the last but not least, the Angular 13 version that has been released a few days ago.

Chris

Guys, we are all set. Let's see the intro and let's get started. Hey, welcome back. Let's jump into the first topic, which is the new GitHub CEO. And I'm curious, why is it important Tommy?

New Github CEO

Tommy

It's important because a lot of developers use GitHub nowadays and the new CEO means a new strategy for the company. And in consequence, we can get new changes, updates, improvements and fixes for GitHub. So Thomas Dohmke has become the new CEO of GitHub on 15 November. This is great info because he joined the company three years ago in 2018. And step by step he became more powerful. But yeah, I'm looking forward to what the future will read to us and how the new CEO will perform in his role. I will use GitHub as much as I was using it in the past. And yeah, Chris, do you like GitHub or do you prefer Bitbucket or what kind of git tool do you prefer?

Chris

Yeah, I love GitHub. Thanks for asking. I mean, Git is Git after all. So it's only like a visual layer, but I prefer GitHub over all of them. But I was wondering, Tommy, do we know anything about Thomas? Like what is his job history? What are his biggest achievements?

Tommy

Yeah, about Thomas so far, I know that he was working for the Microsoft company where he was Head of Accounting. I believe. No, not accounting at all. But I know that he moved from the Microsoft company to GitHub. So that's what I know from his past.

Chris

I mean, Microsoft bought GitHub, right?

Tommy

Yes, that's true. He stays at the mother company. But I read about him and I know that he's really experienced developer who was developing applications on almost all the available platforms, so that's so far what I have found about him.

Chris

Okay, let's invite him to the next front news episode. Maybe he will join us. Why not?

Tommy

For sure.

Chris

And if this smooth transition, let's go to Svelte, right?

Creator of Svelte join Vercel

Tommy

Rich Harris, who is the creator of the Svelte library, has actually joined the Vercel team. And this is really great news because Svelte is one of the most loved web frameworks, which makes the whole work really smooth. And developers are most satisfied with this framework, and its usage has doubled over the past year. It has like 200,000 downloads per week and over 50,000 stars on GitHub. So Svelte is a really popular framework. And thanks to this transition, Rich can be a contributor to the Svelte full time because it will be his only job. So looking forward to how this tool will change in the next month.

Chris

It's interesting, Svelte is so popular, and haven't had a chance to use it in the commercial project yet. I’m really looking for these times. Yeah. Let's see.

Tommy

Yeah. Good observation. Good point. I did not use Svelte at all. Yeah, it's quite interesting because when I was looking for the news, I know that we mentioned Svelte in past editions, probably. But when I was looking for the news for this edition for this current episode, I found the info that it has been the most loved web framework. And this is something that I didn't know because I thought it's react or something.

Chris

Was it written by Swift developers? small detail.

Tommy

I did not check this.

Chris

Small detail makes a difference.

Tommy

Okay, let's stop this topic, I guess.

Identify NPM libraries

Chris

Okay, so jump to NPM libraries.

Tommy

I want to mention the tool that is called bundlescanner.com, and that's a really nice tool, because thanks to that, we can identify the NPM packages that have been used on our website. So what we need to do is to pass the URL to the simple input. Click proceed. And as a result, we will receive the complete report of the NPM libraries that have been used in our app. And what is most interesting? It also works for the minified code. How? I don't know. I believe they have some patterns. They are looking for some, I don't know, maybe classes or some behaviours that are specially connected with such a particular library. But yeah, it's not 100% accurate, which is totally understandable for me, because it's really hard to spot all of the packages. But guys, I did check this and it works really nice. So if you want to have a quick check on what has been used, it's a good tool. And the link to that tool is in the description under the video.

Chris

One question, because today every single NPM package has like, multiple, multiple sub-modules. Multiple dependencies. So I was wondering if it also takes all those sub-modules or it's only about the main package?

Tommy

No, actually, it searches all of the packages that are being used to, so the report is quite big. It might be very useful.

Chris

Okay. Thank you. Thank you for this news tummy. So let's jump into news number four. Airbnb sidewise.

Update to Airbnb style guide

Tommy

That's correct. And we won't speak about how to rent an apartment for the weekend with Airbnb. But it's also a good choice if you want to spend a nice weekend somewhere else. But the Airbnb style guide is something that I think I don't have to even describe what is it. Because it has been used by thousands of developers in thousands of projects. And I believe most of us are familiar with this style guide with principles, rules, and patterns that have been described in this style guide. In short term, the Airbnb style guide helps to determine how we should work with JavaScript, how we should write the code to make it readable, to make it semantic and to make it just work correct.

Chris

Yeah. So, Tommy, they are very good with those style guides. And I'm quite surprised by this. Which number is the new release?

Tommy

Yeah. So after two years of not updating the style guide at all, the team has decided to push the current updates and now the version is being tagged as the 19th. Yay.

Chris

Wow. 9th!

Tommy

19Th. It's ten more than nine.

Chris

Anything to add?

Tommy

Well, maybe not me, but developers, guys, friends. If you do not use any style guides, please add the Airbnb Style guide to your project. It will make your life easier.

Chris

I'm sure it will, but let's jump into Cypress. That also makes our lives easier.

Cypress 9.0.0 release

Tommy

Yeah. Cypress and the new version, which is the 9th version. Yeah, I know. We spoke about Cypress in the past edition and Cypress is really great framework to handle the end to end test. I have been using it a lot in the past. I don't know, Chris, if you are familiar with that, but I believe yes.

Chris

Of course I am. It is a very cool tool. I mean, the first time when I used it, I was so surprised and enjoyed the process so much that I wrote something because I see this in a browser, like making all the changes, user paths. It's so fun. I mean, it's one of my favourite ways to test the website.

Tommy

Exactly. That's a good point because the end to end tests are the biggest value for the business team because as you said, you can observe the data and see actually what's going on, what is happening. So thanks to the end to end tests, you can present to the business team the process inside your app, or even the group of processes, or even all of your processes, depending on how you will implement your tests. But end twin tests are a really important part of testing and verifying if your up works correctly. So in Liki and Frontend House, it's standard to deliver such tests, and I believe in your companies, it's also a standard, but yeah. Let's jump in what’s new, months ago...

Chris

Yes. What's the news about this?

Tommy

So besides the version number which has changed, we also received some breaking changes. I know that you love these two words: breaking changes!

Chris

Absolutely.

Tommy

Cool. So the new version configuration option now defaults to the system. So basically it means that the behaviour of the system option will always use the node JS binary version, which is attached to the Cypress. So you need to keep your eye on which version of the Node you're using in the project. Maybe you need to adjust it and make it similar to the Cypress and the version which Cypress will support. The version of the Node which Cypress will support is version 16.5. So that's another breaking change. What's more? Okay, so the Windows 32 bit will no longer be handled by Cypress. So guys, if you have Windows 32 bit, you won't be able to run those tests on your machine. Another thing is that an error will now be thrown if an invalid value is passed to the Cypress configuration. So before it was not causing any errors at all, we just have warning and information that something is wrong with the option inside the config. Now we will receive an error and it won't work that's most of the breaking changes. If you want to check more, just put your eye on the description. Under this video, you will find a link to the Cypress documentation and the Cypress release notes. Yes, exactly.

Chris

In the description. Yes, thank you, Tommy, great news, I have no further questions. So let's jump into the Deno and its new release.

Deno 1.16 release

Tommy

The framework that most of the front end developers know or heard about because it has become very popular nowadays. It has been implemented in Rust. So this is another hot topic not only for the front end developers, but for I would say, all of the software developers because there are multiple things that we can do with Rust. It's really amazing language, and in my opinion, it will be the future of development someday. It's worth checking it out, but about the updates for the Deno. It helps to build Web applications and it offers back end and front end layer handling.

So that's the complex tool to build the Monolith app, which is really great. And I really encourage you to check it on your own and about the breaking changes, improvements, updates, fixes that we can find in the new version, which is 1.16. Is that okay? So I will just go through all of the points and if you have questions, just stop me and ask. Cool. So now fetch will support fetching file URLs support for the new JSX transforms, new unstable signal listener API, an error causes now displayed in the console, handshaking TLS connections can now be done explicitly. Improvements to the Webstream - API, Deno start TLS stabilized, local storage does not require location anymore. Then the two NPM package build two has been improved with assembly reference type now available and some updates to two methods inside. Then there is a lot of changes inside that makes me happy because I feel like the team of the developers that work on Deno really put all of their heart to make this product be at their best.

Chris

I can't imagine you remember all those news.

Tommy

I did not remember all of them. I have some secrets behind the camera.

Chris

I see. I didn't know because I'm on another side of the camera, but good to hear all of them. Deno is involving changing its structure, bringing more and more features for us, developers, so I’m very happy to hear that. I'm curious if the accurate version 6 also brings some good news for us.

React Router v6

Tommy

Yes, the answer is simple. We've got a lot of fantastic news about React Router 6 because it has some breaking changes. It changes the way how we build our routing inside the app. We get a bunch of performance updates and optimization so that's really great. We have the support for the lazy loading and react suspense that is really easy to be implemented with the new routing style. And for example, if we are talking about changes to how we build our routing, the switch component that we've been using in the previous versions now has been replaced with the route component so that's one of the breaking changes. And under the hood, obviously, the mechanism has changed a little bit. They put some optimization of how the roads have been handled. Okay, Michael Jackson...

Chris

Wait: THE Michael Jackson?

Tommy

Not exactly this Michael Jackson, but he is also very important Michael Jackson. So the Michael Jackson, the CEO of the Remix company which is responsible for developing the React Router version 6, has written a great blog post that describes all of the changes in detail. So guys, as always, the link is in the description. So if you want to be familiar with all of the updates, just check it out, go through the blog post and let us know in the comments section what do you think about React Router. Maybe you have another favourite tool to work with the routing in React. So just let us know what's your favourite.

Chris

Tommy, do we have this article in the Dailab application?

Tommy

Not yet, but I will put it in Dailab. That's a good idea.

Chris

Good. So you guys can go straight to Dailab. Download the application and check the news from the front end word.

Tommy

If you don't know what the Dailab app is, just check the links in the description again and you will read about Dailab. What is it, what does it support, why does it exist and how to use it and I believe you will like it. I'm using it every day and it makes my developer's life much interesting, much more interesting.

Chris

What a lovely advertisement. Thank you, Tommy, and sadly let's jump into the last News, which is angular, which is not the sad news but the last one.

Angular v13 is on!

Tommy

Oh, yes. Angular version 13. The new one so far, the newest one so far with some breaking changes. The one which I love most is that the new Angular won't support Internet Explorer 11 anymore this year and next year. It's like the very last time for Internet Explorer, I believe. And finally, we won't speak about it anymore. Hopefully. But it's a huge part of our past and of our history. And maybe someday I will miss those days where I was styling our website for IE 8. I don't know if you remember those days.

Chris

Absolutely.

Tommy

Yeah, it was really hard, but yeah, it makes good fun and it gives a lot of experience. But yeah, going back to the news and what's new inside Angular 13, the Vue engine is no longer supported in the newest version of Angular. So everything that's based on the Vue engine is depreciated and it would work. So you need probably to revert your logic. Check if you use it directly or somehow you're basing it on the Vue engine logic. If yes, you will update your code. So another thing, the app, which is Angular package format, has been streamlined and modernized to be better and to better serve the developers.

And on the 13th version of the Angular, the apf will remove all their output formats, and it will also include some changes around the Vue engine, which is connected with the .apf by the metadata. So take a look and check if you need to update it. Iv also enables quality of life improvements to the way developers can dynamically create components. So the API has been now simplified. It's much easier to create dynamically components for your Angular app, so it means also that we have improvements for the Angular CLI, for Angular test and much more under the hood has been improved also. Tons of details in the new version, so we don't have so much time to discuss all of them. Wait for more news about dependency injection and directives. I need to say that everything else is in the description.

Chris

Thank you, Tommy. It was the last news. Good ones this time, I really enjoyed them. And guys, if you want to stay tuned with the latest front end news. Subscribe to us, check our channel. Check our socials. Check our website which is frontendhouse.com.Exactly. Okay. See you next week. Thank you, Tommy.

Tommy

Thank you, Chris. It was amazing.