前端的「前世此生」

時間 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 端
……

雲工程師