Modern Website, Newest Tools and Releases: TypeScript, React - Frontend News #20

Watch the podcast about front end innovations with our hosts - Chris and Tommy K. Are you looking for software solutions for your business? Fill the form on https://frontendhouse.com.

What’s in Frontend News #20?

• 00:00 - Intro
• 01:11 - Contents
• 02:42 - An interesting Node CMS
• 05:09 - A modern website in 2021
• 09:41 - TypeScript 4.5 Beta
• 11:26 - Depreciation of jQuery Mobile
• 13:04 - React Native 0.66
• 16:22 - State of CSS 2021 Survey started!
• 17:14 - Immutable.js 4.0
• 18:35 - Firefox 93 Beta
• 20:15 - Conf42 - Javascript 2021

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

Transcription

Chris

Hello everyone. Welcome to the 20th episode of Frontend News podcast. Today, as promised last week, I’m here with Tommy K.

Tommy

Hello Chris.

Chris

Hey Tommy, finally together. I was waiting for this one for a very long time, so good to have you here.

Tommy

Thank you for the invitation.

Chris

And the most important question in our news - how was your week?

Tommy

Yes, my week was awesome. Was amazing. I tried to surf, and I ate very tasty food. Yeah, I visited a lot of beautiful places with beautiful views, but what is most important? I did get promoted to the Head of Front End at Liki Mobile and Frontend House. You did?

Chris

Congratulations Tommy.

Tommy

Thanks. It's a big thing.

Chris

You have been working for this promotion for a very long time. You're a very good front end developer, so I'm excited to have you in this position. Guys, you have a strong front end team in front of you. So let's check what's on the Agenda.

Agenda

Tommy

Agenda is also very strong for today. And I mixed a bunch of interesting tools with some updates from the JavaScript and front end world. So first I'm going to speak about an interesting Node CMS.

Chris

We can also talk about a modern website in 2021.

Tommy

And the third thing will be our lovely TypeScript, which is in version 4.5 Beta.

Chris

I'm not sure if I'm right, but Tommy is also about to mention jQuery.

Tommy

Yes, and the depreciation of jQuery Mobile.

Chris

Oh, you spoiled everything.

Tommy

I'm sorry guys, I won't sell anything more in terms of jQuery. Wait a second, please. But of course it's not everything. Next interesting news is from the React Native word, and there is a new release version 0.66.

Chris

Okay, also going to talk about CSS.

Tommy

The next thing is Immutable.js library and it's fourth version.

Chris

Firefox 93 Beta.

Tommy

And still last, but not least, conf....

Chris

Let me introduce this. Tommy K is going to speak on Conf42 about micro frontends! Can't wait to hear that.

Tommy

Thanks. You spoiled everything.

Chris

I spoil everything, but yeah, there is still the real news. Let's see the intro and see you in a couple of seconds. Hey guys, intro is over. So let's hear something about the new Node CMS.

An interesting Node CMS

Tommy

Meet the headless Node CMS that integrates with your app using a straightforward API. Smooth, simple and tasty content integration. That's Butter. And that's how the creators of the Butter CMS describe their products.

Chris

That sounds like an advertisement for this CMS. Tommy, tell us as a developer.

Tommy

Yeah, I did find a really interesting CMS, which is a Butter CMS. I went through the documentation, through developers scoring, how do they use the Butter CMS, and if they find this a really useful tool. And what was really interesting for me, is that the Butter CMS is like the number one headless CMS for the developers according to surveys. So I thought it's Strapi or WordPress, but it occurred that it's Butter CMS.

Chris

Exactly, I mean, we were always using Strapi, so I'm very curious about this one.

Tommy

Yes, and that's why I would like to switch for a while just to test it and verify how it works, what we can do with it. But the creators of the Butter CMS promised us that we can do everything that is required to be done with the CMS. We can take care of the SEO, we can build amazing pages. What is important is that the Butter CMS delivers the tooling that handle the content for the components instead of building just the whole page with, let's say, the main block of text like in WordPress.

Okay, you can create different sections dedicated for the different components, so it's very flexible and it gives a lot of functionality and tooling...

Chris

Still sounds like Strapi.

Tommy

Because, you know, what can you do new with the headless CMS? Come on.

Chris

I don't know.

Tommy

But yeah, we've got the full Node API dedicated for the custom pages, custom content modeling, CDN for assets, web hooks, testing environment, customer case studies. Everything we need in one place. So guys, if you're interested, just check the Butter CMS. Link is where Chris? Not there. It's in the description.

Chris

It was a car passing by, but yes, it's in the description. So I strongly recommend you to check this one. And now let's jump into the modern website in 2021.

A modern website in 2021

Tommy

A few days ago I did find an interesting article by Kent C. Dodds about creating the modern website using the newest hottest tools in 2021. And what I found there is very interesting from the creating the architecture perspective, from the design patterns perspective, because...

Chris

Another one :)

Tommy

No worries. So yeah, Kent describes a really great architecture using the newest tools, and why I mentioned it, because I just want to describe the tooling that he used because it's like a big bunch of different layers for the database, for the server logic.

Chris

So what’s in?

Tommy

Yes, exactly. So starting from the front end, he uses React.

Chris

What's the surprise!

Tommy

Yay, what is React, you will ask. No, I know you won’t, because you know what it is, and you guys also know what is React (of course it's a JavaScript library for building user interfaces). But what the Remix is?

Chris

I don't know.

Tommy

Exactly, and I didn’t know either. I dig into the topic and I did find out that Remix is a client server framework to create beautiful, really fast websites, to help the server side rendering. It connects the database layer, the server layer with the front end layer, and renders the pages and delivers them pretty fast. And what is really interesting about the Remix, it delivers the native tooling for the cache, so HTML cache is being used in here and much, much more tooling that was abandoned for a while in terms of new fancy stuff. So Remix brings back old school things that work really fast and it's really performed well.

Chris

And because these guys are like celebrities of the front end... So I think Remix is going to be a new trend in the front end development very soon. And we also like celebrities and we mention this, so...

Tommy

Exactly, Kent message us after seeing this :) So let's move forward. Obviously he is using TypeScript XState, which is very interesting. Because not everyone uses the XState, which is really a very interesting library to handle state machines. If you have really complex states in your components you can reduce the logic. For example, in React you've got let's say ten states in one component. It gives me a headache, to be honest. But if you want to reduce the whole logic, you can use XState to create a state machine, create all the transitions, so it's worth checking.

But besides XState, we can find Prizma for the server and back end layer, which is a really well-performed environment to handle the connection between the back end of your Node.js application, for example. Okay, Express.js, and I believe I don't have to explain what it is. Cypress, Jazz, React Testing Library, Tailwind, PostCSS, Reach UI, and much, much more from the front end layer. But what is also important, he utilizes the GitHub and GitHub actions to create the deployment pipeline. So he uses Octokit just to utilize and make the GitHub actions a little bit better. Tuned up. Postgres and readies for the database layer.

Chris

Sounds like a lot of tools. I remember the times when we had things like HTML CSS, JavaScript, and in the best times we had like jQuery or Backbone, but now we use everything to deliver websites.

Tommy

Yes, I'm really happy that you mentioned it because I was really curious about your reaction when I will start describing all this stuff, and it is a lot of tools. My question is, do we really need so much stuff around our products to deliver applications?

Chris

Apparently we need it.

Tommy

Maybe. Well, guys, what do you think? Do you use all of this stuff to deliver your application, or you have another favorite stack, or you think that it's still not enough and you have much more to link around you? Please don't hesitate, send us a message, leave a comment. Contact us anywhere you want to. Let's get in touch. Exactly.

Chris

Exactly, but from this bunch of tooling let's jump into TypeScript which I think most of us use nowadays. What's in the TypeScript?

TypeScript 4.5 Beta

Tommy

Yes, I know you're waiting for this day when I will say, hey, there are breaking changes. And this is the day.

Chris

What's the breaking change?

Tommy

Okay, we've got three breaking changes inside the TypeScript 4.5 Beta release. The first one is about typing in a lib.d file. So the building declaration types have been a little bit changed. It shouldn't affect your application, but in some cases you will have to update your types of implementation. Just take a look into the details on the TypeScript documentation - what has been actually changed in terms of the types and its declarations, and you will know what to do. Another thing, TypeScript adds inference changes from Awaited, and the third thing is TypeScript compiler options checking at the Root of the tsconfig file.

Yeah. Besides these three breaking changes, which I really recommend to check in the documentation, we've got a bunch of smaller things around TypeScript that tune-up this language, new functionalities. Guys, there is so much stuff in there. I just don't have enough time to speak about all of it. So take a look, guys, at the documentation.

Chris

No, take time… Okay, kidding.

Tommy

I'm prepared. It's not like I don't know, but I have so much news I want to speak about all of them.

Chris

Exactly. You have plenty of news and you spend like, ten minutes talking about TypeScript. So let's do the next one, which is our lovely, lovely jQuery.

Depreciation of jQuery Mobile

Tommy

jQuery, yes. I have tears in my eyes every time I mention jQuery. Probably you've heard the news that the jQuery team released, after five years, the update for the jQuery UI library. But it's not everything. Well, jQuery Mobile has been depreciated officially, so I think it's close to the line when we can say... There is no jQuery. But before it will occur, we still have a lot of time to support our legacy projects. But to be serious for a while, jQuery Mobile has been depreciated.

Of course it will be available but, for example, support for the jQuery Mobile will be totally down. If you find any critical bugs, you will have to send an email instead of creating an issue of the repository.

Chris

I'm sure there will be a lot of people sending those emails each day.

Tommy

Wondering if they will just take a look once inside this email box. No, just kidding. So if you want to switch, this is the right time to stop using jQuery Mobile and use more modern tool, especially for the mobile. So you won't wake up in 2022 and think, I should switch months ago, my bad.

The beginning of jQuery Mobile was 10 or 11 years ago. Something like that. So, yeah, the technology moved totally forward. So guys, just switch to something new and better.

Chris

Oh, come on. Maybe let's switch into React Native.

Tommy

React Native, great. What a smooth transition, isn’t it?

Chris

Yeah, nice.

React Native 0.66

Tommy

React Native version 0.66. Are you curious what's in it? Absolutely. Okay, so we don't have any breaking changes, but of course, we have a bunch of interesting updates. First thing is that they did update the Hermes engine from the previous version to the 0.9 version, which should fix smaller issues around how to use Hermes on iOS. For example, I have some problems with Hermes on iOS. Not all dependencies once you work and cooperate with each other. So I spent an enormous amount of time to fix my setup, to fix it on Hermes. So it took me some time.

Hopefully, the newer version will resolve these issues. Nightly and committee releases, React Native team wants to deliver a better pipeline for the release process. So instead of releasing the new version just like that, they want to create a few additional steps to let the developer test, for example, the nightly release before it will hit the official...

Chris

Something official.

Tommy

Yes, before it will officially be available.

Chris

Smooth. Don't shake your hands. Be cool.

Tommy

I'm sorry, let’s continue. New Bluetooth permission on Android. That's new in React Native. And also the fix for tapping the child view outside of the parent boundaries, which on Android didn't work well. So it has been fixed and that's it. That's it from the React native. Let's build the mobile app. Chris, what do you think about - I'm curious if you ever used Flutter before?

Chris

I did.

Tommy

Yeah. And how would you compare it with React Native? Do you have any preferences about what tool to use?

Chris

I don't have any preferences , to be honest. As a developer, I would definitely choose a tool for a specific problem, for a specific team, and the solution I would deliver. To be honest, I will focus on analyzing the project, analyzing the needs and picking the proper tool. I really love both. They are very cool.

They both still deliver new changes. They have new updates, so it's worth tracking both of them. I'm happy to work with Flutter. I'm happy to work with React Native. And I'm happy to work with a bunch of talented developers that we had in Frontend House.

Tommy

And I'm happy to work with you. Thanks Chris, for the answer. Yeah, Flutter is...

Chris

What a sunny shining... Yeah, I can't stand it anymore.

Tommy

Do you want me to move a little bit? Okay, let's move our studio :)

Chris

Okay, guys, we changed our studio and we smoothly jumped into CSS updates.

State of CSS 2021 Survey started!

Tommy

About CSS, I know that you've heard about the surveys of state of CSS, state of JavaScript, and state of other languages. So the state of CSS 2021 has started and you can take part in this survey. Just jump into their website, link is of course in the description under this video, and yeah, I just answered the question and be part of the state of CSS.

Chris

Are you the part?

Tommy

Not yet, I am waiting for you. What do you think?

Chris

Absolutely. I'm going to do this right after this video.

Tommy

Be honest.

Chris

I am honest and I'm going to do this right after this episode. I will be part of the CSS community.

Tommy

Cool. Let's speak about immutability, right?

Chris

Exactly.

Immutable.js 4.0

Tommy

And maybe about Immutability to be more precise. Immutable.js version 4.0 has a ride with a lot of great changes inside. Mark fixes, improvements, new functionalities, new features, everything you want to need and want to use with the immutable data.

Chris

It's interesting. It's not like a very big tool, I'm curious what they still need to change, deliver… It's version 4.0, so it's quite breaking changes.

Tommy

Okay, so one of the biggest changes is that the team that is working on the Immutable.js has grown up and new members have joined this team. So this is one of the great news. The project changed its license to the MIT license. Guys just make sure that everything is alright with the law. Better TypeScript and Flow type definitions, brand new documentation, Iterable is now renamed to Collection, Records no longer extend from Collections and a bunch of other updates. So as you can see. Well, nothing really big, but still it's great that this tool is being updated and kept modern.

Chris

Absolutely very handy tool, especially with React and Redux development. We use it very often, but as well we use Firefox to test our applications. Mostly to test our applications, but we still use it. So what in?

Firefox 93 Beta

Tommy

Well, haters gonna hate. No, just kidding. Firefox 93 Beta. We did get a bunch of updates, maybe not a breaking one, but the ARIA meter has been implemented inside Firefox before this attribute did not work. The small-caps keyword is now supported for the font-synthesis attribute for the CSS. So font-synthesis is something like, if you have a font, for example Arial, in your project and it's a custom Arial, and for some reason you do not have the bold version, in the browser we try to synthesize this version of the font.

It won't look perfect, but still it will try to keep the style. So it's worth checking. The properties of imageOrientation and premultiplyAlpha can be passed to the method createImageBitmap. And in the past we couldn't do this, so if you want to play with the bitmaps with the JavaScript on the Firefox now you can do this. And about security, the SHA-256 algorithm has been now supported in the HTTP authorization before we use MD5, which was quite old and not secure at all. And that's it.

Chris

That's great news for Firefox, I can't wait to see it. And now guys, the most important news of today - self promotion of Tommy K.

Conf42 - JavaScript 2021

Tommy

Hello everyone, I'm Tommy K and I'm the Head of the Front End in Liki Mobile Solutions and in Frontend House. Soon, in 19 days I will be a speaker at the Conf42 conference dedicated to JavaScript code. I'm going to speak about Micro Frontends architecture and foundations. So if you're interested to hear about this awesome topic, don't hesitate and join the conference. Sign up today, don't wait, because the tickets are really hot and there is a low amount of them waiting for you. And besides my speech, there will be a lot of great presentations from the well known brands like Google, AWS, and more.

Chris

I will be honest with you. Of course, we have scenarios and we know the news and so on. But this one was like out of his head.

Tommy

It was freestyle.

Chris

It was freestyle. I'm really proud of you Tammy. I can't wait to see him at this conference. And guys, I also can't wait to see you next time. I will be with you in the Expert Zone in the next week and with Tommy K in two weeks. So see you soon and check our frontendhouse.com website. Our lovely YouTube channel, Instagram, Facebook, right?

Tommy

Yeah, all the socials.

Chris

Twitter. All the socials. Spotify. Check us everywhere. Follow us everywhere. We're gonna deliver great news every week. So guys, see you soon. Thank you.

Tommy

Thank you, Chris. Finally together.

Chris

Finally, bye.