Five front-end development tools worth trying

In the past few years, many brand-new Web applications have emerged. However, as the functions of applications become increasingly rich, the complexity of front-end development has also increased significantly.

There are also many front-end development tools, such as the backbone and emberjs frameworks, which can provide stable app development solutions. At the same time, JavaScript is widely used, and it can work with node. js in the backend to quickly build scalable network applications. In fact, to cope with the challenges posed by the complexity of front-end development, developers have created many tools to simplify the development process. From the testing framework to the analysis tools, front-end development tools are very mature. It is thanks to these useful tools that allow users to experience the best internet services.

Developers all like to use high-quality software development tools. This article recommends five excellent front-end development tools and frameworks for reference by developers.

Chrome Dev Tool

This is currently the best front-end development tool. Since its birth, Chrome has invested a lot of energy in its developer tools, and until now, Google is constantly optimizing these tools. In general, Google will release Optimizations to chrome Developer Tools every six weeks, and launch some new features.

Chrome development tools are a suite of various tools. developers can edit dom (HTML)/CSS in real time, debug JavaScript gradually, and help developers perform more in-depth performance analysis. The chrome development tool can even add terminal (devtool terminal is an extension of the chrome development tool, which can help developers access terminals in browsers. If you often work in the command line, this extension will be very suitable for you) to help developers solve rendering performance problems.

The DOM/CSS editor is a powerful tool that provides real-time feedback to your development team and supports fast iteration when developing new UI/UX features.

On the official website and Google developer's YouTube channel, there is a lot of gold-rich information. The "command line API" section provides a lot of useful commands for developers. For example, you can call a special "copy" function to copy anything (such as an object or function return) from the console to the clipboard. In addition, there are many excellent tutorials on HTML5 rocks. If you are curious and want to know how the browser actually works, you can learn a lot in these tutorials to help you fully control the application development cycle.

If Google constantly optimizes chrome development tools, this tool will eventually become an integrated development environment (IDE) for Web pages, which is directly bundled with browsers to provide developers with more powerful development space.

Grunt

Grunt is useful in task automation. It is a task-based JavaScript command line build tool that supports bundling task plug-ins. In addition, grunt is scalable, developers can write different tasks as needed, and grunt supports integrating multiple tasks to provide more powerful functions.

Today, grunt is no longer limited to simple front-end automated job flow. During php development, grunt can be used for testing, as shown below:

terminal = require(‘color-terminal‘)log = (error, stdout, stderr, cb) ->    if error        terminal.color(‘red‘).write stdout    else        terminal.color(‘green‘).write stdout    cb()module.exports = (grunt) ->    grunt.loadNpmTasks ‘grunt-contrib-watch‘    grunt.loadNpmTasks ‘grunt-shell‘    grunt.initConfig        testFilepath: null        watch:            php:                options:                    event: ‘changed‘                    spawn: false                files: [                    ‘foo/bar/**/*.php‘                    ‘foo/bar/**/*Test.php‘                ]                tasks: ‘shell:phpunit‘        shell:            phpunit:                options:                    callback: log                command: ‘echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>‘    grunt.event.on ‘watch‘, (action, filepath, ext) ->        regex = new RegExp("foo/bar/([a-z0-9]+)/([a-z0-9/]+)", "i")        if filepath.match regex            if filepath.indexOf(‘Test‘) is -1                testFilepath = filepath.replace regex, "foo/bar/$1/Tests/$2Test"            else                testFilepath = filepath            grunt.config ‘testFilepath‘, testFilepath

Grunt can also be used to create a workspace. In addition, developers often need to do some tedious and repetitive work when creating a new project, while grunt provides many plug-ins, it makes these trivial tasks easy.

Livereload

How many times do you click "refresh" on the keyboard every day? Many times. Livereload is a simple web page protocol that can trigger events to the client. The client can promptly refresh and process events no matter when files are changed.

Generally, livereload can be bundled with grunt to build a local front-end development environment. On the client, livereload provides a simple chrome extension. Speaking of chrome extensions, chrome store is definitely a good place. You can visit it and you will find a lot of good things in it. Here are some suggestions:

1. whatfont is a bookmarkdonefile that uses the mouse floating function. After clicking it, you can tell the user the font attributes, font name, size, and color on the website, very convenient. In addition, it can help developers debug the font style.

2. Page ruler, which helps developers measure the size, width, and height of any element on the website.

3. Proxy swithcysharp, which can be used to help developers debug localization information, including default currency and phone number.

4. Of course, the most popular is Chrome app.

Mocha/Chai/sinon

Does repeated tests make you feel spof? Generally, if a test is not designed in the initial stage of front-end development, the subsequent work will become very difficult. Fortunately, we have many excellent test frameworks that are as powerful as the development languages we used before. Currently, the two mainstream testing frameworks are jasmine and mocha.

Based on my previous experience, I prefer to recommend mocha. It is a functional JavaScript testing framework that supports asynchronous testing, which is often used in JavaScript. The following are two test cases: the first is written in Jasmine, and the second is written in mocha/Chai, as shown below:

Jasmine

AsyncProcess = require(‘./async-process‘).AsyncProcessdescribe(‘AsyncProcess‘, function() {    var asyncProcess;    beforeEach(function() {        asyncProcess = new AsyncProcess();    });    it(‘should process 42‘, function() {        var done = false;        var processed = null;        deferred = asyncProcess.process();        deferred.then(function(result) {            done = true;            processed = result;        });        waitsFor(function() {            return done;        }, "the async process to complete", 10000);        runs(function() {            expect(processed).toEqual(42);        });    });});

Mocha/Chai

AsyncProcess = require(‘./async-process‘).AsyncProcess;Chai = require(‘chai‘);Chai.should();describe(‘AsyncProcess‘, function() {    var asyncProcess;    beforeEach(function() {        asyncProcess = new AsyncProcess();    });    it(‘should process 42‘, function(done) {        deferred = asyncProcess.process();        deferred.then(function(processed) {            processed.should.be.equal(42);            done();        });    });});

Jasmine selects the default syntax. Only the plug-in can have the same mocha function, while the latter is more concise.

Unlike Jasmine, mocha only provides the behavior test structure, which usually corresponds to the behavior-driven development (BDD. But this does not have a negative impact on mocha. It can be used with auxiliary testing tools such as Chai and sinon.

The following is an example of calling the spy class in the sinon test tool set for testing:

// Function under testfunction once(fn) {    var returnValue, called = false;    return function () {        if (!called) {            called = true;            returnValue = fn.apply(this, arguments);        }        return returnValue;    };}it("calls the original function", function () {    var spy = sinon.spy();    var proxy = once(spy);    proxy();    assert(spy.called);});

Chai features that developers can use declarative syntaxes similar to natural languages. The following example calls the shocould declaration syntax in chai.

foo.should.be.a(‘string‘);foo.should.equal(‘bar‘);foo.should.have.length(3);tea.should.have.property(‘flavors‘).with.length(3);

Very clear, right? Now let's test it on your own code!

Karma

Although I put Karma on the last one, it is still a very important front-end testing tool. Karma's predecessor was testacular, a javascript testing tool. Karma developers and angularjs developers are in the same group. If you use mocha, Chai, and sinon, will the continuous running of these testing frameworks provide real-time feedback?

Karma allows developers to perform tests from workstation (in continuous operation mode) to production call instructions. It also supports multiple browsers, including chrome, Firefox, ie, and phantomjs, so that you are confident in your code.

During development, the first thing we are happy with is to write code on our computer and get feedback in real time. The second thing we are happy with is that our programs can be applied to various browsers, surely the above two points can be resonated by the vast majority of developers. Now, are you ready to turn into a "front-end ninja" to challenge all the difficulties? Of course, some text code editors, such as sublime text and Vim, are not mentioned here, but they are good development tools. In addition, the examples used in this article are from GitHub gist.

If you happen to be a front-end development engineer, do you also have your favorite tools? You are welcome to share with us in the comment column below.

Five front-end development tools worth trying