如何打造一個令人愉悅的前端開發環境(三)

乖小鬼發表於2016-09-08

往期回顧

前面2期都講得是瀏覽器端的東西比較多,包括Webpack,雖然是Node處理的,但是還是瀏覽器端用的多,對於現在的前端開發來說,不懂一點服務端的東西,簡直沒辦法活,一般的招聘要求都會加上要懂一門服務端的語言,例如:PHP,Java之類的啦。如圖所示:

知乎的招聘

所以我們這期就講Node的東西。

程咬金的三板斧

一、劈腦袋 -- 工具鏈

Node在前端領域使用最為廣泛的就是工具鏈了,一期提到的構建工具都是Node寫的,當然還有其他很多工具,比如:京東工程化百度開源構建工具FIS3微信釋出的工作流工具等等一系列前端工具都是用Node寫的。廣泛的說,我認為一期提到的編輯器也算工具鏈的中的一種,Atom,vs code,Brackets都和Node密不可分。我個人感覺,Node的發展,實際上大大解放了前端的生產力,對於其他的服務端語言的依賴基本可以說降到最低,可以依據自己的需要編寫工具來完成技術目標。

這方面大家也可以自己來產出下,例如我自己寫了個小工具供自己使用: vuejs 格式化 Atom外掛 現在下載量也不錯,有2000多了,還有好幾個issues沒有處理,哭!!

二、鬼剔牙 -- 中間層

對於很多FE來說,要搭建一個後端環境很是麻煩,而且不熟悉,容易出錯(java,ruby,php),最糟的是自己不懂,出錯了完全不會除錯,你的表情此時是這樣的:

懵逼

那麼在13、14年的時候,淘寶的前端團隊,開始連續發文,前後端分離的思考和實踐系列文章,提到了中途島計劃,也就是把Node作為前端和服務端的中間層,也就是這個架構,

網站架構

從這種圖,不難看出,Node取代原來php,java乾的一部分事情,也就是我們常說的MVC框架中的VC基本都給Node來幹,FE乾的事情更多了,能掌握的東西多了,意味著對於自己更加靈活,可以考慮更多的元件化,工程化,效能監控,資料分析的事情。

這方面的實踐大家可以參考美團這邊的圖文:

美團酒店

美團酒店Node全棧開發實踐

三、掏耳朵 -- 火熱的全棧

Full Stack developer 是近年來熱炒的一個概念,究其原因,跟Node的火熱不無關係,早些年講,一個人(大牛不算普通人)既要精通java又要精通js,html,css還是很困難,很多思維都不太一樣,分開也很正常,而Node的出現,為很多比較厲害的前端提供了切入到服務端的機會,語言層面的問題不在是難點,重要的對服務端的知識點的熟悉程度。Node的最後一個大招就是替換一些傳統的服務端語言,例如php,ruby,java等,在業務層上面使用Node來開發服務端完全不成問題。

例如: uber的排程系統幾乎都是用 node.js 編寫的

這方面的文章也有很多了,大家可以自己去搜搜看,包括各種框架,還有各種開源系統,都可以找到。當然也還有各種各樣的坑和問題以待大家去踩和解決。

#說說自家事

我們公司來說的話,三板斧基本都用上了,打包構建自不用談,基本每個前端都會用到,第二板斧我們公司已經基本切換過來了,年後3月啟動,目前是所有的web頁面都是Node作為中間層,替換了php的渲染,中間自然有很多的困難要克服,但整體上來說開發的效率還是大大提升,不需要在配置php的環境,也不用在關心各種環境的依賴,整體上自己的一個獨立的服務,使用介面的形式和服務端通訊。

那麼三板斧為何會用到,主要是目前國內最常見的mobile的web頁面,基本在微信裡面流傳,然後這些頁面還需要一定的資料互動,而且這種頁面的特點就是短平快,不需要那麼嚴謹,這種頁面特別適合前端自己一擼到底,前後端通吃,接上 MongoDB當做資料庫,基本兩三天之內就能開發一個活動頁面出來,不需要對其他服務有任何依賴,包括微信授權都可以自己搞定,工作量其實比對接其他語言服務大不了多少,某些方面,我個人認為還減少了很多的溝通成本。

痛點-- 造就了自己的一個開源

express的路由外掛

先說說這個外掛做什麼的: 主要是自動的載入express框架下面的路由,免得一個一個路由需要手寫。

通常我們在express框架下面,寫路由的時候都是一個一個的手寫,然後在app.js裡面去一個一個引用,一般是這樣子的

手寫路由

那麼好一點的情況,是這樣子的,分散每一個相同名字的路由到檔案中,然後引用檔案在app.js裡面。

程式碼少了不少

但實際上你可能在專案中路由情況是這樣子的

路由列表

你有什麼想法?

我要報警了

雖然這樣子也就是一個檔案多兩行程式碼,我還是不爽,我為什麼要因為同一個規則而去多寫這兩個程式碼,而且10個兩行,就是20行,原則上,能用機器乾的事情,就不人幹,而且PHP的一些MVC框架可以自動載入路由,他們會有一個資料夾的分層,很明顯,路由都放到Controller資料夾下,然後根據路由名來匹配檔名的相應action,依據這個我自己就擼了一個express的自動載入路由,然後考慮了下一些特殊情況,做了點配置,不過目前只是支援一級目錄,沒有考慮多級目錄情況,有需要可以自己新增,或者給我提issues。

#照例總結

本篇文章主要講的是關於Node的東東,它的使用方向,更偏向結合前端的使用,並非是很深入的Node原理,也算是給很多前端解惑下,為什麼要使用Node,以及如何使用Node,不要盲目的聽信別人的建議,需要結合自己專案情況,技術水平,以及團隊配比。

更多的Node的使用細節和技巧建議關注:

美團部落格

大搜車

cnode論壇

下一篇我們開啟如何結合Webpack和express 搭建一個開發環境和專案目錄

相關文章