What front-end development brought us in 2017
React, Preact, Vue, Angular, PWA, Rx, Yarn, WASM, GraphQL, serverless, JAMStack, CSS grid, CSS-in-JS, AMP
React 16 and MIT license
React has become very popular and is still #1 based on results about front-end frameworks libraries http://stateofjs.com. Even worldwide and per-country usage proves it. And the most exciting announcement was the release of React v16.0. It includes new render return types, better error handling and SSR and much more. You can see details in React.js blog article.
MIT license is now available for both 15.6.2 and 16 versions of React. In addition, other Facebook projects such as Jest, Flow and Immutable also changed license to MIT 3 months ago according to commits in GitHub. After getting rid of BSD+Patents license, Facebook allows companies to start using React and to make React even more popular next year.
Preact 8
On April, 6, Preact 8.0.0 was released suggesting increased performance, reduced size (3.3Kb), better compatibility and fewer edges cases.
Now Jason Miller, the creator of Preact, is joining the Chrome team, so let’s see what is going to happen to Preact in 2018.
Vue 2.5
On October, 13, Vue 2.5 Level E was released. It provided better TS integration, error handling, support for functional components in single-file components and env-agnostic SSR.
Vue remains to be one of the most popular framework libraries in the world especially in China: https://stateofjs.com/2017/front-end/worldwide and now spreading to the West. However, Google and Facebook support of Angular and React plays a large role in popularity of Vue. To compare them, read this article https://clockwise.software/blog/angular-vs-react-vs-vue.
Angular 4 and 5
On March, 23, Angular 4.0.0 was available and backwards compatible with 2.x.x for most applications. Angular Universal became a part of Angular and moved to @angular/platform-server. Also animations were pulled out of @angular/core. What is more, AOT made component’s generated code less by 60%.
On November, 1, Angular 5.0.0 was announced. Support of incremental compilation and new router lifecycle events were added. HttpClient was moved to @angular/common. And starting from v1.5, Angular CLI generates v5 projects by default.
On December, 7, Angular 5.1.0 was released. In short, Angular Material, Service workers support in @angular/service-worker, Universal and AppShell support in CLI were added, decorator error messages were improved and much more.
PWA
Progressive web applications combine the best of the web and apps. You can work with it on any device, regardless of the network state, have the latest version of the app, can find it easily, install and share if it’s necessary, see the notifications and so on.
For these reasons PWA uses Web App manifest, Service workers and HTTPS protocol.
Manifest makes PWA:
- searchable
- shareable
SW added to PWA:
- faster loading
- offline functionality
HTTPS considered in PWA:
- security issues
Since previous week, Service workers are available in both Edge and Safari! In the near future Safari will support Web App manifests so users could save PWAs to a home screen on iOS.
To see the list of PWAs: https://github.com/pwarocks/pwa.rocks
Reactive programming
Reactivity helps to manage data flow, to listen to changes and to propagate them in the app to handle in any place it’s necessary. It mostly based on Observable.
Rx (from Reactive eXtenstions) framework dates back to November, 17, 2009, when it was announced for .NET and Silverlight. Later RxJS was released. And the interest to reactive programming still grows by the influence of RxJS.
Now Observable is included in ES9 Stage 1 and marked as it’s ready to advance but has not yet presented to the committee.
Reactivity is available for framework libraries, i.e. Vue, Angular (ReactiveFormsModule from @angular/forms), Preact (library for functional-reactive paradigm, called preact-cycle) or you can combine libraries with RxJS, like in React.
For more details, read The introduction to Reactive programming.
Packages management
NPM was and still is the most usable package manager. On September, 5, Facebook released Yarn as an analogue introducing:
- fast / consistent package install
- security impovements, etc.
Yarn added mandatory yarn.lock generation while npm had optional until v5. Also Yarn executed tasks in parallel, increasing performance.
According to https://stats.yarnpkg.com there were 4,589,334,623 yarn downloads last month which was 31.61% of npm downloads.
WASM
WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.
WebAssembly is now supported in all popular browsers and that’s why it becomes more popular.
It’s a part of the web platform and has JS Web API. To learn about it: https://developer.mozilla.org/en-US/docs/WebAssembly.
GraphQL
GraphQL is an app-level query language that helps to communicate client and server. It allows to get a response with data which is placed in a request.
It starts to attract different companies to use it because of powerful advantages, i.e. GitHub chose it for API v4, Coursera replaced REST with it, Shopify uses it, etc.
GraphQL is the hype in the dev community and remains popular and will be in 2018.
Serverless
Serverless popularity grows at a frantic pace. It suggests a way to improve productivity and to reduce costs.
Serverless is a toolkit for deploying and operating serverless architectures. It allows you to focus on your application, not the infrastructure.
The common approach is to use AWS: API Gateway— to process concurrent API calls and to handle traffic management, access control, and Lambda — to act as the control panel and logic layer for all interconnected infrastructure resources and web APIs.
Also, there are Google Cloud platform, Microsoft Azure and IBM OpenWhisk from respective companies. Now EA Sports, the Coca-Cola Co., Nordstrom, Expedia and Reuters use it.
The Serverless Framework is a core component of The Coca-Cola Company’s initiative to reduce IT operational costs and deploy services faster.
— Patrick Brandt, Solutions Architect at The Coca-Cola Company
JAMStack
JAM stands for JavaScript, APIs and Markup, and suggests better performance, higher security, cheaper and easier scaling for simple static applications.
The most usable frameworks (last versions) now are:
- Jekyll v3.6.2, presented on October, 21, written on Ruby (32 401 stars).
- Hugo v0.31.1, presented on November, 27, written on Go (21 927 stars).
- Hexo v3.4.4, presented on December, 20, powered by Node.js (19 784 stars).
- Gatsby v1.9.149, presented on December, 22, written on HTML + CSS + JS, for React. It’s updated several times a day, introducing the latest development tools such as React (16 163 stars).
In addition, Nuxt.js is under active development and will release v1.0.0 soon (v1.0.0-rc11, released on September, 7, is available). It uses Vue as Gatsby uses React. For now it has 8 349 stars.
To manage the content of the static website and to get started with JAMStack, you can try Netlify CMS.
CSS Grid
Grid was recommended as a W3C Candidate on December, 14, and will be a Candidate at least until February, 1, 2018. For more details, read The content of CSS Grid Layout Module Level 1.
Previously, there were hacks to do that: clearfix. After that, flexboxes were introduced: using flexbox and complete guide to use flexbox from CSS Tricks. Now the support of Grid is 76.92% according to Caniuse.com.
To learn CSS Grid read getting started with CSS Grid, CSS Grid Started Layouts, complete guide to use grid, etc.
CSS-in-JS
CSS-in-JS, or JSS, is a tool which produces CSS using JS.
JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic. It is about 6KB (minified and gzipped) and is extensible via plugins API.
There are several integrations on top of JSS:
- react-jss, recently released v8.0.0, on November, 12. The documentation is available here: http://cssinjs.org/react-jss.
- styled-jss, 2 monts ago, on October, 13, released v2.0.0. The docs are available here: http://cssinjs.org/styled-jss.
- aphrodite-jss is less popular, releases are not often. v2.0.0 was released on August, 10. The docs are in here: http://cssinjs.org/aphrodite-jss.
Also, Khan has a different framework, the implementation of CSS-in-JS, which is called Aphrodite.
Google AMP
Accelerated Mobile Pages were announced in 2015, however only growing and expanding in 2017.
By December, 2016, already 7% of all traffic came through Google AMP for top publishers in the US.
On May, 17, at Google’s I/O developer conference, AMP pages loaded twice as fast from Google Search was announced. Over 2B AMP pages and 900K domains were covered.
At the end of June, 2017, Twitter concluded its AMP sessions grew from 1% up to 12% from December, 2016.
Now AMP goes on growing its footprint. The documentation is available here: https://www.ampproject.org/docs.
Conclusion
Thus, 2017
- released new versions of React, Preact, Vue and Angular framework libraries
- introduced Yarn as an analogue to NPM
- presented the growth of interest for PWA, RxJS, WASM, GraphQL and serverless
- made popular JAMStack, which produced a development of many frameworks such as Gatsby, Nuxt.js, etc.
- included CSS Grid and CSS-in-JS approach.
- showed the great growth of Google AMP which helps mobile websites to load quicker.
Thank you for your attention!
Happy holidays!
Alexey Berezin,
Student from St Petersburg State University, Master’s
Front-end developer from EPAM Systems
