TypeScript, Angular and More Releases - Frontend News #13

Watch the Frontend News #13 - 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 a free consultation.

What is Frontend News #13 about?

• 0:00 - Intro
• 02:28 - Petite Vue - Vue optimized subset. Petite Vue is an optimized subset of Vue for progressive enhancement
• 04:17 - Device Posture API
• 06:01 - TypeScript 4.4 Beta
• 07:03 - Web Neural Network API
• 08:17 - Deno Deploy - beta hosting for Deno based apps
• 09:25 - Angular 12 news
• 10:58 - ECMAScript 2021 approved!
• 12:27 - Next.js Live development server
• 13:34 - Javascript Temporal API moved to Stage 3

If you need help with software development or have an idea for an application, you can always contact our Frontend House experts and have a free consultation.

Transcription

Chris

Hello, everyone. Welcome to the 13th episode of the Frontend News. Today, it’s going to be epic, because you see me, Chris, and Tomasz. Hey!

Tommy

Hey, Chris. How are you, man?

Chris

I'm perfect. And we are shooting an amazing video about front end news again. Stay with us. Tomasz, how are you doing?

Tommy

I'm fine. My work, as always, was perfect. I was sick a little bit, but now it's all right.

Chris

How was your week, man? It was perfect. It was amazing. Thank you so much.

Tommy

Hey, man. Listen, listen. I've got good information for all of us today. I prepared 9 news from the front end world, only hot updates.

Chris

Wow, that sounds great. And guys, the JavaScript environment evolves so quickly. So if you are looking for developers that always stay on the top, they're always up to date with the latest libraries let us know on our contact form at frontendhouse.com. Is this correct?

Tommy

Yes, you are correct. Frontendhouse.com. Together we can choose a programming language, manage, plan, design and implement and obviously deliver your application with the highest standards and move your business to the Internet. Need some examples? Check our Case Studies.

Chris

OK, but what's on the agenda? Come on.

Tommy

Nine news. The first one will be about Petite Vue, which is a Vue optimized subset. We are also going to talk with you about device posture API. The third thing will be from the Typescript world, we received the 4.4 Beta Release. And then another API for Web neural networks. The next thing will be about Deno deploy, which is better hosting for Deno based apps. We will also check what's going on with Angular and the 12 release. Another use will be ECMAScript 2021 has been approved!

Chris

We are going to present to you guys the Next.js live development server and the last one will be about the JavaScript Temporal API that has been moved to stage 3. So let's see the intro.

OK, that’s time for the news, actually, the first one was about the Petite Vue.

Petite Vue - Vue optimized subset

Tommy

This is the subset of the Vue.js, which has been created by Evan You, the creator and project lead of the Vue.js projects. As I mentioned, this is the subset of Vue.js, but it has been optimized for the progressive enhancement approach.

Chris

Wait, so you were saying that the Vue.js itself is not optimized?

Tommy

Yeah, it's optimized. It's not like it has not been optimized. But the Pettit Vue is something that can be used for progressive enhancement. So you can, let's say, like in step by step, replace the current approach. For example, if you're using JQuery, you can easily switch to the Petite Vue, step by step, component by component, or just, you know, element by element. Replace runtime modules. OK, am I correct?

Chris

That's interesting. Well, yeah, yeah.

Tommy

Yeah. So nothing much you can do. Like I mean not much you have to do to use it. The thing that you have to do is to import the library, for example, from the CDN and just use it and the inspiration for the Petite Vue library is Alpine.js. This library helps us to manage the behavior directly inside the markup.

Chris

So have you ever used our Alpine.js? I’ve never heard about this.

Tommy

Yeah, I did not use it on my own, but obviously I checked the documentation file and tutorial, and it looks amazing. I mean, this is really easy to use. The configuration is almost like importing the necessary library and just use it anywhere you want. Chris and you guys, check the description. Links are in there and you can get familiar with the Petite Vue and, of course, with the Alpine.js.

Chris

Yes, I'm sure we will, though. Is it all from the Petite Vue?

Device Posture API

Tommy

That's everything. It's time for the second news, which is Device Posture API. So, guys, nowadays we have a lot of different devices that display the Web, right? OK, so let's focus on the devices that have the possibility, for example, to fold, that have flexible space. You can use it as a book, for example. You can fold it in two. So you have two screens. You can fold it like a tent or you can fold it like, I don't know, like a laptop.

The display is being divided and you have the different planes where you display the, you know, the content. Am I correct? You know what I mean.

Great. OK, so the web responds to that problem and W3C - the new standard - which is the device posture API where you can easily use the new API to, for example, put some styles for such case when for example, the screen is divided by two and it has been fold like a book, and you can write the dedicated JavaScript code and create the dedicated UI and UX for such cases. So it sounds good, Chris?

Chris

Yeah, sounds good. But is it really standard? Does it work for all the browsers? What is the support for now?

Tommy

The support for the newest browser is not finished yet. This is like the very first version of this API specification. But yeah, the W3C is working on that. So I believe it will be widely used in all modern browsers and I'm really looking forward to using it in our projects.

Chris

Safari, we keep our fingers crossed. Let’s go to the TypeScript and the new implementation. What's TypeScript? I think it is still beta, right?

TypeScript 4.4 Beta

Tommy

Yes, it's still Beta 4.4 version. But we can find some interesting things like the breaking changes that we cannot initial, the abstract properties being defined in the class. Of course, there are more insights like performance improvements, spelling suggestions for the JavaScript, the CLI updates, templates, string pattern index signatures are added. And many, many more stuff.

Chris

A lot of updates actually.

Tommy

Yeah, lots of updates, but yeah, still, this is the beta version, so we need to wait a while to have something stable and well checked.

Chris

Is there any information when they are going to release the 4.4 version?

Tommy

I did not find any information about that, but I believe it's a matter of a few weeks probably.

Chris

Yeah. Let's wait and we will see. So now web neural network API.

Web Neural Network API

Tommy

So we received the very first version of the Web Neural Network API. It has been delivered by W3C again, and it gives us a set of functionalities that let us work with the neural networks via the web. So that sounds amazing in the short term. It means that we won't need any external libraries to implement the neural network tasks.

Chris

So you're saying that we don't need TensorFlow anymore?

Tommy

I mean, I cannot tell that this is 100 percent true because the functionality being put in the first version of the specification is quite poor. I mean, they have less functionality than TensorFlow. But yeah, we will see. And of course, the developers will put more effort to add new stuff in there. So I cannot say yes. I cannot say no. I think it's worth tracking. Right. So yes, this is a big mystery, but it's worth tracking and checking on how we can use it.

Deno Deploy - beta hosting for Deno based Apps

Chris

That is not a mystery, I'm sure, is a Deno update. So what's with this Tomasz?

Tommy

We have mentioned Deno a few times in our Frontend News broadcasts in the past. Now Deno company, Deno team delivers something that's called Deno Deploy. And it's nothing more than the cloud-based hosting that lets us deploy Deno apps on their costing that has been split into 25 data centers all over the world. So we can have a really fast response time when we use Deno hosting in different time zones in different areas of the world.

So that's good news for those who are using Deni on the production or for their own development purpose. You can easily deploy your app with just a single command.

Chris

OK, I mean, that sounds amazing. I think there is nothing to add, to be honest. So let's go to that hot topic, which is on Angular 12. I'm wondering if you guys who used Angular in your projects, let us know in the comments. We use it for a very big project at Frontend House and we like it. So, yeah, just curious about your opinion.

Angular 12 News

Tommy

So Angular 12 just arrived and inside we can find some breaking changes. For example, the Vue Engine, it will still be available to be used, but in the future, it will be totally removed from Angular and apps that rely on the Vue engine would just stop working, but we receive that new stuff instead. So this is something that's called Ivy technology. This is the new compilation and rendering pipeline instead of this Vue engine, which I mentioned.

But here we have more stuff inside. For example, there is the WebPack 5 module Bandler. The production is ready for now. The support for the Internet Explorer 11 has been dropped, so it won't work on it anymore. Oh, we received a bunch of updates around the CLI and some minors for the library, for example, for the TypeScript classes.

Chris

OK, so apart from replacing the Vue engine, the is no great changes?

Tommy

Yeah. This is the biggest change that I found for Angular 12. But if you want to check what's more inside these minor bug fixes, obviously I recommend and encourage you to check their website and release notes where you can find the full list of the changes, improvements, and fixes.

Chris

Obviously. And now is the topic that I can't really wait to hear about. You know, what change has ECMAScript 2021?

ECMAScript 2021 Approved!

Tommy

Yeah, the biggest news around that is that it has been finally approved. You have approved that. So Chris has approved the new ECMAScript version, so we will be able to use it in the near future. And I highly recommend to switch to stay always on the top as the front end house developers. Right?

Chris

Of course. But where is the list of the changes? What’s new?

Tommy

The full list of changes is in their specification. But I want to speak about one thing. We also received the function that will be called “replace all”. So you probably know what it will do. It will replace all instances of the substring that we put as the first argument to the thing that we will put as a second argument. And we do not have to write Regex anymore or we do not have to replace substring inside the loop.

Chris

Yeah, sounds good. I think we have some news about the ECMAScript 2021 already, don't we? I mean, we have the list of changes, but now it's finally approved. So that's good to know and I approve that. Um, but yeah. Let's go to the next topic, which is Next.js.

Next.js Live Development Server

Tommy

Yes, I want to speak about the Next.js Live just live development server, which is the tool that has been delivered by the Vercel team, the same that will deliver us the next.js. And the Next.js Live is the browser-based development server that allows us, developers, to collaborate on the same thing via the browser. So no more configuration on your machine. Everything will be run in the cloud and it will enable you to collaborate with the whole team and to share the code from anywhere.

That sounds amazing because the speed of the whole server parsing, you know, to receive the static website will be faster, about 24 percent, which has been measured by the Vercel team. So I'm looking forward to utilizing that tool and checking if we can use it on the production and for our daily work because in my opinion, it will make our life easier a little bit. So, yeah, why not?

Chris

Every update makes our life easier. That's why we are here. So it's time for the last one, unfortunately.

Javascript Temporal API moved to Stage 3

Tommy

Yeah, it will be very quick. And yes, we spoke about the temporal API in the past, I believe. If not, the temporal API will replace the date/time API that we currently use with JavaScript. The date/time API has been problematic over the years. It's been hard to be used and utilized into apps and it's hard to play with the time zones, with data formats. And yeah, it makes a headache for a lot of developers nowadays.

But yeah, the Web responds with a temporal API, which will be much cleaner, easier and faster to be used and it has been moved to stage three. So we are one step closer to the official release, which I'm really happy about, and I really encourage you to check the documentation, how you can play with it, how you can test it, and utilize it inside your app. It's not production-ready yet, but soon, very soon, we'll be able to use it in production. So, yeah, looking forward to that. That was the last news from my site, guys.

Chris

Sounds good. And, uh, it was a pleasure to host you over the last twenty minutes. And guys, if you watch this to the very end, which is amazing, I really encourage you to join us at Frontend House and our socials like Twitter, Facebook, Instagram, of course, YouTube, and all other podcasts, see you guys there and see you next week.

Tommy

Thank you, Chris. See you.