Release of ReactType and not so simple animation in Pixi.js - Frontend News #4

Watch the Frontend News #4 - the podcast about tech and front end innovations. Every 2nd week we deliver a portion of fresh insights and news. Today we will discuss:

• 00:00 - Intro
• 00:40 - Agenda
• 01:10 - ReactType 5.0
• 05:10 - Node.js v15.9.0 Release
• 05:52 - Angular v12.0.0-next.1 Release
• 07:40 - Firefox says goodbye to PWA
• 08:31 - Awesome things for React Ecosystem
• 09:36 - C++ in N|Solid House
• 11:38 - Curated project of the week
• 14:02 - Tips and Tricks. Live coding. PixiJS

Transcription

Chris

Hey, it's Chris, and Tom. We are going with the next Frontend News podcast. The number?

Tomasz

Hmmm, 4th, I believe.

Chris

And today it's a special episode because everything is different. Maybe you already see it. Let's give you a few seconds. We switched our T-shirts! Now I’m Frontend News…

Tomasz

And I’m Frontend House!

Chris

Today, we have six fresh news for you guys, the first one is ReactType 5.0, the next one is again Node.js Release.

Tomasz

Then, we will speak about the newest Angular Release.

Chris

We will show you awesome things for React Ecosystem. Next is C++ in N|Solid House.

ReactType 5.0

Tomasz

OK, so let's speak about the first one, which was ReactType 5.0.

So do you remember the Microsoft FrontPage App?

Chris

No, not at all.

Tomasz

You were able to create the website without even writing a single line of code.

Chris

This one! I remember this one. I was. Yeah, come on.I was trying to make a Diablo II website for showing like the latest news of Diablo II.

Tomasz

Diablo II. Always in my heart.

It was the very first time I tried to share news from the ability otherwise in my heart that it was like the very first time with you guys.

Tomasz

So I believe it was like a long time ago.

Chris

It was like my primary school.

Tomasz

If you want to go back to the times when you can drag and drop and, you know, just click your website, you can do it again with the ReactType 5.0. This tool enables us to create our prototype of the web without even, you know, programming.
You can just drag and drop elements, define attributes via their interface and it's ready to be used. You can export the project to the code and, you know, run it, for Gatsby.js , or for Next.js.

Chris

How are we going to explain to our clients why the front end is so expensive? If it is just drag and drop?

Tomasz

It is how it is. You need time to spend time to properly drag and drop and it costs. A lot. Obviously.

Chris

OK, we know about ReactType, we know what it is. But what's in the current release?

Tomasz

Ok. So in the newest release, the React Type team decided to add a possibility to export the project to the Gatsby.js framework, which is a new thing because previously we could do it only with Next.js.
I remember we did some projects in Gatsby and we have some bunch of problems with it. Next thing is that they add two ways of component construction. It means that we can start building our up from the higher scope and going down, down, down to the basic elements.

Or we can start building from the basic elements and using those elements, we can create the overall picture.

Chris

Which way do you prefer?

Tomasz

I prefer to go from small to big one.

Chris

Smooth. Smooth transition like with framer motion, which, by the way, you can see in the previous episodes.

Tomasz

Exactly. Worth checking.

Chris

What an advertisement, i love it.

Tomasz

I'm waiting for those for this day where we will receive money for such advertisements.

Chris

Stop about the money. Come on, you're a front end developer. Go ahead.

UI UX revamp integrates universal design sensibilities for web applications, which basically means that our exported app will match the design rules more efficiently.

Chris

Okay, so how this information is going to affect the front end implementation process?

Tomasz

So when you have a small amount of time, which is almost always - the deadlines are really tight and you want to build a really fast prototype just to create a proof of concept. And the more work is on the back end side, and the front end and front end does not matter at this point. You can use it. You can use this tool to drag and drop to click your project, export it, and after you can attach some communication with the API, for example, and you can do it really fast.

So you want to invest your money and time in programming. And the proof of concept step - it is how I see it.

Chris

Sounds interesting - worth checking.

Node.js v15.9.0 Release

Chris

The next one was Node.js release - again.

Tomasz

This is kind of a tradition that in our Frontend News we are talking about NOde.js release. And this time I want we won't disappoint you. As usual, there are improvements and fixes - smaller, bigger ones, around, you know, different areas like Krypto, Deps, Docs, file system, stream timers. And what's more - you can just check it on your own, as always is in the description.

So yeah, it's worth being up to date with what's new.

Angular v12.0.0-next.1 Release

Chris

OK, this is from the Node. Let’s go to Angular, version twelve.

Tomasz

Oh yeah. Version twelve point point. Oh gosh. Next point one. That's what sounds good.

Such a long term but yes, for those who use Angular in their projects, there is some interesting news because the newest release has some obviously some minor changes and improvements, but also it includes some breaking changes, which is just worth to check. So, the breaking changes are around methods, in form group classes. The Angular team has updated the event emitter to a particular method like push, remove control or add control. So if you are somehow over writing those methods in your projects, probably something can stop working.
And yeah, you need to update the code.

Chris

So how does those breaking changes actually impact your project?

Tomasz

Yeah, so as I mentioned, if we overwrite the logic for the form group, probably something can stop working or you can have some unexpected errors or something just unexpected can occur.

Chris

So it sounds like issues that are tricky to debug actually.

Tomasz

Yes it might be. If you are not up to date with the release notes and you are not aware of these changes, you probably could spend a lot of time trying to find the reason.

Chris

This is why it is worth checking, guys.

Tomasz

We will inform you what can go wrong in your project.

Firefox says goodbye to PWA

Chris

OK, apart from interesting news from Angular world, I think we also have to talk about Firefox dropping PWA. Is it in the next release or It's already happened?

Tomasz

Yeah, it's already happened. So after months of fixing and trying to make it work, the Firefox team decided to drop the support for PWA. So the option was unable through hidden preferences. And unfortunately, it cost a lot of problems for the developers. So, yeah, that's why they decided to drop the support.

Chris

So is there any point they're planning to support it in the future release or no news by now?

Tomasz

Yeah, good question. So for now, there are no plans to support it in the future. So the Firefox team will focus on something else.

Awesome things for React Ecosystem

Chris

The next one is going to be about repositories with really awesome things from the React ecosystem.

Tomasz

I have got the answer for your JavaScript fatigue. If you're working with React, it might be a holy great for you. It's really hard to find a good and solid library which will answer your problems and answer your questions and give the proper solution. So, ladies and gentlemen, let me share with you the awesome react repository where you can find tons of useful stuff like React tutorials, React tools, bunch of libraries, information about React Native, the tooling around the React ecosystem like Redux, MobX, GraphQL, Relay, Apollo videos and much more inside.

So this place will help you with a lot of problems, with a lot of JavaScript fatigue. And believe me, you can find only useful and hot stuff in here.

C++ in N|Solid House

Chris

Thanks so much for this short screen showing session. And the last one is about C++.

Tomasz

Yep, so N|Solid is an alternative to the Node.js runtime. It was the performance and security for the mission critical Node.js applications. So the Node source team has introduced the better version of the C++ API that allows the developers to use C++ code inside the N|Solid apps.

Chris

When we really want to use C++ in N|Solid?

Tomasz

So as we already know, Node.js is a good tool to handle, for example, the high traffic. But unfortunately, JavaScript is not good to handle the highly performance consuming apps like, you know, there is a lot of calculations and the Node.js won’t do it pretty fast.

And if you want to handle it in the most optimized way, for now, you can send such consuming operations to the C++ thread, where it will be processed and the result will be sent back to our Node.js app and loaded up thanks to you boost your performance by moving the performance consuming operations to the very low level, which is the C++.

Chris

Okay, so maybe you can prepare like a quick demo.

Tomasz

Oh okay. We can try. Why not. This will be a nice challenge. So let's try to set up the N|Solid with the C++ and let's calculate something soon.

Chris

OK, Tomasz. Thanks. Fingers crossed. Sounds awesome. That’s it for today.
Let us invite you for a curated project and tips and trips both with me.

Curated project of the week

Chris

Welcome in another episode of Website of the Week.
Today we are going to surprise you and change our agenda by mixing top websites and tips and tricks together. So the format and let us know what you think. Another change is that this time it's my turn to show you something inspiring, which definitely Pixi.js is. Not only for the curated project, but also for tips and tips sessions. Pixi.js is a rendering library that helps us to build interactive experiences and games while keeping perfect, perfect performance and cross platform support.

I decided to present to you this engine and focus on this topic, because, you know, as I observe the market every day and a huge, huge number of awarded websites is based on the Pixi. The best thing I can show you as a proof is a list of examples and the projects made with Pixi.js. As you can see, the range of projects is wide. From simple to the games and serious global projects. It is worth checking because its popularity grows. Developers love it. I love it, and I hope you will love it. For more info, you can visit pixijs.com or just click a few examples below, like the one I will show you - art for global goals. So in this one with Pixi, we can brush through all 17 issues to discover artists interpretations of global goals - all made by one artist. Nice looking transitions made this project very well polished and detailed. I love it.

OK, the next one is from the Brand Studio, its landing page that looks like a huge collection composed of everything they found in the garbage. But, you know, in positive meaning. The full project is full of micro animations, GIFs and objects. It shows that they did projects with a funny approach and professional background. OK, enough about marketing. We now know what the Pixi is and what kind of projects can use it. Now we are going to dive deeper and find out how to actually code it. We are moving to Tips and Tricks now. See you guys.

Tips and Tricks. Live coding. PixiJS

Chris

It’s time for some coding. I will quickly show you how to start your journey with Pixi. We are going to need canvas, preload some assets and add it to the stage and the next animate it. So stay tuned. Here's the recommendation you will find here. Anything you need is quite big because the Pixi is a large library that helps us to handle a lot of stuff. So this way I will show you how to start and what can be really done with this one. You can see the documentation that is also like Learn Section, Community, Set up, even some demos and basic usage. So you find a bunch of helpful stuff here.

However, yeah, let's dive into the code and see it in the action. I have prepared 2 const for you just not to waste time looking for images. We'll use them later. Don't worry about them now. For Pixi, you really need to start with creating application pieces already included in the code pan, so I don't need to do it. If you start your first project, obviously you need to install the panel. OK, let's create a const for the new Pixi application. Nothing that can surprise us.

Application has a lot of options, but we will use just two for now. You can jump straight into the documentation and see what is possible.

OK, so we are going to use it width, let's say, five hundred and height, let's say five hundred.

So we have the square. It is already going to create canvas elements for us. The only thing we need to do is add to the HTML. So the document shows up and we can view it for our canvas which has 500 pixels to 500 pixels. It’s totally black, nothing special. OK, once we have the canvas we can start our animations, interactions, even games. For today's tutorial, I think we're gonna preload the image, show the image and then we can create quite cool animation with this image.
So stay tuned. To preload Image, we use Pixi loader. And let's use the image I already prepared, it's the path of the image, and once preloaded, we run a function, we can call it set up. So we are only missing the set of functions now. OK, probably no errors, but we don't see anything new here because the only thing we did is preloading the image. Pixi loaders provide us a bunch of cool loaders so it has everything you need.

Let's see what we preloaded, actually.

So I will create Sprite from the preloaded assets - guys image - you can already know what it's going to be under this image, I bet you know.

So we create Sprite. For the resources we use the same path we already preloaded and we get texture. OK, so guys, you don't see any changes right now because we are still missing one step, one step to see what's in the image. Who guessed? You see me and Tomasz sending love for you guys. OK, we have the image. We have the very, very basic structure of the project. What can be done with the image?
Let's say you want to change the exposition of the image, so you simply go to guysImg. That means you move it by 100 pixels and you can do this with all the properties like width, heigh, scale, rotation or even entry point. So you simply operate like this. So once you have the image added to the stage, you can change all the operations and play around the image. I encourage you to check yourself. It's super fun. You can do a bunch of very, very cool interactions. So just try this case. For the last part of this tutorial, let's create a super cool effect and that is very stylish nowadays.

So this is going to be a filter added to the image. And will animate this filter. I bet you’ve already seen a lot of pages which have this effect, you might have wondered how to create it, so let's find out now. So for this one, we need to have extra texture. I have prepared a very, very basic texture for you guys. It's like a grayish cloud, but you can use whatever you want. Um, it creates the effect actually so it's worth playing around it and checking how it looks with different textures. But for now let's use this one. So I will create sprites from this one.

OK, we have the texture. Nothing's changed yet. Uh, so let's add the action. The next step is about creating the filter. It's obvious that you just need to check the documentation. But I will show you how to create a very basic displacement filter. To make it prettier, let’s change the wrap mode. Hopefully, there is no Dipo and to use Sprite as a base of this dispute to make it better. Let's turn to the rap mood.
Still no effect, but stay tuned, we added everything to the scene so there is one step missing. We need to add a filter to the image. And now you can already see a very, very subtle effect with the wawes, let's make it bigger. Let's say seventy.

Ok, it's already cool, we see how the image changed. There is a lot of distortion in this one. We are still missing animation and that is where the pixi magic goes. So in pure JavaScript, we usually use interval, timeouts, which are usually bad patterns. There is also a liquid animation frame, but Pixi created something that is called ticker and ticker is this kind of request animation frame we would use with pure JavaScript, so let's find out how to actually use it.

So the app has a ticker added. We add a callback. It means that in each frame it's going to take action. And for the action, we would just change the position of our filter to move it and make this cool waves animation effect for our image. Yeah, let's move it each frame and and make sure if it's, you know, X is bigger than our image, we push the position to zero again - so reset the animation.

And that's it, you can see how it behaves and how cool is that! Thanks for this very short session. I hope you enjoy it and you like the Pixi and you will start your journey with Pixi. It's worth checking if you want to be an interactive developer. It has a lot of possibilities. And as you can see, we use it for most of our projects. So stay tuned and see you next week.

OK, guys, as usual. We want to invite you to our social world, which is…

Tomasz

I believe it's YouTube, Facebook, Instagram, Twitter and Spotify. And we want to receive 5 likes from you.

Chris

Just 5, it’s not a big deal. See you soon, guys. Thank you. Bye bye.