Frontend 2017: the most important
A lot of things happened in 2017, in fact - and it's scary to think - how much has happened. Everyone likes to joke about how quickly everything changes in the development of the frontend, and in the past few years it probably was. At the risk of being unoriginal, I want to say that in 2017 everything was not the same as before. Web development trends have stabilized. In particular, popular libraries have become, for the most part, even more popular, instead of moving to the background under the onslaught of competitors. In general, web development has become a much more mature environment than before.
In this article we will talk about some important events that happened this year in the ecosystem of client web development, paying particular attention to general trends.
It is difficult to predict whether a certain technology will acquire a serious prevalence, especially when there is something very popular already. Data analysis for open-source projects is also not an easy task. Talking about technology, we, as a rule, will analyze several indicators. Here I would like to say about the features and disadvantages of these indicators.
')
React 16 was released in September 2017. This release completely rewritten the core of the framework without major API changes. The new version of React has improved error handling, the so-called error boundaries and support for rendering a subsection of the rendering tree to another DOM node were introduced.
The React team decided to rewrite the kernel in order to provide support for asynchronous rendering in future releases, which was impossible to implement on the previous architecture. Thanks to asynchronous rendering, React will avoid blocking the main thread when working with heavy applications. The developers plan is to offer this feature as an optional function in one of the future minor releases of React 16, as a result, this can be expected in 2018.
React, in addition, after some period of disagreement regarding the BSD license used in it earlier, switched to the MIT license . Many acknowledged that what concerns patents imposed too strong restrictions on working with the framework, which led to the fact that many teams decided to switch to alternative JavaScript frameworks for the frontend. However, this position was disputed, saying that the differences were groundless , and that the new approach, in fact, makes React users less protected than before.
After eight beta releases and six preliminary releases, finally, in March, Angular 4 was released. The main feature of this release was pre-compilation: interface elements are now compiled during build, not during rendering.
This means that Angular applications no longer need to be supplied with the compiler for the visual elements of the application, which significantly reduces the size of the package. In this release, in addition, improved support for server rendering and added a lot of small improvements that improve the usability of the language of templates Angular.
During 2017, Angular continued to lose ground compared to React. Although Angular 4 turned out to be a popular release of the framework, now it is even further from the top of the rankings than it was at the beginning of the year.
Angular, React and Vue Downloads in NPM. Source: npmtrends.com
For Vue, 2017 was a great year. This framework has become on a par with React and Angular, becoming one of the leading platforms for the development of the frontend. It became popular thanks to its simple API and a rich set of tools. Since it has a template language similar to Angular, and the component philosophy of React, Vue can often be seen as a platform that represents a kind of compromise between Angular and React.
Last year, Vue experienced literally explosive growth. This led to significant press attention to this framework, the emergence of dozens of popular libraries for developing user interfaces and project templates. Large companies began to introduce Vue. Among them - Expedia, Nintendo, Gitlab and many others .
At the beginning of the year, Vue had 37,000 stars on GitHub and 52,000 weekly downloads in NPM. By mid-December, there were already 76 thousand stars, and 266 thousand weekly downloads, that is, about twice as many stars and five times more downloads.
Compared to React, which, according to NPM, as of mid-December, had 1.6 million weekly downloads, all this does not look so impressive. We can expect that the rapid growth in popularity of Vue will continue, and perhaps it will become one of the two leading frameworks in 2018.
Summing up the conversation about frameworks, we can say that React is the absolute leader at the moment, Angular is not giving up yet, while Vue’s popularity continues to grow.
The 2017 ECMAScript specification, on which JavaScript is based, came out in June after a difficult process of reviewing proposals , culminating in the introduction of several innovative ideas, such as asynchronous functions, shared memory, and atomic operations.
Asynchronous functions allow writing clean and concise asynchronous code in JavaScript. This feature is currently supported by all major browsers. Node.js understands asynchronous functions from version 7.6.0, after switching to the V8 5.5 engine, which was released at the end of 2016, and is characterized by significant improvements in performance and memory management.
Shared memory and atomic operations are simply amazing opportunities that have not yet attracted much attention.
The widespread adoption of shared memory technologies is very important in the years to come. This will ensure the performance of JS applications and games at a level close to the machine code, which makes the web a more competitive platform. Applications can become more complex and perform more heavy operations in the browser, without sacrificing performance, and without shifting the solution of various tasks to the server. A truly parallel shared memory architecture is, in particular, an excellent trump card for anyone who wants to create games with WebGL and web workers.
As of December 2017, shared memory and atomic operations are supported by all leading browsers, and Edge, starting with version 16. Node currently does not support web workers, so the Node team has no plans to support shared memory yet. However, it is known that at the moment this issue is being discussed , so it is quite possible that these technologies will get to Node in the future.
As a result, it can be said that shared memory will greatly simplify the implementation of high-performance parallel computing in JavaScript and make them much more efficient.
The WebAssembly (or WASM) technology makes it possible to compile code written in other languages ​​into a format that browsers support. This code is a low-level language, similar to an assembler, which is designed to provide performance close to the machine code. JavaScript can load and execute WebAssembly modules using the new API.
This API, in addition, gives access to the memory constructor , which allows JavaScript to work directly with the same memory that the WASM module instance works with, which makes it possible to integrate WASM with JS applications at a higher level.
Currently, WebAssembly is supported by all major browsers . In particular, in Chrome such support appeared in May, in Firefox - in March, in the Edge - in October. Safari has been supporting this technology since the 11th release, which comes with MacOS High Sierra, with the corresponding update available for Sierra and El Capitan releases. WebAssembly also supports Chrome for Android and Safari Mobile.
C / C ++ code can be compiled into WebAssembly using the emscripten compiler, setting it up accordingly. In WebAssembly, you can compile Rust , as well as OCaml . There are many ways to compile javascript (or something close to it) in a webassembly. Some of this, like Speedy.js and AssemblyScript , uses TypeScript to validate types and implements low-level types and basic memory management.
None of these projects is yet ready for production, their APIs change frequently. If someone wants to compile JS in WASM, he can expect these designs to evolve into something more serious with the growing popularity of WebAssembly.
At the moment there are many truly interesting projects on WebAssembly . So, here is a Virtual DOM implementation aimed at C ++, which allows you to create frontend projects entirely in C ++. If your project uses a Webpack, here is the wasm-loader library, which eliminates the need for self-loading and parsing .wasm files. WABT offers a toolkit that allows you to switch between WebAssembly binary and text formats, display information about WASM binary files and merge .wasm files.
We can expect WebAssembly to grow in popularity next year, with the advent of more tools, and due to the fact that the JS community will pay attention to its capabilities. Now WASM technology is in the “experimental” phase, and browsers have only recently begun to support it. This technology will become a niche tool for speeding up tasks that use processor resources intensively, such as image processing and 3D rendering. As a result, as I develop, I suspect that WASM will also be used in more common applications.
As a result, we can say that the WebAssembly technology can have a tremendous impact on web development, but so far the technology is very young.
2017 has become a significant year in the field of JavaScript package management. Using Bower continued to fall, it was replaced with NPM. The latest release of Bower was held in 2016, and even those who support it recommend using NPM for frontend projects.
In October 2016, the Yarn package manager was introduced to the general public. He brought something new to JS package management. Although it uses the same public package repository as NPM, Yarn is characterized by faster dependency loading, shorter package installation time, and a more friendly API.
Yarn introduced into lock-files that allow you to play the assembly on many different computers. Immediately appeared and offline mode, which allows developers to reinstall packages in the absence of an Internet connection. As a result, Yarn's popularity increased dramatically, it began being used in thousands of projects.
The stars on GitHub are for Yarn (purple line) and NPM (brown line). Source: GitHub Star History
In response to this, the fifth version of NPM was released, in which the performance was significantly improved and the API was revised. Yarn then offered the Yarn Workplaces technology, which provides excellent support for repositories that host many JS packages, which is similar to the popular Lerna tool.
In the field of package management, there are other clients besides Yarn and NPM for the NPM repository. So, another popular option is PNPM , which its developers write about as a fast, efficiently spending disk space on the package manager. Unlike Yarn and NPM, it maintains a global cache for each ever installed version of a package, the links to which packages are made in the project's
As a result, we can say that NPM quickly adapted to the growth of Yarn, as a result, now both of these package managers are popular solutions.
In the past few years, CSS preprocessors like SASS, Less, and Stylus have become quite common. PostCSS , introduced as early as 2014, literally took off only in 2017, becoming as a result the most popular CSS preprocessor. Unlike other preprocessors, PostCSS adopted a modular approach to working with plugins, similar to the one that Babel implements when working with JavaScript. In addition to transforming style sheets, it provides linting and other tools.
The number of NPM downloads for PostCSS, SASS, Stylus, and Less. Source: NPM data as of December 15th, 2017
There has always been a desire among web programmers to solve many low-level problems with CSS, which complicate its use during component-based development. In particular, the global namespace makes it difficult to create styles that are isolated in a separate component. The fact that CSS is stored in a file other than where the component code is located means that smaller components need more disk space, and that during development you need to open and edit two files.
CSS Modules technology complements regular CSS files by adding namespace information that can be used to isolate component styles. It all works by creating a unique name for each “local” class. This approach proved to be viable, it enjoys wide support for systems to build frontend like Webpack, in which support for CSS Modules is implemented in css-loader . PostCSS has a plugin that gives the same features. However, what is said here does not solve the problem of separating the component code and styles according to different files.
The idea of ​​using CSS in JS (CSS-in-JS) was voiced at the end of 2014, in the famous speech by Christopher Chedeu (Vjeux), a Facebook engineer from the React development team. This idea led to the development of several influential libraries, which simplified the creation of component styles. Until now, the most popular solution in this area has been the styled-components library, which uses the ES6 template literals to create React components from CSS strings.
Another popular solution is the Aphrodite library, which uses JavaScript object literals to create inline styles that do not depend on the framework used. In a study of State Of JavaScript 2017, 34% of developers said they used CSS-in-JS.
As a result, it can be noted that PostCSS is the most popular tool in the processing of CSS at the moment, but many are moving to solutions that implement the use of CSS in JS.
In 2017, the Webpack significantly strengthened its position compared to similar tools of the previous generation.
Webpack, Gulp, Browserify and Grunt downloads in NPM. Source: npmtrends.com
Webpack 2 was released in February of this year. Important features appeared in it, like ES6 modules (Babel is no longer required for the transporting of import commands) and the tree shaking algorithm, designed to get rid of unused code (which reduces the size of packages). Soon after, a third version of Webpack came out, in which the opportunity appeared, called “raising the scope of visibility”, which allows you to assemble all Webpack modules into one JS package, which significantly reduces the size of the package.
In July, the Webpack development team received a grant under the Mozilla Open Source Support program, whose purpose is to develop the WebAssembly support system. Now it is planned to provide deep integration of Webpack with WebAssembly and system of modules JavaScript.
This year it was possible to meet innovations in the field of assembling modules that are not related to Webpack. While this tool remains popular, developers complain about the complexity of its proper setup and the presence of a large number of plug-ins needed in order to achieve acceptable performance when working with large-scale projects.
Parcel is an interesting project that was noticed by the general public in early December (10,000 stars on GitHub in just 10 days ”). The developers speak of it as an extremely fast, not requiring setup, a web application builder. Parcel mainly achieves the above through the use of multiple processor cores and an efficient caching system. In addition, it works with abstract syntax trees instead of strings, as is done in a Webpack. Like the Webpack, Parcel also supports non-JS files, such as images and style files.
What is happening in the field of module builders demonstrates the usual pattern of developments in the community of JavaScript-developers, which is expressed in the constant circulation between the centralized approach, when everything is set up and prepared in advance, and the decentralized approach where everything needs to be set up independently.
This can be observed in the transition from Angular to React / Redux, and from SASS to PostCSS. Webpacks, package builders, and task launchers — all of these are decentralized solutions with many plug-ins.
In fact, Webpack and React have been criticized for almost the same reasons this year. As a result, there is a feeling that the interest of the community is shifting towards the tools for assembling modules that require as little settings as possible.
The Rollup project attracted serious attention before the release of Webpack 2, in 2016, by introducing tree shaking, a popular feature for getting rid of unused code. Webpack responded to this by incorporating support for a key Rollup feature into its second release. Rollup packs modules differently than the Webpack, which allows you to make the size of packages smaller, but at the same time, prevents the use of such important features as, for example, code separation.
In April, the React team switched to Rollup with Gulf, as a result, many wondered why the Rollup was chosen, and not the Webpack. The Webpack development team responded by recommending using Rollup for developing libraries, and Webpack for developing applications.
As a result, we can say that Webpack is still the most popular module builder, but the situation may change.
In 2017, Flow significantly lost ground compared to Typescript .
Downloads Flow and TypeScript to NPM. Source: NPM Trends
Although this trend has existed for several years, this year it has only intensified. Now TypeScript has become the third most popular programming language according to the results of the 2017 StackOverflow study (Flow is not even mentioned there).
Among the reasons for such a high level of attention to TypeScript, excellent tools are often cited (especially suitable for use with editors such as the Visual Sudio Code ), lint support (the tslint library has become very popular), a wide community, a large database of third-party library type definitions, quality documentation. and easy setting. In the early stages of development, TypeScript became literally popular thanks to the fact that it was used in Angular, but in 2017 it significantly strengthened its position among the most diverse layers of the web developer community. According to Google Trends , TypeScript's popularity has doubled over the past year.
TypeScript developers maintain a high rate of release of releases , which allows this language to keep up with JavaScript innovations and constantly improve the type system. TypeScript now supports ECMAScript features such as iterators, generators, asynchronous generators, and dynamic imports. Now using TypeScript it is possible to perform type checking in JavaScript code , which is achieved by outputting JSDoc types and comments. If you, for TypeScript development, use the Visual Studio Code editor, this means that you can now use powerful code transformation tools that, for example, allow you to rename variables and automatically import modules.
As a result, it can be noted that TypeScript this year wins at all positions in Flow.
Redux remains the most popular tool for managing application state in projects based on React, showing a 5-fold increase in NPM downloads in 2017.
Redux downloads from NPM in 2017 Source: NPM Trends
In the management of client applications, Redux has an interesting competitor - MobX. Unlike Redux, MobX uses observable state objects, and an API based on the principles of functional reactive programming . Redux, in its turn, was seriously influenced by traditional functional programming, here pure functions are in high esteem. Redux can be considered a “manual” means for managing a state in which actions and reducers explicitly describe state changes. MobX, in contrast to Redux, can be called an “automatic” tool, since the pattern of the observed object performs all these actions on its own, without the intervention of the developer.
MobX makes almost no assumptions about how the developer structures the data, what data is stored, or whether it can be serialized in JSON. All this makes MobX very attractive for beginners, allowing you to start working with it without too much difficulty.
Unlike Redux, MobX is not distinguished by the use of the transactional approach and determinism. This means that the developer does not automatically receive all the debugging and logging capabilities that Redux has. There is no easy way, for example, to take a snapshot of the status of a MobX application. This means that debuggers, like LogRocket , should independently monitor the observed objects.
MobX is used by several large companies like Bank of America, IBM and Lyft. The number of plugins , templates and manuals for MobX is growing. Moreover, the popularity of this state-of-the-art application control system is growing really fast: from 50 thousand downloads to NPM at the beginning of the year, to 250 thousand in October.
In order to circumvent the above limitations, the MobX team is creating a new project that combines the strengths of React and MobX. This is a mobx-state-tree , or MST. , , , , , , , MobX. , MST, , , , .
, . , Wiretap mobx-devtools . mobx-state-tree Redux, MST Redux .
, Redux , , MobX mobx-state-tree.
GraphQL — API, , . REST, GraphQL , JavaScript- , . , — API .
GraphQL 2016- , . Google Trends 4- GraphQL, NPM 13- JS- GraphQL .
GraphQL. , Apollo — , , , React Vue. MEAN , -, GraphQL API.
GraphQL . GraphQL 20- . GraphQL.
, react-starter-kit — React, GraphQL.
, , GraphQL — , .
NapaJS — JavaScript, V8. Node, , , , Node, . NapaJS . , , , NPM.
Node , node-webworker-threads , Napa , Node . , API , , JS.
Microsoft Node. NapaJS Bing, .
, NapaJS Microsoft, . , Node , .
. Prettier , . , , , , .
, , ESLint , , Prettier . ESLint, Prettier JSON, CSS, SASS, GraphQL Markdown. , ESLint .
, , JS .
, 2017- , , JavaScript, . , , , - , , 2018-.
Dear readers! JS , 2017-, ?
In this article we will talk about some important events that happened this year in the ecosystem of client web development, paying particular attention to general trends.
On the analysis of the popularity of technology
It is difficult to predict whether a certain technology will acquire a serious prevalence, especially when there is something very popular already. Data analysis for open-source projects is also not an easy task. Talking about technology, we, as a rule, will analyze several indicators. Here I would like to say about the features and disadvantages of these indicators.
')
- The number of stars on GitHub is weakly related to the popularity of the library. Often, people put stars in libraries that seem interesting to them, after which they never return to these libraries.
- Google's trends are useful in identifying very general trends, but data cannot be found with sufficient detail to accurately compare certain toolkits.
- The volume of questions on StackOverflow is more indicative of how often programmers do not understand the features of a certain technology than how popular it is.
- NPM download statistics is the most accurate indicator of how many developers actually use a particular library. But even this data may not be completely accurate, as they also include automatic downloads, such as those performed by means of continuous integration.
- Studies, such as State of JavaScript 2017 , are useful for identifying trends among target audiences of rather large size.
Frameworks
â–ŤReact
React 16 was released in September 2017. This release completely rewritten the core of the framework without major API changes. The new version of React has improved error handling, the so-called error boundaries and support for rendering a subsection of the rendering tree to another DOM node were introduced.
The React team decided to rewrite the kernel in order to provide support for asynchronous rendering in future releases, which was impossible to implement on the previous architecture. Thanks to asynchronous rendering, React will avoid blocking the main thread when working with heavy applications. The developers plan is to offer this feature as an optional function in one of the future minor releases of React 16, as a result, this can be expected in 2018.
React, in addition, after some period of disagreement regarding the BSD license used in it earlier, switched to the MIT license . Many acknowledged that what concerns patents imposed too strong restrictions on working with the framework, which led to the fact that many teams decided to switch to alternative JavaScript frameworks for the frontend. However, this position was disputed, saying that the differences were groundless , and that the new approach, in fact, makes React users less protected than before.
â–ŤAngular
After eight beta releases and six preliminary releases, finally, in March, Angular 4 was released. The main feature of this release was pre-compilation: interface elements are now compiled during build, not during rendering.
This means that Angular applications no longer need to be supplied with the compiler for the visual elements of the application, which significantly reduces the size of the package. In this release, in addition, improved support for server rendering and added a lot of small improvements that improve the usability of the language of templates Angular.
During 2017, Angular continued to lose ground compared to React. Although Angular 4 turned out to be a popular release of the framework, now it is even further from the top of the rankings than it was at the beginning of the year.
Angular, React and Vue Downloads in NPM. Source: npmtrends.com
â–ŤVue.js
For Vue, 2017 was a great year. This framework has become on a par with React and Angular, becoming one of the leading platforms for the development of the frontend. It became popular thanks to its simple API and a rich set of tools. Since it has a template language similar to Angular, and the component philosophy of React, Vue can often be seen as a platform that represents a kind of compromise between Angular and React.
Last year, Vue experienced literally explosive growth. This led to significant press attention to this framework, the emergence of dozens of popular libraries for developing user interfaces and project templates. Large companies began to introduce Vue. Among them - Expedia, Nintendo, Gitlab and many others .
At the beginning of the year, Vue had 37,000 stars on GitHub and 52,000 weekly downloads in NPM. By mid-December, there were already 76 thousand stars, and 266 thousand weekly downloads, that is, about twice as many stars and five times more downloads.
Compared to React, which, according to NPM, as of mid-December, had 1.6 million weekly downloads, all this does not look so impressive. We can expect that the rapid growth in popularity of Vue will continue, and perhaps it will become one of the two leading frameworks in 2018.
Summing up the conversation about frameworks, we can say that React is the absolute leader at the moment, Angular is not giving up yet, while Vue’s popularity continues to grow.
ECMAScript
The 2017 ECMAScript specification, on which JavaScript is based, came out in June after a difficult process of reviewing proposals , culminating in the introduction of several innovative ideas, such as asynchronous functions, shared memory, and atomic operations.
Asynchronous functions allow writing clean and concise asynchronous code in JavaScript. This feature is currently supported by all major browsers. Node.js understands asynchronous functions from version 7.6.0, after switching to the V8 5.5 engine, which was released at the end of 2016, and is characterized by significant improvements in performance and memory management.
Shared memory and atomic operations are simply amazing opportunities that have not yet attracted much attention.
SharedArrayBuffer memory is implemented using the SharedArrayBuffer object, which allows web workers to work with the same fragments of a typed array located in memory. Workers (and the main thread) use atomic operations provided by the new Atomics API to provide secure memory access from different contexts. SharedArrayBuffer offers a much faster than before method of data exchange between workers as compared to sending messages or using transmitted objects.The widespread adoption of shared memory technologies is very important in the years to come. This will ensure the performance of JS applications and games at a level close to the machine code, which makes the web a more competitive platform. Applications can become more complex and perform more heavy operations in the browser, without sacrificing performance, and without shifting the solution of various tasks to the server. A truly parallel shared memory architecture is, in particular, an excellent trump card for anyone who wants to create games with WebGL and web workers.
As of December 2017, shared memory and atomic operations are supported by all leading browsers, and Edge, starting with version 16. Node currently does not support web workers, so the Node team has no plans to support shared memory yet. However, it is known that at the moment this issue is being discussed , so it is quite possible that these technologies will get to Node in the future.
As a result, it can be said that shared memory will greatly simplify the implementation of high-performance parallel computing in JavaScript and make them much more efficient.
WebAssembly
The WebAssembly (or WASM) technology makes it possible to compile code written in other languages ​​into a format that browsers support. This code is a low-level language, similar to an assembler, which is designed to provide performance close to the machine code. JavaScript can load and execute WebAssembly modules using the new API.
This API, in addition, gives access to the memory constructor , which allows JavaScript to work directly with the same memory that the WASM module instance works with, which makes it possible to integrate WASM with JS applications at a higher level.
Currently, WebAssembly is supported by all major browsers . In particular, in Chrome such support appeared in May, in Firefox - in March, in the Edge - in October. Safari has been supporting this technology since the 11th release, which comes with MacOS High Sierra, with the corresponding update available for Sierra and El Capitan releases. WebAssembly also supports Chrome for Android and Safari Mobile.
C / C ++ code can be compiled into WebAssembly using the emscripten compiler, setting it up accordingly. In WebAssembly, you can compile Rust , as well as OCaml . There are many ways to compile javascript (or something close to it) in a webassembly. Some of this, like Speedy.js and AssemblyScript , uses TypeScript to validate types and implements low-level types and basic memory management.
None of these projects is yet ready for production, their APIs change frequently. If someone wants to compile JS in WASM, he can expect these designs to evolve into something more serious with the growing popularity of WebAssembly.
At the moment there are many truly interesting projects on WebAssembly . So, here is a Virtual DOM implementation aimed at C ++, which allows you to create frontend projects entirely in C ++. If your project uses a Webpack, here is the wasm-loader library, which eliminates the need for self-loading and parsing .wasm files. WABT offers a toolkit that allows you to switch between WebAssembly binary and text formats, display information about WASM binary files and merge .wasm files.
We can expect WebAssembly to grow in popularity next year, with the advent of more tools, and due to the fact that the JS community will pay attention to its capabilities. Now WASM technology is in the “experimental” phase, and browsers have only recently begun to support it. This technology will become a niche tool for speeding up tasks that use processor resources intensively, such as image processing and 3D rendering. As a result, as I develop, I suspect that WASM will also be used in more common applications.
As a result, we can say that the WebAssembly technology can have a tremendous impact on web development, but so far the technology is very young.
Package Managers
2017 has become a significant year in the field of JavaScript package management. Using Bower continued to fall, it was replaced with NPM. The latest release of Bower was held in 2016, and even those who support it recommend using NPM for frontend projects.
In October 2016, the Yarn package manager was introduced to the general public. He brought something new to JS package management. Although it uses the same public package repository as NPM, Yarn is characterized by faster dependency loading, shorter package installation time, and a more friendly API.
Yarn introduced into lock-files that allow you to play the assembly on many different computers. Immediately appeared and offline mode, which allows developers to reinstall packages in the absence of an Internet connection. As a result, Yarn's popularity increased dramatically, it began being used in thousands of projects.
The stars on GitHub are for Yarn (purple line) and NPM (brown line). Source: GitHub Star History
In response to this, the fifth version of NPM was released, in which the performance was significantly improved and the API was revised. Yarn then offered the Yarn Workplaces technology, which provides excellent support for repositories that host many JS packages, which is similar to the popular Lerna tool.
In the field of package management, there are other clients besides Yarn and NPM for the NPM repository. So, another popular option is PNPM , which its developers write about as a fast, efficiently spending disk space on the package manager. Unlike Yarn and NPM, it maintains a global cache for each ever installed version of a package, the links to which packages are made in the project's
node_modules folder.As a result, we can say that NPM quickly adapted to the growth of Yarn, as a result, now both of these package managers are popular solutions.
Styles
â–ŤInnovations in working with styles
In the past few years, CSS preprocessors like SASS, Less, and Stylus have become quite common. PostCSS , introduced as early as 2014, literally took off only in 2017, becoming as a result the most popular CSS preprocessor. Unlike other preprocessors, PostCSS adopted a modular approach to working with plugins, similar to the one that Babel implements when working with JavaScript. In addition to transforming style sheets, it provides linting and other tools.
The number of NPM downloads for PostCSS, SASS, Stylus, and Less. Source: NPM data as of December 15th, 2017
There has always been a desire among web programmers to solve many low-level problems with CSS, which complicate its use during component-based development. In particular, the global namespace makes it difficult to create styles that are isolated in a separate component. The fact that CSS is stored in a file other than where the component code is located means that smaller components need more disk space, and that during development you need to open and edit two files.
CSS Modules technology complements regular CSS files by adding namespace information that can be used to isolate component styles. It all works by creating a unique name for each “local” class. This approach proved to be viable, it enjoys wide support for systems to build frontend like Webpack, in which support for CSS Modules is implemented in css-loader . PostCSS has a plugin that gives the same features. However, what is said here does not solve the problem of separating the component code and styles according to different files.
â–ŤClassic Alternatives
The idea of ​​using CSS in JS (CSS-in-JS) was voiced at the end of 2014, in the famous speech by Christopher Chedeu (Vjeux), a Facebook engineer from the React development team. This idea led to the development of several influential libraries, which simplified the creation of component styles. Until now, the most popular solution in this area has been the styled-components library, which uses the ES6 template literals to create React components from CSS strings.
Another popular solution is the Aphrodite library, which uses JavaScript object literals to create inline styles that do not depend on the framework used. In a study of State Of JavaScript 2017, 34% of developers said they used CSS-in-JS.
As a result, it can be noted that PostCSS is the most popular tool in the processing of CSS at the moment, but many are moving to solutions that implement the use of CSS in JS.
Module builders
â–ŤWebpack
In 2017, the Webpack significantly strengthened its position compared to similar tools of the previous generation.
Webpack, Gulp, Browserify and Grunt downloads in NPM. Source: npmtrends.com
Webpack 2 was released in February of this year. Important features appeared in it, like ES6 modules (Babel is no longer required for the transporting of import commands) and the tree shaking algorithm, designed to get rid of unused code (which reduces the size of packages). Soon after, a third version of Webpack came out, in which the opportunity appeared, called “raising the scope of visibility”, which allows you to assemble all Webpack modules into one JS package, which significantly reduces the size of the package.
In July, the Webpack development team received a grant under the Mozilla Open Source Support program, whose purpose is to develop the WebAssembly support system. Now it is planned to provide deep integration of Webpack with WebAssembly and system of modules JavaScript.
This year it was possible to meet innovations in the field of assembling modules that are not related to Webpack. While this tool remains popular, developers complain about the complexity of its proper setup and the presence of a large number of plug-ins needed in order to achieve acceptable performance when working with large-scale projects.
â–ŤParcel
Parcel is an interesting project that was noticed by the general public in early December (10,000 stars on GitHub in just 10 days ”). The developers speak of it as an extremely fast, not requiring setup, a web application builder. Parcel mainly achieves the above through the use of multiple processor cores and an efficient caching system. In addition, it works with abstract syntax trees instead of strings, as is done in a Webpack. Like the Webpack, Parcel also supports non-JS files, such as images and style files.
What is happening in the field of module builders demonstrates the usual pattern of developments in the community of JavaScript-developers, which is expressed in the constant circulation between the centralized approach, when everything is set up and prepared in advance, and the decentralized approach where everything needs to be set up independently.
This can be observed in the transition from Angular to React / Redux, and from SASS to PostCSS. Webpacks, package builders, and task launchers — all of these are decentralized solutions with many plug-ins.
In fact, Webpack and React have been criticized for almost the same reasons this year. As a result, there is a feeling that the interest of the community is shifting towards the tools for assembling modules that require as little settings as possible.
â–ŤRollup
The Rollup project attracted serious attention before the release of Webpack 2, in 2016, by introducing tree shaking, a popular feature for getting rid of unused code. Webpack responded to this by incorporating support for a key Rollup feature into its second release. Rollup packs modules differently than the Webpack, which allows you to make the size of packages smaller, but at the same time, prevents the use of such important features as, for example, code separation.
In April, the React team switched to Rollup with Gulf, as a result, many wondered why the Rollup was chosen, and not the Webpack. The Webpack development team responded by recommending using Rollup for developing libraries, and Webpack for developing applications.
As a result, we can say that Webpack is still the most popular module builder, but the situation may change.
TypeScript
In 2017, Flow significantly lost ground compared to Typescript .
Downloads Flow and TypeScript to NPM. Source: NPM Trends
Although this trend has existed for several years, this year it has only intensified. Now TypeScript has become the third most popular programming language according to the results of the 2017 StackOverflow study (Flow is not even mentioned there).
Among the reasons for such a high level of attention to TypeScript, excellent tools are often cited (especially suitable for use with editors such as the Visual Sudio Code ), lint support (the tslint library has become very popular), a wide community, a large database of third-party library type definitions, quality documentation. and easy setting. In the early stages of development, TypeScript became literally popular thanks to the fact that it was used in Angular, but in 2017 it significantly strengthened its position among the most diverse layers of the web developer community. According to Google Trends , TypeScript's popularity has doubled over the past year.
TypeScript developers maintain a high rate of release of releases , which allows this language to keep up with JavaScript innovations and constantly improve the type system. TypeScript now supports ECMAScript features such as iterators, generators, asynchronous generators, and dynamic imports. Now using TypeScript it is possible to perform type checking in JavaScript code , which is achieved by outputting JSDoc types and comments. If you, for TypeScript development, use the Visual Studio Code editor, this means that you can now use powerful code transformation tools that, for example, allow you to rename variables and automatically import modules.
As a result, it can be noted that TypeScript this year wins at all positions in Flow.
Application State Management
Redux remains the most popular tool for managing application state in projects based on React, showing a 5-fold increase in NPM downloads in 2017.
Redux downloads from NPM in 2017 Source: NPM Trends
In the management of client applications, Redux has an interesting competitor - MobX. Unlike Redux, MobX uses observable state objects, and an API based on the principles of functional reactive programming . Redux, in its turn, was seriously influenced by traditional functional programming, here pure functions are in high esteem. Redux can be considered a “manual” means for managing a state in which actions and reducers explicitly describe state changes. MobX, in contrast to Redux, can be called an “automatic” tool, since the pattern of the observed object performs all these actions on its own, without the intervention of the developer.
MobX makes almost no assumptions about how the developer structures the data, what data is stored, or whether it can be serialized in JSON. All this makes MobX very attractive for beginners, allowing you to start working with it without too much difficulty.
Unlike Redux, MobX is not distinguished by the use of the transactional approach and determinism. This means that the developer does not automatically receive all the debugging and logging capabilities that Redux has. There is no easy way, for example, to take a snapshot of the status of a MobX application. This means that debuggers, like LogRocket , should independently monitor the observed objects.
MobX is used by several large companies like Bank of America, IBM and Lyft. The number of plugins , templates and manuals for MobX is growing. Moreover, the popularity of this state-of-the-art application control system is growing really fast: from 50 thousand downloads to NPM at the beginning of the year, to 250 thousand in October.
In order to circumvent the above limitations, the MobX team is creating a new project that combines the strengths of React and MobX. This is a mobx-state-tree , or MST. , , , , , , , MobX. , MST, , , , .
, . , Wiretap mobx-devtools . mobx-state-tree Redux, MST Redux .
, Redux , , MobX mobx-state-tree.
GraphQL
GraphQL — API, , . REST, GraphQL , JavaScript- , . , — API .
GraphQL 2016- , . Google Trends 4- GraphQL, NPM 13- JS- GraphQL .
GraphQL. , Apollo — , , , React Vue. MEAN , -, GraphQL API.
GraphQL . GraphQL 20- . GraphQL.
, react-starter-kit — React, GraphQL.
, , GraphQL — , .
,
â–ŤNapaJS
NapaJS — JavaScript, V8. Node, , , , Node, . NapaJS . , , , NPM.
Node , node-webworker-threads , Napa , Node . , API , , JS.
Microsoft Node. NapaJS Bing, .
, NapaJS Microsoft, . , Node , .
â–ŤPrettier
. Prettier , . , , , , .
, , ESLint , , Prettier . ESLint, Prettier JSON, CSS, SASS, GraphQL Markdown. , ESLint .
, , JS .
Results
, 2017- , , JavaScript, . , , , - , , 2018-.
Dear readers! JS , 2017-, ?
Source: https://habr.com/ru/post/345792/
All Articles