Foreword
Front-end engineer is actually a very complex job positions, in addition to cutting responsible for drawing and writing html / css / js, but also to solve a series of browser compatibility, web performance optimization problems, so improve the development efficiency front-end engineers are imperative, but also reflect engineered front end.
For the development efficiency, I understand that
Development efficiency = efficiency + add code to modify the code efficiency of maintenance efficiency code +
So how to improve the efficiency of front-end development can be divided according to the concept of engineered front end. Here I will introduce seven ways to improve the efficiency of front-end development.
Front-end engineering
method
1. FIG Cut
Cut a front-end figure is the most basic skills, we generally use Photoshop or FireWorks basic can get designers to deliver to our design, but to improve the efficiency of cutting plans, then we have to use some of the tricks, such as the use of PS in action to to achieve "a key cut" feature, concrete can see my article: www.cnblogs.com/luozhihao/p..., where in addition to the cut plan also describes other practical methods and tools.
2. coding
For coding part we must first find a suitable own IDE tools, it is recommended not to use Notepad ++ or Dreamweaver, these tools are not in line with the front end of a trend, could not bring himself to knock elegant code. Here I mainly recommend Sublime Text, Atom or Webstrom, because in addition to their user-friendly interface and supports syntax highlighting most, you can also install various plug-ins to expand your IDE tools, here I mainly introduce several Sublime Text improving development efficiency of plug-ins:
Emmet which is used to quickly write html / CSS, such as input ul> li after pressing the tab key will be able to generate a ul li tag which contains a label, the official document: docs.emmet.io/cheat-sheet...
JSFormat for formatting JS; CSScomb style attributes for one-click ordering; HTML-CSS-JS Prettify can be a key specifications of our HTML / CSS / JS, and even JSON format; SublimeTmpl can quickly create a new HTML / CSS / JS files ; ColorPicker color palette used to call local functions. These tools are very useful, we can improve the coding efficiency to some extent.
3. Automation
When it comes to improving the efficiency of development, here we must mention some of the front-end automation tools, after all front-end automation is the current and future trends, can largely reduce unnecessary workload front end, so that we can focus on the front end in itself.
Front-end automation
Here we can use NPM to manage our project package file; webpack use to package our code compression; use Node.js to achieve build the local server; the use of Karma, Jasmine to test our front-end code.
With a good front-end automation tool that can help us deal with a lot of little things, such as a key compression codes, pictures, a key merger JS, detect file updates.
4. Modular
With the advent of web2.0 era, Ajax technology is widely used, the expanding front-end code, and modular front-end can help us maintain the project code-demand loads, in the long run for us to improve the efficiency of development projects Also a great benefit.
Before ES6 it should be said that front-end code itself does not have to achieve functional modules, we have to use some modular loader to achieve, such RequireJS, SeaJs and so on. With the popularity of ES6, now like RequireJS, such tools SeaJs has no need to exist up. So in a development environment based ES6 ES6 I recommend using modular capabilities to achieve our front-end modular.
The modular front end
5. Components of
The concept of component-based front-end is a long time, we can achieve through our public function code is divided into different components, one and the same features we may not have to write the same code again, but also can improve the maintainability and front-end code clarity. The following is a conceptual diagram popular front-end framework for Vue single-file components:
Front-end components of
We can be detached common components, a large split assembly member in the form of realization group may exist between the front end assembly of the parent-child relationship, component and component, may also be present brothers. Vue single document component, one component of which comprises HTML, CSS, JS snippet.
6. The front end of the separation
I once wrote an article about the separation of the front and rear ends, "Why should we try to end before and after separation", the address is: www.cnblogs.com/luozhihao/p....
Before and after the end of the separation of front-end development projects to enhance the efficiency is very helpful, because the front is no longer necessary to configure the background route, set up the server environment, such as writing templates, so that front-end productivity will get a large degree of liberation, but the separation of the front and rear end It projects advantages and disadvantages, as shown below:
Separate front and rear ends
Ultimately, we need to weigh the pros and cons based on project needs to decide whether to use before and after the end of the separation model.
7. specification and Mode
Teamwork can not do without the help of coding standards and development models. Follow coding standards documents can help us improve the efficiency of cooperation in the development of team development. A team follows a set of coding standards so that everyone can write code that a person's style, between this team to review each test, when fully functional will be very efficient. Below are some of the open source front-end coding specification documents:
codeguide.bootcss.com/
tguide.qq.com/main/index.…
cssguidelin.es/
github.com/adamlu/java…
In addition to coding standards we often followed in the development of some existing models to solve the problem, such as when writing with a bomb box JS we tend to use the singleton pattern directly apply common attributes animation preparing animation with CSS, etc., we no longer need to start thinking to achieve a particular function, this is the meaning mode brings.
Epilogue
Of course, in addition to more than 7 points for the front-end for the need to improve the efficiency of development where there are many, can be described as a long way. Only the front disorder, complicated operations organize themselves with tools to simplify and standardize the front end of the process, in order to achieve the project build, develop and maintain integration. I hope this can give students first met inspire the front and put into practice.