A front-end engineer is actually a very complicated position. In addition to being responsible for cutting pictures and writing html/css/js, it also needs to solve a series of issues such as browser compatibility and web page performance optimization. Therefore, improving the development efficiency of front-end engineers is It is imperative and also the embodiment of front-end engineering.
For development efficiency, my personal understanding is
Development efficiency = efficiency of adding code + efficiency of modifying code + efficiency of maintaining code
Then 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.
Front-end engineering
method
1. Cut the figure
Slicing is the most basic skill in the front-end. Generally, we can basically use Photoshop or FireWorks to get the design drawings delivered to us by designers. However, if we want to improve the efficiency of slicing, we have to use some tricks, such as using the actions in PS to Realize the function of "one-click image cutting".
2. Coding
For the coding part, 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 cannot allow ourselves to type code gracefully. Here I mainly recommend Sublime Text, Atom or Webstrom, because in addition to their user-friendly interface and support for most syntax highlighting, they can also install various plug-ins to expand your IDE tools. I will mainly introduce a few below. Plugins for Sublime Text to improve development efficiency:
Among them, Emmet is used to quickly write html/CSS. For example, after entering ul>li and pressing the tab key, a ul tag containing a li tag can be generated. The official document is: http://docs.emmet.io/cheat -sheet/
JSFormat is used to format JS; CSScomb is used to sort style properties with one click; HTML-CSS-JS Prettify can standardize our HTML/CSS/JS, and even JSON format with one click; SublimeTmpl can quickly create new HTML/CSS/JS files ; ColorPicker is used to call local palette functions. These tools are very practical and can improve our coding efficiency to a certain extent.
3. Automation
说到提高开发效率，这里不得不提一些前端的自动化工具，毕竟前端自动化是目前及未来的趋势，能够很大程度上缩减前端不必要的工作量，使我们能够专注前端本身。
前端自动化
这里我们可以使用NPM来管理我们的项目包文件；利用webpack来打包压缩我们的代码；利用Node.js来实现构建本地服务器；利用Karma、Jasmine来测试我们的前端代码。
用好前端自动化工具可以帮助我们处理很多琐碎的事情，比如一键压缩代码、图片，一键合并JS，检测文件更新等。
4.模块化
随着web2.0时代的到来，Ajax技术得到广泛应用，前端代码日益膨胀，而前端模块化能够方便我们对项目代码的维护，进行按需加载，从长远角度来看对我们提高项目的开发效率同样大有益处。
在ES6出来之前应该说前端代码本身不具备实现模块的功能，我们必须要使用一些模块化加载器来实现，比如RequireJS、SeaJs等。而随着ES6的普及，目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。
前端模块化
5.组件化
前端组件化的概念也是由来已久，我们可以通过将我们的代码划分成不同组件来实现功能公用，一个同样的功能我们可能不用再次编写相同的代码，同时也可以提高前端代码的可维护性和清晰度。以下是目前流行的前端框架Vue的单文件组件的概念图：
前端组件化
我们可以将公用的组件抽离，将大组件拆分成小组件的形式实现前端组件化，组件与组件之间可以存在父子关系，也可以存在兄弟关系。在Vue的单文件组件中，一个组件包含了其HTML、CSS、JS的代码片段。
6.前后端分离
我曾经写过一篇关于前后端分离的文章《我们为什么要尝试前后端分离》，地址为：http://www.cnblogs.com/luozhihao/p/5761515.html 。
前后端分离的项目对提升前端开发效率非常有帮助，因为前端不再需要后台配置路由、搭建服务器环境、编写模板等，这样一来前端的生产力就会得到很大程度的解放，但是前后端分离的项目有利也有弊，如下图所示：
前后端分离
最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。
7.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格，这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档：
- http://codeguide.bootcss.com/
- http://tguide.qq.com/main/index.htm
- http://cssguidelin.es/
- https://github.com/adamlu/javascript-style-guide
除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题，比如当用JS编写弹框时我们往往会用到单例模式，用CSS编写动画时直接套用动画的常用属性等，我们不再需要从头开始思考某一个功能的实现，这就是模式带来的意义。
结语
当然除了以上7点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。只有将前端无序、繁杂的操作组织起来，利用工具简化、规范前端流程，才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。