前端演变 - kylin-qin/Blog GitHub Wiki

诞生

1994年可以看做前端历史的起点，这一年10月13日网景推出了第一版Navigator；
这一年，Tim Berners-Lee创建了W3C；
这一年，Tim的基友发布了CSS。
还是这一年，为动态web网页设计的服务端脚本PHP诞生。

Navigator v0.9

但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力，网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。

1995年Sun公司将Oak语言改名为Java，正式向市场推出。

网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。

总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为"Java+script"并不是偶然的。

Brendan Eich

1995年5月， Brendan Eich为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。
由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。

总的来说，他的设计思路是这样的：

1.借鉴C语言的基本语法；
2.借鉴Java语言的数据类型和内存管理；
3.借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
4.借鉴Self语言，使用基于原型（prototype）的继承机制。

年以后，Brendan Eich还是看不起Java。
如果不是公司的决策，Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者，他一点也不喜欢自己的这个作品
省略500字...

Web 1.0

简单明快的早期时代

适合创业型小项目，不分前后端,页面由 JSP、PHP 等工程师在服务端生成，浏览器负责展现。基本上是服务端给什么浏览器就展现什么，展现的控制在 Web Server 层。

这种模式的好处是：简单明快，本地起一个 Tomcat 或 Apache 就能开发，调试什么的都还好，只要业务不太复杂。

这个时期，为了提高可维护性，可以通过下面的方式实现前端的组件化：

后端为主的 MVC 时代

为了降低复杂度，以后端为出发点，有了 Web Server 层的架构升级，比如 Structs、Spring MVC 等，这是后端的 MVC 时代。

这个阶段的典型问题是：

  1. 前端开发重度依赖开发环境。 这种架构下，前后端协作有两种模式：
    一种是前端写 demo，写好后，让后端去套模板。淘宝早期包括现在依旧有大量业务线是这种模式。好处很明显，demo 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大。 另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发，支付宝是这种模式。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。

  2. 前后端职责依旧纠缠不清。
    Velocity 模板还是蛮强大的，变量、逻辑、宏等特性，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现。Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。

Web 2.0

Ajax 带来的 SPA 时代

历史滚滚往前，2004 年 Gmail 像风一样的女子来到人间，很快 2005 年 Ajax 正式提出，加上 CDN 开始大量用于静态资源存储，于是出现了 JavaScript 王者归来的 SPA （Single Page Application 单页面应用）时代。

这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口。看起来是如此美妙，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：

对于 SPA 应用，有几个很重要的挑战：

  1. 前后端接口的约定。 如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦。这一块在业界有 API Blueprint 等方案来约定和沉淀接口，在阿里，不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。相信这一块会越做越好。

  2. 前端开发的复杂度控制。 SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事情。典型的解决方案是业界的 Backbone，但 Backbone 做的事还很有限，依旧存在大量空白区域需要挑战。

前端为主的 MV* 时代（归功于谷歌V8引擎，提高浏览器计算能力）

为了降低前端开发复杂度，大量框架涌现，比如 EmberJS、KnockoutJS、AngularJS 等等。这些框架总的原则是先按类型分层，比如 Templates、Controllers、Models，然后再在层内做切分，如下图：

好处很明显：

  1. 前后端职责很清晰。 前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful 等接口。

  2. 前端开发的复杂度可控。 前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本的厚度去说明。

  3. 部署相对独立，产品体验可以快速改进。

Node 带来的全栈时代

学艺不精，省略...