This article is my Chinese version
risingstars2016And I am the Chinese version
The translator, first published in Zhihu column
The front-end weekly. It has 21,384 characters and takes 30 minutes to read and five minutes to speed read. If you can spend 30 minutes reading what I translated in six hours, you won’t be beaten to death on the beach and get a clear idea of what to learn in 2017.

In terms of quantity, we will analyze which projects have gained more attention in 2016 by comparing the number of new stars of each project on Github in 2016.

Look back on 2015: React definitely ruled, while Redux stood out from the crowd of Flux implementations. So which projects are getting the most attention from developers in 2016?

directory

  1. Most popular item
  2. The front frame
  3. Node. Js framework
  4. React Project Template
  5. Mobile development
  6. Compile tools
  7. Build tools
  8. The test framework
  9. IDE
  10. Static Web site Generator

1. Most popular project

Take a closer look at the top 10 projects of 2016 and you’ll get a sense of where the WEB community is headed. Here’s how:


  • Three UI frameworks: vue. JS, React and Angular 2
  • 1 new Node.js package manager: Yarn
  • The first choice for creating a desktop application: Electron
  • The first choice for creating a react project: Create React App
  • 1 mobile development framework: React Native
  • Most popular CSS toolkit: Bootstrap
  • Functional programming style state management library: Redux
  • Powerful and flexible drawing library: D3

The fields covered by the above projects undoubtedly prove the universality of JS, confirming the saying that what can be written by JS will be written by JS sooner or later.

The best project of 2016 is… 🏆

Vue.js added more than 25,000 stars in 2016, which means an average of 72 new stars per day, outpacing the popularity of all similar projects like React and Angular. Vue.js V2, which uses Virtual DOM to enhance performance, was released in October 2016.

Vue.js is already used in production environments by large companies such as Libaba, the largest e-commerce site in China, so you can use vue.js as a safe choice.

The community ecosystem around vue.js is also maturing, including vue-Router and Vuex. Vue.JS has the best of both React and Angular 1, where the basic idea of React is component development and Angular 1 is template enhancement.

2. Front-end framework

The flowering of front-end frameworks may be the cause of JS fatigue, as new frameworks, tools and libraries emerge to push the wheels of innovation forward.

In general, front-end frameworks fall into two broad categories:

  • A large and comprehensive framework that includes all the features needed to create modern WEB applications, such as routing, data retrieval, and state management. Typical projects include Angular 1, Angular 2, Ember, and Aurelia.
  • Small but beautiful, uI-focused solutions, typical projects include React, Vue.JS, Inferno…

We’ve already looked at the # 1 project vue.js, but here’s a look at the other contenders:

React and its competitors

React is # 2, and everyone knows React has a huge community and a complete ecosystem.

React design philosophy is very popular, and a large number of React like projects are inspired by React. These projects inherit the advantages of React and have significant improvements, such as various slimmed down versions that improve performance and shorten build time.

Inferno is the most popular project in the React class, and it bills itself as the fastest performing of its competitors.

Preact is also a great choice and has a nice ecology, such as various scaffolds, routing, and even a Compact module that allows any library that can run in the React environment to run in Preact.


Angular 1 and Angular 2

The Angular project has been split into two repositories because Angular 2 is almost a complete rewrite of Angular 1, even though they are partially conceptually the same.

Angular 2 is written entirely in TypeScript so that it provides a modern, comprehensive WEB framework that leverages ES6 syntax features.

Angular 1 (called “AngularJS” on Github) is still being used by a lot of projects and will continue to be popular for some time.

Also, it must be noted that Ember, while large in community and ecology, didn’t make the top 10.

In general, developers prefer to combine small, beautiful, lightweight solutions because it gives them more freedom than large, all-in-one frameworks out of the box.

3. The Node. Js framework

Creating and deploying Node.js applications has never been easier in 2016, with solutions like the following:

  • Now
  • Webtask.io
  • Stdlib

Projects like Gomix bring the bar to node.js as low as possible, making it easy to write and share Node.js code with a simple browser click and drag.

So, if we want to create a WEB application, which framework should we choose?

Express

Express has become the standard framework for developing Node.js WEB applications, and most engineers are familiar with its design ideas (a minimalist core, but allows you to extend its functionality with a variety of middleware).

Koa

Koa is very similar in design to Express, except that it is written using a Generator in ES6, which solves the familiar callback hell problem.

Feathers

Feathers, a flexible solution for implementing a service-oriented architecture, is perfect for creating Node.js microservices.

Nodal

Nodal, used to create postgresQl-based stateless, distributed services.

Keystone

Keystone is the best solution I know to quickly build a MongoDB based management background. Keystone.js can automatically generate a background interface based on the definition of the data model, supporting common add, delete, change and check operations and flexible data filtering.

Sails

Sails, an all-in-one MVC framework inspired primarily by Ruby on Rails, has been around for a long time, supporting all kinds of databases, whether SQL or no-SQL.

Loopback

Loopback, a mature framework with many built-in features, supports token-based authentication and supports various databases. Loopback’s “ace in the hole” feature is the API browser, which allows developers to view all apis in a very intuitive way, and is a great choice if you need to create AN API service.

4. React Project template

React is a great UI library, but creating a React application based on a modern WEB application development workflow still requires a lot of configuration to put all the pieces together. How do you create a “real” React application? Various React Project templates (Boilerplates) and starter kits are designed to solve this problem. Typical ones are as follows:

Create React App

Create React Is an open source, lightweight solution for Creating React applications using the Create React App. Create React App author Dan Abramov (also Redux’s author, currently at Facebook) strikes a fine balance between features-rich and simple reliability, no cool styling solutions (just pure CSS), no server-side rendering, But the rest of React app development is seamless, and the developer experience is great.

Compared to similar tools, if you use the Create React App, it becomes a dependency on your project. All the hacking is invisible. You can only see your own App code, and you can update the dependency at any time.

React boilerplate

React BoilerPlate includes everything you need for the React app, including Redux and offline functionality based on Web workers. You can use it to create “progressive Web applications” (also known as “PWA”). To learn more about PWA, read this article by Nicolas Bevacqua.

Next.js

Next. Js, created by Busy Folks from Zeit, supports server-side rendering and can be used to create universal applications (or “homogeneous applications”) that, in plain English, run the same code on both the front and back ends.

Mobile development

The generality of JS is beyond doubt. Nowadays, WEB engineers can build Native mobile applications with technologies (HTML, JS and CSS) that are very familiar to them. Here are a few typical solutions:

React Native

React Native allows you to use the same code as React to build true Native apps for iOS and Android platforms. I recommend reading this tutorial.

Other solutions based on Cordova use webViews to render pages, which may have a lower runtime performance than Native apps, but the “Write Once Run Everywhere” dream is coming true.

Ionic

Ionic is a pioneer in “Hybird” app development, with a mature community and ecosystem based on Cordova to access system functionality on mobile devices.

NativeScript

NativeScript and React Native share the same goal, that is, build Native applications based on WEB technologies. The core of NativeScript is divided into two parts: NativeScript kernel and NativeScript + Angular 2.

Looking ahead…

Weex is a project to watch out for in 2017. Weex is a vue.js-based framework for creating cross-platform mobile applications.

6. Compilation tools

We are talking about tools that compile or convert standard JS code from other languages or JS variants into Transpiler code that can be executed in a browser or node.js environment.

Most commonly, such compilation tools allow developers to write code using ES6 syntax without worrying about browser support.

TypeScript

The most promising compilation tool is probably TypeScript. It brings static typing to JS similar to Java and C#, and the fact that Angular 2 uses TypeScript entirely makes it more attractive. Of course, there is a lot of discussion about static typing in JS. Read these two articles to make up your own mind:

  • You probably don’t need TypeScript
  • TypeScript Primer

Babel

Babel + WebPack has become the standard set of tools for ES6 code conversion and React template compilation. Babel was originally built for ES6, but thanks to its plugin system, it has evolved into a versatile tool for almost any code conversion.


Flow

Flow is not a compilation tool, but a static type-checking tool based on JAVASCRIPT code markers. In other words, when using Flow, you need to add various comments to your code to indicate the data type you want. Read this article on how to use Flow.

Flow is used in the source code of many Facebook projects, and Facebook has become an important player in the open source community, with React, React Native, Flux, Immutable, Jest, and many other projects open source. You know what this means.

CoffeeScript

CoffeeScript’s concise syntax, which borrows heavily from Python and Ruby, has been the most popular compiler over the past few years, but many developers switched from CoffeeScript to ES6 + Babel in 2016.


7. Build tools

In 2016, “build processes” seem to be the norm for WEB projects, and it’s hard to imagine a WEB application without a build process, where you usually have to do things like compile templates, static resource consolidation and compression to get ready for production.

Webpack

Webpack is the main tool for building single-page applications (spAs), and it works well with the React ecosystem. The latest release of Webpack 2 brings a number of promising improvements, as you can see here.

Gulp

Gulp is a general-purpose task-running tool that can be used in any automated process that deals with file systems and is not considered a direct competitor to Webpack and Browserify.

Like Grunt, Gulp’s main role is task management. You can make it compress and merge code, but it won’t help you with JS modularity issues, whereas Webpack and Browserify do.

Of course, Gulp can be used in conjunction with Webpack, even if developers prefer to use NPM Script, which many do.

Browserify

Browserify is popular with the Node.js engineer community because of its simplicity. In simple terms, it takes multiple Node.js packages as input and outputs a single compiled file. Webpack, by contrast, takes more into account the packaging of WEB applications and is better suited to modern WEB development workflows.

Looking ahead…

The module packaging tool to look out for in 2017 is Rollup, which emphasizes performance, es6-based module specifications, and supports Tree Shaking. The build results only contain code for actual business logic, not simple file merging.

8. Test the framework

In contrast to the long-popular Jasmine and Mocha testing frameworks, 2016 saw the emergence of two newer and widely used testing frameworks: AVA and Jest.

AVA

Developed and maintained by the highly productive Sindre Sorhus, AVA boasts a focus on performance and ES6, with the ability to run tests in parallel. AVA’s syntax is very similar to Tape and Node-tap.

Jest

Jest, another Facebook open source project, has gained a lot of developer attention in recent months, has become more popular in the React community, and more and more people are migrating to Jest. Read this story and Jest is likely to be the most popular testing framework in 2017.

Jest has very powerful Mock features built in, whereas other testing frameworks often rely on third-party Mock packages such as sinon.js.

9. IDE

Speaking of ides (Integrated Development Environments), it is exciting to note that the two most popular ides are open source projects developed using WEB technologies.

Visual Studio Code

Microsoft’s Visual Studio Code is very popular among WEB developers because it provides great TypeScript and Node.js integration, Some developers even point out that Visual Studio Code’s intellisense features greatly improve development efficiency. Now put Microsoft and open source together, it’s finally not so incompatible.

Atom

Atom, which is open sourced by Github and built using Electron, is not far behind Visual Studio Code in popularity, but an interesting fact about Atom is that its main language is CoffeeScript.

10. Static web site generator

Static WEB Site Generator (SSG) is a tool that generates a bunch of HTML, CSS, and JS files that you can quickly deploy to a simple WEB server without having to install and configure a database. As Gatsby boasted:

Build your site like it was 1995.

Static sites are characterized by high speed, robust line, and easy maintenance.

The main reason why static web sites are so popular is that there are a number of very useful and free static web hosting solutions out there, such as:

  • Github pages
  • Gitlab pages
  • Netlify
  • Surge
  • Now static

Hexo

The most popular static site generation tool in 2016 was Hexo, which is similar to CMS systems like Workdpress and can be used to easily create blog sites, with many other features such as internationalization plug-ins.

Gatsby

The new player Gatsby is an interesting solution. Compared with its competitors, it uses the React ecosystem to generate static files. It can combine React Component, Markdown and server rendering to complete static website generation, which makes it more powerful.


Summary and Outlook

Despite “JS fatigue” and dramatic events (such as “Leftpad Gate “), 2016 was a very important year for the JS community in general, with some projects rising in 2016, such as Vue.JS and React Native, Other dark horse projects were launched in 2016, such as Yarn and the Create React App.

We talked about the most high-profile open source projects on Github in 2016, but what really matters is developer satisfaction, and if you want to get a more quantized sense of the topic, check out Sacha Greif’s survey State of JavaScript, The survey collected more than 9,000 questionnaires.

Now it’s time to think about what developers will continue to love in 2017. Which ones are going to be new stars? Here are my picks of 10 projects and ideas THAT I enjoyed in 2016 and will continue to grow in 2017:

  • Vue.js: Still in the rapid growth stage
  • Electron
  • Create React App
  • React Native
  • Gatsby (The page you’re viewing is built with it)
  • Yarn: a fast, reliable, and secure dependency management tool that can directly replace NPM. You are advised to read Yarn vs NPM
  • PWA (Progressive Web Applications) Progressive Web Applications
  • Node.js is a one-stop deployment and running solution for microservices such as Now
  • Node.js evolution: Support for ES6 syntax is already very good in the latest version
  • Finally, GraphQL: Many of my friends say this is a big step forward

Thank you for taking the time to read this article. Feel free to share it. If you have any questions, you can Issue it on Github or contact us directly.

One More Thing

For more quality technical articles, subscribe to the Front End weekly, which publishes 1 or 2 articles a week.