1.1 網頁開發的前世今生

我們知道，歷史有其獨特性，是無法抹去的。只有牢記歷史，才能更好地面對未來。前端出現的時間不長，迄今為止只有20多年。但這20多年間，前端的變化可以說是翻天覆地的。

1.1.1 是否還記得曾經的前端開發

1994年秋天，網景推出了第一版Navigator，也是這個秋天，萬維網（World Wide Web, W3C）在麻省理工學院計算機科學實驗室成立。同年，CSS的概念被提了出來（之前只有RRP）。幾個月后，一個加拿大人為了追蹤訪問他個人主頁的用戶的數據，開發出PHP的前身。以上種種事件的發生，宣告著前端正式出現在人們的視野中。

萬維網創建的初衷是為了方便歐洲核子研究組織的科學家們查看文檔、上傳論文。這也就解釋了為什么Web網頁都是基于Document的。Document就是用“標記語言+超鏈接”寫成的由文字和圖片構成的HTML頁面，這樣的功能已經完全可以滿足學術交流的需要，所以網頁的早期形態和Document一樣，完全基于HTML頁面，并且所有內容都是靜態的。這也解釋了為什么原生JavaScript（簡稱“JS”）用document.getElementBy獲取頁面元素。

最開始的網頁在很多方面都受到限制，當時JS還沒有出現，沒有任何手段可以對頁面進行修改，就連最簡單的顯示或隱藏都做不到，所以，不管網頁之間的變化有多小，只要有變化，就要重新加載一個頁面。同時本地無法對數據進行任何操作，所有計算都是在服務端完成的。雖說這些在現在看來，可能只是些很好解決的小問題，但是當時的網絡運行不流暢，網速與現在相比完全沒有可比性。所以，在當時用戶提交一個表單后，屏幕首先會出現一片雪白，經過漫長的等待，可能返回一個一模一樣的頁面，只是在輸入框下面出現了一行紅字——用戶名或密碼輸入錯誤！

除此之外，純靜態頁面還帶來了另外一個問題：例如一個電商平臺有1000種商品，就算布局一模一樣，但因為商品不同，還是要寫1000個頁面，即使是修改其中某個商品，困難都不敢想象。

退一步說，就算網速提高了，但是服務器也受不了這種任何數據計算都要請求的情況，不僅是數據的存儲，其數據的處理和返回也對服務器有著極大的要求。所以，前端的數據處理和修改文檔對象模型（Document Object Model,DOM）元素的能力真的很重要。

因此，JS于1995年應運而生，它不僅實現了客戶端的計算任務，而且減輕服務器壓力的用時，降低了網速慢帶來的限制。1996年，微軟又推出了iframe標簽，實現了局部的異步加載。1999年，XMLHttpRequest技術出現，谷歌使用其開發了Gmail和谷歌地圖之后，XMLHttpRequest獲得了巨大的關注。2006年，XMLHttpRequest被W3C正式納入標準，同時有了新的名字——Ajax。

Ajax的出現不僅解決了早期前端的眾多問題，同時將我們從Web網頁時代帶到了Web應用時代，也就是常說的Web 2.0時代，同時提出了前后端分離的概念。

Web網頁時代與Web應用時代的區別是十分巨大的：在Web網頁時代，網頁都是服務端渲染的，服務器先渲染出HTML頁面，之后糅合JS和CSS文件，再發送給瀏覽器，瀏覽器解析這個類似文檔的內容，展示給用戶。如此便把所有壓力都放在服務器，客戶端只負責解析服務器返回的文檔。但是在Web應用時代，客戶端可以自己對數據進行處理，并且做出相應的渲染。不僅分攤了服務器的壓力，同時由于數據量的減少，頁面的反饋速度也提升了，缺點就是對機能提出了一定的要求，但隨著計算機性能的不斷提高，這點要求變得微不足道。

1.1.2 大前端時代的來臨

在Web 2.0時代，網頁在某種程度上被當作一個App，瀏覽器就是運行這個App的容器，在這個App里，前端會對數據進行很多操作，只要不對數據進行永久化修改，就無須請求服務，這使網頁獨立成為一個整體。

jQuery的出現促進了Web 2.0時代的進步，其優雅的語法、符合直覺的事件驅動型的編程思維使其極易上手，因此很快風靡全球，大量基于jQuery的插件構成了一個龐大的生態系統，更加穩固了jQuery作為JS“庫一哥”的地位。

同樣，谷歌的V8引擎也搭了把手，因為即使有了jQuery，若是瀏覽器的解析不到位，依然會制約JS的使用。但V8的出現徹底解決了這個問題，也終止了當時微端對瀏覽器的壟斷。有了V8引擎，瀏覽器可以更好地對JS進行解析，前端機能一下變得過剩。同時ES5也發布出來，前端整體的發展環境得到了很大的提高，邁入了一個嶄新的時代。

在所有準備工作都做好的時候，各大框架出現了，從2009年的AngularJS，到2010年的backbone.js，再到2014年的React、Ember、Vue.js等，這些框架增進了前后端分離的進程。

前后端分離使得前端工程師可以更加專注地開發前端功能，同時避免了前后端共同開發的一些分歧。在前后端分離的架構中，后端只負責按照約定的數據格式為前端提供可調用的API服務即可。前后端之間通過HTTP請求進行交互，前端獲取數據后進行組裝和渲染，最終展示在瀏覽器上。

前后端分離的代碼庫也進行了一定的操作，代碼組織方式如圖1.1所示。

在前后端沒有分離的時代，前端工程師進行開發的時候，必須把整個項目都導入開發工具中，頁面中可能夾雜了些許后端代碼，使項目的修改變得十分復雜，一不小心就可能造成不可預料的后果。

有些前端工程師不滿足于僅僅涉獵前端，但后端語言學習的成本又很高，那怎么辦呢？Node.js是一個不錯的選擇。2009年，Node.js出現了，它是一個基于V8引擎的服務端JS運行環境，類似于一個虛擬機，也就是說，JS在服務端語言中占據了一席之地。至此，僅憑JS一門語言就可以開發整個系統了。

其實Web 2.0的眼光更加長遠，其更多的是放在替代傳統軟件上。Web應用相比傳統的應用有著太多的好處——無須針對系統來開發不用的版本，無須安裝，無須審核，無須升級等。其中最大的好處就是降低了軟件的開發成本。雖然理想很好，但是當前制約Web應用的因素也有很多。例如瀏覽器的處理速度跟不上，對系統功能的調用不完善等。但是目前這些弊端正在漸漸消失，系統權限正在逐步開發出來，Luminosity API、Orientation API、Camera API等日漸完善。谷歌為了促進Web應用的發展，推出了Chromebook，在此款筆記本中，谷歌瀏覽器（Chrome）被整合到系統中，并且系統中只有谷歌瀏覽器這一個應用，用戶的所有操作都是在谷歌瀏覽器中完成的，這足以證明Web應用是完全可行的。

除了Chromebook，還有很多程序可以證明Web應用正在逐漸替代傳統的應用，最有名的應當是微信小程序，開發者只需要在自己的App中嵌入Weex的SDK，就可以通過撰寫HTML/CSS/JS來開發Native級別的Weex界面。Weex界面的生成碼就是一段很小的JS，可以像發布網頁一樣輕松地部署在服務端，然后在App中請求執行。目前，Web應用時代正在如火如荼的發展，相信不久的將來，真的會如阮一峰所說：“未來只有兩種工程師——端工程師（PC端、手機端、TV端、VR端……）和云工程師”。