前端框架思路探讨

前后端的技术已经发展了很多年了，但是我们有很多问题或者很多思考的高度依旧是在围绕工程打转，比如实现某个效果的页面。我尝试站在时间的长河边，去思考一下前端和后端技术发展的方向问题，并给出一些未来前端的发展方向。

一、网站发展简史及语言职责
让我们回顾一下网站开发的一些历史：

1. 静态网页 (html)
2. 动态网页（php, jsp）
3. 前端技术产生(applet, javascript)

从上面这段历史，我们能看整个网站的开发核心是html，后端和前端技术均是为了丰富html而逐步发展起来的。下面我们来看看各种web相关的语言所负责的职责：

名称	职责	备注
html	负责web页面的结构	因为该原因，,等标签逐步退出历史舞台
css	负责web页面的样式
js	负责web页面的交互
后端(java,php,node等)	负责页面的数据

从这个职责表中，我们可以看出每种语言各司其职，整个系统运转很完美。但是细究内容，我们会发现有一件事件是在前后端发展史上一直争斗不休的问题，是一个绕不过去的问题: data -> html，一般我们也称之为渲染。渲染问题是一个较复杂的问题，而且涉及到整个web中的各种语言，是矛盾的集中产生地，针对渲染的问题，目前有三种解决方案：

方案	代表技术	描述	优点	缺点
后端负责渲染	php, jsp等	由后端将数据等生成html，js仅负责页面交互	1.技术成熟2.逻辑简单，数据直接通过内存传递3.利于爬虫	1.前端需要了解后端语言，对前端极不友好2.代码耦合紧密，不易维护3.消耗服务器资源
第三方负责渲染	smarty, twig等	在后端与前端之间引入第三方模板系统，来解决渲染问题	1. 前后端解耦 2.对爬虫友好3.逻辑简单	1.前后端都需要再学习一门模板语言2.消耗服务器资源
前端负责渲染	vue, react,angular等	后端所有的数据都通过接口来传递，js拿到数据后负责渲染，将数据生成为html	1.前后端开发简单 2.服务器压力降低3.代码拆分，解耦	1.对爬虫不友好 2.数据传递很复杂3.技术不成熟4.渲染成为前端开发的主要矛盾

此处，我无意讨论哪种方式好或者哪种不好。各种模式均有其适用的场景和环境，因此，我们可以根据实际情况来选择。但本质上我还是想说的事情是：渲染是前后端模式中的一个核心问题：既然html代表页面的结构，那么页面结构到底是由data决定还是由样式和交互来决定？

二、vue等框架的核心问题

2.1 前端框架发展历程
下面，我们来看看前端框架的发展历程

• javascript 原生js
• 工具集：jquery
• mvc框架: BackboneJs, EmberJs等
• mvvm框架：vue等

2.2 框架设计的思路
正常框架设计时应该是针对某一类问题，找到这类问题的主线，通过各种设计模式和代码复用，解决主线；当我们解决了主线时，之前的支线会成为主要矛盾，然后重复上述过程。
那么，我们来看一下，早期前端开发的主要矛盾：

1、jquery时代。
页面由后端渲染生成，js的主要的开发问题为: 给dom/页面加上侦听事件，等待事件发生，处理事件（主要有ajax, dom操作等）。

2、 vue。

• 整个页面在第一次请求后，被vue接管。
• vue根据url或用户操作，获取数据，渲染为html。
• vue加上侦听事件，等待事件发生，处理事件。

所以，我们从vue可以看出，vue极大地解决了之前jquery时代中所遇见的dom操作，事件绑定的问题，使得vue比jquery在处理此类事件时，要便利很多。但是与此同时，也给前端带来了新的工作——渲染。

渲染这项工作是极为复杂的，后端曾经花了极大的精力来解决该问题。但是，当渲染被前端接手后，前端并没有认真去考虑如何来解决该问题，它逐步变成一个大麻烦，在不断侵蚀前端工程师的美好年华。

三、渲染的解决之道
3.1 后端框架的一般过程

后端框架一般过程

• 用户通过浏览器发送请求给服务器
• 服务器会将请求通过路由分发到某一个controller/Action。
• Controller/Atcion通过Model从数据库中获取数据。
• 通过View来渲染数据。
• 最后Controller/Action将渲染后的数据返回给用户

3.2 前端渲染时的逻辑结构
有vue之后，我们来看一下整体的逻辑结构图：

vue逻辑结构

• 用户先获取带有vuejs的基本页面，整个页面被vue接管.
• 用户的操作被controller接管
• controller通过http等获取数据
• 通过view来渲染数据，最终呈现给用户。
• controller保持侦听事件，等待特定事件发生。

我们可以看见，与后端渲染时，基本是同一个图形，唯一的不同就是把数据库连接换成http连接，而vue是没有Model的。

vue框架是有controller, viewModel(data)，view的，但是vue框架少了最重要的一层Model层，而Model层正是整个系统中的业务逻辑聚集地，导致我们不得不把业务逻辑散乱地放置于Controller中。虽然vuex能部分地解决问题，但是并没有从根源上来解决。因此，要解决渲染的问题，Model层或者说数据层是极为重要的一层。

具体的解决方法和实现下一次再讨论。