Chat Interface in Web App for Better User Experience - Frontend News #7

Watch the Frontend News #7 - the podcast in which our hosts Chris and Tommy K share tech and front end innovations.

Today we will discuss:

• 0:00 - Intro
• 01:55 - Contents
• 02:34 - Fabric v4.4.0
• 04:46 - NSFW JS Library
• 05:29 - Run your tests directly in your IDE
• 06:47 - React hook form finally evolved
• 08:25 - 10 years of WebRTC
• 10:03 - Curated project of the week
• 11:52 - Tips & Tricks - Live coding

Transcription

Chris

Hey, guys, today is lucky seven. It's lucky because we see each other in the office.

Tommy

We are together. Hello. Let's start this one. But first, watch the intro.

Chris

Hey, guys. Tomasz, I know that you had your presentation on Warsaw IT Day. How was it?

Tommy

Yeah, it was great. I'm really excited that I could take part in such an awesome event. And there were a lot of great, great, great presentations.

Chris

Which one is your favorite?

Tommy

I watched a lot of presentations from different areas like blockchain, cybersecurity. But mostly I focused on, obviously, the front end world. Yeah, and one of the best, the most interesting presentations for me was Browser Can, where we could find a bunch of information about what the browsers can actually do. And there were a lot of secrets that I was not worried about previously.

Chris

So that's interesting. I was hoping that you would tell me that the most favorite one was about micro frontends. Come on.

Tommy

Come on, man. I don't want to be selfish, but that was what he said was true. So, you know, what is the best presentation.

Chris

It is. OK, but for today's topic, we have five news today. Is it five? Yes, it's five news from the frontend world. We start with Fabric v4.4.0. And next we go to an NSFW JS Library, which I will explain later what it is. And after that, we jump straight to test into your IDE.

The next one will be about the React hook form and its update. And the last one, it's the WebRTC that hits ten years. Exactly. So let's get started. OK, Chris.

Tommy

So what's the first news?

Chris

I’ve already told you.

Tommy

I know. I know. I'm just kidding. OK, the first news is Fabric. Go ahead.

Fabric v4.4.0

Tommy

OK, so FabricJS is the framework that gives easy to use tools on top of the HTML5 canvas. It gives like the interactive object models so you can easily deal with creating, for example, shapes, polygons on canvas and program some, you know, interactions with it or between. It's OK. So the fabric received the new release, which is four point 4.0, which includes some fixer's and new features, which I recommend to check on the ground in the release notes.

What can I say more about Fabric is that this tool was used by me not in a commercial project, but just to test it and verify how it works. And it's like, you know, easy as making a sandwich.

Chris

Really? So why do we always use Pixi.js or Phaser?

Tommy

I think it's because we are more familiar with the tools. And I'm not sure because I didn't I did not compare them. I believe that Pixy.js might be more complex than fabric. But this is something that would be nice to check in the future. I will check this out and we can discuss it on the next chapter.

Chris

So Tomasz, to sum up: we have Pixi, we have Phaser, we have Fabric and we need to test performance between them. OK, so early, early next week, you post with those tests prepared by you, so we have a conclusion for the next episode, righ?

Tommy

Yeah, I think that it is a good idea to compare those tools and check which one has the most performance. So I know Chris, you want to hear that. I promise I will prepare the comparison of those libraries. Amazing. Great. Let's see next week.

NSFW JS Library

Chris

The next one was about new I mean, not the new JavaScript library, but the one each we can use for multiple projects to reduce administrator working time so we can filter the images and kind of stuff automatically. So, Tomasz, what is it all about?

Tommy

We are going to speak about NSFW JS Library, which is not safe for work JS. It means that we can filter the images to remove or blur the content that is not safe at all. For example, it contains some pornography and we want to block the user input from sending such images to our backend. And this is the solution built on top of the TensorFlow, which is commonly used all over the world. So probably tensorFlow is well known for you but this library might be something interesting. The link you can find in the description on this video and you can check it out. Exactly.

Run your tests directly in your IDE

Chris

OK, so the next news was about the test in your IDE?

Tommy

Yeah, that's correct. So I found a really nice tool, which is like the news for me because I did not meet anything like that before. It's called Wallaby JS. And it might be a really interesting thing for you. So it helps to trigger your tests directly in your IDE. So during your writing of the tests, for example, for the component written in the React, you will write unit tests for your logic.

This tool, this library will run the tests directly in your IDE and display the result of the tests near the assertion or you know, the condition check.

It's cool, man. I need to check it. And really, I recommend you check. Now it's time to practice. After this episode, I will just click the the button and to use it in my IDE, which is visual studio code.

Chris

OK, Tomasz, that was something new, very nice advertisement. They paid you. OK, so let's go to the next. I think we were about to talk about React form hooks.

React hook form finally evolved

Tommy

Yeah exactly. So I believe most of you are working with React and meet the problems with creating a really complex form. There are a bunch of tools on the market you can use and integrate with your React application. And one of them is a React hook form. This library was not updated like for the last two years. Yeah, they did anything. Exactly. And after two years we received calls are not two years old.

Chris

No, come on, forms are not 2 years old.

Tommy

Yeah it's true. Yes, 2 years, we are old. Unfortunately, man, we are not getting younger.
It will be, it will be good. I remember the first day when they announced the hooks and I was like, oh man. The new approach, how to work with it is fantastic.

And it's over two years. Time is fast. Really fast. Yeah. OK, but yeah. Let's let's go back to the topic. They put a new update for the React hook form, which includes tons of fixes and some new features that they recommend to check, because I believe if you use the React hook form in your applications and yeah, just check it out link in the description.

Chris

But compared to those two years, that was so quick. We have ten years of WebRTC this year.

Tomasz

Yes. So in 2011, we received the tool that is called WebRTC. This technology is being used to deal with the real time communication in your browser. So imagine you would like to build a real time video chat with anyone else who's using your app. You can adapt the Web RTC to achieve that. And after ten years, after ten years, finally in 2021, WebRTC become a standard in W3C and ETF so we can use it almost in all modern browsers and it covers almost like 95% of all of the process that are used commonly in the web.

So this is a huge update. It's this tool that has finally become a standard to become official. I believe we were using it for years. Yeah. And that's it about the news from the last two weeks. I believe the next 2 weeks could bring another bunch of updates, which I'm waiting for me to.

Chis

Me too. But today we still have some time to talk about this project and tips and tricks. Ror the curated project we're going to talk about a very cool one, which is Messy messages and for the Tips and Tricks we talk about…

Tommy

I'm going to show some tips about code optimization. When you deal with the React apps using a webpack.

Curated project - Messi Messages

Chris

Hi everyone, this is a curated project. We're going to show you one project that I and one more developer from front and work on. It's called Messi Messages and it was done for Unit 9, Lays but with Messi collaboration, messy messages is the experience allowing Messi’s fans to generate their own. personalized video messages. We support a bunch of localizations, so go ahead. OK, let's go for the experience. So we use a chat interface for our user to communicate with Messi and provide some key information about their plans. Let's go through the entire form. So what's your name? It's Kristopher. Nice to meet you. My friend's name. So let's maybe ask to meet Tommy K. As you guys see, each step has its own massive gestures recorded explicitly for this particular experience. OK, guys, I'm not a football star, but I play FIFA, so let's choose to fire up the console. And when? Maybe tonight. OK, so that's it. We got our invitation for Tommy. But guys, you know what? I want to show you how it works. Just go and do it yourself and send your own personalized invitation to your friends. Do you like it? Feel free to invite me in the comments and enjoy the rest of the show. Cheers.

Tips and Tricks

Tommy

Hello, guys. This is another round of tips and tricks with me. Tell me today we are going to focus on the React Library. And what I want to present to you is how to split our code so we won't have a single chunk single file that contains all the application code. Rather, we will have something analyzed so we can decide when we fetch that particular code. What does it give us? Let's say we want to increase the loading time of the landing page. In the common approach with the React If we use the single file approach, if a user lands on the landing page, the bundle will also include the code that is inside of the dashboard or inside the profile views. So let's see what we can do with that case and how we can split the views to be in single separate files. OK, so let me present at first what this application does.

OK, so basically this is really simple, simple React up.
We have a landing page dashboard and profile. On the dashboard and profile page we've got a button that increases the counter by default by one or we can specify the value we want to increase. OK, so let's take a look inside the profile for a while. As you can see, we are using random library to getRandomNumber.js, which is really simple. So I think I don't have to explain what's going on inside. We just get the random number multiplied by hundred and return to the natural number.

So I have also created a simple reusable use counter hook that is being used inside the dashboard and profile view. And what has been done is we have the button components, really simple one, just to present the idea behind splitting the code. The whole application has been created with the create react app. So I think you're familiar with it. If not, just stick it out on the Internet. I have used the real DOM, to manipulate, to manage everything.

OK, I think that that makes sense. So we share with us some tools that can help us with the code splitting before I will tell you about the tools. I don't know if you observed the detail, but from now we do not have to define, I mean, we do not have to import the React library. As you can see, I didn't do this in any components. So this is something I mentioned in the previous Frontend News, I believe, or maybe two chapters ago. Yeah. So now it's a little bit easier to use the react-boilerplate for the functional components. So it's back to the application component, right. I mentioned the three support us with tools to manage the course splitting and it's called lazy and suspence

Suspense, this is something we need to import and lazy, this is the method that takes function as a program and this function should return the important promise which points to our file we want to import our components. So how it looks in practice, let's check on the dashboard.

Lazy our function, import keywords and we want to import the dashboard. Great. Let's do this for all..
But it's not the whole world we have to do. What is the suspense? So suspense is the react component that contains the logic that renders the component we pass as a prop until the child components will be resolved from the importing. So the suspense is waiting until we fetch the component code and during the wait time, we display the fullback. OK, so for example, let's display something like that.

On localhost probably we won't be able to observe the fullback UI for a long period of time, but on the production it may be observable, depending on how big the module we are importing. The example we have here is really simple. But yeah, let's multiply this, imagine by, I don't know, one thousand. And imagine what we can do with such an approach on really big applications. But let's stop talking and just test this on our browser.

OK, so what we can see we have the profile page and we have the zero chunk which represents this page. And if we are going to switch the role to the dashboard, as we can see, we have imported another truck that contains the dashboard to go, same for the landing page. OK, but go back to the code for a while. What to do if we don't want to have, like, you know, numbered names, we want to have something that is more understandable for the developer.
We need to use the webpackChunkName, and let's do the same for the other views.

So this is landing and this is a profile. Great. Let's check this out. Yep. Now we have the landing chunk, the dashboard chunk and the profile chunk.

OK, so we know how to lazy load the particular view. Let's check what we can do with more code splitting? As we can see we are using a random number util inside the profile. You're wondering why I mentioned it. That's because I want to show you how to use the get random number util on demand. It means the code for this library won't be included in the build until we trigger the particular action. In this case, it will be onClick. So let's write our wrapper on that. We need to use the dynamic in parts. So it's going to be the input keywords. We need to point to the particular random number. And what we get as a response is the object where the default import is exactly what we need. It's our library and let's use this library here. OK, so we need to use that on the function. So what we did is that we removed the import for the whole view and we import the getRandom util when the user will click the bottom. OK, does it make sense? Let's check this out. We are on the profile page and observe what will happen when I click the profile button. See, the truck has been dynamically loaded and this chunk contains our code for getrandom number.

And yeah, another thing I want to show you is the shirt import. It will be a simple example, but you can tell this in more advanced usage. So let's reach the bottom in part from the classic way and use lazy to import the bottom. And let's put the name for the chunk at the beginning. The bottom is being used on the profile page too. So let's switch the import to the lazy. Yeah, I mentioned that we do not have to import react itself, but if we want to use, you know, hooks or anything that's inside the library, but we need to obviously import it. So we lazy import the bottom and what we can observe if we are on the landing, nothing special happens. We just touch the landing chunk. And when we get on the dashboard, as you can see, we get the bottom chunk and the dashboard chunk.

OK, and on the profile page of the profile chunk are when clicking the profile button, we fetch the library. Cool, the library does not include the name, let;s check if we can give a name for this library.

Check this out. Yep, great. Everything works. We have some extra coding here. Let's check how the built output will look like. Waiting. As you can see, received different files that will be used to cover our app and they will be loaded dynamically. So when they will land on the landing page, you know nothing about the button, about the dashboard profile or getRandomNumber because it does not being included in the landing chunk.

And it's also not being included in the short chart, which is the main chunk, because it's not being used between different views. OK, does it make sense? So you can optimize the whole experience if you're not using Gatsby or Next.js you can work on that. You can optimize the whole experience to display the landing page quicker because you want to include the code of the rest of the application. This is a really simple tip, and I believe you will apply this in your application because it really changed the game if we are talking about the bigger applications.

Thank you for your attention and see you next time, guys. It was great to have you there.

Chris

Check our website, check our socials like YouTube, Spotify, Facebook, Twitter. See you next week.