Recently I received some questions about how to improve the efficiency of front-end development in the background. Here I will write an article to reply.
The front-end engineer is actually a very complicated job. In addition to being responsible for cutting pictures and writing html / css / js, a series of browser compatibility and web performance optimization issues must be solved. Imperative is also a reflection of front-end engineering.
For development efficiency, I personally understand that
Development efficiency = efficiency of adding new code + efficiency of modifying code + efficiency of maintaining code
So how to improve the efficiency of front-end development can be divided according to the concept of front-end engineering. Below I will introduce 7 ways to improve the efficiency of front-end development.
Cut a picture
Cutting is the most basic skill of the front end. Generally, we can use Photoshop or FireWorks to basically get the design drawings delivered to us by the designer, but to improve the cutting efficiency, you must use some tricks, such as using the actions in PS to Achieve "one-click cut" function. In addition to cutting the picture, other practical methods and tools are introduced here.
For the part of writing code, we must first find a suitable IDE tool. It is recommended not to use Notepad ++ or Dreamweaver. These tools are no longer in line with the front-end trend, and we can not let ourselves type the code gracefully. Here I mainly recommend Sublime Text, Atom or Webstrom, because in addition to the user-friendly interface and support for highlighting most syntaxes, you can also install various plugins to expand your IDE tools. Below I mainly introduce several Sublime Text plugins to improve development efficiency:
Element is used to quickly write html / CSS. For example, type ul> li and press the tab key to generate a ul tag containing a li tag.
JSFormat is used to format JS; CSScomb is used to sort style attributes with one click; HTML-CSS-JS Prettify can standardize our HTML / CSS / JS and even JSON formats; SublimeTmpl can quickly create new HTML / CSS / JS files ; ColorPicker is used to call the local palette function. These tools are very practical and can improve our coding efficiency to some extent.
When it comes to improving development efficiency, we have to mention some front-end automation tools. After all, front-end automation is the current and future trend. It can greatly reduce the unnecessary workload of the front-end and allow us to focus on the front-end itself.
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; use Karma and Jasmine to test our front-end code.
Using the front-end automation tools can help us deal with many trivial things, such as one-click compression code, images, one-click merge JS, detect file updates, and so on.
With the advent of the web2.0 era, Ajax technology has been widely used, and the front-end code has been expanding. The front-end modularization can facilitate the maintenance of our project code and load it on demand. From the long-term perspective, we can improve the efficiency of project development Equally useful.
Before ES6 came out, it should be said that the front-end code itself does not have the function of implementing modules. We must use some modular loaders to implement it, such as RequireJS, SeaJs, etc. With the popularity of ES6, tools such as RequireJS and SeaJs are no longer necessary. So in the ES6-based development environment, I suggest using the modularity of ES6 to achieve our front-end modularity.
The concept of front-end componentization has also been around for a long time. We can achieve common functionality by dividing our code into different components. We may not need to write the same code again for the same function, and it can also improve the maintainability of the front-end code and Clarity. The following is a conceptual diagram of the single file component of the currently popular front-end framework Vue:
We can separate public components and split large components into small components to achieve front-end componentization. There can be a parent-child relationship and a sibling relationship between components. In Vue's single-file component, a component contains code snippets of its HTML, CSS, and JS.
6. Front and rear separation
The front-end and back-end separation project is very helpful to improve the development efficiency of the front-end, because the front-end no longer needs to configure routing in the background, set up the server environment, and write templates, so that the front-end productivity will be largely liberated, but the front-end separation There are advantages and disadvantages to the project, as shown below:
In the end, we need to weigh the pros and cons according to the needs of the project to decide whether to use the front-end and back-end separation model.
7. Norms and Models
Teamwork is inseparable from the help of coding standards and development models. Following the coding specification document can help us improve the efficiency of collaborative development when team development. A team following a set of coding standards can make each person's code write a person's style, so that teams will be very efficient when reviewing, testing, and improving functions between each other. Here are some open source front-end coding specification documents:
In addition to coding specifications, we often follow some existing patterns to solve problems during development. For example, when writing popups in JS, we often use singleton mode, and directly apply common properties of animation when writing animations with CSS. We no longer need to think about the realization of a certain function from scratch, this is the meaning of the pattern.
Of course, in addition to the above 7 points, there are many places for the front end to improve development efficiency, which can be described as a long way to go. Only by organizing the front-end disorderly and complicated operations and using tools to simplify and standardize the front-end processes can the integration of project construction, development, and maintenance be achieved. I hope this article can inspire and put into practice students who are new to the front end.