As old technology matures, new technologies emerge one after another.

  • 原文: A recap of front-end development in 2017
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

As front-end development continues to be hot in 2017, this article will summarize the hot issues.

Version 16 of the React and MIT protocol

On the front end, React has always led the pack. A major version update, Version 16, was released in 2017. In the new version, the Fiber structure is introduced to support asynchronous UI rendering. It also provides error mechanisms for handling unexpected application failures, as well as many other features.

The biggest surprise, however, is not the new features, but the changes to the open source protocol. Facebook’s new protocol has led many companies to move away from React. Jest, Flow, Immutable. Js, and GraphQL also use this protocol.

Progressive Web Apps (PWA)

We are always looking for a way to use web technology to support other clients perfectly. Google specializes in enhancing web applications by converting them to Progressive Web Apps (PWA’s). This line of thinking was quickly adopted by the masses in 2017. PWA uses modern browser technology to make the experience of accessing web apps similar to native mobile apps. Performance has been greatly improved, offline access is supported, and native APP features like push notifications are also supported. PWA uses service workders primarily in conjunction with manifest.json.

Yarn improves the JS software package system

NPM has grown tremendously since its inception, but it is missing some important features that are supported by Yarn. The most important functions of Yarn are package caching, a lock file that ensures a certain build, parallel operations, and tiling dependencies. These features are so useful that NPM implemented them in version 5.9. Yarn has accumulated 1 billion downloads (currently averaging 1.25 million per month) and has more than 28,000 favorites on Github. Even if you do not use Yarn, you can benefit from Yarn’s improvement to the overall package management system.

CSS grid cell layout

CSS finally supports grid cell layouts, and browsers will soon do the same. In the past, we needed to use tables,float, Flex, and inline-block to implement grid layouts. Today, the native CSS grid layout lets you define rows and columns. Get started: Gridbyexample.com/.

WebAssembly is supported by major browsers

WebAssembly(WASM) is starting to be supported by all major browsers. Wasm is a browser-specific script that is a low-level bytecode format. Because of its low-level nature, execution efficiency can be very high. It also provides a JavaScript API for front-end developers to access. Firefox has declared wASM support for all browsers. WebAssembly support Now shipping in all Major Browsers

Serverless architecture

Applications continue to grow in 2017 with Serverless, a new architecture that improves performance while reducing resource costs. Your client is completely separated from the server, so you can focus on the application itself and not the architecture. A common way to do this is to use the AWS API Gateway and AWS Lambda functions as background services. If you want to try it out, start with this blog post: A Crash Course on Serverless with Node.js.

Vue.js continues to be popular

While React dominates the mainstream market, Yu’s Vue shines as an up-and-comer. Vue is a component-based architecture that has become the first choice after React. Vue is already being used by large companies such as GitLab.

Fundebug is a full-stack JavaScript error monitoring platform that supports a variety of front-end and back-end frameworks to help you find bugs the first time!

CSS-in-JS

As JavaScript technology evolves, the ecosystem stabilizes. CSS technology is also evolving. In 2017, the major advances were some monotonous feature improvements and the absorption of CSS-in-JS, which means we can define CSS by writing JS code. It is not clear whether this technology will dominate the future of CSS, but this novel technology does solve many of the problems of component-based applications.

Styled components, developed by Max Stoiber, Glen Maddern, and Phil Pluckthun, took the lead in 2017. The Emotion library developed by Kye Hohenberger is widely used. The notion of Glamorous is also a good option, maintained by Kent C. Doods of PayPal and a group of passionate developers. Read this article to learn more: CSS-in-JS Roundup: Styling React Components.

Static Site generation

Static website generation also began to heat up in 2017. Websites like Gatsby can use modern tools like React to build static pages. Not all web sites require sophisticated web technology. Static web site generation will give you the ultimate speed of web page access. If you’re looking for an example, the React official documentation is generated using Gatsby.

Static web site generation has a set of tools called JAMStack: JavaScript, APIs, Markup. JAMStack uses pre-compiled HTML files, reusable APIs, and JavaScript code to handle requests. Netlify is a great tool and offers a free Host service. Brian Douglas has a great article on JAMStack versus server-side rendering apps by implementing Hacker News.

GraphQL

GraphQL is gaining popularity and is poised to outperform REST. Samer Buna even advertised the death of REST. GraphQL allows clients to customize data and then fetch it all at once. REST solutions require maintenance and retrieval of a lot of invalid data. Github’s new API has been rewritten using GraphQL. Johannes Schickling developed the Graphcool(GraphQL Backend Development Framework) Framework for this purpose.

React Router 4

The React Router, developed by Ryan Florence and Michael Jackson, started out as a Router package that could be used in React, but has now become a fully fledged React Router and a component of React. All apis are basically stable, and the React Training Team promises that the project will be safe to use without major changes.

Angular quickly released V4 and V5

After quietly skipping Angular 3, Angular 4 is officially released on March 23. In Angular 4, the Angular team incorporated the community project Angular Universal. Angular Universal provides a mechanism for server-side rendering of Angular applications. Angular Animation moves from @angular/core. If you need to use it, you need to import it manually. Angular’s AOT compilation has been refactored for improved performance. The size of the generated code is also significantly reduced, by up to 60%.

Some long-awaited improvements were implemented in version 5. Angular 5 provides @angular/service-worker, so creating a PWA is very simple. The Angular compiler is optimized for shorter compile times. The Angular Router exposes all lifecycle hooks, including ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd.

The TypeScript and Flow

TypeScript has plenty of developers, and Flow provides a flexible way to introduce types without having to refactor existing code too much. Many developers complain that JavaScript has no type, and TypeScript is designed by Microsoft. In the latest version of Angular, TypeScript is the default. Flow is a type checking tool developed by Facebook LABS.

What can we expect in 2018

  • CSS technology will continue to evolve until we find a suitable CSS approach for component-based architecture apps.
  • More and more companies are using a common code base for mobile and web applications, such as React Native and Flutter;
  • With offline capabilities and seamless integration with mobile, web apps will become more native;
  • WebAssembly will take a big step forward;
  • GraphQL continues to challenge REST;
  • Flow and TypeScript make JavaScript more structured;
  • Container technology influences the design of the front-end architecture;
  • Virtual reality will continue to mature, relying on A large number of mature libraries a-frame, React VR, Google VR;
  • There will be people who build cool apps using blockchain and Web3.js;

Welcome to our Fundebug Technical exchange 3 group: 490454644

Copyright statement: reprint please indicate the author Fundebug and this address: https://blog.fundebug.com/2017/12/25/a-recap-of-frontend-dev-2017/