4 Important FrontEnd JavaScript Trends in 2021

The world of web development is evolving dizzying fast, as well as the JavaScript programming language. Today, if you do not understand Webpack, React Hooks, Jest, Vue and NG elements, you feel lost and lagging behind. This gap is expanding rapidly, you no longer understand what your colleagues are talking about ... But everything is changing!

For the first time in many years, standardization has become the main trend in the development of the JavaScript ecosystem. The components came into play, and now everyone plays according to their rules.

All elements of the system, from style to testing - even state management - switched to a component approach. And then the trend will continue and intensify. What will the web come about in 2020, which is based on components?

Web components are a set of standards that allow you to create your own HTML elements and define their behavior. These include:

• Custom Elements - The JavaScript API for associating your tag with its corresponding class.
• Shadow DOM (Shadow DOM) - a way to encapsulate the internal content of a tag.
• HTML templates (HTML templates) - a special tag "template", designed to store templates.

Web components are fast, optimized, convenient, modern. They are free of the frameworks and burden of old language practices. They are already supported by all popular browsers.

This technology seems to be the bright future of the web we are hoping for. It embodies the principles of modularity, reuse, encapsulation, and standardization.

Web components have come a long way to relatively good browser support. But even earlier, JavaScript frameworks understood the awesome features of a component approach.

You can argue as much as you want about which framework is better, but one cannot but admit the obvious - they are all based on components. In React, in Vue, in Angular, you are committed to dividing your application into small parts and working with them as separate units.

What will happen to popular frameworks when web components work at full strength? Most likely, nothing radical. They will continue to go their own way in the turbulent world of the front-end because a correctly implemented component structure will be in demand for a long time.

Over the past couple of years, we have tried many styling options for isolated components:

• inline styles
• CSS modules
• CSS in JS
• styled components in React
• even typed CSS in stylable

I would like to think that we have learned some lessons from this variety. In the coming years, the stylization of components will most likely develop towards the composition of logic and thematization, without mixing them. This will create an easy, convenient and expandable design system.

So... what's new in management? Can I continue to use the Redux global storage or what?

Using the global state in the application does not fully realize the modular and reusable nature of the components. The web is gradually moving from the global level of state management to the level of individual building blocks. This implies the use of more reactive approaches, such as MobX or unstated.

The appearance in the React Context API and hooks means that you no longer need third-party libraries, and you can control the state at the level of functional components.

The further the components penetrate into web development, the more we rely on them when developing the project architecture, the less the gap between the designer and the developer will become.

Sketch already has dependency relationships between components, so you can create and update projects in a modular way. Full integration with code components is just a matter of time.
Figma was originally built on the basis of reusable user interface elements.
Framer creates a tool that converts UI elements to React components.

The day will come when the design, layout and programming of JavaScript will merge together, and it will be possible to turn the layout into code with the click of a single button.