about
- First release address: wechat official account — Love-Fed
- My blog: Loeb’s blog
- Zhihu column: Front hula hoop
preface
In fact, front-end engineer is a very complicated job, in addition to be responsible for cutting diagrams, writing HTML/CSS/JS, but also to solve a series of browser compatibility, webpage performance optimization and other problems, so it is imperative to improve the development efficiency of front-end engineer, but also the embodiment of front-end engineering.
My personal understanding of development efficiency is
Development efficiency = efficiency of adding 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. Here are seven ways to improve your front-end development efficiency.
methods
1. Cut the figure
Cut map is a front end of the most basic skills, we generally use Photoshop or FireWorks basically can fix the designer delivered to our design, but to improve the efficiency of cut map will have to use some tricks, such as the use of PS action to achieve the “one key cut map” function, specific can see my article: www.cnblogs.com/luozhihao/p… , here in addition to cutting graph also introduced other practical methods and tools.
2. The coding
For writing code part we first need to find a suitable IDE tool, do not recommend Notepad++ or Dreamweaver, these tools have not been in line with the front end of the trend, can not let me elegant code. I mainly recommend Sublime Text, Atom, or Webstrom because, in addition to their user-friendly interface and highlighting for most of the syntax, they offer a wide variety of plugins to extend your IDE. Here are some of the most efficient ones for Sublime Text:
Emmet is used to quickly write HTML /CSS. For example, type ul> Li and press TAB to generate a UL tag that contains a LI tag. The official document is: docs.emmet. IO /cheat-sheet…
JSFormat is used to format JS; CSScomb is used for one-click sorting of style attributes; Html-css-js Prettify can standardize our HTML/CSS/JS, and even JSON formats with one click; SublimeTmpl can quickly create HTML/CSS/JS files; ColorPicker is used to invoke the local palette function. These tools are very practical and can improve our coding efficiency to a certain extent.
3. The automation
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, which can greatly reduce unnecessary front-end workload and enable 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 realize the construction of local server; Test our front-end code with Karma, Jasmine.
Using front-end automation tools can help us deal with a lot of trivial things, such as one-click compression code, pictures, one-click JS merge, detect file updates and so on.
4. The modular
With the advent of Web2.0 era, Ajax technology has been widely used, and front-end code is expanding day by day. Front-end modularization can facilitate the maintenance of project code and load on demand, which is also beneficial to improve the development efficiency of the project in the long run.
Before ES6 came out, it should be said that the front-end code itself does not have the function of implementing modules, we have to use some modular loaders to achieve, such as RequireJS, SeaJs, etc. With the popularity of ES6, tools like RequireJS and SeaJs are no longer necessary. Therefore, IN the es6-based development environment, I suggest using ES6 modularization functions to achieve our front-end modularization.
5. Modular
The concept of front-end componentization has a long history. We can divide our code into different components to achieve common functions. We may not have to write the same code again for the same function, and at the same time, we can improve the maintainability and clarity of front-end code. Here is a concept diagram of the single-file component of the popular front-end framework Vue:
We can separate common components and divide large components into small parts to realize front-end componentalization. There can be father-son relationship or brotherly relationship between components. In a single file component of Vue, a component contains snippets of its HTML, CSS, and JS code.
6. Separate the front and rear ends
I once wrote an essay about the separation of front and rear end separation “, “why do we need to try before and after the end, the address is: www.cnblogs.com/luozhihao/p… . The project with separated front and rear ends is very helpful to improve the efficiency of front-end development, because the front end no longer needs the background to configure routing, build server environment, write templates, etc., so the productivity of the front end will be greatly liberated. However, the project with separated front and rear ends has advantages and disadvantages, as shown in the following figure:
Finally, we need to weigh the pros and cons according to the project requirements to decide whether to use the model of front and back end separation.
7. Specifications and patterns
Coding specifications and development patterns help teams work together. Following the code specification documentation helps us to be more effective in collaborative development when working as a team. A team following a set of coding specifications allows each person’s code to be written in their own style, which allows teams to review each other, test each other, and refine features efficiently. Here are some open source front-end coding specifications:
- codeguide.bootcss.com/
- Tguide.qq.com/main/index….
- cssguidelin.es/
- Github.com/adamlu/java…
In addition to the coding standards we are often adopted in the development of some existing model to solve the problems, such as when we tend to use when written in JS bounced the singleton pattern, written in CSS animations directly to use the common property of animation, etc., when we no longer need to think from the very beginning the realization of the function of a certain, this is where the significance of the models.
conclusion
Of course, in addition to the above 7 points, for the front end of the need to improve the efficiency of development there are many places, can be said to be a long way to go. The integration of project construction, development and maintenance can be realized only by organizing the disordered and complicated operations at the front end and using tools to simplify and standardize the front-end process. I hope this article can bring inspiration and practice to the students who know the front end for the first time.
Did this article help you? Welcome to join the front End learning Group wechat group:
