Web 进化

时间 2019-11-08

标签 web 进化栏目 HTML 繁體版

原文原文链接

来源于：http://xitu.github.io/2016/05/11/history-of-web/php

传统后台架构

上古时代

上古时代html

<!DOCTYPE html>
<html>
<body>

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
 die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
 echo "<div> id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "</div>";
 }
} else {
 echo "0 results";
}
$conn->close();
?>

</body>
</html>

这种模式很是适合创业型小项目，不分先后端，常常 3-5 人搞定全部开发。页面由 JSP、PHP 等工程师在服务端生成，浏览器负责展示。基本上是服务端给什么浏览器就展示什么，展示的控制在Server 层。前端

后端MVC时代

e2.png
为了下降复杂度，之后端为出发点，有了 Web Server 层的架构升级，好比 thinkPHP 、Laravel、 Spring MVC 等。node

Ajax时代

e3.png
XMLHttpRequest异步调用服务器端来获取数据，并将数据应用在客户端，实现了无刷新的效果，这使得Google Maps依赖其极好的用户体验获取了巨大的成功，Ajax这个概念开始火爆，SPA （Single Page Application 单页面应用）时代就开始了。mysql

前端 MV* 时代

e4.png
为了下降前端开发复杂度，除了 Backbone，还有大量框架涌现，好比 EmberJS、KnockoutJS、AngularJS、Vue、React等等。git

好处很明显：
一、先后端职责很清晰。前端工做在浏览器端，后端工做在服务端。清晰的分工，可让开发并行，测试数据的模拟不难，前端能够本地开发。后端则能够专一于业务逻辑的处理，输出 RESTful 等接口。
二、前端开发的复杂度可控。前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有不少不少讲究。并不是越强大越好，限制什么，留下哪些自由，代码应该如何组织，全部这一切设计，得花一本的厚度去说明。
三、部署相对独立，产品体验能够快速改进。
但依旧有不足之处：
一、代码不能复用。好比后端依旧须要对数据作各类校验，校验逻辑没法复用浏览器端的代码。若是能够复用，那么后端的数据校验能够相对简单化。二、全异步，对 SEO 不利。每每还须要服务端作同步渲染的降级方案。
三、性能并不是最佳，特别是移动互联网环境下。
四、SPA 不能知足全部需求，依旧存在大量多页面应用。URL Design 须要后端配合，前端没法彻底掌控。github

Node全栈&同构

前端为主的 MV* 模式解决了不少不少问题，但如上所述，依旧存在很多不足之处。随着 Node.js 的兴起，JavaScript 开始有能力运行在服务端。web

React 同构渲染
975d4efef933f05fc62a68d27e36e11a_r.png
Koa+Reactsql

有了服务端渲染的基础，后端和前端的路由也能够作到统一。
同构的实现弥补了前面提到的单纯前端实现的SPA的提到先后端代码复用，SEO，URL Design这些问题。数据库

引入NodeJS实现先后端分离

51d06ddc3f781892df0a19a053c249bb5d0a4108.jpg

为何要先后端分离？

因为以前的Web基本上都是基于后端的MVC框架，架构决定了前端只能依赖后端。前端写好静态demo，而后根据分工前端或者后端改写成相应的模版语言，好比 blade，smarty等等。这种基于后端环境开发是很痛苦和低效率的，后端无法摆脱对展示的强关注，从而专心于业务逻辑层的开发，前端也吐槽后端乱改他们的代码。因此加上一个nodejs中间层来分离。

怎么作先后端分离？

前端：负责视图和交互层。
后端：负责Model层，业务处理/数据等。

e6.png

掘金的架构

leancloud

leancloud 是核心功能基于 Clojure 开发的云端数据存储解决方案，不一样于传统关系型数据库，提供了标准的 REST API 和在其上封装的各平台的 SDK，数据对象以 JSON 格式随存随取，全平台支持数据增删改查操做。

掘金先后端架构

e5.png
掘金使用了Vue做为核心的前端框架，部署在leancloud云引擎的Nodejs服务器作为API服务器。Nodejs直接对接以json为数据模型的Leancloud。

参考
https://github.com/lifesinger/blog/issues/184
http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
https://zhuanlan.zhihu.com/p/20669111