Modern Website, Tools, Releases - News20 | frontendhouse.com
Guy with notebook

October 15, 2021

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

Krzysztof Wyrzykowski

CTO

Tomasz Krajewski

Head of Frontend
Share

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?


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.

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.