苏宁视频云高级技术经理：漫谈前端系统架构的演变历程（中）

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

昨天的文章我们大概介绍了下苏宁视频云前端的主要工作内容以及苏宁前端架构的前景、现状等内容，今天的文章将主要介绍下前端架构是什么以及如何搭建的内容。

前端架构是什么

接着昨天苏宁视频云高级技术经理：漫谈前端系统架构的演变历程（上）上篇，我再来说说前端框架是什么？

个人理解前端架构其实就是对一些框架技术的组合使用方式及对一些流程的规范化，经此来达到控制风险、简化开发和提高开发效率的目的。

比如说我们在开发一个新的项目时，需要使用到什么技术，就是做一个技术的选型，怎么样去组织我们代码；也就是说我们的代码目录结构应该是什么样，然后我们的开发流程是什么样，代码应该遵循一个什么样的风格，来使一个团队的人开发出来的代码风格一致，还有就是有哪些工具和组件库我们是可以直接去使用的，这些都是我们在做一个架构时需要考虑的问题。

其实说架构这个东西，不能说什么样的架构就是最好的，最完美的架构。

架构只能说他是一个最适合我们的，因为一个好的架构是一点点改出来的，我会要让他一点点的适合我们的团队，适合我们的业务。而不是说一个架构可以在所有的团队都用越来比较舒服，不管什么的业务都可以在这套架构下很好的开发下去，在各个方面都很完美。毕竟每个团队的人员的风格和能力都不尽相同，每一个业务也都是自己的特点，所以说几乎不可能有一个完美的架构的存在。所以我们只需要做出一个适合我们自己团队和业务的架构就算是一个很好的架构。

怎么样去搭建一个合适的架构

那我们怎么才能做出一个适合自己团队和业务的架构呢？

1、了解当前项目的功能特点（复杂度、侧重展示还是交互、SEO）

首先我们需要了解我们当前项目的功能特点，比如我们项目的复杂度、他的侧重点是什么？

是重交互还是重显示。比如我们的后台管理系统就是重交互的，我们的官网就是重展示的。像这样比较简单我们可以不依赖任何第三方的东西或只需要简单的类库就可以实现，没必要去引入一些框架越来，而对于那些重交互的系统，我们就可以考虑引入框架来帮助我们处理一些逻辑和操作，来简化我们的开发。

然后我们的项目对SEO是不是有要求。比如说我们后台或内部系统是不需要太注重SEO的，因为他的内容不需要别人通过搜索引擎来搜索到，对于这些不需要注重SEO的系统，我们就可以考虑使用模板来动态生成页面结构。

比如苏宁的官网首页，商品详情页，这些都是需要做好SEO的，因为这些东西就是要展示给别人看的，需要别人能很容易的在互联网上找到他们相关的信息。

对于这些需要注重SEO的系统，我们需要从服务端就返回完整的页面结构，如果需要动态生成的页面，我们可以考虑服务端渲染，在服务端将页面结构生成好然后再返回给浏览器。

现在比较流行的前端框架，比如angularjs、vue和react都是以单页形式为主的，直接去使用他们就是不利于SEO的，当然他们也都提供了服务端渲染的方案去优化SEO。

2、了解项目的展现目标用户（浏览器的兼容性）

还有就需要去了解我们的目标用户。其实目标用户直接关系互我们系统对浏览器的兼容性。

比如说我们的目标用户是面对所有互联网用户，没有特定对象的限制，那我们就需要去兼容绝大多数的浏览器，因为我们根本不知道用户会使用什么浏览器。

如果我们的用户只是我们公司内部人员，或者是一些特定的签约用户，这时我们可以去告诉他应该使用什么的浏览器，甚至是限定他们使用什么样的浏览器，这样我们只需要去兼容一些主流的浏览器就可以，甚至是只兼容某一种特定的浏览器。

像我们见过有些系统是只兼容IE的，在其他浏览器上都无法正常运行，也有些系统只能在chrome浏览器上运行，在其他浏览器上无法正常运行的。

然后我们再根据需要兼容的浏览器来选择我们需要使用的技术或框架。因为有些技术或框架只能在主流的浏览器上才能正常运行。

3、了解当前团队人员的技术栈及能力

还需要了解我们团队人的技术栈和能力。我们在选框架时需要选一个目前我们团队成员都会的，或者是都了解的，至少需要有成员对这个框架比较了解，并且可以让其他人很快上手的架构。如果我们选了一个大家都不了解的，大家都需要一边学一边用，这样就会大大降低团队的开发效率，甚至一直在踩坑和摸索中，开发就会停滞不前。

4、了解哪些地方是我们自己可以控制的

还有就是需要了解哪些地方是我们可以控制的，这一块主要体现在流程上，因为很多时候，一个公司有他的一些既定的流程，我们的项目必须需要经过他们的流程最终才能上线，所以我需要考虑我们自己的流程如何去和那些已有的流程对接。

对于那些没有限制的地方，我们可以尽量适合团队和方便方式去做，而那些需要和已有流程对接的地方，那些流程又不是我们所能控制的，那我们就必须在遵守他们规范，以便和去他们对接。比喻我们的产品上线，必须要经过公司统一的上线流程，这时我们就需要了解这个流程需要我们提供给他们什么样的东西，我们只有按照他们的规范去提供，才能很顺利的做好接入。

5、适时调整

还有就是我们最开始的架构再使用一段时间后，多多少少会出现一些问题，这里我们就需要针对这些问题做调整，因为我们在搭建一个架构时，不可能能够想到开发中可能出现的所有问题，只能出现问题时做去做调整。所以说一个合适的架构并不是直接搭建出来的，而是在开发过程中慢慢调整出来的。

苏宁视频云的前端架构

接下来我们再说说我们苏宁视频云前端的架构的演变历程。

这张图是我们苏宁视频云的商户端的控制台页面。从这张图可以看出来，这是一个很典型的控制台的页面结构，主要分成3个大的部分。

最上面是页面的主导航，然后左边是一个大的功能模块中的子导航，右边是页面需要显示的具体内容。

其实我们在新开一个项目的时候，在做框架的选型时也是可以根据页面结构去做一些参考。去选择一些适合我们页面结构的技术去做开发，也会大大降低我们开发的复杂度，比如我们的页面需要做成一个单页的形式，我们就可以去选一些MVC或MVVM的架构来做。

苏宁视频云前端架构共分为三个阶段，明天我们将详细介绍三个阶段项目架构以及其中的问题，请大家继续关注苏宁视频云订阅号。

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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31559352/viewspace-2217540/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/31559352/viewspace-2217540/