前端的“前世此生”

时间 2019-11-22

标签前端前世此生繁體版

原文原文链接

引言：本人自2017年5月29日决定入“前端坑”以来，到如今忽然想了解一下前端的“前世此生”，看看她究竟是如何修炼成神，被你们所崇拜并有无数人跟随的。我这个草根到15年的时候才了解到“大神”，真是相见恨晚啊！html

　　我虽比“大神”早出生，可是没有您成长的快啊！我对您的成长史也是借鉴别人的。你们参考参考。。。。　　前端

　前端发展里程碑

　从静态走向动态node

1994年能够看作前端历史的起点，这一年10月13日网景推出了初版Navigator；这一年，Tim Berners-Lee建立了W3C；这一年，Tim的基友发布了CSS。仍是这一年，为动态web网页设计的服务端脚本PHP诞生。程序员

　　万维网（WWW）是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为何Web网页都基于Document。Document就是用标记语言+超连接写成的由文字和图片构成的HTML页面，这样的功能已经彻底知足学术交流的须要，因此网页的早期形态和Document同样，彻底基于HTML页面，而且全部内容都是静态的。web

　　1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证）。ajax

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搭建服务端程序。

什么是前端

前端：针对浏览器的开发，代码在浏览器运行
后端：针对服务器的开发，代码在服务器运行

先后端不分的时代

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

后端收到浏览器的请求
生成静态页面
发送到浏览器

后端 MVC 的开发模式

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

Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展现数据，提供用户界面

前端只是后端 MVC 的 V。

以 PHP 框架 Laravel 为例。

前端工程师的角色

那时的前端工程师，其实是模板工程师，负责编写页面模板。

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

典型的 PHP 模板

<html>
<head>
<title>Car {{ $car->id }}</title>
</head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->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 端
……

云工程师