摘要：兩個(gè)獨(dú)立的層即使這種技術(shù)風(fēng)靡全球之后，前端工程師的主要工作也都是局限于瀏覽器窗口之內(nèi)的。這是目前最主流的一種前后端分工方式帶來的改變一發(fā)布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對(duì)這一項(xiàng)技術(shù)表露出了相當(dāng)大的熱情和期待。

轉(zhuǎn)載自：http://www.w3ctech.com/topic/37

原 文: https://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/

在軟件開發(fā)領(lǐng)域，前端工程師曾經(jīng)是一個(gè)比較糾結(jié)的職業(yè)。在Web技術(shù)真正發(fā)展起來之前的相當(dāng)長(zhǎng)一段時(shí)間里，由于技術(shù)門檻很低，前端工程師行業(yè)一直是魚龍混雜的狀態(tài)。其中很多號(hào)稱是Web開發(fā)者的人實(shí)際上并沒有什么專業(yè)的前端技能，有些工作就是被當(dāng)做簡(jiǎn)單的力氣活由美術(shù)設(shè)計(jì)師順便做做而已。當(dāng)時(shí)很多人甚至并不認(rèn)為有朝一日會(huì)有這么一群人用HTML、CSS和JavaScript這三門技術(shù)謀生 --- 他們想，這怎么可能呢 --- 這些技術(shù)看起來都是如此簡(jiǎn)單，隨隨便便混在一起用就哦了，把做這些活看成一種正兒八經(jīng)的職業(yè)簡(jiǎn)直是笑話。

隨著技術(shù)發(fā)展，JavaScript這門語言在悄然改變?nèi)藗儗?duì)前端工作的看法，讓一些人從美工頁面仔轉(zhuǎn)變?yōu)檎嬲那岸斯こ處煛avaScript，這門很多工程師曾經(jīng)把它當(dāng)做玩具而不屑一顧的腳本語言竟然演變成了推動(dòng)互聯(lián)網(wǎng)發(fā)展的核心驅(qū)動(dòng)力。伴隨著越來越多的瀏覽器的出現(xiàn)使得用HTML和CSS兼容各種瀏覽器變得越來越難，于是能實(shí)現(xiàn)兼容各種瀏覽器的頁面成為了前端工程師的金字招牌，前端職業(yè)開始變得炙手可熱。

即使Ajax這種技術(shù)風(fēng)靡全球之后，前端工程師的主要工作也都是局限于瀏覽器窗口之內(nèi)的。HTML、CSS和JavaScript是前端工程師必須要掌握的三種核心技術(shù)，前端同后端的唯一交集僅僅是前端需要確保后端的數(shù)據(jù)能夠以正確合適的格式輸出到瀏覽器上。在某種意義上來說，Web開發(fā)有兩個(gè)UI層，一個(gè)是在瀏覽器里面我們最終看到的，另一個(gè)在server端，負(fù)責(zé)生成和拼接頁面。因?yàn)閭鹘y(tǒng)前端基本上沒有辦法自主決定server端如何處理數(shù)據(jù)拼接生成頁面，因?yàn)閿?shù)據(jù)如何組織，往往是會(huì)受到后端工程師所選擇的技術(shù)框架的影響的，而后端不理解前端的一些需求所以他們選擇的時(shí)候也就很少會(huì)從前端方便的角度進(jìn)行考慮。

在上面這張圖的結(jié)構(gòu)里，瀏覽器里的UI層是完全歸前端工程師管的。服務(wù)器端的UI層則是前后端都關(guān)心的部分，剩下的部分則是服務(wù)端的底層，諸如數(shù)據(jù)處理、緩存、權(quán)限控制和其他核心模塊，這些是歸后端管的。我們還是回過頭來看我們所關(guān)心的server端UI層吧，這一層所做的事情通常是拼頁面模板以及處理具體的業(yè)務(wù)交互邏輯。

所以，傳統(tǒng)的前后端分工是由前端負(fù)責(zé)瀏覽器，而其他瀏覽器之外的東東統(tǒng)統(tǒng)歸由后端負(fù)責(zé)。前后端的交集server的UI層也是由后端來主導(dǎo)的。這是目前最主流的一種前后端分工方式

Node.js一發(fā)布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對(duì)這一項(xiàng)技術(shù)表露出了相當(dāng)大的熱情和期待。上一次一種技術(shù)能被整個(gè)前端界如此關(guān)注那還是在幾年之前，那時(shí)候Ajax這個(gè)概念剛剛被提出來。讓JavaScript跑在server端，這個(gè)想法簡(jiǎn)直太棒了。這下我們不用再去學(xué)那些什么PHP啦、Ruby啦、Java啦、Scala啦或者其他什么對(duì)前端來說奇怪的語言，也可以輕松地將我們的領(lǐng)域擴(kuò)展到server端，多么美好的前景！

我從來不是一個(gè)PHP的愛好者，但是我在Yahoo工作的時(shí)候，我不得不使用PHP。為了這份工作，我得忍受花費(fèi)許多額外的時(shí)間去修復(fù)由于PHP的傻逼特性導(dǎo)致的坑。對(duì)于一直使用Java作為服務(wù)端語言的我來說，對(duì)PHP實(shí)在是很難適應(yīng)。我相信，也一直堅(jiān)持認(rèn)為一種靜態(tài)類型的語言更加適合用來構(gòu)建你的業(yè)務(wù)邏輯的核心部分。因此，雖然我很喜歡JavaScript，但我也不會(huì)用它來做所有的事情，比如我絕對(duì)不會(huì)只用JavaScript來實(shí)現(xiàn)一個(gè)完整的購物車系統(tǒng)。

對(duì)于我來說，Node.js不是一個(gè)解決一切問題的銀彈，我不會(huì)用它來取代server端所有別的語言模塊。事實(shí)上，Node.js可以做到其他后端語言所能做到的幾乎所有的事情，但是我不會(huì)這么做。我所認(rèn)為的比較合適的做法是用Node.js來解決server端UI層的問題，這樣我就可以將這一層從后端的其他部分剝離開來。

現(xiàn)在越來越多的公司傾向于采用面向服務(wù)(service-oriented)的架構(gòu)，由后端提供給前端RESTful的接口，這么做是為了更好的做前后端的依賴分離。如果所有的關(guān)鍵業(yè)務(wù)邏輯都封裝成REST調(diào)用，就意味著在上層只需要考慮如何用這些REST接口構(gòu)建具體的應(yīng)用。那些后端程序員們根本不操心具體數(shù)據(jù)是如何從一個(gè)頁面?zhèn)鬟f到另一個(gè)頁面的，他們也不用管用戶數(shù)據(jù)更新是通過Ajax異步獲取的還是通過刷新頁面，當(dāng)然他們更不關(guān)心的是你究竟在用jQuery還是YUI --- 這與他們根本毫無關(guān)系嘛。后端程序員真正應(yīng)該關(guān)心的難道不應(yīng)該是數(shù)據(jù)如何存儲(chǔ)、如何容錯(cuò)以及如何保證安全性嗎？

現(xiàn)在我們看看Node.js帶來的好處吧，當(dāng)后端程序員提供了REST服務(wù)之后，現(xiàn)在我們前端程序員可以使用Node.js來處理server端的UI層啦，我們可以將通過REST調(diào)用拿到的數(shù)據(jù)隨心所欲地進(jìn)行處理，不管是渲染模板還是直接提供給Ajax，現(xiàn)在我們僅僅用JavaScript一種語言就可以輕松實(shí)現(xiàn)這些。至于后端程序員，他們只需要保證數(shù)據(jù)的正確性，無論他們使用任何一種語言來封裝REST調(diào)用，都不會(huì)對(duì)前端造成影響，這樣前后端的職責(zé)不就被更好地劃分了嗎？這樣分工之后前端的領(lǐng)域就從瀏覽器小框框里面擴(kuò)展到了server的UI層，而這一層本來對(duì)于后端來說是一件他們做起來不輕松的零碎活兒。

前端工程師接手之前一直由后端負(fù)責(zé)的這部分工作不那么容易被后端工程師們理解和接受。尤其是現(xiàn)在還有很多后端工程師認(rèn)為JavaScript是一種極簡(jiǎn)單的“玩具語言”，他們將會(huì)想如此重要的服務(wù)端工作怎么能交給這群看起來不靠譜的人用如此“不嚴(yán)肅”的語言來玩？在我的經(jīng)驗(yàn)里，這種觀念上的沖突是前后端工程師們?cè)谑欠褚隢ode.js這一問題上的最大分歧。Server端UI層是前后端的中間地帶，而之前通常后端程序員對(duì)于這個(gè)地帶比較有主導(dǎo)權(quán)，所以一旦你進(jìn)入這個(gè)本來屬于后端主導(dǎo)的領(lǐng)域，爭(zhēng)議自然是不可避免的。

實(shí)際上放棄傳統(tǒng)的角色立場(chǎng)，將server的UI層分給前端，在大型Web架構(gòu)下是很有意義的。不這么做的話，有時(shí)候前端想要從后端要到正確的數(shù)據(jù)，還不得不關(guān)心后端究竟是用什么語言實(shí)現(xiàn)的。過去的分工中，那些原本屬于核心業(yè)務(wù)底層考慮的東西會(huì)被暴露給server的UI層，而這些問題往往會(huì)不小心影響到前端。前端本來不需要關(guān)注這些問題，因?yàn)榍昂蠖怂P(guān)心的方面根本完全不一樣嘛。如果你理解單一職能、責(zé)任分離和模塊化，你就會(huì)理解我所說的，甚至?xí)X得以前不把server的UI層分給前端實(shí)在是很笨。

只可惜，之前Node.js這樣的東東不存在，所以當(dāng)時(shí)沒有前端合適的技術(shù)讓前端工程師們自己搞定server的UI層。所以后端的同學(xué)們用PHP的人就順手把UI用PHP的模板實(shí)現(xiàn)了，同樣的用Java的后端同學(xué)也自然而然地用JSP搞定這個(gè)問題。這不是前端的同學(xué)不愿意去做server的UI，而是因?yàn)樵谥埃瑳]有一種我們熟悉的技術(shù)讓我們能夠搞定這些事情，但是現(xiàn)在不一樣了，我們有Node.js了。

我喜歡Node.js，我喜歡由這項(xiàng)技術(shù)給前端界帶來的更大的發(fā)展?jié)摿ΑＮ也⒉徽J(rèn)為整個(gè)后端完全用Node.js來實(shí)現(xiàn)會(huì)是一個(gè)很好的方案，盡管Node.js完全可以做到這一切。我認(rèn)為目前Node.js最大的價(jià)值是能讓前端完全把控整個(gè)UI層，不論是瀏覽器的還是Server端的，做到這一點(diǎn)，我們工作的效率能得到很大的提升。我們前端更擅長(zhǎng)于決定數(shù)據(jù)以何種方式呈現(xiàn)能帶給用戶更好的體驗(yàn)，而后端則更加了解如何處理數(shù)據(jù)。在這種新的分工方式下，后端只需要提供合適的數(shù)據(jù)操作接口，前端自己就能構(gòu)建漂亮的、有效率的、可用性高的接口，從而實(shí)現(xiàn)用戶所喜歡的交互。

使用Node.js來搞定server的UI層也將后端工程師從他們不擅長(zhǎng)的領(lǐng)域解放了出來。于是我們得到了一個(gè)Web開發(fā)的靈丹妙藥：前后端之間只需要通過數(shù)據(jù)來交互，這種模型使得兩方相互獨(dú)立，各自都能夠快速迭代開發(fā)，而只要保證數(shù)據(jù)接口不變，前后端彼此之間就不會(huì)造成任何影響。

果斷嘗試一下吧，這個(gè)方案也許正適合你的團(tuán)隊(duì)。

博客地址：http://wangyh.net