前后端的技术已经发展了很多年了，但是我们有很多问题或者很多思考的高度依旧是在围绕工程打转，比如实现某个效果的页面。我尝试站在时间的长河边，去思考一下前端和后端技术发展的方向问题，并给出一些未来前端的发展方向。
一、网站发展简史及语言职责
让我们回顾一下网站开发的一些历史：
- 静态网页 (html)
- 动态网页（php, jsp）
- 前端技术产生(applet, javascript)
从上面这段历史，我们能看整个网站的开发核心是html，后端和前端技术均是为了丰富html而逐步发展起来的。下面我们来看看各种web相关的语言所负责的职责：
| 名称 | 职责 | 备注 |
|---|---|---|
| html | 负责web页面的结构 | 因为该原因，<font>,<color>等标签逐步退出历史舞台 |
| 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层或者说数据层是极为重要的一层。
具体的解决方法和实现下一次再讨论。
网友评论