如何提高开发效率-前端技术选型篇

1.Web的本质

web的本质是什么？web世界的两大主角 request & response 几乎说明了一切，客户端（浏览器）向服务器发起一个请求（request），服务器在收到请求后返回一个响应（response）给客户端，客户端接收到服务器的响应后把结果展现给用户。浏览器做为万千客户端中最流行最标准的一种，为开发人员作了绝大部分底层工做，使得咱们只需关注Web的前端与后端。

后端一般负责数据存取相关的工做，前端一般负责展现结果给用户。不一样的应用场景下，前端与后端的复杂度可能存在不一样。好比在咱们的开票系统中，查询开票数据、处理用户的开票请求都是后端去完成的，前端只负责在页面上展现后端的处理结果。而在一些网页游戏中，前端可能比后端复杂。好比某个游戏的场景里，游戏主角去打一个怪，使用了各类技能，最后把这个怪打死了。在这个过程里，对于后端来讲，可能只须要把主角打的怪的数量加1，主角的血加1，主角的分数加1。而前端这个时候可能须要根据用户的技能来渲染各类特效，可能还须要通过一些算法来判断给对方的伤害值。
比较了上面的两种应用场景以后再来看看咱们的业务系统。在咱们的系统中，有些是不须要前端的，好比Job和MQ的listener。这类系统的交互对象是另外的系统，此时只须要处理完业务逻辑就能够，不负责展现结果给用户。而像帐单这类负责展现数据给用户的系统则对前端的要求较高，这类系统的交互对象是人，因此这类系统对用户体验、性能等指标要求都比较高。

在咱们公司的应用中，web系统（运行在tomcat容器中）包含service、mq和web。其中service和mq都不须要用户界面，通常只有web须要开发网页做为用户界面。APP的后端也是web，但这类web一般只提供标准的http接口，安卓客户端和iOS客户端经过http接口和后端系统进行交互，此时的用户界面由客户端提供，此处暂不讨论。

2.影响Web性能的因素

影响web性能的因素不少，能够参考经典问题：从输入网址到浏览器显示页面发生了什么
这个经典问题中的任何一个环节均可能影响用户的体验，一般来讲优化思路有如下几种：

前端

• 静态资源走CDN
• 压缩&合并静态资源（js&css&图片）
• 缓存
• 启用GZIP支持
• css放在html顶部，js放在html底部

后端

• 多数据中心部署
• SQL层优化
• 合理的JVM参数设置

Web性能优化方案不少，可是实际上咱们的Web系统QPS并不高（帐单首页天天不到1W，其余web系统访问量更低），而且线上环境几乎都考虑了以上问题，因此以上的各类优化点并不用开发者太关心。相比之下，咱们更关心的是开发效率。

3.Web前端开发技术选型

在Web性能并不是关键问题的状况下，经过使用合适的框架能够明显提升开发效率。直白点讲，提高开发效率的宗旨就是：能一行代码搞定的事情就不要写更多的代码了！！！
如下列举几种适合咱们公司web前端开发的技术选型方案

• A.jQuery
  毋庸置疑，jQuery做为资深的JavaScript框架在操做Dom方面有着不可替代的地位，特别是其对ajax接口的封装简化了ajax操做。但jQuery也有其局限性，好比在双向数据绑定方面。
• B.Vue.js
  vue.js在GitHub上有近60K的star，入门门槛低简单易上手，能够极大简化前端开发的一些操做。结合jQuery使用简直perfect。参考文档 http://cn.vuejs.org/v2/guide/
• C.layui
  layui是国内的一款开源库，其中包含了弹层组件、日期组件、分页组件和符合现代审美的css库。此次开发提报系统中90%以上的css类都来自layui，简直不能更省心。 主页 http://www.layui.com/
• D.Handlebars 模板引擎
  Handlebars在PC帐单前端项目中已有使用，主要是结合弹层使用。详情参考文档 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
  各类JS模板引擎对比数据参考 http://blog.csdn.net/wuchengzhi82/article/details/8938122

此外，对于先后端分离的项目，前端项目须要压缩上传至CDN，目前的开发环境已提供这个功能。