2016 front end development learning plan


In 2015, many changes have taken place in the software development community. Many popular new languages have been released, and many important frameworks and tools have been released. Here’s a short list of what we think are the most important, as well as some suggestions for new things that we think are worth your time and effort to learn in 2016.
2016 front end development learning plan

1、 Development tools

1. atom

Atom code editor supports windows, MAC and Linux desktop platforms, which is free of charge, and has opened all the source code on GitHub. After a long period of iterative development and continuous improvement, atom has finally reached the official version 1.0 from the early beta version! Compared with the previous version, it has a significant improvement in performance and stability.

2. idea

The full name of idea is IntelliJ idea, which is an integrated environment for Java language development. IntelliJ is recognized as one of the best java development tools in the industry, especially in intelligent code assistant, code automatic prompt, refactoring, J2EE support, ant, JUnit, CVS integration, code review, innovative GUI design and other functions. Idea is a product of JetBrains, a company headquartered in Prague, the capital of the Czech Republic, whose developers are mainly Eastern European programmers known for their rigor.

3. webpack

Webpack is the most popular module loader and packaging tool recently. It can use and process various resources, such as JS (including JSX), coffee, style (including less / SASS), pictures, etc. as modules.

4. gulp

Gulp.js Is an automated build tool that developers can use to automate common tasks during project development. Gulp.js It’s based on Node.js Build, utilize Node.js The power of flow, you can quickly build projects

5. lodash

Lodash started with Underscore.js A fork of the library, because and other( Underscore.js The contributors are divided. John David Dalton’s original goal was to provide more “consistent cross browser behavior And improve performance. After that, the project has achieved greater results on the basis of existing success. Recently, lodash also released version 3.5, becoming the most dependent Library in NPM package repository. It’s moving away from being a loser and becoming a regular choice for developers.

6. fetch

AJAX is generally implemented by various frameworks, and its essence is XMLHttpRequest. Anyone who has used native XMLHttpRequest knows that this method is not convenient to implement. Now we have a new choice: the fetch API.

7. Electron

The electron framework, formerly known as atom shell, allows you to write cross platform desktop applications using JavaScript, HTML and CSS. It is based on io.js And chromium open source project, and used in the atom editor. Electron is open source, maintained by GitHub, and has an active community. Most importantly, electron applications are built and run on MAC, windows and Linux.

2、 JavaScript framework

1. angular2

Cross platform development

Learn how to build applications based on angular and reuse code and skills to build applications for all platforms. For example: Web applications, mobile web applications, native mobile applications and native desktop applications.

Speed and performance

Through web worker and server-side rendering, we can achieve the highest speed that can be achieved on today’s (and future) web platform.
Angular gives you control over scalability. Based on rxjs Immutable.js And other push models, can adapt to the needs of massive data.

Wonderful tools

Use a simple declarative template to quickly implement various features. Use custom components and a large number of existing components to extend the template language. Get instant help and feedback for angular in almost all ides. All this is to help you write beautiful applications, rather than racking your brains to make the code “work”.

2. react+redux

React + Redux is very refined, good use will play a very strong productivity. But the biggest challenge comes from the functional programming (FP) paradigm. In the process of engineering, architecture (top-level) design will be a huge challenge. Otherwise, it might be a mess. In the final analysis, the traditional framework and react + Redux is the confrontation between OO and FP programming paradigm.

3. jquery

JQuery is another excellent JavaScript library after prototype. It is a lightweight JS library. It is compatible with CSS3 and various browsers (IE 6.0 +, FF 1.5 +, Safari 2.0 +, opera 9.0 +). JQuery 2.0 and subsequent versions will no longer support IE6 / 7 / 8 browsers.

4. antd

Ant design is a set of enterprise level front-end design language and front-end framework implementation based on react developed and being used by ant financial services. Interactive language and visual system of enterprise financial products. Rich and practical react UI components. Component development mode based on react. Backed by the NPM ecosystem. The debug build scheme based on webpack supports ES6.

3、 Node related technology

1. npm

NPM (node package manager) is usually called node package manager. As the name suggests, its main function is to manage the node package, including: install, uninstall, update, view, search, publish, etc.

2. express

Express is a platform based on Node.js It provides a series of powerful features to help you create a variety of web and mobile device applications.

3. koa2

Koa is built by the original express team, aiming to become a smaller, more expressive and more robust web framework. By using koa to write web applications and combining different generators, we can avoid the tedious nesting of callback functions and greatly improve the efficiency of error handling. Koa does not bind any Middleware in kernel methods, it only provides a lightweight and elegant function library, which makes it easy to write web applications.

4. rxjs

Is a set of libraries that use observable sets and arrays, actor styles, to form asynchronous and event based programs.

5. zonejs

During the development of NG2, the angular team has brought us a new library zone.js . zone.js It describes the context of JavaScript execution process, and can be passed persistently between asynchronous tasks. It is similar to TLS (thread local storage) technology in Java, zone.js TLS is the implementation framework of introducing TLS into JavaScript language.

4、 Design pattern

1. JavaScript Design Pattern

5、 Programming language

1. javascript

JavaScript, a literal script language, is a dynamic type, weak type, prototype based language with built-in support types. Its interpreter is called JavaScript engine, which is a part of browser. It is widely used in client script language. It was first used in HTML (an application under standard General Markup Language) web page to add dynamic function to HTML web page.

2. ecmscript6

ES6 is a major improvement after Es5. The language specification is expanded from 245 pages in es5.1 era to 600 pages. ES6 adds many necessary features, such as modules and classes, as well as some practical features, such as maps, sets, promises, generators, etc. Although ES6 has made a lot of updates, it is still fully backward compatible with previous versions. The standardization committee decided to avoid “web experience fragmentation” caused by incompatible version languages. As a result, all the old code can run normally, and the whole transition seems smoother, but the problem is that the old problems that developers have complained about for many years still exist.

3. typesript

Typescript is a superset of JavaScript. Typescript is a superset of JavaScript types, which can be compiled into pure JavaScript. Typescript can run on any browser, any computer and any operating system, and it is open source.

6、 Data storage

1. mysql

MySQL is a relational database management system, which is developed by MySQL AB company of Sweden. At present, it belongs to Oracle company. MySQL is the most popular relational database management system. In terms of web application, MySQL is one of the best RDBMS (relational database management system) application software.

2. mongodb

Mongodb is a database based on distributed file storage. Written by C + +. It aims to provide scalable high-performance data storage solutions for web applications. Mongodb is a product between relational database and non relational database, which has the most abundant functions and is most like relational database.

3. redis

Redis is an open source log and key value database, which is written in ANSI C language, supports network, can be memory based or persistent, and provides multiple language API.

4. cookie

Cookie, sometimes in its plural form, refers to the data (usually encrypted) stored on the user’s local terminal by some websites in order to identify the user and track the session

5. access token

Windows operating system security is a concept. An access token contains security information for this login session. When a user logs in, the system creates an access token, and then all processes running as the user have a copy of the token. The token uniquely represents the user, the user’s group, and the user’s privileges. The system uses token to control which security objects the user can access and the ability of the user to perform related system operations. There are two types of Tokens: primary and impersonated. The primary token is process related; the impersonated token is thread related.

7、 HTML5 + CSS3

1. html5

HTML5 is the latest revised version of HTML, which was completed by the World Wide Web Consortium (W3C) in October 2014.
HTML5 is designed to support multimedia on mobile devices.
HTML5 is easy to learn.

2. ejs

EJS is a JavaScript template library used to generate HTML strings from JSON data. Introduce EJS to create a template, and use the view tool component. Compared with the original JavaScript, some people who don’t know your code very well can understand your code more easily through EJS template code. Let’s relax and enjoy the exciting clean and simple feeling together.

3. canvas

The tml5 < canvas > tag is used to draw images (through scripts, usually JavaScript). However, the < canvas > element itself has no drawing ability (it’s just a container for graphics) – you have to use scripts to do the actual drawing task. The getcontext () method returns an object that provides methods and properties for drawing on the canvas.

4. css3

CSS3 is an upgraded version of CSS technology. It is jointly organized by Adobe, systems, apple, Google, HP, IBM, Microsoft, Mozilla, opera, Sun Microsystems and many other web giants. It is an organization called “CSS working group”. Although many details are still under discussion, it is still moving forward. In 2010, when HTML5 became the focus of IT industry, it began to be popularized.

5. sass

Sass is a CSS development tool, which provides many convenient writing methods, greatly saves the designer’s time, and makes the development of CSS simple and maintainable.

6. postcss

Postcss is a tool that uses JS plug-ins to transform CSS. It supports variables, blending, future CSS syntax, inline images, etc.
Postcss has been used by many big companies: Google, twitter, Alibaba and Shopify. The autoprefixer postcss plug-in is one of the most popular CSS processor plug-ins.

7. Egret engine

Egret engine is an open source, cross platform mobile game development engine. You can quickly create HTML5 type mobile games, and also compile and output game projects into native game applications of the target mobile platform.

8、 Algorithm and data structure

1. Linetype search

The process of searching through a given list of values, starting at one end and checking each element one by one until the desired element is found. Linear lookup is also called sequential lookup. If the lookup pool is a certain type of table, such as an array, the simple lookup method is to start from the header, compare each value with the target element at a time, and finally, either find the target or reach the end of the table, but the target does not exist in the group, this method is called linear lookup.

2. Binary search

Binary search, also known as half search, has the advantages of less comparison times, fast search speed and good average performance; its disadvantage is that it requires the table to be looked up to be an ordered table, and it is difficult to insert and delete. Therefore, the half search method is suitable for finding frequent ordered lists which do not change frequently. First of all, assume that the elements in the table are arranged in ascending order, and compare the keywords in the middle of the table with the search keywords. If they are equal, the search is successful; otherwise, the table is divided into two sub tables by using the middle of the table. If the keywords in the middle of the table are larger than the search keywords, the former sub table is further searched, otherwise, the latter sub table is further searched. Repeat the above process until you find the records that meet the conditions, so that the search is successful, or until the sub table does not exist, then the search is unsuccessful.

3. Bubble sort

Bubble sort is a simple sort algorithm in the field of computer science. It repeatedly visits the sequence to be sorted, compares two elements at a time, and exchanges them if they are in the wrong order. The work of visiting the sequence is repeated until there is no need to exchange, that is to say, the sequence has been sorted.

4. Select sort

Selection sort is a simple and intuitive sorting algorithm. Its working principle is to select the smallest (or largest) element from the data elements to be sorted each time and store it at the beginning of the sequence until all the data elements to be sorted are finished. Selective sorting is an unstable sorting method (for example, the sequence [5,5,3] exchanges the first [5] with [3] for the first time, causing the first 5 to move to the second 5).

5. Insert sort

The basic idea of insert sort is: each step inserts a record to be sorted into an appropriate position in the previous sorted file according to its key value until all the records are inserted.

6. String inversion

var str = '123';
var newStr = str.split("").reverse().join("");

7. Search algorithm

Search algorithm is a method that uses the high performance of computer to exhaust some or all possible situations of a problem’s solution space purposefully, so as to find the solution of the problem. In fact, the search algorithm is a process of constructing a “solution tree” according to the initial conditions and extension rules and finding the nodes in line with the target state.

8. Greedy algorithm

Greedy algorithm (also known as greedy algorithm) means that when solving problems, always make the best choice in the current view. That is to say, without considering the global optimization, what he makes is the local optimal solution in a sense. Greedy algorithm is not able to get the overall optimal solution for all problems, the key is the choice of greedy strategy, the choice of greedy strategy must have no aftereffect, that is, the previous process of a state will not affect the future state, only related to the current state.

9. Tween algorithm

Flash animation will use tween class, it can do a lot of animation effects, such as slow, spring and so on.

10. JavaScript algorithm library

9、 Test framework

1. mocha

Mocha is a simple, flexible and interesting JavaScript testing framework for Node.js And JavaScript application test on browser. Mocha is a JavaScript testing framework with rich features, which can run in Node.js And browser, making asynchronous testing easier and more interesting. Mocha can continuously run tests, support flexible and accurate reports, and go to the correct test examples when mapping to uncapped exceptions.

2. karma

Karma is the new name of testacular. In 2012, Google opened up testacular, and in 2013, testacular was renamed as karma. Karma is a very mysterious name, which means fate and karma in Buddhism. It’s more puzzling than Cassandra! Kara is a company based on Node.js JavaScript test runner based on. The tool can be used to test all mainstream web browsers, integrate into CI (continuous integration) tool, and also be used with other code editors. One of the powerful features of this test tool is that it can monitor the changes of (watch) files, and then execute them by itself console.log Display the test results.

3. jasmine

Jasmine is a JavaScript BDD (behavior driven development) testing framework, which does not rely on any other JavaScript components. It has clean and clear syntax, so you can easily write test code. For javascript based development, it is a good test framework choice.

4. chai

Chai is a company for Node.js And browser’s behavior driven test and test driven test diagnostic library, which can be integrated with any JavaScript test framework.


At the beginning of its birth, the framework was for unit testing of jQuery. Later, it was independent and no longer depends on jQuery itself, but it still cannot be separated from the shadow of jQuery

6. should.js:

Another open source contribution of TJ

7. expect.js

Another assertion Library in BDD style, based on should.js , is the mini version of BDD library

8. assert

The core module of node: the assertion module that can be used in node


1. Naming

Module partition and namespace

2. Loading

Dynamic loading of JS

3. Testing

JavaScript testing

4. Coding

JavaScript encoding rules

5. Closure

Developing components with prototypes / closures

6. Succession

Using inheritance to do things

7. Reuse

Reuse old code

8. Testing

JSDoc and jslint

9. Framework

Customize JavaScript product framework

10. Strengthening

Strengthen object encapsulation and module encapsulation

Recommended Today

JavaScript process control

(1) Branches If with else if, else Switch with case and default[difference] ① the comparison range of the former is written according to ‘bubble sort’, with more branches; ② The latter satisfies a specific value, has fewer branches and can be interrupted, and has higher execution efficiency. The value of ‘case’ is congruent (2) Cycle […]