5 Best development tools necessary for front-end engineers

The original author, Arnaud Breton, is a front-end engineer with special focus on front-end and user experience, this article is from mention blog. The following content is written by the author in the first person.

The past few years have been a constant reference to the growth of new generations of Web apps, which have become richer and more complex, leading to a dramatic increase in the complexity of the front-end overall.

Like backbone (by providing models), ANGULARJS, and emberjs frameworks are a great framework for creating new apps, enhancing all Web functionality, and Web programming language Javascript has progressed much more in popularity and maturity, and can Dejs work together on the back end.

But in order to continue to face the new challenges of complexity, developers have created more tools to streamline the overall development process, from the test framework to the analysis tools, these mature and useful tools to bring the best experience to our users.

As we've just mentioned, we like the software that helps us provide the best quality, and it makes life easier and easier, and this article is to share 5 of the best tools and frameworks we can use to face challenges every day:

Chrome Dev Tools

This is the best front-end development tool at the moment!

Chrome has invested heavily in developer tool Software since it was born, and is constantly improving it, with every launch (once every six weeks) accompanied by its own new development capabilities.

This development tool is a complete multi-software suite that allows you to edit the DOM/css in real time, and when you perform an in-depth performance analysis, you can find Javascript errors step by step and even add terminal instructions. Thanks for having it, recently solved the problem of return effectiveness.

The DOM/CSS Editor is a powerful tool for instantly giving back to your team and being able to perform loops quickly on new features of Ui/ux.

The official website and the Google developers YouTube pipeline are all gold mines of information, for example, the command-column API (Application interface, application programming Interface) contains a lot of useful instructions, For example, copy instructions from the console feature and copy them to the Clipboard.

Many of the detailed manuals are also available for reference in HTML5 Rocks. If your curiosity is strong and you want to know how the browser works, you'll learn a lot in these lessons to help you take full control of the development cycle.

In addition to the above, the most important thing is that through the network tool you can know what is happening under the interface now, and optimize your download speed, the timeline will be more in-depth to tell you what the browser did.

If you are as curious as we are, you can learn more about how browsers and the Web work, so that you can, in turn, manipulate the lifecycle of the application in its entirety.

In my own opinion, if they continue to evolve according to the current route, it will certainly become the ultimate IDE (integrated Developer Environment) of the WEB supply developers, the most powerful in the integration of development space.

Grunt

When it comes to work automation, Grunt is our first choice.

It is a Javascript run task experts, for the general task of providing a large number of integrated plug-in, the scale is still high, providing many options so that you can freely write any work content that meets the requirements. Best of all, you can combine these tasks to create more powerful and complex jobs. The grunt category goes beyond just automating the front-end-related work, for example, when we are developing, we use it to test PHP:

We have also used it to temporarily solve some of the performance problems of Rsync (an application software under Unix) that is automatically monitored and protected in vagrant, a method that has recently been introduced. Grunt offers a wide range of plug-ins, from browsing folders, diagnosing messages, compiling programs to simplifying your code. Its syntax is consistent and easy to learn, and makes trivial work easier.

Livereload

Have you ever calculated how many times per day you will press the reset button on your keyboard? That's a lot, right?

Livereload is a simple WEB protocol that allows customers to handle things on their own, regardless of when the file is modified, and the client and server side are able to enter into various implementation.

When it comes to Chrome's expansion, the Chrome store is a powerful example. Take a look and you'll find a lot of things that make life easier.

Here are a few of our favorites:

1. Whatfont: You can use it to know what the font of the content on any Web site is, and it's a handy gadget when you're looking for the most appropriate text choreography, or when you're tweaking your font style.

2. Page ruler: Another very useful application, mainly because any front-end developers, are absolutely perfect for pixel requirements.

3. Proxy Switchysharp: When it comes to finding the best tools for the wrong information in the ground, what is the information in the Earth? such as telephone numbers, preset currencies, etc.

Want to know more? You can get more information in Chrome apps!

Mocha/chai/sinon

Test the test to see if you want to puke? This is very often, because it takes a lot of boot instructions, and when you don't design a test at the initial stage of development, it's often difficult to get back to work.

Luckily, we now have a great test architecture that is very useful and powerful, just like the other languages you already use. The two main frameworks are Jasmine and Mocha.

In the past I have used two, and finally chose the latter, Mocha. Its main advantage is that when you have to work with asynchronous coding, it is the most commonly used method in the development of Javascript. For example, to give a very simple example, here are two different specs, one written by Jasmine and the other Mocha/chai:

Jasmine's syntactic options are preset and are documented in official documents, and unofficial extensions enhance Jasmine's asynchronous features and provide the same functionality as Mocha. Take some time to understand this paradigm and how well you can observe the syntax of Mocha.

Unlike Jasmine,mocha, which only provides a test architecture for behavior, more about BDD (Behavior-driven development), rather than fake objects (mocks, the main purpose of which is to assist a unit test program to proceed smoothly) or assert ( Assertion, the first-order logic that is placed in a program, if a result is true or false in a logical judgment structure, because it is very good to integrate the dedicated architecture, like Chai and Sinon, there is almost no bad place. Sinon has complete functionality to mock fake objects and stub artifacts (use and mocks are close).

For example, how can you evaluate the method that has been used by the Sinon spy type (fetch from a very distinguished document):

The function of Chai is to assert that it is very distinguished from the syntax that is very similar to the usual language, for example, you can see the following code, you know it is clear and simple:

Karma

The last one is Karma,karma, a test tool that meets the requirements of a test program, is a Javascript programming tool that is written by Angularjs's team, and now you can wander through Mocha, Chai, and Sinon to write a test program, Why not use them to continually test and run programs to give you real-time feedback?

Karma allows you to perform your tests from your workstation to continuous integration manufacturing (ci,continuous integration), which can be distributed to multiple browsers (Chrome, Firefox, IE, PHANTOMJS, and so on), plus You can also run your tests to challenge them and give you the greatest confidence in your code.

Of course, we haven't even mentioned any text editors, Sublimetext and Vim are all useful to us, and they are the most important foundation for our productivity.

However, in the process of development, the most authentic happiness is the first time you write the program to monitor and then get results, this is a real-time sense of achievement, and then you can publish them to the browser.

Now that you are very capable of being the ninja at the front, you are ready to meet each challenge in your development journey. But if you happen to be a front-end engineer, you are welcome to share your favorite tools below.