前端架构,前端工程化

前端架构:

1.前端工程化

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应用的交互体验本身,回归到“纯粹”的前端研发。

或许现在很多企业和团队尚未重视前端工程,或许前端工程在很多人眼里还只是“构建工具”的代名词,又或许未来前端领域的变革使得一切工程问题从根本上得到解决。不管怎样,我只是希望当下能认真的记录自己在前端工程领域的所见所想,与正在经历前端工程化改进,并被此过程困扰的同学交流心得。

先说概念:前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理(曾经的前端开发可不是这样的,不然为什么要说工程"化"呢?)。

"前端工程化"里面的工程指软件工程,和我们一般说的工程是两个完全不同的概念。

  • 工程是个很泛泛的概念,你甚至可以认为建了个 Git 仓库就相当于新建了一个工程;
  • 软件工程的定义是:"应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科"(GB/T11457-2006《信息技术 软件工程术语》)。

很多时候,我们的前端确实是个工程,但并不是在以软件工程的方式方法去对待它。

为什么会出现"前端工程化"这个概念?

  • "这个活动页面,给张图切一下就行了嘛";
  • "这个管理后台已经通过 XXX 脚手架生成了,页面稍微改改就行";
  • ...

前端的开发工作在一些场景下被认为只是日常的一项简单工作,或只是某个项目的"附属品",并没有被当做一个"软件"而认真对待(无论是产品负责人还是开发者)。

然而无论你如何对待它,也无法否定前端是一种 GUI 软件的事实,因此其也就必然遵循时间、质量、成本相互制约的特性。对于时间和成本的控制必然将导致最终产出倾向于出现"质量低"、"可维护性差"、"可用性差"等问题。

过去我们以牺牲质量的方式换取时间和成本,现在趟了前辈们早已趟过的坑,然后发现还是要重新审视"前端"这一软件开发活动,并且使用软件工程这套早已存在的体系去对前端项目进行管理。


目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp(eg:https://app.ft.com/)(httpshttps其实就是建构在SSL/TLS之上的 http协议,所以要比较https比http多用多少服务器资源,主要看SSL/TLS本身消耗多少服务器资源。)模式为主了。现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了。工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?
前端工程化是前端架构中重要的一环,主要就是为了解决上述大部分问题的。而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。那么前端工程化需要考虑哪些因素?本人总结经验,认为前端工程化主要应该从模块化、组件化、规范化、自动化四个方面来思考,下面一一展开。## 模块化简单来说,模块化就是将一个大文件拆分成相互依赖的小文件,再进行统一的拼装和加载。只有这样,才有多人协作的可能。### JS的模块化在ES6之前,JavaScript一直没有模块系统,这对开发前端架构,前端工程化_第1张图片大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等,某些框架也会有自己模块系统,比如Angular1.x。现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS和AMD规范,而且使用起来相当简洁,并且有静态加载的特性。规范确定了,然后就是模块的打包和加载问题:1. 用Webpack+Babel将所有模块打包成一个文件同步加载,也可以打成多个chunk异步加载;2. 用SystemJS+Babel主要是分模块异步加载;3. 用浏览器的

你可能感兴趣的:(技术,学习,前端,JavaScript,MR.K在前端的平凡之路)