JS Framework and UI Framework

Reprinted from: http://www.techweb.com.cn/network/system/2015-12-23/2245809.shtml

This article describes some of the most popular Javascript web front-end frameworks, libraries, and their application scenarios today.

New Javascript libraries are emerging, and the web community is becoming more active, diverse, and fast-growing in many ways. To describe each of the mainstream Javascript frameworks and libraries in detail is nearly impossible, so in this article we will focus on some of the most influential front-end frameworks for front-end development. Next, let's explore some of the mainstream front-end frameworks, libraries, and tools, and discuss their scenarios.

While

If the article does not contain your favorite Javascript frame, do not spray

When developing with the front-end framework, it is recommended that you keep the version updated. The latest version will generally provide better cross-browser, cross-platform effects. To detect if an older version of a frame is compatible with a variety of browsers and devices, use a tool similar to this scanner

Get ready, then discuss them one by one.

AngularJS

Angular is a popular enterprise-class framework that many programmers use to build and maintain complex web applications. Angular has a huge popularity, using its company as much as Domino's Pizza category, such as Ryanair, ITunes Connect, PayPal Checkout, Google. Angular is an open source framework supported by Google. Angular called itself an extension of HTML for building complex Web applications. If you are also familiar with TypeScript, then you can see how to write Angular 2.

Angular uses an MVC architecture. It provides double data binding between the Model layer and the View layer. The advantage of this data binding approach is that data is automatically updated on both sides, regardless of which data is changed. This helps you build a View component that you can take. It also provides a service framework for a front-end service that is easy to interact with. Most importantly, it is simple JavaScript.

When do I use AngularJS? When you build a complex web front-end application and need a separate module framework to handle everything.

Github:https://github.com/angular/angular.js

Current version:1.4.7/1.2.29

Website:angularjs.org

React is the most popular JavaScript project of the year! Almost everyone is talking about Reactjs. Last year, I attended almost every one of the one or two topics explored React and other libraries under the same system (Flux, Redux). React is an open source project that was developed almost by Fackbook and other major technology companies. React called itself the JavaScript library that was provided to build the user interface.

React is basically used as a V in MVC. It is completely focused on the V part of MVC and ignores the rest of the architecture in the application. It provides a component layer, which makes it easy to make UI elements and group them together. It abstracts out the DOM, so it optimizes rendering and allows you to render React using node. js. In addition, it implements one-way data interaction flow, which makes it easier to understand and use than other frameworks.

Multiple items such as Angular, Ember bindings use React as the V in MVC.

When do I use React? When you want to have a strong view layer, while the rest of the application lacks a complex framework, or when you want a view layer to be used with your Angular, Backbone, or Ember app. When you try to build an isomorphic Web page frame.

Github:https://github.com/facebook/react

Current version: v0.14.0

Website: facebook.github.io/react/

Backbone

Backbone is a well-known streamlined framework where everything can be put into a single file. Backbone has been popular for some time, its author is Jeremy Ashkenas, once because of the development of coffeescript and underscore for everyone to know. Backbone is especially useful for those teams that need to develop a small Web program, and they want to use a compact Framework rather than a large framework like Angular or Ember.

Backbone provides a full-featured MVC framework and routing. Its Model can implement event handling for Key-value bindings and data updates. Model (and Collection) can work with RESTful APIs. View can declare event handling, and Router is doing well in URL handling and state management. For the development of a single-page application, all the required features are supported without the need for additional complexity to be introduced.

When to use Backbone? For small web programs, Backbone is the framework I must choose.

github:https://github.com/jashkenas/backbone/

Current version: 1.2.3

Official website: backbonejs.org

As a Web application framework, Ember is very focused on the efficiency of programmers. Ember is relatively popular, and the core team has a number of very smart members, including Yehuda Katz, who is a member of the core team of Ruby on Rails and JQuery. Ember's position is "a framework for creating a shocking Web application," and it does not waste your time. It's very focused in this area and offers you a lot of options.

Ember is also a framework for MVC. It contains a template and a view engine that can be updated automatically when data is updated, similar to angular, Backbone, and React. It also has the concept of a Web component that allows you to extend HTML with your own tags (such as angular). It also has a routing and model engine that can work well with RESTful APIs.

When to use Ember? Apply to you need a framework that can be used immediately. You can choose Ember when the flexibility is not high, because you are usually tight budgets or tight deadlines.

Github:https://github.com/emberjs/ember.js

Current version: 2.1.0

Official website: emberjs.com

The JQuery library doesn't have to be introduced more. It is independently responsible for making cross-browser sites a reality, and it makes the entire web the way it is today. The development of WEB standards and the acceptance of standards by browser manufacturers are essential to jQuery. The goal of the JQuery Foundation is to "develop and support open source software, as well as community collaboration, to increase the openness of the network so that everyone can access"

JQuery is the most widely used JavaScript library in the world, and no application can leave it unless you are not interested in development efficiency. It makes DOM traversal, event handling, animation, and AJAX all the easier to use on all browsers.

When to use JQuery? Any time, unless you plan to use a lighter version, such as Zepto.

Github:https://github.com/jquery/jquery

Current version: v1.11.3 or v2.1.4

Official website: jquery.com

Underscore and Lodash

Sometimes built-in JavaScript is not enough to make programmers really productive. There is always a lack of a tool function, or a function that simplifies the code. Underscore (and Lodash) is a JavaScript library that provides a complete set of tool functions that require less experienced programmers to patch the built-in JavaScript objects. The two libraries provide more than 100 helper functions, as well as other special good things, including such functions as map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone, etc.

When do I use underscore? When you want to have a JavaScript file that instantly enhances programmer productivity.

Underscore Github:https://github.com/jashkenas/underscore

Underscore current version: 1.8.3

Underscore website: underscorejs.org

When do I use Lodash? When you want a modular, performance better, and with the underscore version supported for AMD and community plugins.

Lodash Github:https://github.com/lodash/lodash

Current version of Lodash: v3.10.1

Lodash Website: lodash.com

D3.js

Data visualization and charting are a common requirement for Web applications. When it comes to any data manipulation and visualization, D3.js is the de facto standard. It is one of the most popular projects on GitHub and is used by hundreds of organizations. A large number of graphs, icons, and visual libraries are built on D3.

D3 allows you to manipulate data documents from any source and convert the data to DOM, SVG, and CSS. D3 focuses on modern web standards and ensures that you can be protected from any proprietary format such as Flash or Silverlight.

When do I use d3.js? When you need any kind of visual effect.

Github:https://github.com/mbostock/d3

Current version: 3.5.6

Website: d3js.org

Babylon.js

Want to build a video game that runs entirely on a modern browser and runs across browsers? Look at Babylon.js, it's a 3D game engine, based on WebGL and JavaScript. You can use its physical, audio and particle systems to create high-quality games that exceed expectations.

When to use Babylon.js? When you are building a video game or a certain type of 3D scene.

Github:https://github.com/babylonjs/babylon.js

Current Version: 2.2

Website: babylonjs.com

Three.js

Want to build a 3D visual effect, but don't need a full-featured game? Three.js provides a lightweight 3D library that allows you to render a HTML5 canvas, SVG, and WebGL. This is a simple library, and you can see hundreds of beautiful examples on the three.js display site.

When do I use three.js? When you need a simple 3D visual that can be output as a Canvas.

github:https://github.com/mrdoob/three.js/

Current version: R73

Website: threejs.org

Mocha and Chai

Testing JavaScript has long been a very offensive test. To say, testing any code is offensive, but it is something that every developer should do. Each developer seems to be always dismissive of this, ignoring the testing of their code. Now there is a cure for this aversion, that is Mocha and Chai. and two libraries are named after delicious hot drinks, all of which can help you test your code, but in a different way.

Mocha is a JavaScript test framework that makes it easy to test asynchronous code in your node module or browser application. Mocha tests can be run in tandem, and the quality of exception tracking for appropriate test cases is good.

Chai is an assertion library for behavioral-driven development and test-driven development that can be compared to Mocha. It is simple to describe what you want to test in a good-readable style.

When do you use Mocha and Chai? Please test your code to make the world a better one.

Mocha Github:https://github.com/mochajs/mocha

Mocha Current Version: 2.3.3

Mocha Website: mochajs.org

Chai Github:https://github.com/chaijs/chai

Chai Current Version: v3.4.1

Chai Website: chaijs.com

We've included Mocha and Chai in this list, and if you don't pull in a test runner that can run these tests or maybe set up a continuous integration test, the list won't be complete. Karma is a tool to help you run your tests automatically in different browsers. It will help you to run your Mocha and Chai tests on all of the current browsers.

Not every browser will run on every platform, but fortunately there are a lot of free tools you can use to test other browsers and take a look at the browser screenshot. If you're running on OS X and you're testing the Edge or IE, you can use the tool for free.

When do I use Karma? When you want to have a full-featured test suite, and like making sure that the tests are available on all browsers.

Github:https://github.com/karma-runner/karma

Current version: v0.13

Website: Karma-runner.github.io

Phantomjs

Run all browsers to test your code to consume memory and CPU intensively. PHANTOMJS allows you to run a purely Webkit--safari and previous version of Chrome in the rendering engine (now Blink). It allows you to run tests, screenshots, simulated networks, and automatic browsing pages through a JavaScript API.

When do I use PHANTOMJS? When you need to do more testing, manipulate web pages, and simulate the operation of network requests.

Github:https://github.com/ariya/phantomjs

Current Version: v2.0

Website: phantomjs.org

Grunt and Gulp

Building a site for production environments typically involves some of the tasks of improving performance, such as minimizing JavaScript and CSS, coffeescript/typescript compiling, unit testing, and code streamlining. Maybe you already have a toolchain to prepare your website for your production version, and if you don't, you'll want to have a task runner like Grunt or Gulp. They are countless plugins that can make any conversion to your site so that it can be put into production environments.

When do I use Grunt? When you prefer to write a configuration file and do not care about what intermediate files your task runner generates.

Grunt Github:https://github.com/gruntjs/grunt

Grunt Current Version: v0.4.5

Grunt Website: gruntjs.com

When to use Gulp? When you prefer to write configuration code and want to take advantage of node. JS's streaming capabilities for faster task execution.

Gulp Github:https://github.com/gulpjs/gulp

Gulp Current Version: v3.9.0

GULP Website: gulpjs.com

Babel

JavaScript develops very fast as a language. ECMAScript 2015 was released last summer, and many of its new features are being implemented in many of the latest browsers. If you want to learn about browser-to-ECMAScript 2015 compatibility information, you can look at this form from @kangax. You'll notice that the latest versions of Edge,firefox and Chrome are almost completely compatible.

We are not living in a perfect world. As a developer, we will need to continue to support older browsers, which do not have the latest and greatest JavaScript features. And we really want to develop our web and upgrade our code base. Babel is a JavaScript compiler that compiles the latest JavaScript standards into ES5-compatible JavaScript, allowing you to run them on IE9 's older browsers. It has some plugins that make it easier to use React development, and the settings use features that are not part of the specification (such as ES7).

When do I use Babel? When you want to use the new JavaScript language feature and also support the old browser.

Github:https://github.com/babel/babel

Current version: 6.1.2

Website: Babeljs.io

Encouragement ~ ~ ~

JS Framework and UI Framework