苏宁视频云高级技术经理：漫谈前端系统架构的演变历程（上）-创新互联

作者：李晓健。现担任苏宁视频云高级技术经理。软件技术专业，从事java开发，拥有8年开发经验，超过6年的专职前端开发经验，3年以上的团队管理经验；目前负责苏宁视频前端研发和架构工作，参与前端SDK组件的开发，推动苏宁视频云平台的架构改进和用户体验，为用户提供优质的服务。人生信条：始终相信只要有付出，就一定会有回报。

随着WEB技术的发展，很多的系统也都由客户端慢慢的向WEB端转移，所以WEB端内容已经不再是只用来做静态内容的展示，前端工程师的工作也不再是只用切切页面，写点样式，写点特效那么简单了。

现在的WEB端已经体现出了很多之前在后端才有的一些逻辑和交互，前端也在不停的增加着业务代码，在用户体验上也有较高的要求，这些包括页面的响应速度和数据的动态获取等等，这些原因也是近几年前端快速发展的根本原因。

既然前端的业务变的更加复杂，那代码量自然也会随之增加，这就带来了一系列的问题，比如代码的维护更加困难，团队的协同开发更加麻烦，页面去加载和解析这些资源也会变慢等等。

要想更好的解决这些问题，就需要一个合理的架构，当然架构没有最好的，只有更合适的，并且不同的团队，不同的产品也相差较大，所以想要找到一个合理的架构就需要我们根据自身情况不断的去总结和完善。

苏宁视频云前端的主要工作内容

目前前端现状，大家理解可能前端的内容就是html、css、javascript。其实在平常的工作中也确实就是这些东西，然后重点在javascript上。

HTML(html4、html5)

html包括html4和html5。然而HTML大家会觉得没有什么东西，不就是一些HTML的标签嘛，然后把这些HTML标签累在一起，累出一个页面嘛。实际上HTML里需要我们学习的内容还是有很多的，比如标签的语义化，标签的一些组织结构，哪些是行内标签，哪些是块级标签，这些标签在我没有添加CSS样式来控制他们的情况下各自默认有什么样的表现，而且这些表现在不同的浏览器上也是不一样的。还有这些标签对搜索引擎的影响呀。还需要了解什么是重绘，什么是回流。

CSS(CSS2、CSS3)

然后就是CSS,其实CSS中一些细节的点也比较多，需要我们去熟悉和掌握，如果大家只去了解一个CSS属性是干什么，他给页面元素的表现是什么，然后能将通过这些属性让页面很好的展现出来还是不够的。偶尔我们发现一些比较诡异的问题，一些属性会失效，或者是它让页面元素呈现出来的状态并不是我们想要的，比较我们都知道一个div的宽度默认是100%，当我们给他设置了float属性后，他的宽度就不再默认是100%，在这里我们没有去改变DIV的宽。

JAVASCRIPT (ES5、ES6+、nodejs)

接下来就是JAVASCRIPT,JSVASCRIPT在前端的开发中占的比重是比较大的，它包括前面的ES3、ES5及现在的ES6+。这里为什么说ES而不是JS呢，因为ES是ECMAScript的简称，而ECMA是一个组织，叫做国际化标准组织。ECMAScript就是ECMA组织制定的一个标准。这个标准就是针对JAVASCRIPT语言来制定的。

所以说ECMASCRIPT是一种标准，而JAVASCRIPT是对这种标准的实现，我们常说的发布就是标准的发布，所以就是ES3、ES5、ES6+。对于ECMASCRIPT的实现并不是只有JAVASCRIPT一种，比喻还有Jscript、ActionSctipt。其实JAVASCRIPT = ECMASCRIPT+DOM+BOM。

还有我们比较熟悉的NODEJS，大家觉得他和JAVASCRIPT很像，它也是基于ECMAScript标准的，NODEJS =ECMAScript+OS(操作系统)+File(文件系统)+Net(网络系统)+DB(数据库)。

前端大概就是这些东西，看起来也就这些东西。其实要做好前端需要掌握和了解的除了这些还有很多需要掌握的东西。前端已经说过ECMA的标准，还有W3C的标准，HTTP的标准。还有一堆的不停出现和更新的类库和框架要去学习。

还有他们的运行环境，比如浏览器环境，比喻浏览器的渲染机制、浏览器的缓存机制，还有前端的安全功防，比喻XSS、CSRF等。NODE的环境等等。

前端还有一块比较麻烦的就是浏览器的兼容性。因为前端用的运行环境是不固定，主要取决于我们的用户，我们不知道他们使用的是什么样的操作系统，不知道他们用和是什么浏览器，而ES是在不停的升级，不停的给我们带来新的特性，而在这些新的特性出来之前甚至是他们出来后一段时间内，浏览器是不支持这些特性的。

如果我们的代码里用到了这些特性，那在这些不支持新特性的浏览器上，我们的页面和功能就没法正常工作甚至是正常展示。而用户又不一定会一直保持自己的浏览器是最新的，有可能他们用的还是很多年前发布的浏览器版本，出现这样的问题也是我们需要去解决的，当然我们在写代码时就应该去考虑到这种问题，但是我们不可能考虑到所有情况。

所以前端并不是很多人理解的只是切切页面，做做美化的工作。

前端可以应用的场景

PC浏览器

然后来说说我们前端可以应用的场景，就是我们前端做出来的东西在哪里可以使用，现在比较常见的就是PC浏览器，比较我们做的一些在线系统、网站，都是通过PC浏览器来呈现的。

WEBAPP （移动浏览器、移动端原生WebView）

还有就是WEBAPP，它就是移动端浏览器，其实它也和PC浏览器差不多，也是通过浏览器来呈现的，还有就通过移动端的WebView，它也是可能直接内嵌一个H5的页面进去，也就是说我们前端的东西也是可能在移动端原生应用中去展现。

Hybird App

然后还有一个就混合应用，混合应用就是我们用前端的技术去做功能开发，然后在打包时的时候，把它打包成原生应用一样的安装程序，直接安装到我们的手机中，它的好处就是他的开发成本比较低，就是开发一套代码，可以同时打包成不同平台的的应用。

桌面应用（NW.JS、Electron）

还有一块就是PC端的桌面应用，这种桌面应用和移动端的混合应用是差不多的，也是通过前端的技术使用js、html、css去开发应用的功能，然后把它打包成PC上的安装程序，他就可以以桌面客户端的形式来运行，它的好处也是同一套功能代码可以打包成不同操作系统上的应用程序。目前比较常用的框架是NE.JS和Electron。这两个框架大家有兴趣的话，可以自行去找找资料看看。现在前端应用的场景主要就是这些，可能还有一些其他不怎么常见的场景，当然以后肯定还会有更多的应用场景。

前端的现状

接下来我们再说说前端的现状，我们先来看看前端一些主流框架的使用情况，这里有一张stateofjs2017年对前端框架的统计。

这里主要列举了几个比较流行和常见的框架，他是从几个不同的维度来做比较的，一个维度是从来没有听说过；一个是听说过，不感兴趣的；一个是听说过，想学习；一个是使用过，不想再使用；一个是使用过，会继续使用。

这几个不同的维度也都表现出了这些框架的流行度，和用户的喜爱度。从图中的这些维度里，从左到右大致就是一个框架的被开发者所喜爱的一个序顺。从这个图表中我们可以看出，排名比较靠前是是angular、vue、react。这也和我们当前的现状是比较吻合的。

这里有一个比较奇怪的项，就是排名比较靠前的那个不使用框架，而且这里也没有大家都比较熟悉的Jquery。

个人认为其实Jquery应该是归类到这一项里的，因为从严格的意义来讲，Jquery并能不算是一个框架，他只是对一些方法的封装，并没有一对一个流程提供一个解决方案，所以他只能算是一个类库，并不能算是一个框架。

Jquery在几年以前确实是特别的流行，前端开发几乎是离不开它。但是自从一些MVC、MVVM的框架出现以后，Jquery已经不在是前端开发的必须项了，有些项目基于一些历史原因，或者是完全没有心要使用框架，直接用jquery就能很容易的处理好。所以就导致了这个不使用框架的排名比较靠前。当然这个图是去年的统计结果，今年的话右边的几个的排名可能稍等有不同。但是大致的不会有太大的变化。

前端架构的意义

接下来再来说说前端架构的意义，也就是说前端为什么需要有架构。大家可能会说，前端不就是HTML、CSS、JAVASCRIPT吗，把他们写好放到一起就好了呀，其实在很早以前前端确实是不需要什么架构的，甚至是不需要一个专门的岗位来做，那时由设计师做出设计图，然后再写一份静态的页面，再交给后端工程师，后端工程师写好后端逻辑以后，再将设计师给他们的静态页面替换成一些动态的页面，比较替换成jsp、php等，再将数据套进去就行了。

前端开发中经常出现的问题

1、对现使用的框架不了解，上手太慢

接下来再来说说前端开发中经常会出现的问题，比如说对现在使用的框架或技术不太了解，上手太慢。因为现在的前端框架和类库实在是太多了，每个公司或团队所选择的框架和类库也是完全不同的，一个开发者不可能去了解所有的框架和类库，前端的一些编程语言也非常的多，比如CoffeeScript、TypeScript、LESS、SASS等等。当我们加入一个团队中遇到这些我们之前没有使用过或了解过的东西时，就需要现学现用，就会上手比较慢。

2、代码逻辑混乱，耦合严重

还有一个就代码逻辑比较混乱，因为我们在开发前没有一套约定的开发流程和规范，开发的过程中可有就是想到什么就写什么，永远的都是根据需求去添加代码，代码就一直往下堆，当这样堆多了就会出现逻辑的混乱，在这样往下堆的过程中又严重依赖前面的代码，使代码严重耦合到了一起。不知道大家公司有没有一块很神奇的代码，是好多年前开发的，开发的人早已离职，几乎没有人能很清楚的说出来它的逻辑，只要是他能正常的运行，就没有人敢去动这块代码，即使所有人都觉得这块的代码非常的烂。

3、开发越来越来困难，牵一发而动全身

既然代码都是堆起来的，又严重耦合，随着时间有推移，你会发现开发越来越困难，最后即使所有的代码都是你自己写的，你也会发现越往下写越困难，直到最后几乎没法往下写了。有时想改一个地方，就会发现，这里是改好了，确影响其他多处的功能，所谓的牵一发而动全身呀。

4、重复代码太多，一处改处处改，可维护性太差

有的时候不敢去改动之前的代码，怕影响其他功能，所以只要有新功能就去直接添加代码，长久以往，还会发现到处都是重复代码，而这些代码都有几乎相同的逻辑，有一天，产品经理告诉，我们有一个需要需要修改一下，就又会发现，要改的地方太多了，虽然一编编的查找修改代码，最后依然可能会的漏改的地方。

5、开发效率低下，出错率高

然而一个团队的人员变动是很正常的情况，这样就会出现你需要去维护别人的代码，或者别人需要来维护你的代码，前面已经说过时间久了，你自己都不想再维护你自己的代码，更别说维护别人的那些堆起来的严重耦合的代码，这样情况只会更糟。所以就会导致开发效率低下出错率太高。等等其实我们在项目开发过程中会有各种各样的问题，我们在团队协同开发的过程中还会有更多的问题。

前端开发中出现问题的原因分析

用户体验度的要求提升

出现这些问题的原因主要人们对用户体验的提升，比如说人们对页面的流畅性，页面的加载速度的要求的提升，这也是后来出现前端工程师的主要原因。

逻辑逆转

还有就是很多的逻辑开始往前端转移。比如说很多的验证，之前都是需要前端提交给后端，然后后端再将验证结果返回给前端，而现在可以先在前端做一个初步的验证，可以及时的将结果展现给用户，最后再将数据提交给后端做最后的验证。比如还有一些简单的数据处理呀等等。这里的转移并不是完全就交给前端，后端不用管了。像简单的数据处理可以直接交给前端，而数据验证就需要前后端同时去做。这样的话就会使前端的逻辑变的复杂。

前端的功能越来越丰富

前端的交互变强了，它的功能自然也就变的更丰富了，不像以前，前端只需要做一个纯粹的展示页面就好。

前端代码量的大幅提升

基于这些改变就使的前端的代码量大幅增加。开发过程就越来越复杂。

前端架构层出不穷

还有一个比较重要的原因就是，近几前年前端发展太快，框架是层出不穷，很多人在做项目时都一味的去追新，总想用最新的框架，然后就一直处在适应框架的阶段，并没有真正的去理解自己使用的框架，也没有深入的研究自己所使用的框架，甚至出现一些框架的误用。然后造成各种各样的问题，给后来维护项目的人也留下一些奇怪的问题。所以就需要一个架构来规范我们所使用的技术和开发的流程。

明天我们将继续讲解关于前端架构是什么以及如何去搭建一个合适的架构等相关内容，欢迎大家关注我们的公众号，或在后台留言交流相关技术经验。

苏宁旗下子品牌苏宁视频云已累计服务客户超过2000个；苏宁视频云凭借PPTV 十年媒体技术和服务经验，融合流媒体技术、P2P、CDN 分发、海量存储、安全策略等构建的专注视频领域的一站式SaaS 服务平台。苏宁视频云集视频云直播、云点播、云上传、云转码、云存储、云统计等功能于一体，多平台全方位支持客户各种视频场景的业务需求。