June 7, 2019 at 12:30Getting ready for 2020: 8 trends in client-side JavaScript development that you need to know about
- Transfer
The author of the material, the translation of which we publish today, says that he wants to share with readers a forecast regarding the development of web technologies for the coming years. In particular, here we will talk about what, according to the author, front-end developers are probably worth starting to learn today.
Everything related to JavaScript is developing very fast. This also applies to what can be attributed to the field of web development. Nowadays, those whose projects are not based on the most modern technologies are beginning to especially feel the gap between what they use and the new one that appears almost daily. These technologies include Webpack, React, Jest, Vue, Angular in their current state. While the “population” of the world of front-end development, which includes technical specialists and programmers, is constantly growing, this world is striving for standardization. The advent of new technologies and tools is already changing the situation.
We can say with a fair degree of certainty that standardization of the development of user interfaces will be a common trend in the development of front-end technologies. In particular, we are talking about a composition based on components, the desire for modular systems. This trend affects almost everything - from styling to testing and even to managing the state of applications. This trend can include technologies built around web components, ES-modules, the corresponding tools and much more fall here.
In general, we can say that this is the future. Why? The thing is that the systems in question are independent of the frameworks. This means that they can work both completely independently and together with any framework, given its features regarding the presentation of code. These systems are not characterized by what is called "JavaScript fatigue," "JavaScript fatigue." They are supported by modern browsers. In projects created with their use, the optimal amount of auxiliary code is included. They make good use of the capabilities of VDOM.
The components in question are built using the Custom Elements standard. It allows you to create new HTML tags, fine-tune their properties - from appearance to internal mechanisms and features of working with Shadow DOM.
Notable projects in this area are Lit-html (and Lit-element ), StencilJS , SvelteJS , Bit .
How should the principles of modularity, reuse, encapsulation and standardization look in the era of components? If you think about it, think about the future of UI development, it turns out that this future is represented by web components. We will come back to this idea. In the meantime, here are some useful materials on web components. Here you can read about tools for developing web components. Here is material about web component libraries. Here You can find an example of prototyping an RSS reader using web components.
Regarding the number of downloads from NPM, React is still steadily bypassing Angular and Vue. At least for now .
Here we are not going to talk about which frameworks and libraries are better than others and why this is so. If you are interested in reading about it - here it is - materials in which, on real data, Angular, React and Vue are compared. We are going to study the big picture. And it looks like this: in the front-end development, the share of component-based technologies is growing. It is constantly growing. The number of developers who use similar technologies is also growing, and - quickly. In addition, in this area there is enough free space for the introduction of new tools.
So, which framework will come first in 5 years? Nobody knows that. But it’s safe to say that anyone who wants to be prepared for the future should study the basic technologies of the JavaScript ecosystem and get used to the environment in which the DOM is controlled by web components. Maybe in 5 years React will be the leading tool for interface development. You can think about this by looking at the above chart, built on NPM data. But not so simple. Take a look, for example, at these metrics. They allow us to say that, in terms of real use, the gap between React and Vue is very small.
Vue and React, in terms of their real use, are very close.
In the future, we are expected to improve the standardization of web components independent of frameworks. In this regard, one can reflect on what effect this will have on the framework war. And by the way, as we all know, React is not even a framework, but just a library.
Bit is an example of a platform focused on developing components, working with them and reusing them.
Speaking of front-end development and the components from which user interfaces are built, one cannot but recall Bit .
This open source platform allows you to isolate components (or any pieces of JS code suitable for reuse) and turn them into building blocks that can be used in many projects. In this case, the developer can control the source code of the components, manage its changes and a complete tree of its dependencies.
Simply put, thanks to Bit, the developer has the opportunity to improve their components within different projects and synchronize changes. Thanks to the bit.dev components hub, this idea extends to team development, allowing team members to organize code and share it.
The Bit hub gives the developer all that is needed for the joint creation and use of components. For example - convenient search tools, an interactive environment in which you can experiment with components, full support for CI / CD.
Thanks to Bit, you can use not only the components created by the efforts of your team, but also open source projects. This includes the ability to recommend changes to existing components, and the ability to share their developments.
ES-modules are part of the ES6 standard that describes how to work with modules in the browser. Using this technology allows you to transfer some functionality to modules that can be downloaded, for example, via CDN. After the release of Firefox 60, we can say that ES-modules support all major browsers . The work on the ES-enabled modules and comes in an environment Node.js . In addition, support for ES modules is expected to be added to WebAssembly .
What's new about application state management? These days, state management boils down to putting anything in the global Redux repository.
But such an approach may complicate the work with components, may become an obstacle to the full disclosure of their capabilities in terms of reuse and modularity. If we consider the situation from this point of view, we can say that projects like MobX give us an interesting, more reactive approach to working with the state of applications (here you can also recall the unstated project ).
If we talk about the new standard React mechanisms for managing state, we can recall the Context API and hooks. Their appearance means that the programmer no longer needs third-party libraries to manage state, and that state can be managed at the level of functional components. This improves the modularity of projects and the ability to reuse components.
As a result, if you try to look into the future, it may well happen that the term “state” will be used mainly in application to encapsulated components, and not in application to some global data-warehouses of application level.
Separation of components that implement logic and styles is the way to stylize components through composition . A lot has been said
about how to stylize components over the last couple of years. There are many opportunities in this area. These are embedded CSS, CSS modules, CSS description in JS code, stylized components, and intermediate solutions like Stylable.
Thinking about the future styling of components, I tend to imagine styling as a composition. This means that component design systems must include both components that implement some logic and components that describe styles. With this approach, it is possible to create a component design system that develops as the project develops. This eliminates the need for developers to master bulky libraries for styling. Tools used to design components like Sketch or Figma can also use this idea.
GraphQL technology and a component-based development approach provide exciting opportunities for web-based client applications. For example, using Apollo, you can easily create UI components that work with data through GraphQL. There are many other tools that make working with GraphQL easier.
Reasonable handling of various APIs simplifies the development of data-driven applications. This allows you to increase the speed of development. As a result, GraphQL is a technology that should be paid attention to those who are thinking about the future.
Components are gradually becoming an integral part of web project design systems . This reduces the gap between designers and programmers. Both of them are approaching each other.
For example, Sketch already provides tools for modular development of component designs that require dependencies between components. Already there are tools for working in Sketch with components that shape their visual presentation programmatically. The widespread use of such tools is only a matter of time. Tools like Figma are primarily targeted at reusable user interface components. As part of the Framer projectA tool for programming designers is being developed. This tool allows designers to control how user interface elements are transformed into React components.
Here we introduced you to several trends in client web development, which, according to the author of the material, should pay attention to someone who wants to be ready for the future. We hope this publication has provided you with food for thought.
Dear readers! How do you see the future of web development?
Everything related to JavaScript is developing very fast. This also applies to what can be attributed to the field of web development. Nowadays, those whose projects are not based on the most modern technologies are beginning to especially feel the gap between what they use and the new one that appears almost daily. These technologies include Webpack, React, Jest, Vue, Angular in their current state. While the “population” of the world of front-end development, which includes technical specialists and programmers, is constantly growing, this world is striving for standardization. The advent of new technologies and tools is already changing the situation.
We can say with a fair degree of certainty that standardization of the development of user interfaces will be a common trend in the development of front-end technologies. In particular, we are talking about a composition based on components, the desire for modular systems. This trend affects almost everything - from styling to testing and even to managing the state of applications. This trend can include technologies built around web components, ES-modules, the corresponding tools and much more fall here.
1. Systems for working with web components, independent of frameworks and libraries
In general, we can say that this is the future. Why? The thing is that the systems in question are independent of the frameworks. This means that they can work both completely independently and together with any framework, given its features regarding the presentation of code. These systems are not characterized by what is called "JavaScript fatigue," "JavaScript fatigue." They are supported by modern browsers. In projects created with their use, the optimal amount of auxiliary code is included. They make good use of the capabilities of VDOM.
The components in question are built using the Custom Elements standard. It allows you to create new HTML tags, fine-tune their properties - from appearance to internal mechanisms and features of working with Shadow DOM.
Notable projects in this area are Lit-html (and Lit-element ), StencilJS , SvelteJS , Bit .
How should the principles of modularity, reuse, encapsulation and standardization look in the era of components? If you think about it, think about the future of UI development, it turns out that this future is represented by web components. We will come back to this idea. In the meantime, here are some useful materials on web components. Here you can read about tools for developing web components. Here is material about web component libraries. Here You can find an example of prototyping an RSS reader using web components.
2. About the future of wars of frameworks and libraries
Regarding the number of downloads from NPM, React is still steadily bypassing Angular and Vue. At least for now .
Here we are not going to talk about which frameworks and libraries are better than others and why this is so. If you are interested in reading about it - here it is - materials in which, on real data, Angular, React and Vue are compared. We are going to study the big picture. And it looks like this: in the front-end development, the share of component-based technologies is growing. It is constantly growing. The number of developers who use similar technologies is also growing, and - quickly. In addition, in this area there is enough free space for the introduction of new tools.
So, which framework will come first in 5 years? Nobody knows that. But it’s safe to say that anyone who wants to be prepared for the future should study the basic technologies of the JavaScript ecosystem and get used to the environment in which the DOM is controlled by web components. Maybe in 5 years React will be the leading tool for interface development. You can think about this by looking at the above chart, built on NPM data. But not so simple. Take a look, for example, at these metrics. They allow us to say that, in terms of real use, the gap between React and Vue is very small.
Vue and React, in terms of their real use, are very close.
In the future, we are expected to improve the standardization of web components independent of frameworks. In this regard, one can reflect on what effect this will have on the framework war. And by the way, as we all know, React is not even a framework, but just a library.
3. Isolation, reuse and composition of components
Bit is an example of a platform focused on developing components, working with them and reusing them.
Speaking of front-end development and the components from which user interfaces are built, one cannot but recall Bit .
This open source platform allows you to isolate components (or any pieces of JS code suitable for reuse) and turn them into building blocks that can be used in many projects. In this case, the developer can control the source code of the components, manage its changes and a complete tree of its dependencies.
Simply put, thanks to Bit, the developer has the opportunity to improve their components within different projects and synchronize changes. Thanks to the bit.dev components hub, this idea extends to team development, allowing team members to organize code and share it.
The Bit hub gives the developer all that is needed for the joint creation and use of components. For example - convenient search tools, an interactive environment in which you can experiment with components, full support for CI / CD.
Thanks to Bit, you can use not only the components created by the efforts of your team, but also open source projects. This includes the ability to recommend changes to existing components, and the ability to share their developments.
4. ES-modules and CDN
ES-modules are part of the ES6 standard that describes how to work with modules in the browser. Using this technology allows you to transfer some functionality to modules that can be downloaded, for example, via CDN. After the release of Firefox 60, we can say that ES-modules support all major browsers . The work on the ES-enabled modules and comes in an environment Node.js . In addition, support for ES modules is expected to be added to WebAssembly .
5. Component-level state management
What's new about application state management? These days, state management boils down to putting anything in the global Redux repository.
But such an approach may complicate the work with components, may become an obstacle to the full disclosure of their capabilities in terms of reuse and modularity. If we consider the situation from this point of view, we can say that projects like MobX give us an interesting, more reactive approach to working with the state of applications (here you can also recall the unstated project ).
If we talk about the new standard React mechanisms for managing state, we can recall the Context API and hooks. Their appearance means that the programmer no longer needs third-party libraries to manage state, and that state can be managed at the level of functional components. This improves the modularity of projects and the ability to reuse components.
As a result, if you try to look into the future, it may well happen that the term “state” will be used mainly in application to encapsulated components, and not in application to some global data-warehouses of application level.
6. Stylization of components is a composition
Separation of components that implement logic and styles is the way to stylize components through composition . A lot has been said
about how to stylize components over the last couple of years. There are many opportunities in this area. These are embedded CSS, CSS modules, CSS description in JS code, stylized components, and intermediate solutions like Stylable.
Thinking about the future styling of components, I tend to imagine styling as a composition. This means that component design systems must include both components that implement some logic and components that describe styles. With this approach, it is possible to create a component design system that develops as the project develops. This eliminates the need for developers to master bulky libraries for styling. Tools used to design components like Sketch or Figma can also use this idea.
7. GraphQL-API and data-driven client applications
GraphQL technology and a component-based development approach provide exciting opportunities for web-based client applications. For example, using Apollo, you can easily create UI components that work with data through GraphQL. There are many other tools that make working with GraphQL easier.
Reasonable handling of various APIs simplifies the development of data-driven applications. This allows you to increase the speed of development. As a result, GraphQL is a technology that should be paid attention to those who are thinking about the future.
8. Component-based designer tools
Components are gradually becoming an integral part of web project design systems . This reduces the gap between designers and programmers. Both of them are approaching each other.
For example, Sketch already provides tools for modular development of component designs that require dependencies between components. Already there are tools for working in Sketch with components that shape their visual presentation programmatically. The widespread use of such tools is only a matter of time. Tools like Figma are primarily targeted at reusable user interface components. As part of the Framer projectA tool for programming designers is being developed. This tool allows designers to control how user interface elements are transformed into React components.
Summary
Here we introduced you to several trends in client web development, which, according to the author of the material, should pay attention to someone who wants to be ready for the future. We hope this publication has provided you with food for thought.
Dear readers! How do you see the future of web development?