Frontend trends for 2021 - Frontend News #1

Stay up to date with Frontend News - the podcast about tech and front end innovations. Every 2 weeks, we will deliver a portion of fresh insights and news. In today’s breaking Frontend News:

• React on the server: https://github.com/reactjs/server-components-demo
• Libraries worth to check: https://dannjs.org/
• Frontend trends for 2021
• Curated project of the week: https://www.no-fishing.net/
• Tips and Tricks: easy to use library RevoGrid: https://github.com/revolist/revogrid

Transcription

Chris

Welcome, everyone, in the very first episode of Frontend newest podcast. Today is a big day for us, and it is a big honour to host you guys over the next 20 minutes. You must know that it's probably the most requested YouTube channel in the history of the front end world. I know you spend all day long looking for the latest Frontend News, updates and releases. But now your pain is over. In this podcast we will walk you through the hottest Frontend News you could ever imagine. But first thing first, let me introduce the team. I'm Chris, our interactive programmer, mostly working with JavaScript and the latest front end tools. I've been coding for like 12 years and today I'm CTO here at Frontend House as well as your host. We are going to be for you all day long with the latest news. We are seeing your comments and addressing your issues. But who is behind me? I hear it match my best friend with whom I've been working on the same project for like eight years. Eight years, Tomasz?

Tomasz

Yes, it's eight years and it's such a long time. So thank you, Chris, for such a great introduction. So as you already know, I'm Thomas and I travel through the world of mobile and web development for over eight years. I'm strongly connected with JavaScript, Eco-System, and actually it's my primary language I am using daily. So that's why I'm here to share the hottest news from the JavaScript world, special for you. So let's get ready to rumble!

Chris

Guys, every two weeks we're going to post a new video and new podcast. We have at least three most important Frontend News, curated projects, Tips and Tricks from our developers. Today is the first episode and let's get started! Tomasz, what's on your plate today?

Tomasz

OK, so I prepared three awesome topics that are really hot nowadays. Firstly, we will talk about the React Server Components. The second thing is 2 fresh libraries worth checking. And the third thing is a couple of front end trends of the current year. It sounds good.

Chris

Sounds awesome.

Tomasz

So let's start.

Chris

Ok, so let's start with React Server Components.

React on the server

Tomasz

Exactly. So the concept of rendering the data straight into the template and content ready to use HTML documents to the client is not a new practice, isn't it? I'm sure that a lot of you guys were or are using PHP language, for example, and dealing with WordPress tasks. In short, you can run the server code between the templates, like having a mix of PHP and HTML tags. In React there are a bunch of tools and frameworks that use that approach to handle the server side rendering or even statically generate the pages. These tools are like, you know, Gatsby, Next.js - we know that stuff. So the Dan Abramov team decided to implement a similar concept, similar mechanism in the React Library. So maybe shortly in the future we won’t need Next.js or Gatsby anymore. So let me introduce the React Server Components. It's still in the development face, but we are so lucky. We are so lucky that we can already test it by ourselves. React team showed the demo for the hungry React developers, so you can find the link in the description. And believe me, it's so tasty, mates.

Chris

Is it Tomasz? What are the pros and cons of this approach?

Tomasz

Let's talk about it for a little bit. At first, React Server Components resolve the network waterfall problem. The second thing is that it helps to keep the client up bundle size as small as necessary. Third thing is that server components, unfortunately, do not handle interactivity. Another thing is only props, which means data and the JSX are serializable and can be passed from the server component into the client component. Also the client component, preserves the state when we are re-rendering the server side components.
The last thing for the reactor server components is that we can have something that's called Shared Component between the server and the client.

Chris

Ok, the first thing you mentioned, was it a Waterfall problem? So what is it all about? I mean, what's the waterfall problem?

Tomasz

OK, so let's stick to the React environment. The Waterfall problem occurs when we have, for example, a parent component and a child component. Both of them are fetching the data. Firstly, we would like to render the parent component and fetch the data for the parent component, probably we will display a spinner or any kind of indicator that will point that right now, we are searching the data. Ok, we fetched the data for the parent component, now it's time to render the child component and fetch the data for the child component once again.
So basically, it means that we are fetching the data, rendering something, fetching the data once again and rendering something once again. So we cannot fetch that child data before we get the patent. So this is like the waterfall, yes? Because it's going down, and down, and down, and down…
The question is, why not to fetch all the data at once, for example, in page component scope? Well, yes, we can do this. Obviously, it's easy to be done. But this solution seems not easy to maintain. For example, imagine you are removing the child component from this page. OK, but still you will have to fetch those fragments of the data in your fetch method. So instead of removing just a single component, you will need to remove the component, update the fetch method and then you will be there. So it's like an extra step.
React Server Components answer to that problem. With such an approach, we can encapsulate data fetching in the server component scope and keep all the fetches at the same time. So it's awesome, man.

Chris

Ok, so how does this approach could limit the bundle size?

Tomasz

Yeah, this is pretty simple. Imagine the task that requires you to parse, for example, created product timestamp, into the readable date format. In most of the cases I believe you will use, for example, data FMS Library on the client side just to get the timestamp and parse it and display to the user.
So with React Server Components you can deal with the parsing on the server side. So what does it mean? It means that you can take the data FMS library, from the client-build - from the client side - and to use it only on the backend. So what's the result? The client bundle size is being decreased by the size of the data for this library. Imagine what we can do more with the rest of the libraries, man.

Chris

That’s awesome.

Tomasz

Exactly.

Chris

Ok, so two questions. What is the difference between React Server Component and Server Side Rendering?

Tomasz

Yeah, these two mechanisms look a little bit the same. That's correct. But they are not working exactly in the same way. So with the React Server Components, we have like three types. Let's stick with two types of the components: the client side and the server side components. The client side components can preserve their state when we are, for example, switching the road and fetching the other page, which is being rendered on the server side. With the server side rendering approach, if we are switching to another page, for example, we need to fetch the whole page, which is rendered on the server and display it to the user. It means that we’ve lost the whole state, because it's like, you know, the new page instance, the new state... We need to use some complex state managers like Redux or MobX, and that's the main difference.

Chris

Thanks for the explanation, Tomasz. And the last one.

Tomasz

OK, I'm ready.

Chris

How to use short components?

Tomasz

Ok, the short components concept is quite easy to explain. So the server side components are defined with the ‘.server’ suffix in the filename. The client components are opposite - with the ‘.client’ suffix. And as you can imagine, the short components are without any suffix in a name, which means that it depends on the place where you import such components. If you import the short components in the server side, it means that these components became a server side component too. And opposite if you will import it on a client side, it will be the client component. Does it make sense?

Chris

It does, thanks.

Tomasz

Cool!

Chris

I think we know everything about the server components now.

Tomasz

I hope so.

Chris

Guys, if you have any questions, ask in the comments below. Tomasz is happy to explain everything you need to know. The second thing was, uh, new libraries you want to share with us?

JavaScript Libraries worth to check on frontend

Tomasz

Oh, yes, you're right. Ok, so let me introduce the DannJS library if you're interested in neural networks and would like to play with it, you are able to do this! It works both on the front end and the back end apps, everything based on JavaScript. And the link, as always, is available in the description. Please check it out.

Chris

OK, we have DannJS. How the narrow network could impact the front end apps?

Tomasz

This is a good question. This topic is still complicated. But let me try to answer in one sentence. The neural network might help to determine, for example, the book's recommendation based on the user behavior in our app.
For example, if a user clicks a lot, if, for example, the discounts section which the user clicks really often. So based on that, we can train our model on the front end, gather the data and based on those data, we can display the correct recommendations for the user. Does it make sense?

Chris

Yes, it does. I think that everyone who is interested in narrow network and machine learning and stuff is familiar with TensorFlow. So what is the difference between the DoneJS and TensorFlow?

Tomasz

Good question. So DannJS is a much smaller library. It's a basic tool for neural networks and machine learning. We can use it to learn some basics. And TensorFlow is a huge ecosystem with a lot of libraries, a lot of dependencies, and it works not only in the JavaScript there. It also has implementation in C++.

Chris

So I think it has an implementation in maternal languages.

Tomasz

So as you can see, this is the huge difference. DannJS is only for JavaScript. But it's worth checking for the simpler cases. I think it will be a really, really nice fit for you.

Chris

So you mentioned you have 2 libraries - the first one DannJS - we already know it. You check if it's ok for you.

Tomasz

The second one is RevoGrid. This is the new powerful tool to build a new complex, really nice looking spreadsheets and put it straight into your front end app. It works with famous frameworks like Angular, React or even Vue, or if you want to, you can use it in the legacy projects. It contains a lot of features with a good performance on the top.

Chris

Tomasz, how can you utilize a RevoGrid library in Europe?

Tomasz

That's a good question.

Chris

So, for example, you can build custom and complex schedules or if you want, you can deal with the complex and big data grids with a lot of customization, sorting options, filtering and stuff like that, with, of course, beautiful CSS customization on the top.

Chris

Ok, good news, guys. You will see how to use it in the Tips and Tricks section.

Tomasz

Yes, yes, you're right. I prepared something tasty for you and the Tips and Tricks section. So stay tuned and let's move forward. That was the second news, guys, and the third one is a couple of front end trends for 2021.

Frontend trends for 2021 for developers

Chris

What are the trends?

Tomasz

Ok, so Stack Overflow created a server at the end of the 2020 - as they always do. They want to check the developer's preferences over different things. So let me focus on the language just a little bit. The first place for the most widely used programming language is... 67% of respondents picked the JavaScript as their primary language.
Yeah, it's not a joke. JavaScript is the most widely used language. So, guys, if you want to start your journey with programming, you better choose JavaScript. The second, think about the frameworks, most widely used frameworks and tools. The first place, which is..?

Chris

I don't know, jQuery?

Tomasz

Aha, JQuery! So believe me or not, 43% of the respondents said that they are using and supporting JQuery in their projects.
The second place is for React. It's over 35%. And Angular, 25%, Vue.js , yes, is in the 7-8 position with 50%. And let's just leave it as it is. Long live the jQuery.

Chris

Long live the React. What do you use in your projects?

Tomasz

I use JavaScript, but yeah, you're right. In most of the cases I work with, the React. Nowadays it is the most popular from the businesses’ and developers’ perspective, a tool that is widely used by all of the developers. So let's stick with the React, Chris.
We don't want to go back to JQuery?

Chris

Hmm, will see.

Tomasz

The last trends I would like to share with you for the current year is how to style your apps. Nowadays, the functional CSS takes a lead, and the most popular library to handle their styling with the functional CSS approach. So, guys, if you don't know this library, it's worth checking because it’s rocks and it will rock for the current year, too. And thank you, because that's what I prepared for today. And see you in the next chapter. Thank you.

Chris

Which is?

Well developed website. Curated project of the week

Tomasz

The website of the week.

Chris

See you in the website on the week chapter.
I'm super excited and welcome in the next section and start the first review of the website of the day. This one was rewarded and I really enjoy it.
A few days ago, the Sea Shepherd organisation released their new website on the topic of fishing nets problems. No doubt, it is a quite important thing nowadays. Just to let you know, they are a non-profit global marine organisation based in North America. They focus on the problems in protected waters.
To sum up, the current page was designed to save marine wildlife from extinction by the fishing nets because as we all know, if nothing is done, there won't be anything left.
So after explaining this purpose, I think we can finally discuss the content. Firstly, we see a quick view of part menu and short text about the intention.
Guys, let's take action. We take this button and switch to the short video explaining the fishing problem. By skipping, but I highly recommend you guys actually watch it, we see the main page with the centrally located 3D model of the Earth. And to prevent myself from forgetting, I wanted to mention about this visible green texture covering the entire content. I enjoy it. Despite the texture of an old CRT TV, it seems to be more movable.
You can easily implement this effect on your designs by listening to life coding hosted by Tomasz in the next few weeks. On the other side we see a logo and small menu. Below is some short info and statistics. Let's go with rounded arrow and see what's going to happen.
The pattern is getting more greyish and extra buttons appearing.
By discovering the right button, you see shifts working for the organization. By clicking on the chosen fleet, you can also read about the history and numbers of sea animals. The navigation button speaks for themselves - readable and up-to-date with current trends. You can also search by ship history by choosing them by the air visualisation. Everything works smoothly with consistent design. Funny thing happens when you click on the left, take action button, where we face our very nice payment system, visualisation.
As you know, by swiping from left to right, we see the range of impact we could have if we chose higher donation. It encourages me to donate more. And that’s it for today. Guys, check it yourself. It's super fun. But now let's learn some JavaScript with Tomasz in the next section. Stay tuned!

How to use JavaScript library RevoGrid?

Tomasz

Welcome to the Tips and Tricks blog, the place where I will share some interesting solutions, really nice tips and hot tricks, especially for you. Today, I would like to show you how to build a beautiful spreadsheet without putting a lot of effort. And to achieve that, I'm going to use the RevoGrid Library, which I have mentioned in the news section. I have already imported that JavaScript library into the project.
So the stuff I need to do is to define the HTML element or to use the HTML element in the app, which is the RevoGreen component.
This element requires me to define the maximum height of the whole grid and let's define the height and put it three hundred pixels in there. Great. So what I would like to do is to create a really simple grid with the sorting and filtering mechanism.
So the basic thing is that we need to query the grid component from that dome, HTML straight into the JavaScript, and that's because there is a need to define the two properties, at least two properties, for the grid to make it worse.
The first one is the columns and the second one is the source, which means this is our data. Ok, so let's create the configuration for our grid first.
Each of the objects in the columns represent the single column. In the header we want to see the id field and it will be referring to the id field in our data object.
The second column will be for the first name and the second and the third column will be for the last name. As you can see, our component has been rerendered and the header has already appeared, the headers, because we can see three of them right now.
OK, our headers are actually in here, but we need to define the data. What I would like to do is to use totally random data. So let's say I want to have 100 elements that check the performance and obviously I want to map such data. Here we have. The field that is name id, first name, last name... This can be an index, first name. Well, I would like to use something random, so let's think about how we can randomly generate the string. Do you have any ideas? If you have some, please put it in the comment. I will do something like that. So I know I need some random string. So let's get the random number.
Let's pass it to string and take some piece of it that should help stop and put some randoms in our data object.
So let's check it out. Cool.
Now we have the data grid with 100 rows. And it's really fast. Ok, we have the data grid with the sample data, so let's add the sorting mechanism. How to enable the sorting mechanism?
This is pretty simple and there is one step to be done to achieve that. Let's say we would like to sort the IDs.
Ok, so it's a matter of a single flag for that particular column to achieve the sorting functionality and as we can see, it works pretty well and really fast. The next thing I would like to add is the filtering option. If you would like to use the filter mechanism with a RevoGrid, you just need to turn it on by defining the filter attribute and setting the true value. Oh, sorry, it's HTML, actually. And let's check it out.
And voila, we have the filter mechanism. Ok, so not equal, let's say, I would like to have all records that contain the D and G.
Cool. It was pretty fast. Ok, and I would like to clear this filter and say that I want to look for id 43. Nice! It works! As you can see, by just defining the data structure and adding some flags, we have the really nice looking still row, but really nice looking date grid with the sorting mechanism and filtering mechanism out of the box. We do not have to care about it in terms of implementation from scratch. Ok, so that's the life coding example I would like to share with you. If you are interested in the RevoGrid, please take a look at their documentation, check their repository and you can play by your own.
So the link is in the description. And really, thank you for the attention. See you soon.

Chris

OK, guys, this is for today, I hope you enjoy it, so check our Twitter, our Instagram, our YouTube channel, our Spotify, our socials. Thank you. See you next week.