前端技術(shù)分享--前端發(fā)展脈絡(luò)
以過往技術(shù)的發(fā)展，來看待每項(xiàng)技術(shù)引入的原因和所解決的問題。這種做法的意義無疑是巨大的。因此，今天在這里和大家對(duì)前端發(fā)展脈絡(luò)進(jìn)行一個(gè)梳理。希望我們能從歷史當(dāng)中對(duì)前端技術(shù)的發(fā)展有一個(gè)更清晰的認(rèn)識(shí)，也對(duì)現(xiàn)在我們使用的技術(shù)有一個(gè)更深刻的思考。
石器時(shí)代
前端技術(shù)的發(fā)展，從一開始就脫離不了另一項(xiàng)技術(shù)的發(fā)展。也就是我們朝夕相處的瀏覽器。最早的一款瀏覽器是網(wǎng)景公司于1994年推出的NCSAMosaic瀏覽器。而瀏覽器最開始的功能，也只能瀏覽一些靜態(tài)網(wǎng)頁。就好像一個(gè)能瀏覽網(wǎng)絡(luò)上word的word閱讀器。可能這也就是web中document這個(gè)對(duì)象最初的含義。
毫無疑問這個(gè)時(shí)候是最最原始的時(shí)候，最最初創(chuàng)的時(shí)期。
動(dòng)態(tài)頁面時(shí)期
一個(gè)新的時(shí)期的到來一定是有一項(xiàng)新技術(shù)的誕生，也一定是解決了上一個(gè)時(shí)代的一些問題。
那么在之前我們有什么樣的問題呢？
一切的一切都是靜態(tài)的，沒有流動(dòng)的數(shù)據(jù)，只有不變的文本。
可能更直白地說，比如你有一千種產(chǎn)品，每個(gè)產(chǎn)品又有四中顏色型號(hào)。那么你就需要寫4X1000個(gè)文檔。OK然后需求變了，你的產(chǎn)品售價(jià)打折，然后你又得修改這4X1000個(gè)文檔把價(jià)格改回來。
在這些痛點(diǎn)的激勵(lì)之下1994年P(guān)HP出現(xiàn)了，之后有涌現(xiàn)了如：JSP，ASP等一大批數(shù)據(jù)模板技術(shù)。通過將數(shù)據(jù)嵌套到文檔當(dāng)中，當(dāng)瀏覽器向服務(wù)器請(qǐng)求頁面時(shí)動(dòng)態(tài)的生成結(jié)果頁面。從而使web的世界從靜態(tài)邁向了動(dòng)態(tài)。
而也正是這種數(shù)據(jù)模板的模式，使得MVC模式開始嶄露頭角。通過Model數(shù)據(jù)層，Controller控制層，View顯示層的分層來解耦程序。也正是這種分層，使得web當(dāng)中出現(xiàn)了模糊的分工情況。也有了前端這一概念的出現(xiàn)。
這一時(shí)期的工作模式大概是：由前端編寫頁面，再由后端代碼讀取模板，替換變量最后渲染出結(jié)果頁面?；蛘邔?duì)界面美觀度要求不高時(shí)，后端代碼一把梭了。
JSP等技術(shù)的出現(xiàn)也有其相關(guān)的時(shí)代背景，時(shí)至今日依然有不少公司依然在使用JSP技術(shù)(其中就包括我們自己公司)。對(duì)于一些小的項(xiàng)目，使用JSP依然是一種迅速開發(fā)的好選擇。但是隨著需求的增加，他也會(huì)產(chǎn)生一些缺點(diǎn)令人難以接受。
1、 前后端耦合。
隨著項(xiàng)目需求的變多變大。功能代碼和視圖代碼依然部分耦合在一起，對(duì)后期運(yùn)維造成困難。
2、 用戶體驗(yàn)差。
JSP即使解決了數(shù)據(jù)變動(dòng)的問題，但是依然每次數(shù)據(jù)變動(dòng)都需要重新加載整個(gè)頁面。這也意味著用戶每次出現(xiàn)一點(diǎn)改動(dòng)都會(huì)看到頁面刷新一次。同時(shí)移動(dòng)端的出現(xiàn)，更使這一點(diǎn)得到了放大。
3、技術(shù)棧混雜
單一開發(fā)模式Java開發(fā)人員難以開發(fā)出美觀的頁面，而前端切圖后端讀取模板。則大大加大了流程的復(fù)雜性，也拉長(zhǎng)了項(xiàng)目周期。
而正是這些令人難以接受的缺點(diǎn)，促使技術(shù)人員不斷推陳出新。也出現(xiàn)了讓web技術(shù)跨越世代的一項(xiàng)技術(shù)。
分離時(shí)代
解決上一個(gè)時(shí)代的問題，對(duì)于今天的我們來講已經(jīng)不是一個(gè)很難回答的問題了。但是當(dāng)時(shí)能夠想出解決方案的人，毫無疑問的是個(gè)天才。
前后端代碼耦合，技術(shù)?；祀s，那我就干脆把web技術(shù)人員分成兩撥一波寫后臺(tái)，一波寫前臺(tái)不就行了嘛。
但是不行啊。后臺(tái)只能一個(gè)頁面一個(gè)頁面的發(fā)送，體驗(yàn)還是很差啊。
那就別整個(gè)頁面發(fā)了，只給數(shù)據(jù)過來，怎么顯示前端來決定！
于是乎，找到了關(guān)鍵，關(guān)鍵就是怎么局部更新網(wǎng)頁呢，怎么只向前臺(tái)發(fā)送數(shù)據(jù)而不是發(fā)送頁面呢？
答案就是AJAX。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
Ajax誕生于1998年，但對(duì)于它更為重要的是另三個(gè)節(jié)點(diǎn)：
2004 年：Gmail
2005 年：Google 地圖
2006 年：Ajax 被 W3C 正式納入標(biāo)準(zhǔn)
可以想象如果沒有Ajax我們要實(shí)現(xiàn)一些功能應(yīng)當(dāng)怎么實(shí)現(xiàn)呢？
（地圖應(yīng)用，地磅稱重）
同時(shí)隨著Ajax的推出，JS在前端中所占份額越來越重。第二次瀏覽器大戰(zhàn)悄然展開。
至此前端也從1.0世代進(jìn)入2.0世代了。
Web 2.0 時(shí)代：動(dòng)態(tài)網(wǎng)頁，富交互，前端數(shù)據(jù)處理
工業(yè)時(shí)代
隨著前后端分離開之后，前端技術(shù)得到了極大程度的發(fā)展。而在這一段時(shí)間當(dāng)中JQuery獨(dú)領(lǐng)風(fēng)騷，大量基于jQuery的插件和依賴構(gòu)成了一個(gè)龐大的生態(tài)系統(tǒng)，從而穩(wěn)固了JQuery為JS庫一哥的位置。
而伴隨信息化時(shí)代的到來，對(duì)前端技術(shù)的需求也越來越深，需求不斷加深也推動(dòng)了新的技術(shù)的出現(xiàn)。一場(chǎng)堪比Ajax帶來變化的巨變也在悄悄進(jìn)行。
我們依然先來看看新的痛點(diǎn)在哪里
1、 JQuery面對(duì)大規(guī)模dom操作依然過于緩慢。
2、 每個(gè)頁面都是分離的，無法統(tǒng)一管理狀態(tài)、數(shù)據(jù)。
于是我們提出了一個(gè)新的概念：數(shù)據(jù)驅(qū)動(dòng)。也根據(jù)這一點(diǎn)，提出了一種新的開發(fā)模式：MVVM。
傳統(tǒng)的模式：
響應(yīng)用戶操作->發(fā)送數(shù)據(jù)給后臺(tái)->拿到新數(shù)據(jù)->更新UI（維護(hù)DOM）
數(shù)據(jù)驅(qū)動(dòng)模式：
響應(yīng)用戶操作->發(fā)送數(shù)據(jù)給后臺(tái)->拿到新數(shù)據(jù)->更新前端model
而MVVM和MVC的區(qū)別也就主要在于將C-Controller替換成了VM-ViewModel層。我們不需要再去單獨(dú)在Controller層控制view如何顯示，而是將數(shù)據(jù)和視圖綁定起來。數(shù)據(jù)的變化去驅(qū)動(dòng)視圖的變化。
也正是在這樣的設(shè)計(jì)思想的驅(qū)動(dòng)下，涌現(xiàn)出了現(xiàn)代前端的三大框架。
2009 年 AngularJS 誕生。
2011 年 React 誕生。
2014 年 Vue.js 誕生。
這只解決了dom操作的問題，而真正為前端技術(shù)帶來變革的則是NodeJS的出現(xiàn)。
Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 I/O 的模型。發(fā)布于2009年5月，由Ryan Dahl開發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。
NodeJS的出現(xiàn)，不僅僅使JS這門語言走進(jìn)服務(wù)器，同時(shí)也為前端工程化提供了可能。通過前端工程化，分散的前端頁面真正被整合起來被當(dāng)做是一個(gè)應(yīng)用來處理。這也使得數(shù)據(jù)、狀態(tài)、組件在不同功能之間流動(dòng)起來。NodeJS提供了一個(gè)易被理解的平臺(tái)，來承載工程化所需的各種工具。
在之后會(huì)有一個(gè)關(guān)于Node和Vue的培訓(xùn)，屆時(shí)我們可以更詳細(xì)的聊一聊這兩者。
未來發(fā)展
前端的未來會(huì)有什么樣的發(fā)展是一個(gè)沒有誰敢斷定的問題，但是我們透過前端歷史的發(fā)展依然可以看出一些端倪。
從前端發(fā)展歷程的兩次重大變革來看：Ajax帶來的是前后端分離，讓職業(yè)領(lǐng)域細(xì)化。而Node帶來的是工程化的改變。而從兩次瀏覽器大戰(zhàn)來看，一次是市場(chǎng)的力量決定了技術(shù)的走向，另一次則是技術(shù)的發(fā)展影響了市場(chǎng)的份額。
由以上幾個(gè)方面，我們大致能看出一點(diǎn)端倪。
大前端
前段工程化的出現(xiàn)使得前端工程師手中的工具也越來越多，也對(duì)前端工程師提出了更高的要求。無論是NodeJS中臺(tái)服務(wù)器，或者Nginx反向代理，亦或者webpack工程化應(yīng)用都是對(duì)前端技術(shù)這個(gè)概念的大大擴(kuò)展。
