為什么學(xué)前端
我的前后端分離態(tài)度
前后端分離是指技術(shù)架構(gòu)上的分離而不是對(duì)“職位”的分離?？梢噪S便打開(kāi)一個(gè)招聘網(wǎng)站看一下“前端工程師”的要求：
- 熟悉HTML、CSS、JavaScript
- 熟悉一個(gè)前端框架，Angularjs、ReactJS
- 熟悉webpack之類(lèi)的打包工具;git、svn之類(lèi)的版本控制工具
深層次的分析上面的要求，一個(gè)不懂“軟件工程”基本理論的人能理解“前端框架”嗎?能知道模塊化、工程化嗎?一個(gè)不懂HTTP協(xié)議，分不清WebServer、瀏覽器、Session、Cookie的人能寫(xiě)前端?一個(gè)聽(tīng)不懂“隊(duì)列”、“棧”、“鏈表”的人能寫(xiě)程序?從這些角度分析世界上只有一種職業(yè)“軟件工程師”，職位只不過(guò)是大家的工作側(cè)重點(diǎn)不同而已。
技術(shù)演進(jìn)一定是為了解決更復(fù)雜，更困難的問(wèn)題;這意味著更大的工作量也意味著新職位的出現(xiàn)。所以新職位不是簡(jiǎn)單的“分工”能籠統(tǒng)概括的。
為什么會(huì)有專(zhuān)業(yè)前端
正如數(shù)據(jù)庫(kù)出現(xiàn)是為了“通用式數(shù)據(jù)共享”問(wèn)題;URI出現(xiàn)是為了解決“統(tǒng)一資源標(biāo)識(shí)”的問(wèn)題，每個(gè)技術(shù)的出現(xiàn)都有它出現(xiàn)的時(shí)機(jī)。前端也不例外，我個(gè)人理解它的出現(xiàn)要解決核心問(wèn)題是——前臺(tái)組件化或者工程化。
整個(gè)B/S系統(tǒng)的工作原理可以用一段話概括通過(guò)瀏覽器與服務(wù)器交互獲取HTML、CSS、JavaScript或者圖片(視頻)，在瀏覽器中渲染HTML、CSS，執(zhí)行JavaScript。服務(wù)器端只是生成上面三個(gè)元素;更確切的說(shuō)——生成HTML。仔細(xì)想想是一件非常吃驚的事情——所以我們“發(fā)明”的各種框架、各種牛B的語(yǔ)言都是為了“方便”生成HTML(囧)。
從B/S系統(tǒng)的演進(jìn)歷史我劃分二個(gè)階段
***階段——動(dòng)態(tài)頁(yè)面
HTML代碼和某個(gè)腳本語(yǔ)言混合在一起。“不必過(guò)分多說(shuō),你自己清楚,你我到底想要做些什么”，直接上圖
這段代碼摘錄自“世界上***的個(gè)人Blog——wordpress”。為了精簡(jiǎn)頁(yè)面中的邏輯它已經(jīng)做了很大的努力，比如提取出來(lái)很多函數(shù)放在單獨(dú)的PHP文件中，在頁(yè)面部分直接調(diào)用這些函數(shù)。
這一階段基本上屬于互聯(lián)網(wǎng)初期發(fā)展階段，大家能用上“數(shù)據(jù)庫(kù)”，做出“絢麗特效”就已經(jīng)非常不錯(cuò)了。
第二階段——結(jié)構(gòu)化階段
(我不喜歡用MV$這個(gè)詞，已經(jīng)別用爛了要結(jié)合上下文才能理解它的含義)。
HTML和腳本混合在一起的滋味很不好受，修改代碼的時(shí)候往往是牽一發(fā)而動(dòng)全身。所以第二階段就嘗試把HTML從代碼中剔除出去引入了——模板。
為了證明PHP是世界上***的語(yǔ)言我依舊選擇一個(gè)PHP項(xiàng)目來(lái)說(shuō)明問(wèn)題(OpenCart)。這段代碼已經(jīng)剝離了很多業(yè)務(wù)邏輯，基本上是根據(jù)傳遞到模板中的數(shù)據(jù)來(lái)渲染界面，但是代碼依舊顯的很“凌亂”。(我故意找到一段很“現(xiàn)實(shí)”的代碼是想告訴大家：即便我們用了模板也僅僅是“把邏輯盡可能的剝離”——誰(shuí)的view代碼沒(méi)有用過(guò)if之類(lèi)的判斷?)
這一階段就是我們現(xiàn)在所采用的主流技術(shù)，無(wú)論你是什么程序員不用“模板”，沒(méi)有“MVC”都不好意思開(kāi)工寫(xiě)B(tài)/S程序。此時(shí)的“結(jié)構(gòu)化”更多體現(xiàn)在后端，比如絢麗無(wú)比的數(shù)據(jù)訪問(wèn)分裝(ORM之類(lèi)的)、各種牛B哄哄的組件容器(Spring之類(lèi)的)，我們還有一大堆隨手可用的“庫(kù)”(apache commons、JDK標(biāo)準(zhǔn)庫(kù))，琳瑯滿目的模板引擎(Freemarker、Velocity、Thymeleaf)。這些工具幫我們更加容易組織代碼，也讓代碼更加容易被復(fù)用、被修改。
不完整的“結(jié)構(gòu)化”
但是這場(chǎng)“結(jié)構(gòu)化”并沒(méi)有針對(duì)前端帶來(lái)什么幫助。前端主要面臨的問(wèn)題
- 大家還在一次一次的重頭寫(xiě)CSS，缺少一個(gè)框架;
- HTML所能表達(dá)的東西粒度太細(xì)。比如我想要一個(gè)文本框就必須先定義form，定義幾個(gè)外部元素(比如div)修飾文本框，最終才能定義input type="text"/;
***個(gè)問(wèn)題基本上被Bootstrap之類(lèi)的CSS Framework解決了，第二個(gè)問(wèn)題始終是一個(gè)“老大難”。我們始終缺乏一個(gè)技術(shù)手段把HTML組件化，如果你仔細(xì)觀察我上面的截圖會(huì)發(fā)現(xiàn)我用紅色框標(biāo)記的部分，這是一個(gè)非常典型的問(wèn)題根據(jù)不同的數(shù)據(jù)我們?cè)O(shè)置不同的css。我們對(duì)HTML的控制力度是直接作用于標(biāo)簽而不是一個(gè)一個(gè)的組件，這就導(dǎo)致了HTML無(wú)法被復(fù)用。
前端的出現(xiàn)
解決HTML粒度的問(wèn)題很多人都嘗試過(guò)努力，從后端角度出發(fā)的GWT、JSF、Asp.net WebForm;從前端角度出發(fā)的ExtJS、YUI，但是這些工作成效甚微。究其原因我覺(jué)的是“做得太多”，無(wú)論哪種方式它都是在試圖過(guò)多的隱藏復(fù)雜度，GWT是典型的“JavaScript是萬(wàn)惡”;JSF一門(mén)心思非要“所見(jiàn)即所得”;WebForm則完全無(wú)視“設(shè)計(jì)師”的感受，讓你告別HTML;ExtJS、YUI則一切都是“組件”。過(guò)分的簡(jiǎn)化問(wèn)題會(huì)讓問(wèn)題更加復(fù)雜，一個(gè)框架一定要暴露出必要的細(xì)節(jié)。
現(xiàn)在的前端定義了一種更加抽象的標(biāo)簽來(lái)代替HTML，比如Reactjs的jsx、Vue的Component、Angular的component directives之類(lèi)的都極大的提高了HTML的抽象粒度也提高了代碼的復(fù)用程度。這些框架都暴漏了必要的細(xì)節(jié)給使用者(沒(méi)有一個(gè)聲稱告別HTML、JavaScript;一切都是組件)而且明確的區(qū)分出了“組件化”的范圍是在“頁(yè)面”層次——所有的頁(yè)面渲染邏輯全部放到前端來(lái)做而后端代碼只提供數(shù)據(jù)(再次說(shuō)明，此處的前端、后端僅僅是指技術(shù)架構(gòu)上的變化而不是說(shuō)工作職責(zé)的變化)。
現(xiàn)在開(kāi)始學(xué)習(xí)
軟件領(lǐng)域的很多新技術(shù)要解決的核心問(wèn)題都是復(fù)用，這似乎是整個(gè)領(lǐng)域的“魔咒”。經(jīng)歷了多年的發(fā)展我們從非結(jié)構(gòu)化走向結(jié)構(gòu)化，從雜亂無(wú)章走向模塊化、組件化。我們用UML、用軟件工程、用設(shè)計(jì)模式、用面向?qū)ο?、用各種華麗的技術(shù)來(lái)試圖讓我們的代碼更加容易維護(hù)、更加容易被修改——而背后的動(dòng)機(jī)都是通過(guò)復(fù)用節(jié)省成本。
HTML抽象粒度太細(xì)帶來(lái)的直接問(wèn)題就是無(wú)法復(fù)用，比如“列表頁(yè)面”，所有的表格長(zhǎng)的都差不多，唯一的變化是不同的列不同的數(shù)據(jù)來(lái)源，但是我們卻很難尋找一種方式可以“封裝”這個(gè)表格。再比如“表單頁(yè)面”，也是這種尷尬的局面，我們的HTML結(jié)構(gòu)差不多但是就是沒(méi)有辦法做封裝。我覺(jué)得這就是前端能帶給我們***的改變。
【本文是51CTO專(zhuān)欄作者“邢森”的原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系作者本人獲取授權(quán)】
