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

传统后台架构

上古时代

上古时代

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!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 等。

Ajax时代

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

前端 MV* 时代

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

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

Node全栈&同构

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

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

有了服务端渲染的基础，后端和前端的路由也可以做到统一。
同构的实现弥补了前面提到的单纯前端实现的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

Web 进化的更多相关文章

  1. .net core快速上手

    2014年11月12日的Connect ();开发者活动上宣布将.NET堆栈基于MIT协议开源,并且提供开源保证,托管在Github上.当时的版本与最终目标相距甚远,然而有一点可以肯定的是,这是一个与 ...

  2. Ajax：HyperText/URI, HTML, Javascript, frame, frameset, DHTML/DOM, iframe, XMLHttp, XMLHttpRequest

    本文内容 Ajax 诞生 促使 Ajax 产生的 Web 技术演化 真正 Ajax Ajax 与 Web 2.0 Ajax 背后的技术 2008 年毕业,2011 年看了<Ajax 高级程序设计 ...

  3. javascript快速入门22--Ajax简介

    Ajax是什么? 首先,Ajax是什么?一个很酷的新兴词汇!仅仅是某种早就有了的技术的一种新说法而已! Ajax是指一种创建交互式网页应用的网页开发技术.要谈到网页应用程序,则必须从WEB的历史来讲: ...

  4. PHP01 LAMP网站构建

    学习要点 什么是web? 开发动态网站所需的web构件? 几种主流web应用程序平台? HTTP协议与web的关系? Web的工作原理? LAMP网站开发组合概述? 如何学习PHP? 什么是Web? ...

  5. python web的进化历程

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 阶段1 socket服务端和客户端都自己编写 实现访问8080端口,返回一个'hello wo ...

  6. Web 网站进化

    01-初始阶段   应用程序.数据库.文件等所有资源都在一台服务器上 02-应用服务与数据服务分离 应用服务器 要处理大量的业务逻辑,所以需要更好更快更强大的 CPU 数据库服务器 需要快速的进行磁盘 ...

  7. 2016年Web前端面试题目

    以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正.:) HTML/CSS部分 1. ...

  8. 语义网 （Semantic Web）和 web 3.0

    语义网=有意义的网络. "如果说 HTML 和 WEB 将整个在线文档变成了一本巨大的书,那么 RDF, schema, 和 inference languages 将会使世界上所有的数据变 ...

  9. WCF、Web API、WCF REST、Web Service比较

    原文地址:http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-and- ...

随机推荐

  1. HTML JS 数据校验

    用到了html字符串校验,这里记录一下. <html> <head> <script type="text/javascript"> funct ...

  2. 使用C#反射机制访问类的私有成员【转】

    首先我必须承认访问一个类的私有成员不是什么好做法.大家也都知道私有成员在外部是不能被访问的.而一个类中会存在很多私有成员:如私有字段.私有属性.私有方法.对于私有成员访问,可以套用下面这种非常好的方式 ...

  3. C# xml 常规 保护 方法总结

    一 使用xsd模式文件验证xml文件: xml文件: <?xml version="1.0" encoding="utf-8" ?> <Boo ...

  4. F分布

    定义:设X1服从自由度为m的χ2分布,X2服从自由度为n的χ2分布,且X1.X2相互独立,则称变量F=(X1/m)/(X2/n)所服从的分布为F分布,其中第一自由度为m,第二自由度为n.[1] F分布 ...

  5. GOOD BLOG URL

    1TEST http://www.cnblogs.com/Javame/p/3653509.html 综合 http://shiyanjun.cn/

  6. 简单实用的extend对象合并

    /** * 合并对象 * 示例:o = extend({ a: 'a' }, o); */ function extend(s, t) { if (!s) { return {}; } if (!s) ...

  7. 微软BI 之SSAS 系列 - 多维数据集中度量值设计时的聚合函数 (累加性_半累加性和非累加性)

    在 SSAS 系列 - 实现第一个 Cube 以及角色扮演维度,度量值格式化和计算成员的创建 中主要是通过已存在的维度和事实数据创建了一个多维数据集,并同时解释了 Role-Playing Dimen ...

  8. Linux中在线安装Mysql和修改密码设置服务启动

    一.说明:本文教大家在linux下在线安装mysql.网上的很多文章写的太乱,我们只取操作最方便的在线安装方式.本文以Centos为例. 二.安装过程. 1.安装客户端和服务端: (1)检查是否已经安 ...

  9. 保密员(baomi)

    #include<iostream> #include<string> #include<stdio.h> #include<algorithm> #i ...

  10. 算法笔记_222:串中取3个不重复字母(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 从标准输入读入一个由字母构成的串(不大于30个字符). 从该串中取出3个不重复的字符,求所有的取法. 取出的字符,要求按字母升序排列成一个串. 不同 ...