前端的“前世今生”

Posted yuanffsy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端的“前世今生”相关的知识,希望对你有一定的参考价值。

引言: 本人自2017年5月29日决定入“前端坑”以来,到现在突然想了解一下前端的“前世今生”,看看她到底是如何修炼成神,被大家所崇拜并有无数人跟随的。我这个草根到15年的时候才了解到“大神”,真是相见恨晚啊!

  我虽比“大神”早出生,但是没有您成长的快啊!我对您的成长史也是借鉴别人的。大家参考参考。。。。  

    前端发展里程碑

     从静态走向动态

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

  万维网(WWW)是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的,这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的html页面,这样的功能已经完全满足学术交流的需要,所以网页的早期形态和Document一样,完全基于HTML页面,并且所有内容都是静态的。

  1995年网景推出了javascript,实现了客户端的计算任务(如表单验证)。

       1996年微软推出了iframe标签,实现了异步的局部加载。

  1999年W3C发布第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生,但是Ajax这个词是在六年后问世的,特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后,Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术,它标识着Web2.0时代的到来。

  2006年,XMLHttpRequest被W3C正式纳入标准。

早期的网页开发是由后端主导的,前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery,jQuery主要用于操作DOM,其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手,因此很快风靡全球,大量基于jQuery的插件构成了一个庞大的生态系统,更加稳固了jQuery作为JS库一哥的地位。

  2009年AngularJS诞生,随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前后端分离可谓大势所趋。

  2014年,第五代HTML标准发布。H5是由浏览器厂商主导,与W3C合作制定的一整套Web应用规范,至今仍在不断补充新的草案。

 

        从前端走向全端

 

       2009年Ryan Dahl发布了node,node是一个基于V8引擎的服务端JavaScript运行环境,类似于一个虚拟机,也就是说js在服务端语言中有了一席之地。如果说ajax是前端的第一次飞跃,那么node可算作前端的第二次飞跃。它意味着JavaScript走出了浏览器的藩篱,迈出了全端化的第一步。

 

       一种流行的组合就是利用Express和Mongo搭建服务端程序。

 

 


 

什么是前端

 

  • 前端:针对浏览器的开发,代码在浏览器运行

  • 后端:针对服务器的开发,代码在服务器运行

 


 

前后端不分的时代

 

互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。

 

  1. 后端收到浏览器的请求

  2. 生成静态页面

  3. 发送到浏览器

 


 

后端 MVC 的开发模式

 

那时的网站开发,采用的是后端 MVC 模式。

 

  • Model(模型层):提供/保存数据

  • Controller(控制层):数据处理,实现业务逻辑

  • View(视图层):展示数据,提供用户界面

 

前端只是后端 MVC 的 V。

 


 

以 PHP 框架 Laravel 为例。

 

 

 


 

前端工程师的角色

 

那时的前端工程师,实际上是模板工程师,负责编写页面模板。

 

后端代码读取模板,替换变量,渲染出页面。

 


 

典型的 PHP 模板

 

<html>
<head>
<title>Car {{ $car-&gt;id }}</title>
</head>
<body>
<h1>Car {{ $car-&gt;id }}</h1>
<ul>
<li>Make: {{ $car-&gt;make }}</li>
<li>Model: {{ $car-&gt;model }}</li>
<li>Produced on: {{ $car-&gt;produced_on }}</li>
</ul>
</body>
</html>

 


 

Ajax

 

Ajax 技术诞生,改变了一切。

 

  • 2004年:Gmail

  • 2005年:Google 地图

 

前端不再是后端的模板,可以独立得到各种数据。

 


 

Web 2.0

 

Ajax 技术促成了 Web 2.0 的诞生。

 

  • Web 1.0:静态网页,纯内容展示

  • Web 2.0:动态网页,富交互,前端数据处理

 

从那时起,前端变得复杂了,对前端工程师的要求越来越高。

 


 

前端 MVC 框架

 

前端通过 Ajax 得到数据,因此也有了处理数据的需求。

 

前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。

 

  • 2010年,Backbone.js

 

 

 


 

Backbone.js

 

Backbone 将前端代码分成两个基本部分。

 

  • Model:管理数据

  • View:数据的展现

 

 

 


 

前端 Controller

 

Backbone 只有 M 和 V,没有 C。因为,前端 Controller 与后端不同。

 

  • 不需要,也不应该处理业务逻辑

  • 只需要处理 UI 逻辑,响应用户的一举一动

 

所以,前端 Controller 相对比较简单。Backbone 没有 C,只用事件来处理 UI 逻辑。

 

  var AppView = Backbone.View.extend({    // ...
    events: {  
     "keypress #new-todo": "createOnEnter",
  "click #clear-completed": "clearCompleted",
    "click #toggle-all": "toggleAllComplete" }, });

 


 

Router

 

前端还有一种天然的方法,可以切换视图,那就是 URL。

 

通过 URL 切换视图,这就是 Router(路由)的作用。以 Backbone 为例。

 

 

 


 

App.Router = Backbone.Router.extend({
  routes: { ‘‘: ‘index‘,
    ‘show‘: ‘show‘
  },
  index: function() {
    $(document.body).append("调用了 Index 路由");
  },
  show: function() {
    $(document.body).append("调用了 Show 路由");
  },
});

 


 

MVVM 模式

 

另一些框架提出 MVVM 模式,用 View Model 代替 Controller。

 

  • Model

  • View

  • View-Model:简化的 Controller,唯一作用就是为 View 提供处理好的数据,不含其他逻辑。

 

本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。

 

 

 


 

SPA

 

前端可以做到:

 

  • 读写数据

  • 切换视图

  • 用户交互

 

这意味着,网页其实是一个应用程序。

 

SPA = Single-page application

 

2010年后,前端工程师从开发页面,变成了开发”前端应用“(跑在浏览器里面的应用程序)。

 


 

传统的架构

 

 

 

单页应用的架构

 

 

 

多了一个前端 MVC 层

 


 

Angular

 

Google 公司推出的 Angular 是最流行的 MVVM 前端框架。

 

它的风格属于 HTML 语言的增强,核心概念是双向绑定。

 

 

 


 

示例:Angular 的双向绑定

 


 

<div ng-app="">
  <p>
    姓名 :
    <input type="text" ng-model="name" placeholder="在这里输入您的大名">
  </p>
  <h1>你好,{{name}}</h1></div>

 


 

Vue

 

Vue.js 是现在很热门的一种前端 MVVM 框架。

 

它的基本思想与 Angular 类似,但是用法更简单,而且引入了响应式编程的概念。

 

 

 


 

示例:Vue 的双向绑定

 


 

HTML 代码

 

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>

 

JS 代码

 

var journal = new Vue({
  el: ‘#journal‘,
  data: {
    message: ‘Your first entry‘
  }
});

 


 

前后端分离

 

  • Ajax -> 前端应用兴起

  • 智能手机 -> 多终端支持

 

这两个原因,导致前端开发方式发生根本的变化。

 

前端不再是后端 MVC 中的 V,而是单独的一层。

 


 

REST 接口

 

前后端分离以后,它们之间通过接口通信。

 

后端暴露出接口,前端消费后端提供的数据。

 

后端接口一般是 REST 形式,前后端的通信协议一般是 HTTP。

 


 

Node

 

2009年,Node 项目诞生,它是服务器上的 JavaScript 运行环境。

 

Node = JavaScript + 操作系统 API

 

 

 


 

Node 的意义

 

  • JavaScript 成为服务器脚本语言,与 Python 和 Ruby 一样

  • JavaScript 成为唯一的浏览器和服务器都支持的语言

  • 前端工程师可以编写后端程序了

 


 

前端开发模式的根本改变

 

  • Node 环境下开发

  • 大量使用服务器端工具

  • 引入持续集成等软件工程的标准流程

  • 开发完成后,编译成浏览器可以运行的脚本,放上 CDN

 


 

全栈工程师

 

前端工程师正在转变为全栈工程师

 

  • 一个人负责开发前端和后端

  • 从数据库到 UI 的所有开发

 


 

全栈技能

 

怎样才能称为全栈工程师?

 

  • 传统前端技能:HTML、JavaScript、CSS

  • 一门后端语言

  • 移动端开发:ios / android / HTML5

  • 其他技能:数据库、HTTP 等等

 


 

软件行业的发展动力

 

历史演变:前后端不分 -> 前后端分离 -> 全栈工程师

 

动力:更加产业化、大规模地生产软件

 

  • 效率更高

  • 成本更低

 

通用性好、能够快速产出的技术最终会赢,单个程序员的生产力要求越来越高。

 


 

H5 就是一个最好的例子

 

为什么 H5 技术会赢得移动端?

 

  • 开发速度快:Native 需要重新编译才能看到结果,H5 是即时输出

  • 开发成本低:Native 需要两个开发团队,H5 只要一个

  • 快速发布:安卓 Native 新版本需要24小时,iOS 需要 3 ~ 4 天,H5 可以随时更新

 


 

未来软件的特点

 

  • 联网

  • 高并发

  • 分布式

  • 跨终端

 

现在基于 Web 的前端技术,将演变为未来所有软件的通用的 GUI 解决方案。

未来只有两种软件工程师

  • 端工程师

    • 手机端

    • PC 端

    • TV 端

    • VR 端

    • ……

  • 云工程师

推荐阅读:前端发展史 

     前端发展史

 

以上是关于前端的“前世今生”的主要内容,如果未能解决你的问题,请参考以下文章

了解微前端,深入前端架构的前世今生

了解微前端,深入前端架构的前世今生

前端的“前世今生”

一个前端大佬的十年回顾 | 漫画前端的前世今生

JavaScript的前世今生

Lambda的前世今生