「前端工程化」之一

「前端工程化」库/框架选型、构建优化、JS/CSS模块化开发

Posted by Mr Kang on August 8, 2017

前言

web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。

前端工程的3个阶段

第一阶段: 库/框架选型

Animate.css jQuery vue.js underscore.js React.js Backbone.js Bootstarp zepto.js jade normalize.css compass Angular.js 解决开发效率

第二阶段: 简单构建优化

选择构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。

第三阶段: JS/CSS模块化开发

解决维护效率 js的模块化方案 ADM/CDM/UMD/ES6 Module

css的模块化:less,sass。

第四阶段: 前端是一个技术问题较少,工程问题较多的开发领域

当我们要开发一款完整的Web应用时,前端将面临更多的工程问题,比如:

  • 大体量:多功能、多页面、多状态、多系统;
  • 大规模:多人甚至多团队合作开发;
  • 高性能:CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

组件化开发和资源管理 组件化开发: 光有JS/CSS的模块化还不够,对于UI组件的分治也有着同样迫切的需求

资源管理: 根据“增量”的原则,我们应该精心规划每个页面的资源加载策略,使得用户无论访问哪个页面都能按需加载页面所需资源,没访问过的无需加载,访问过的可以缓存复用,最终带来流畅的应用体验。

由增量原则引申的前端优化技巧成为了性能优化的核心:

按需加载 延迟加载 预加载 请求合并 浏览器的缓存 静态资源管理系统 = 资源表 + 资源加载框架

前端模块化框架肩负着模块管理和资源加载2个重要的功能

webpack已经成为了前端打包构建的主流。

开发框架则是形成了三国时代: React , Vue, Ng

移动端也以混合开发为主的方式,Native嵌入了Webview页面。

SPA依靠首次加载的Loading动画,来掩盖一些页面加载性能的问题。

用户验证问题,怎么来确认Native的用户身份,是用原来Web网站常用的session还是使用Native比较常用的token,但是不管用哪种,都需要Native帮忙来注入标识。

前端业务重量化,场景多样化。 未来的趋势: 组件化。

美团的工程化 关于前端工程化,我看了美团团队的分享: 他们分享的前端化的实践总结:

  1. 前端开发要自成体系,包括构建、部署及运维,不再和后端项目耦合,后端通过RESTful接口提供服务。
  2. 避免重量级的框架,没有一个框架可以满足所有的业务场景。
  3. 设计要分层,来应对需求和技术的变化。

前端工程化项目分为3大模块:

  1. Node服务,提供数据代理,路由,和服务器渲染,通过restful api和后端通信。
  2. web应用开发,专注于web交互体验。
  3. 前端运维:包含构建,测试,部署及监控等。

Node服务:用于实现前后端分离,核心功能是实现数据代理中转,附带url路由分发和服务端渲染功能。 Web应用开发:纯粹的前端模块,给予前端工程师极大的自由度进行技术选型,专注于Web交互体验的开发。 前端运维:主要指前端项目构建和部署、工程质量(源码质量检查和测试等)及监控服务(日志、性能等)等工作。 前后端分离:

  • 为了前后端彻底的分离,引入Node服务层。
  • 即在Node端通过HTTP请求得到数据后,Web端再通过Ajax的方式从Node端间接获取后端数据,Node服务起到“桥梁”的作用。
  • 路由分发
  • 服务器端渲染:Node服务端最后一个核心功能是渲染:输出 HTML Shell和 JSON。输出JSON字符串的用途是为了浏览器端能以Ajax形式动态获取数据,而输出的HTML内容则是我们Web应用的所需的HTML“壳子”。

这主要是SPA的快速发展,前端的用户体验大幅提升。

静态资源与Node端衔接:

  • 前端静态资源构建工作与Node服务相互分离,Node服务在开启的过程中会读取前端构建生成的静态资源映射表。
  • 静态资源映射表的生成:
  • 预编译:ES6语法转义,css预编译器处理,源码质量审查,测试
  • 模块依赖解析
  • 压缩,静态资源版本号

前端构建工具基本都提供静态资源映射表生成插件,比如构建工具Webpack就存在插件assets-webpack-plugin来实现该功能。

鼓励遵循下面几条“约定”:

  • Ajax请求从Node端代理,而非具体后端服务。
  • 鼓励将JavaScript、CSS、HTML视为前端领域的“汇编”。
  • 重视前端页面状态管理,推荐的方案有Redux、vuex及MobX等。
  • 强调组件化,面向组件集开发。

项目的脚手架,来搭建项目的开发环境。

工程质量保证,在每次的commit,同个项目要求遵循同一套编码规范,并采用ESLint等工具进行约束,对于一些复用性高的核心组件也强制要求写测试。 甚至是接入单独的系统测试。

总结

前端工程化体系的引入,让前端开发能和原生App应用项目开发一样“自成体系”,脱离了对后端项目的依赖。基于“约定优于配置”、“按照约定写代码”的原则对Node层功能的设定能够降低沟通协调成本,构建、部署等工作的规范化,使前端技术人员的开发重点回归到Web应用的交互体验本身,回归到“纯粹”的前端研发。

后言

作为一个前端的新人,我做了几个项目,也在不停的写博客,demo项目,那为什么我会关注前端自动化,工程化?

前端既然是一个技术快速迭代的领域,我们就该关心技术栈的发展。从这个层面上,才规划我们的技术学习,国内的很多互联网公司都有对外的技术博客,和分享沙龙,这些是我们这些小前端来领略大公司风采的好机会。

当我们对一线互联网公司的做法有了一定的了解,就开阔了自己的视野,也会不断的扩充自己的技术栈,而不仅仅是做一个简单的切图崽,这是驱动我们不断学习新技术的动力,在市场上已经有互联网公司在这么做。

这是理念的革新,前端早已不是刀耕火种的时代,有了自己完整的技术栈。在我看来,有的公司还很落后,对前端的理解还很浅。用这些的好处是不言而喻的,那么为什么还有那么多的公司没有采用这样的前端开发方案,可能是没有对前端自动化,工程化,组件化的理解不全吧,或许是没有动力这么做,像有些前端工具用了就再也回不去了。