JS入门到入土之前端发展历史

2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。因为，Backbone 认为前端 Controller 与后端不同，不需要、也不应该处理业务逻辑，只需要处理 UI 逻辑，响应用户的一举一动。所以，数据处理都放在后端，前端只用事件响应处理 UI 逻辑（用户操作）。

后来，更多的前端 MVC 框架出现。另一些框架提出 MVVM 模式，用 View Model 代替 Controller。MVVM 模式也将前端应用分成三个部分。

Model：读写数据
View：展示数据
View-Model：数据处理

View Model 是简化的 Controller，所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处理好的数据，不含其他逻辑。也就是说，Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。

这个模型的特点是 View 绑定 View Model。如果 View Model 的数据变了，View（视图层）也跟着变了；反之亦然，如果用户在视图层修改了数据，也立刻反映在 View Model。整个过程完全不需要手工处理。

4、SPA 阶段

前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page application）。

所谓 SPA，就是指在一张网页（single page）上，通过良好的体验，模拟出多页面应用程序（application）。用户的浏览器只需要将网页载入一次，然后所有操作都可以在这张页面上完成，带有迅速的响应和虚拟的页面切换。

随着 SPA 的兴起，2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。

目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。

二、浏览器发展历史

1.世界上第一个开发出浏览器的人

蒂姆·伯纳斯－李建立的第一个网站（也是世界上第一个网站）是http: //info. cern. ch/，它于1991年8月6日上网，它解释了万维网是什么，如何使用网页浏览器和如何建立一个网页服务器等等。蒂姆·伯纳斯－李后来在这个网站里列举了其它网站，因此它也是世界上第一个万维网目录。

èå§Â·ä¼¯çº³æ¯Â·æ

2.现如今主流的浏览器及其内核

IE浏览器

使用感受：

兼容性最好。这是大家都知道的。
使用最为方便因为你装系统就会给你带个IE所以无需再下载。
漏洞最多。几乎所以得浏览器攻击病毒都是针对IE的所以使用IE最容易被攻击。（包括IE内核的浏览器）
流氓软件的聚集地。很多流氓软件都是加载在IE上的。

IE浏览器内核：Trident内核，也是俗称的IE内核。

å¾ç

Firefox浏览器

使用感受：

风格简单
速度快
安全性高
拓展性强

Firefox浏览器内核：Gecko内核，俗称Firefox内核。

å¾ç

Safari浏览器

苹果公司研发的网络浏览器

使用感受：

界面也比较的简单，主要由前进/后退/书签/添加书签按钮、地址栏、搜索栏、标签栏、浏览区域所组成。
该浏览器已支持Windows平台，但是与运行在macOS上的safari相比，有些功能出现丢失。

Safari浏览器内核：Webkit内核。

Safari

Chrome 浏览器

使用感受：

不易崩溃
速度快
几乎隐身
搜索简单
标签简单，更加安全。

Google Chrom内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核。

å¾ç

Opera浏览器

使用感受：

强大的内核和领先的云端转码技术，可使访问速度提升5到10倍，使上网流量节省最高达95%。
支持智能缩放，收拾操作，外观尚酷，个性化UI设计。
支持手机wap、pc端站点全网页浏览，收录小说，转行成PDF。

Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

opera

三、项目的技术架构

1.从服务器渲染到客户端渲染

当下的主流趋势，大部分项目是客户端渲染（前后端分离），个别的项目还是服务器渲染（为了SE0优化），尤其是移动端开发。
前端侧重于页面、样式、交互、数据渲染方面
后端侧重于操作数据库和一些业务逻辑的处理（对数据结构和算法要求很高）
对于web服务器部署两者都可以做，很多公司还是后台去做
ajax/Fetch/跨域..
数据绑定

2.从NativeApp（原生app）到WebApp

Native App是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。

Native App因为位于平台层上方，向下访问和兼容的能力会比较好一些，可以支持在线或离线，消息推送或本地资源访问，摄像拨号功能的调取。其实也就是我们现在使用的基于本地（Andriod\IOS\Metro）运行的APP。

Native App的优势：

提供最佳的用户体验，最优质的用户界面，最华丽的交互
针对不同平台提供不同体验
可节省带宽成本
可访问本地资源
盈利模式明朗
直接运行在操作系统中，性能流畅，可调取手机软硬件信息（授权情况下）
实现更多复杂的功能

Native App的劣势：

移植到不同平台上比较麻烦，不能跨平台开发
维持多个版本的成本比较高
需要通过store或market的确认
盈利需要与第三方分成
内容板块升级（APP重新发版），需要用户的自主安装，信息不能及时同步

其实，只要现在从事移动互联网的CP们，能深深体会到目前原生应用遇到的三大困境：1、虽然用户手机里的Native APP数量在增多，但日均启动个数却在减少；2、用户的使用时长不断向高频Native APP集中，加剧了头部效应；3、对于低频和不知名的Native App，则面临着更严峻的“分发”和“使用”长尾困境。这三大困境对开发者形成了较大的挑战。其中，大部分低频和不知名Native App在应用商店少人问津，无法到达用户手机。

Web无需安装，对设备碎片化的适应能力优于App，它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验升级，使得专为iPhone等有WebKit浏览内核的移动设备开发的Web应用，也有了如App一般流畅的用户体验。（就是一种基于浏览的应用，技术咱就不管了）。

Web App的优势：

开发成本低
适配多种移动设备成本低
跨平台和终端
迭代更新容易，每一次打开都是重新阅览页面（重新从服务器获取页面信息），这样只要服务器对页面板块内容更新，客户端看到的都是最新的内容
无需安装成本

Web App的劣势：

Web App自身能力不全面
无法调用语音、摄像头、定位等能力，体验比较差，不如native app
用户很难沉淀下来，建立较为稳固的联系

针对Native app 和 web app的分析，应该也可以大概理解出什么是轻应用了吧！~一般在这种情况下，就会出来另外的一种概念叫融合。记得，曾经乔布斯老爷子有一次谈到这个问题，他说Web是未来，虽然现阶段Native给了用户更好的体验。如果现在的开发者不有效的利用Web技术，那他就落伍了。但如果过分依赖Web，完全不用Native那也未必就是好事。