14 excellent JS front-end frameworks, libraries, tools, and time to use

14 excellent JS front-end frameworks, libraries, tools, and time to use

This article mainly describes some popular Javascript web Front-end frameworks, libraries, and their application scenarios.

The emergence of new Javascript libraries makes the Web community more active, diverse, and rapidly evolving in many ways. It is almost impossible to describe every mainstream Javascript framework and library in detail. Therefore, this article mainly introduces some front-end frameworks that have the most influence on front-end development. Next, let's study some mainstream front-end frameworks, libraries, and tools and discuss their application scenarios.

At the same time:

• If this article does not contain your favorite Javascript framework, Do not spray

• We recommend that you keep the version updated when using the front-end framework for development. The latest version is generally provided for better cross-browser and cross-platform effects. To check whether the old version of a framework is compatible with various browsers and devices, use a tool similar to this scanner.

Now, let's discuss them one by one.

AngularJS

Angular is a popular enterprise-level framework. Many programmers use it to build and maintain complex web applications. Angular has a huge popularity. Its companies use the same number of Pizza categories as Domino, such as Ryanair, iTunes Connect, PayPal Checkout, and Google. Angular is an open-source framework supported by Google. Angular calls itself an extension of HTML for building complex web applications. If you are familiar with TypeScript, you can see how to write Angular 2.

Angular adopts the MVC Architecture. It provides dual data binding between the Model layer and the View layer. The advantage of this data binding method is that no matter which side of the data changes, the data on both sides will be automatically updated. This helps you build a usable View component. It also provides a service framework with easy interaction between frontend and backend services. Most importantly, it is a simple JavaScript.

When to useAngularJS?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 this year! Almost everyone is talking about ReactJS. Every session I attended last year will have almost two topics discussing React and other libraries in the same system (Flux, Redux ). React is an open-source project developed by Fackbook and other major technology companies. React is called the JavaScript library provided to build user interfaces.

React is basically used as V in MVC. It fully focuses on the V Part of MVC, while ignoring the other part of the architecture in the application. It provides a component layer, which makes it easy to create and combine the UI elements. It abstracts the DOM, optimizes rendering, and allows you to use node. js to render React. In addition, it implements one-way Data Interaction stream, which makes it easier to understand and use than other frameworks.

For multiple projects such as Angular, Ember is bound to use React to become V in MVC.

When to use React? When you want to have a powerful View layer and other parts of the application do not need a complex framework, or when you want a View layer and your Angular, Backbone, or use the Ember application together. When you try to build a homogeneous Web framework.

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

Current version: v0.14.0

URL: Facebook. github. io/react/

Backbone

Backbone is a well-known simplified framework. All content can be stored in a single file. Backbone has been popular for a while, and its author is Jeremy Ashkenas. It was known for its development of CoffeeScript and Underscore. Backbone is especially suitable for teams with few web programs to be developed. They want to use small frameworks instead of large frameworks like Angular or Ember.

Backbone provides a full-featured MVC Framework and routing. Its Model can handle key-value binding and data update events. Model (and Collection) can work with RESTful APIs. View can declare event processing, and Router performs well in URL Processing and status management. All required functions can be used to develop a single page application without the need to introduce unnecessary complexity.

When Will Backbone be used? For small web programs, Backbone is a required framework.

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. The core team has many very intelligent members, including Yehuda Katz, who is a member of the Ruby on Rails and jQuery core teams. Ember positions itself as "a framework for creating shocking web Applications", and it does not waste your time. It is very focused in this regard and provides you with a lot of options.

Ember is also an MVC framework. It contains a template and view engine that can be automatically updated when data is updated. This is similar to Angular, Backbone, and React. It also has a web component concept that allows you to use your own tags to expand HTML (such as Angular ). It also has a routing and model engine that can work well with RESTful APIs.

When to use Ember? This method is applicable to scenarios where you need a framework that can be used immediately. You can choose Ember when you have little flexibility requirements, because you are usually in a tight budget or tight schedule.

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

Current version: 2.1.0

Official Website: emberjs.com

The JQuery library does not need to be described. It independently undertakes the important task of making cross-browser websites a reality. It makes the whole web today. JQuery has contributed to the development of Web standards and the acceptance of standards by browser manufacturers. The goal of the jQuery Foundation is to "enhance the open network through the development and support of open source software and community collaboration, so that everyone can access it"

JQuery is the most widely used JavaScript library in the world. You can leave it unless you are not interested in development efficiency. It makes DOM traversal, event processing, animation, and AJAX so easy to use in all browsers.

When to use jQuery? At any time, unless you plan to use a more lightweight 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 the built-in JavaScript is far from enough to make programmers truly productive. A tool function or a function that can simplify code is always missing. Underscore (and lodash) is such a JavaScript library that provides a complete set of tool functions, without the need for inexperienced programmers to patch the built-in JavaScript objects. Both databases provide over 100 auxiliary functions and other special good features, including map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone and so on.

When should I use Underscore? When you want to have a JavaScript file that immediately increases programmer efficiency.

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

Underscore current version: 1.8.3

Underscore Website: underscorejs.org

When to use lodash? When you want a modular, better-performing version with Underscore for AMD and Community plug-ins.

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

Lodash current version: v3.10.1

Lodash Website: lodash.com

D3.js

Data Visualization and charts are a common requirement for web applications. D3.js is the de facto standard when any data operations and visualization are involved. It is one of the most popular projects on GitHub and is used by hundreds of organizations. A large number of graphics, icons, and visual libraries are built on D3.

D3 allows you to operate data documents from any source, convert the data, and apply it to DOM, SVG, and CSS. D3 focuses on modern web standards and ensures that you are not limited by any proprietary formats such as Flash or Silverlight.

When to use D3.js? When you need any type of visual effects.

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

Current version: 3.5.6

Website: d3js.org

Babylon. js

Do you want to build a video game that fully runs on modern browsers and runs across browsers? Let's take a look at Babylon. js. It is a 3D Game Engine Based on WebGL and JavaScript. You can use its physical, audio, and particle systems to create superior quality games.

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

GitHub: https://github.com/BabylonJS/Babylon.js

Current version: 2.2

Website: babylonjs.com

Three. js

Want to build a 3D visual effect without a fully functional game? Three. js provides a lightweight 3D library that allows you to render 3D effects into an HTML5 canvas, SVG, and WebGL. This is a simple and detailed library. Hundreds of beautiful examples can be seen on the three. js display site.

When to use Three. js? When you need a simple 3D visual effect that can be output as a Canvas.

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

Current version: r73

Website: threejs.org

Mocha and Chai

JavaScript testing has long been quite objectionable. Testing any code is objectionable, but it is what every developer should do. Every developer seems to have always been so disdainful, ignoring the testing work for their code. Now there is a way to cure this dislike, namely Mocha and Chai. Both databases are named after delicious hot drinks, which can help you test the code, but the method is different.

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

Chai is an assertion library for behavior-driven development and test-driven development. It can be compared with Mocha. It is easy to use to describe what you want to test in a readable style.

When Will Mocha and Chai be used? Use them! Test your code to make the world better.

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

Current Mocha version: 2.3.3

Mocha Website: mochajs.org

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

Current Chai version: v3.4.1

Chai Website: chaijs.com

We have included Mocha and Chai in this list. If you do not pull in the testing runners that can run these tests or that may be able to set continuous integration testing, this list will not be complete. Karma is a tool that helps you automatically run your tests in different browsers. It will help you run your Mocha and Chai tests on all browsers today.

Not every browser runs on every platform, but fortunately there are many free tools for you to test other browsers. You can take a look at the browser screenshots. If you are running on OS X and want to test Edge or IE, you can use this tool for free.

When to use Karma? When you want to have a fully functional test suite and make sure that the test works out of date on all browsers.

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

Current version: v0.13

Website: karma-runner.github.io

PhantomJS

Running all the browsers to test your code requires intensive consumption of memory and CPU. PhantomJS allows you to run a pure WebKit-Safari and a rendering engine (Blink now) in Chrome ). It allows you to run tests, screenshots, simulate networks, and automatically browse pages through a JavaScript API.

When to use PhantomJS? When you need more tests, webpage operations, and simulated network requests.

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

Current version: v2.0

Website: phantomjs.org

Grunt and Gulp

Building a website for the production environment generally involves some tasks to improve the performance, such as minimizing JavaScript and CSS, compiling CoffeeScript/TypeScript, unit testing, and streamlined code. You may already have a tool chain for preparing your website for production. If you do not have a tool chain, you will want to have a job runner like Grunt or Gulp. They all have countless plug-ins, which can be converted to your website for any input into the production environment.

When to use Grunt? When you prefer to write configuration files, but do not care about what intermediate files will be generated by your task runtime.

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

Grunt current version: v0.4.5

Grunt Website: gruntjs.com

When to use Gulp? When you are more willing to write configuration code and want to use the stream processing capability of node. js for faster task execution.

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

Current Gulp version: v3.9.0

Gulp Website: gulpjs.com

Babel

JavaScript has developed rapidly 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 know the compatibility of the browser with ECMAScript 2015, you can refer to the table from @ kangax. You will notice that the latest version of Edge, Firefox and Chrome are almost completely compatible.

We are not living in a perfect world. As developers, we will continue to support older versions of browsers, which do not have the latest and best JavaScript features. We really want to develop our web and upgrade our code library. Babel is a JavaScript compiler that can compile the latest JavaScript standards into JavaScript compatible with ES5 so that you can run them on an older browser like IE9. It has some plug-ins that make it easier to use React for development. The settings use the features of components that are not a standard (such as ES7.

When Will Babel be used? When you want to use new JavaScript language features and support old browsers.

GitHub: https://github.com/babel/babel

Current version: 6.1.2

Website: babeljs. io

More Web development practices

This article is part of the web development series. It is from Microsoft's evangelists and engineers who focus on practical JavaScript learning, open-source projects, and best practices for interoperability, includes the Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test all your browsers and devices, including Microsoft Edge, which serves as the default Windows 10 browser-using free tools on dev.microsoftedge.com:

• Scan outdated libraries on your site, layout problems, and accessibility

• Download Free Mac, Linux, and Windows virtual machines

• Check the Web Platform Status on all browsers, including Microsoft Edge

• Test Microsoft Edge remotely on Your Own Device

Learn more about our engineers and evangelists:

• Coding lab on GitHub: cross-browser testing and best practices

• Microsoft Edge Web conference 2015 (from our engineering team and JS Community)

• Wow, I can test IE and Edge on Mac and Linux! (From Rey Bango)

• No advanced Web JavaScript (from)

• Edge rendering engine that immediately enables the Web to work (from Jacob Rossi)

• Use WebGL to realize the potential of 3D rendering (from David Catuhe)

• Innovations in managed web applications and web platforms (from Kevin Hill and Kiril Seksenov)

Open source projects in our community:

• Vorlon. JS (Remote JavaScript testing on multiple devices)

• ManifoldJS (deploy cross-platform hosting Web applications)

• BabylonJS (making 3D graphics more approachable)

More free tools and backend web development:

• Visual Studio Code used on Linux, MacOS, and Window s

• Try to write code using node. JS on Azure Cloud

License

This article, along with any source code and files related to it, is protected by the Code project open license (CPOL.