Improve front-end development efficiency

7 tips to boost your front-end development efficiency preface

Front-end engineer is a very miscellaneous job, in addition to be responsible for transduction, write Html/css/js, but also to solve a series of browser compatibility, Web page performance optimization problems, so improve the front-end engineer's development efficiency is imperative, but also the front-end engineering embodiment.

For development efficiency, I personally understand that

Development efficiency = efficiency of new Code + efficiency of code Modification + maintenance of code efficiency

So how to improve the front-end development efficiency can be based on the concept of front-end engineering to be divided. Below I will introduce the next 7 ways to improve front-end development efficiency.

Front-end Engineering

Method 1. Cut diagram

Transduction is a front-end most basic skills, generally we use Photoshop or fireworks basically can take care of the designers to give us the design drawings, but to improve the efficiency of the graph, you have to use some tricks, such as the use of PS in the action to achieve "one-click graph" function, Specifically, you can read my article: http://www.cnblogs.com/luozhihao/p/5887254.html, there are other practical methods and tools in addition to the cut chart.

2. Encoding

The first thing we need to do to write code is to find an IDE tool that's right for you, and it's not recommended to use notepad++ or Dreamweaver, which doesn't fit the front-end trend and doesn't allow you to knock the code gracefully. Here I mainly recommend sublime Text, Atom or webstrom, because they in addition to the user-friendly interface and support the majority of syntax highlighting, but also can install a variety of plug-ins to expand your IDE tools, below I mainly introduce several sublime Text plugin for improved development efficiency:

Where Emmet is used to quickly write html/css, such as input ul>li after pressing the TAB key can generate a UL tag contains an Li tag, the official document is: http://docs.emmet.io/cheat-sheet/

Jsformat is used for formatting js;csscomb to sort the style attributes, Html-css-js prettify can standardize our html/css/js or even JSON format with one click; Sublimetmpl can quickly create a new html/ CSS/JS file; The colorpicker is used to invoke the local palette feature. These tools are very practical and can improve our coding efficiency to a certain extent.

3. Automation

When it comes to improving the efficiency of development, there are some front-end automation tools, after all, front-end automation is the current and future trend, can greatly reduce the front-end unnecessary workload, so that we can focus on the front-end itself.

Front-End automation

Here we can use NPM to manage our project package files, use Webpack to package and compress our code, use node. js to build a local server, and test our front-end code with Karma and Jasmine.

With good front-end automation tools can help us to deal with a lot of trivial things, such as a key compression code, pictures, a key to merge JS, detect file updates.

4. Modular

With the advent of the web2.0 era, Ajax technology has been widely used, the front-end code is expanding, and the front-end modularity can facilitate our maintenance of project code, loading on demand, in the long run, we improve the development efficiency of the project is also of great benefit.

Before ES6 out, it should be said that the front-end code itself does not have the ability to implement the module, we must use some modular loader to achieve, such as Requirejs, Seajs and so on. With the popularization of ES6, there is no need for such tools as Requirejs and Seajs. So in the ES6-based development environment I recommend using ES6 's modular capabilities to achieve our front-end modularity.

Front-end modularity

5. Modular

The concept of front-end assembly is also a long-standing one, and we can do it by dividing our code into different components, and we may not have to write the same code again, but we can also improve the maintainability and sharpness of the front-end code. The following is a conceptual diagram of the current Popular front-end frame Vue's single-file component:

Front-end Assembly

We can pull out the common components, split the large components into widgets, implement the front-end assembly, there can be a parent-child relationship between components and components, or there can be a sibling relationship. In the Vue single-file component, a component contains its HTML, CSS, JS code Snippets.

6. Front-End separation

I have written an article about the separation of the front and back end, "Why should we try to separate the front and back end", the address is: http://www.cnblogs.com/luozhihao/p/5761515.html.
The front-end separation of the project is very helpful to improve the development efficiency, because the front end no longer need to configure the routing, Server environment, writing templates, etc., so that the front-end productivity will be a great degree of liberation, but the front-end separation of the project has advantages and disadvantages, as shown in:

Front-end separation

Ultimately, we need to measure the pros and cons of the project needs to decide whether to use the back-end separation pattern.

7. Specifications and Patterns

Team collaboration is inseparable from coding specifications and development patterns. Following the coding specification document can help us improve the efficiency of collaborative development in team development. A team follows a set of coding specifications that allows everyone's code to write out a person's style, so that teams can review, Test, and refine their functions very efficiently. Below are some open source front-end Coding specification Documents:

• http://codeguide.bootcss.com/
• Http://tguide.qq.com/main/index.htm
• http://cssguidelin.es/
• Https://github.com/adamlu/javascript-style-guide

In addition to coding specifications we often follow the development of some existing patterns to solve the problem, such as when the use of JS to write a frame when we tend to use the singleton mode, using CSS to write animation directly to the animation of the commonly used properties, we no longer need to start from the beginning to think about a function of the implementation, which is the meaning of the pattern

Conclusion

Of course, in addition to the above 7 points, for the front-end need to improve the development efficiency of the place there are many, can be described as a long way. Only the front-end disorderly, complicated operation organization, the use of tools to simplify and standardize the front-end process, to achieve project construction, development, maintenance integration. I hope this article can bring enlightenment and put into practice to the students in the front of the first knowledge.

Reprinted from the Nuggets account: Laub's blog

Improve front-end development efficiency