zoukankan      html  css  js  c++  java
  • 如何提升开发效率-前端技术选型篇

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

  • 相关阅读:
    Annotation
    jdbc
    集合
    与运行环境交互
    计数排序and基数排序
    面向对象下
    面向对象
    流程控制与数组
    庆祝自己的BLOG开张
    Raspberry Pi配置为无线路由器
  • 原文地址:https://www.cnblogs.com/umgsai/p/7137609.html
Copyright © 2011-2022 走看看