Frontend 2018: Results of the Year
- Transfer
The world of web development is developing incredibly fast. What was news yesterday may become outdated today, and what almost nobody knows today can become the engine of progress tomorrow. In the material, the translation of which we are publishing today, all the most interesting things that happened in the frontend sphere in 2018 will be considered. It will focus on the development of frameworks and auxiliary tools, on JavaScript trends, and also on the direction in which the frontend can go in 2019.
WebAssembly is often considered one of the technologies on which the future web will be built. This technology is aimed at maximizing the performance of the code, at reducing its size, at the possibility of web development using different languages by transforming the programs written in them into a single binary format supported by web browsers.
In the second half of 2017, developers of all leading browsers reported support for WebAssembly. Then, in February 2018, 3 important events occurred: the first version of the WebAssembly specification was released, the specifications of the corresponding JavaScript interface and the web API were published .
The first four most popular front-end modules loaded from npm are React, jQuery, Angular and Vue. Below we talk about the situation with libraries for web development in more detail.
Downloading frontend libraries from npm in 2018
React has been leading the way in web development for many years. The scale of its use continued to grow in 2018. This library remains one of the most beloved among programmers in accordance with a survey conducted by Stack Overflow.
The main development team of React is very actively developing the library and adding new features to it. During 2018, you could see the emergence of many additions to React v16, including new components life cycle methods , a new API Context , new mouse pointer events, lazy functions , and a new higher-order component React.memo. It should be noted that the most attention was paid to the React and Suspense API hooks .
Hooks React were met with great interest, they wrote a lot about them, many liked them. This technology allows you to add state to the functional components through the use of the function
Here is a video that demonstrates how the use of hooks has significantly improved the code of the React application.
Another interesting new feature of this library is React Suspense. It is designed to control the loading of data within the React components themselves. The Suspense API allows you to pause data output while waiting for the completion of an asynchronous operation to get it from any source. It is the Suspense API that is used in "lazy" functions to implement the separation of component code. The main purpose of implementing this technology is to be able to manage any asynchronous data downloads, such as requests to various APIs. In addition, the Suspense API allows you to cache responses to requests.
There is a specially designed example that demonstrates a variety of data loading indicators on a page that are displayed until the flags are
After the explosive growth of Vue in 2017, the same thing continued in 2018. This framework even bypassed React by the number of stars on GitHub.
Although web developers love Vue, this framework still lags well behind React and Angular in terms of its actual use. However, Vue boasts an active user base that continues to grow, which gives hope that in the future Vue will play a significant role in web development.
Vue is moving to release version 3.0. In 2018, the creator of the framework, Evan Yu, spoke at various events about the expected capabilities of the framework and wrote about it.
In October 2018, the seventh release of Angular was released. This framework has now undergone significant development, having gone from a MVC architecture to a modern system using components. His popularity is also constantly growing.
Although Angular does not have the same zealous supporters that distinguish React and Vue, this framework still remains popular in professional projects. Many developers get tired of React, because when using this library they have to make a lot of decisions regarding the choice of additional tools, designing the application architecture, building the project building process. Angular, on the other hand, removes the need to make many decisions from the developer, gives him widely used architectural patterns. Angular is a framework whose capabilities cover all the needs of a web application developer, and the corresponding command-line tool takes over the entire project build process. Of course, many things with this approach are set in the framework fairly rigidly. Another advantage of using Angular in a professional environment is the fact that it is designed to use TypeScript. As a result, Angular can be said that this framework has created a name for itself in the web development environment and continues to strengthen its position.
It should be noted that the npm-package
Here are the figures for downloads npm 2018 packages
Project data angular / core, angular, react and vue
GraphQL technology has found application in some large projects like GitHub , but it has not yet spread widely. In accordance with the study, State of JS - only slightly more than 20% of front-end developers used GraphQL technology, but the indicator characterizing those who heard about it and plans to use it is an impressive 62.5%.
GraphQL technology
When analyzing the web development environment, there is a feeling that it is on the path to unify absolutely everything using JavaScript. This tendency is also visible in the application of CSS-in-JS technology, using which styles are created with the help of JS tools for working with strings. This allows you to work with styles and dependencies using the usual JS syntax and import and export mechanisms. In addition, it simplifies dynamic styling, since components using CSS-in-JS are able to convert properties to styles. The following are examples of regular CSS code and CSS-in-JS.
To control dynamic styles with ordinary CSS, you need to work with the class names in the component and update them based on the state and properties. In addition, for different styling options, you need to use CSS classes:
By using CSS-in-JS, CSS classes are no longer needed. It is enough to pass the corresponding property to a stylized component that implements dynamic styling. The code goes much cleaner, we get a clearer division of tasks between styles and React, allowing CSS to engage in dynamic styling based on properties. In React, this code looks like quite normal JavaScript:
To implement the features of CSS-in-JS, libraries such as styled-components and emotion are used . The Styled components library exists longer than Emotion, it has become more widespread, but the popularity of Emotion is growing rapidly, many developers choose it. It should be noted that Kent S. Dodds even stopped working on his Glamorous CSS-in-JS library, preferring Emotion. Here are the Styled components and Emotion libraries from the point of view of npm and GitHub.
Styled components and Emotion libraries in 2018
The Vue framework supports local CSS when using single-file components without using additional libraries. To do this, simply add the property
In addition, it should be noted that in Angular, by default, by means of the view encapsulation technology, the restriction of the scope of CSS is used.
Everyone knows how exhausting the monitoring of constantly updated libraries, vital for web projects, as well as the correct updating of projects with regard to library updates and the adoption of the right architectural solutions in such conditions. This problem has become a catalyst for developing command-line tools that solve similar issues, allowing programmers to concentrate on working on applications. All of these tools have become the primary means by which new applications are created in 2018. In particular, the following projects can be noted in this area: Next.js (SSR for React), Create-React-App (creation of client React-applications), Nuxt.js (SSR for Vue), Vue CLI(client Vue applications), Expo CLI for React Native, standard Angular tools .
During the rapid, revolutionary development of JavaScript, everyone enjoyed learning the newest libraries and putting them into practice. However, now, when everything is more or less stabilized, the developers began to realize that not all sites should be complex single-page applications (SPA). This understanding led to the emergence, growth and development of static site generators. Thanks to them, you can develop projects using various frontend tools, such as React or Vue, which are then converted into static HTML files during the build process. This allows you to very quickly give customers already fully prepared pages.
Static sites are good because they represent the perfect combination of simplicity and performance. If HTML files are generated during the project build, it gives the opportunity to send users ready-made pages that load almost instantly, without resorting to either server or client rendering. Along with the HTML code, the client also loads JS files necessary for the work, which gives users the same capabilities as regular single-page applications.
Static site generators are great for creating something like personal sites or blogs, but they can also be used in larger projects. In 2018, it was possible to observe the growing popularity of such generators as Gatsby and React Staticfor React applications, and tools such as VuePress , for projects based on Vue. In fact, static sites became so popular that the open-source Gatsby project grew into a company and received venture capital investments.
The growing popularity of static sites has led to the development of server technologies designed to support them. So, the last few years in the field of web development constantly talked about serverless architectures, this was due to the fact that they allow you to organize the separation of server and client code and reduce the cost of project maintenance.
The movement towards serverlessness has been expanded thanks to the JAMStack web project development technique (J is JavaScript, A is API, M is Markup, that is, markup). JAMStack is based on the concept of developing static sites, which we discussed in the previous section. This technique allows to achieve extremely high speeds of loading sites due to pre-formed markup. On the client, such sites turn into dynamic SPAs through the use of special server APIs. In 2018, even passed under the auspices of freeCodeCamp, Netlify, and GitHub, the first JAMStack hackathon . Here is The material demonstrates the features of using the JAM architecture on freecodecamp.com, which allows you to evaluate the possibilities of developing large-scale applications using the JAMStack methodology.
JavaScript is often criticized for its lack of static typing. The main tools for solving this problem are TypeScript and Flow . At the same time, TypeScript is much more popular than Flow, and, in fact, the Stack Overflow study showed that developers like TypeScript even more than JavaScript itself (the corresponding figures for these languages are 67% and 61.9%). According to the State of JS study, more than 80% of developers either plan to use TS or use it with pleasure. If we talk about Flow, then use it, or want to use it, only 34% of developers.
Judging by all indicators, TypeScript is a standard solution for static typing in JS, many prefer TS over regular JavaScript. This year, the number of TS downloads in npm constantly and significantly increased, while Flow download schedule remained fairly flat. There is a feeling that TypeScript, from a tool that was used only by ardent supporters of static typing, is becoming an extremely widely used tool for web development. Here is the TypeScript and Flow data (as a view
Load TypeScript and Flow in the second half of 2018
Webpack 4 was released just 8 months after the release of Webpack 3. The new version of Webpack kept moving towards simplifying work and speeding up the build process. Sometimes the performance of Webpack 4 can exceed the performance of Webpack 3 by 98%. Webpack 4 aims to use reasonably selected default parameters, supports more features without the need to connect plug-ins, and in order to start using Webpack, it is no longer necessary to first prepare a configuration file. In addition, Webpack now supports WebAssembly and allows you to directly import WebAssembly files.
Babel 7 was released in 2018 - after almost three years since the release of Babel 6. Babel is a library that uses JavaScript to transport the newest standards (ES6 +) capabilities into an ES5 code, which allows for cross browser compatibility js projects. The material , which reports on the release of the new version of Babel, indicates that Babel 7 has become faster, more modern, supports advanced configuration options, has improved functionality regarding minification, supports JSX Fragments and TypeScript technologies, new language designs that are in the early stages coordination, and much more. It should be noted that Babel packages in npm now use namespaces
Consider a few significant publications published in 2018.
What awaits the frontend in 2019? Here is our forecast:
Dear readers! What do you expect from front-end development in 2019?
Standardizing WebAssembly
WebAssembly is often considered one of the technologies on which the future web will be built. This technology is aimed at maximizing the performance of the code, at reducing its size, at the possibility of web development using different languages by transforming the programs written in them into a single binary format supported by web browsers.
In the second half of 2017, developers of all leading browsers reported support for WebAssembly. Then, in February 2018, 3 important events occurred: the first version of the WebAssembly specification was released, the specifications of the corresponding JavaScript interface and the web API were published .
About downloading popular frontend libraries from npm
The first four most popular front-end modules loaded from npm are React, jQuery, Angular and Vue. Below we talk about the situation with libraries for web development in more detail.
Downloading frontend libraries from npm in 2018
React continues to dominate the world of frontend libraries and is constantly evolving
React has been leading the way in web development for many years. The scale of its use continued to grow in 2018. This library remains one of the most beloved among programmers in accordance with a survey conducted by Stack Overflow.
The main development team of React is very actively developing the library and adding new features to it. During 2018, you could see the emergence of many additions to React v16, including new components life cycle methods , a new API Context , new mouse pointer events, lazy functions , and a new higher-order component React.memo. It should be noted that the most attention was paid to the React and Suspense API hooks .
Hooks React were met with great interest, they wrote a lot about them, many liked them. This technology allows you to add state to the functional components through the use of the function
useState, it provides the ability to manage events of the life cycle of components. Here is a video that demonstrates how the use of hooks has significantly improved the code of the React application.
Another interesting new feature of this library is React Suspense. It is designed to control the loading of data within the React components themselves. The Suspense API allows you to pause data output while waiting for the completion of an asynchronous operation to get it from any source. It is the Suspense API that is used in "lazy" functions to implement the separation of component code. The main purpose of implementing this technology is to be able to manage any asynchronous data downloads, such as requests to various APIs. In addition, the Suspense API allows you to cache responses to requests.
There is a specially designed example that demonstrates a variety of data loading indicators on a page that are displayed until the flags are
isFetchingset totrue. Thanks to the Suspense API, the developer has user interface controls, in particular, these tools can be used to specify what should be displayed on the screen while waiting for the data to load, to set the wait time, to set up navigation. There is even a popular belief that the Suspense API can eliminate the need to use Redux. From this speech by Dan Abramov, you can learn about developing applications using this API.Vue continues to grow, bypassing React by the number of stars on GitHub
After the explosive growth of Vue in 2017, the same thing continued in 2018. This framework even bypassed React by the number of stars on GitHub.
Although web developers love Vue, this framework still lags well behind React and Angular in terms of its actual use. However, Vue boasts an active user base that continues to grow, which gives hope that in the future Vue will play a significant role in web development.
Evan Yu (creator of Vue) talks a lot about Vue 3
Vue is moving to release version 3.0. In 2018, the creator of the framework, Evan Yu, spoke at various events about the expected capabilities of the framework and wrote about it.
The Angular framework remains very popular, its seventh release was released.
In October 2018, the seventh release of Angular was released. This framework has now undergone significant development, having gone from a MVC architecture to a modern system using components. His popularity is also constantly growing.
Although Angular does not have the same zealous supporters that distinguish React and Vue, this framework still remains popular in professional projects. Many developers get tired of React, because when using this library they have to make a lot of decisions regarding the choice of additional tools, designing the application architecture, building the project building process. Angular, on the other hand, removes the need to make many decisions from the developer, gives him widely used architectural patterns. Angular is a framework whose capabilities cover all the needs of a web application developer, and the corresponding command-line tool takes over the entire project build process. Of course, many things with this approach are set in the framework fairly rigidly. Another advantage of using Angular in a professional environment is the fact that it is designed to use TypeScript. As a result, Angular can be said that this framework has created a name for itself in the web development environment and continues to strengthen its position.
It should be noted that the npm-package
@angular/coreis a new Angular, and the package angularis the old AngularJS. Here are the figures for downloads npm 2018 packages
@angular/core, angular, reactand vue, as well as information on the status of these projects from GitHub.Project data angular / core, angular, react and vue
More and more developers would like to learn GraphQL, but this technology has not yet bypassed REST
GraphQL technology has found application in some large projects like GitHub , but it has not yet spread widely. In accordance with the study, State of JS - only slightly more than 20% of front-end developers used GraphQL technology, but the indicator characterizing those who heard about it and plans to use it is an impressive 62.5%.
GraphQL technology
CSS-in-JS technology is becoming more common
When analyzing the web development environment, there is a feeling that it is on the path to unify absolutely everything using JavaScript. This tendency is also visible in the application of CSS-in-JS technology, using which styles are created with the help of JS tools for working with strings. This allows you to work with styles and dependencies using the usual JS syntax and import and export mechanisms. In addition, it simplifies dynamic styling, since components using CSS-in-JS are able to convert properties to styles. The following are examples of regular CSS code and CSS-in-JS.
To control dynamic styles with ordinary CSS, you need to work with the class names in the component and update them based on the state and properties. In addition, for different styling options, you need to use CSS classes:
// JS- код компонентаconst MyComp = ({ isActive }) => {
const className = isActive ? 'active' : 'inactive';
return<divclassName={className}>HI</div>
}
// Содержимое CSS-файла
.active { color: green; }
.inactive { color: red; }By using CSS-in-JS, CSS classes are no longer needed. It is enough to pass the corresponding property to a stylized component that implements dynamic styling. The code goes much cleaner, we get a clearer division of tasks between styles and React, allowing CSS to engage in dynamic styling based on properties. In React, this code looks like quite normal JavaScript:
const Header = styled.div`
color: ${({ isActive }) => isActive ? 'green' : 'red'};
`;
const MyComp = ({ isActive }} => (
<HeaderisActive={isActive}>HI</Header>
)To implement the features of CSS-in-JS, libraries such as styled-components and emotion are used . The Styled components library exists longer than Emotion, it has become more widespread, but the popularity of Emotion is growing rapidly, many developers choose it. It should be noted that Kent S. Dodds even stopped working on his Glamorous CSS-in-JS library, preferring Emotion. Here are the Styled components and Emotion libraries from the point of view of npm and GitHub.
Styled components and Emotion libraries in 2018
The Vue framework supports local CSS when using single-file components without using additional libraries. To do this, simply add the property
scopedto the component tagstyle, after which Vue uses CSS-in-JS technology to organize work with local styles that do not extend beyond the limits of the component and do not fall into other components. In addition, it should be noted that in Angular, by default, by means of the view encapsulation technology, the restriction of the scope of CSS is used.
Developers, struggling with "fatigue" from technology, find salvation in the command line tools
Everyone knows how exhausting the monitoring of constantly updated libraries, vital for web projects, as well as the correct updating of projects with regard to library updates and the adoption of the right architectural solutions in such conditions. This problem has become a catalyst for developing command-line tools that solve similar issues, allowing programmers to concentrate on working on applications. All of these tools have become the primary means by which new applications are created in 2018. In particular, the following projects can be noted in this area: Next.js (SSR for React), Create-React-App (creation of client React-applications), Nuxt.js (SSR for Vue), Vue CLI(client Vue applications), Expo CLI for React Native, standard Angular tools .
The desire of developers to simplify the frontend and increase productivity has led to an increase in the popularity of static site generators.
During the rapid, revolutionary development of JavaScript, everyone enjoyed learning the newest libraries and putting them into practice. However, now, when everything is more or less stabilized, the developers began to realize that not all sites should be complex single-page applications (SPA). This understanding led to the emergence, growth and development of static site generators. Thanks to them, you can develop projects using various frontend tools, such as React or Vue, which are then converted into static HTML files during the build process. This allows you to very quickly give customers already fully prepared pages.
Static sites are good because they represent the perfect combination of simplicity and performance. If HTML files are generated during the project build, it gives the opportunity to send users ready-made pages that load almost instantly, without resorting to either server or client rendering. Along with the HTML code, the client also loads JS files necessary for the work, which gives users the same capabilities as regular single-page applications.
Static site generators are great for creating something like personal sites or blogs, but they can also be used in larger projects. In 2018, it was possible to observe the growing popularity of such generators as Gatsby and React Staticfor React applications, and tools such as VuePress , for projects based on Vue. In fact, static sites became so popular that the open-source Gatsby project grew into a company and received venture capital investments.
Serverless Architecture and JAMStack
The growing popularity of static sites has led to the development of server technologies designed to support them. So, the last few years in the field of web development constantly talked about serverless architectures, this was due to the fact that they allow you to organize the separation of server and client code and reduce the cost of project maintenance.
The movement towards serverlessness has been expanded thanks to the JAMStack web project development technique (J is JavaScript, A is API, M is Markup, that is, markup). JAMStack is based on the concept of developing static sites, which we discussed in the previous section. This technique allows to achieve extremely high speeds of loading sites due to pre-formed markup. On the client, such sites turn into dynamic SPAs through the use of special server APIs. In 2018, even passed under the auspices of freeCodeCamp, Netlify, and GitHub, the first JAMStack hackathon . Here is The material demonstrates the features of using the JAM architecture on freecodecamp.com, which allows you to evaluate the possibilities of developing large-scale applications using the JAMStack methodology.
TypeScript may be the future of JS, but the same cannot be said about Flow
JavaScript is often criticized for its lack of static typing. The main tools for solving this problem are TypeScript and Flow . At the same time, TypeScript is much more popular than Flow, and, in fact, the Stack Overflow study showed that developers like TypeScript even more than JavaScript itself (the corresponding figures for these languages are 67% and 61.9%). According to the State of JS study, more than 80% of developers either plan to use TS or use it with pleasure. If we talk about Flow, then use it, or want to use it, only 34% of developers.
Judging by all indicators, TypeScript is a standard solution for static typing in JS, many prefer TS over regular JavaScript. This year, the number of TS downloads in npm constantly and significantly increased, while Flow download schedule remained fairly flat. There is a feeling that TypeScript, from a tool that was used only by ardent supporters of static typing, is becoming an extremely widely used tool for web development. Here is the TypeScript and Flow data (as a view
babel-preset-flow) from npm and GitHub.Load TypeScript and Flow in the second half of 2018
In early 2018, Webpack 4 was released.
Webpack 4 was released just 8 months after the release of Webpack 3. The new version of Webpack kept moving towards simplifying work and speeding up the build process. Sometimes the performance of Webpack 4 can exceed the performance of Webpack 3 by 98%. Webpack 4 aims to use reasonably selected default parameters, supports more features without the need to connect plug-ins, and in order to start using Webpack, it is no longer necessary to first prepare a configuration file. In addition, Webpack now supports WebAssembly and allows you to directly import WebAssembly files.
Babel 7.0 released
Babel 7 was released in 2018 - after almost three years since the release of Babel 6. Babel is a library that uses JavaScript to transport the newest standards (ES6 +) capabilities into an ES5 code, which allows for cross browser compatibility js projects. The material , which reports on the release of the new version of Babel, indicates that Babel 7 has become faster, more modern, supports advanced configuration options, has improved functionality regarding minification, supports JSX Fragments and TypeScript technologies, new language designs that are in the early stages coordination, and much more. It should be noted that Babel packages in npm now use namespaces
@babel.Important publications in 2018
Consider a few significant publications published in 2018.
- Here is the material on how much you pay to use JavaScript in 2018.
- Here is a publication made on the basis of the React Conf event, from which you can learn about the future of React Conf.
- In this article, Airbnb shares his experience with React Native, acquired by the company for 2 years.
- Here Google shows everyone the Google Photos Web UI device.
- Here you can read about the fact that Microsoft is going to transfer the Edge browser to the Chromium platform.
- But a very interesting speech by Ryan Dahl, the creator of Node.js.
Forecast for 2019
What awaits the frontend in 2019? Here is our forecast:
- WebAssembly will increasingly be found in web projects due to the continuous development of this technology, standardization and the desire of developers for performance.
- React will still lead the ranking of web development tools, while Vue and Angular will continue to grow the user base.
- CSS-in-JS technology can become a standard approach to styling, replacing regular CSS.
- Perhaps the developers will pay attention to the standard web components .
- Performance, unsurprisingly, will continue to attract everyone’s attention. This suggests that progressive web applications (PWA) and code separation technologies will be used in the vast majority of web projects.
- Thanks to the proliferation and development of PWA, web projects will be more closely integrated with the capabilities of mobile and desktop devices, will provide users with full-fledged work opportunities without connecting to the network.
- The growth and development of command-line tools will continue, aimed at freeing developers from the need to self-tune their tools and enable them to quietly create web projects.
- More companies will implement mobile solutions based on standard technologies such as React Native or Flutter .
- In front-end development, the role of containerization will increase (in particular, we are talking about Docker and Kubernetes).
- There will be a significant promotion GraphQL, this technology will be used in more companies.
- TypeScript will no longer be viewed as an alternative to regular JavaScript, but as a standard choice in situations in which JavaScript was previously chosen.
- Virtual reality technology will take a big step forward using libraries such as A-Frame , React VR and Google VR .
Dear readers! What do you expect from front-end development in 2019?