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

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，目前的开发环境已提供这个功能。

转载于:https://www.cnblogs.com/umgsai/p/7137609.html