Components are the stuff of head: trends in the component approach in 2020.
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:
- 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.
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.
Component-level state and data management
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.
Component-Based Design Tools
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.