web前端工程師在移動網際網路時代裡的地位問題

　　支付寶十週年推出了一個新產品：支付寶的十年賬單，我也趕個時髦檢視了一下我的支付寶十年賬單，哎，感慨自己真是太屌絲了，不過這只是說明我使用淘寶少了，當我大規模網上購物時候，我很討厭慢速的快遞，所以我大部分消費都貢獻給了像京東這樣具有火箭般快遞速度的電子商城了。不過在支付寶十年賬單裡，有個統計資料引起了我的危機意識，在中國一些偏遠或者是經濟欠發達的省份，電子購物在居民的全部消費裡的佔比比發達地區高多了，而這個的助推劑居然是移動網際網路在中國的普及，在中國使用智慧手機和平板電腦購物的人們已經遠超使用PC電腦的人們，這點不管是經濟欠發達地區還是經濟發達地區都是如此，而且全世界移動網際網路發展最好的國家就是中國，這點連美國都不如。

　　我最近一段時間又把精力放在了web前端技術的研究上，本來打算這個週末再接著這個主題寫幾篇文章，但是看到支付寶的統計資料，一種末日般的危機感悠然而生，我是不是在研究一個即將過時，就算不是過時，是不是已經快到發展瓶頸的技術呢？我如果不做改變，會不會在不久的時間後，我的web前端技術會喪失優勢呢？因此我今天想要分析下移動網際網路對web前端技術的影響。

　　在移動網際網路出現之前，網際網路系統都是建立在Browser/Server的架構之上，即我們常說的B/S架構，B/S架構其實是Client/Server即C/S架構的一個子集，而到了移動網際網路時代，大部分的傳統網際網路產品都需要我們去安裝一個APP即一個客戶端才能使用，這個客戶端相當於PC電腦上的桌面軟體，而每個客戶端都是某家公司專門為自己定製的，移動網際網路的web應用蛻變成了一個標準的C/S架構。說心裡話這個現象的轉變讓我很詫異，傳統的PC也是可以裝客戶端，為啥C/S系統在PC端沒有流行起來，卻在移動網際網路下流行了起來，更詫異的是，移動裝置和個人電腦一樣也都是預設裝有一個免費的瀏覽器，為啥移動端的瀏覽器在很多應用裡都是靠邊站，人們更加傾向於先麻煩自己一下，下載安裝個客戶端APP呢？

　　我今天和一位正在做移動網際網路開發的朋友聊了下天，我提出了自己的疑問，在一系列扯蛋以後，我似乎有了上面問題的部分答案，我總結了下，大致如下：

　　１、移動裝置上網雖然可以使用WiFi，但是很多人在所謂關鍵時刻使用移動裝置上網時候都是在2G、3G、4G行動網路下進行的，一般情況下這些網路的速度和一般寬頻相比還是太慢，更重要的是這些網路的資費要貴的多，很多人一個月使用這些網路上網的資費比寬頻貴很多，但是享受的流量卻常常不足一般寬頻的10%，在使用行動網路的背景下移動端的B/S網站往往會載入很慢，流量消耗很大，不管是使用者體驗還是經濟效率考慮都會影響商家產品的競爭力，所以商家需要一種手段改進這種局面。

　　２、移動裝置本身的CPU、記憶體以及儲存裝置和PC電腦相比，差距還是很大，同樣的一個應用在PC電腦上處理假如需要10毫秒，換到移動裝置上可能會需要幾倍的處理時間，而網際網路上的應用響應時間太慢會導致大量客戶的丟失，商家為了讓自己應用響應更快，自然就會考慮自己定製客戶端，這個客戶端會根據移動裝置特點做相應的效能優化，使應用的響應速度更快。

　　３、移動裝置本身的安全機制沒有PC電腦成熟和完善，移動端的瀏覽器和PC電腦的瀏覽器相比，就如同一部簡配閹割的汽車，它遠遠沒有PC電腦上的瀏覽器那麼強大，特別是一些瀏覽器的安全機制，移動端瀏覽器是遠不如PC端瀏覽器，這點在智慧手機上非常明顯，例如我們在PC電腦上購物，到了支付環節，不管支付工具使用的是各家銀行的網銀還是第三方支付系統，都會在輸入銀行卡密碼，信用卡CVN2時候使用密碼控制元件（密碼控制元件解釋：我們使用網銀時候如果不安裝密碼控制元件，密碼輸入框上會提示我們下載密碼控制元件，等控制元件安裝好了後，文字輸入框就會顯示出來，其實這時候的密碼輸入框已經不是傳統html裡的input密碼輸入框了，而是使用像C這樣的語言編寫的瀏覽器外掛模擬的密碼輸入框，我們在這樣的密碼框裡填寫密碼是非常安全，基本上很難被人截獲），密碼控制元件會保證關鍵的密碼資訊的安全，但是這點到了移動端瀏覽器就很難做到，我們基本很少見到在手機瀏覽器裡提示我們安裝密碼控制元件的現象，就算有，瀏覽器也會調出相應的APP幫助我們完成支付操作，究其根本原因還是移動裝置瀏覽器對這類技術支援不夠。

　　４、在瀏覽器裡開發一套漂亮、使用者體驗好、安全的網站還是很有難度的，不過技術難度都是內部問題，對外都不是問題，問題的關鍵是解析度的問題，移動裝置螢幕有大有小，這種差異和PC電腦相比簡直是恐怖，而瀏覽器的佈局技術往往又是跟解析度有著千絲萬縷的關係，其中最致命的一個問題就是有的移動裝置的螢幕大點，它也許可以在一行裡顯示出三個元素，但是到了一個螢幕小的手機上一行顯示三個元素就會使得頁面嚴重變形，而瀏覽器的排版技術行row是一個基本邊界，元素如果碰到換行顯示就會打亂整個佈局系統，所以在移動端瀏覽器開發一個能適應所有瀏覽器的網頁難度非常之高。此外能在PC電腦上顯示的網頁也許可以適應像pad上的瀏覽器，但是到了智慧手機上，這個網頁就不得不重新開發，重新開發倒無所謂，最要命的是就算重新開發，小螢幕的網頁很難囊括原來PC瀏覽器網頁所有功能，這和移動瀏覽器功能和螢幕太小所致，這樣的結果會導致商戶很難將使用者引流到移動端，從而喪失了移動網際網路的先機。

　　５、瀏覽器的佈局技術在移動端瀏覽器技術普及上的作用是很關鍵的，在PC上開發網頁我們常把佈局技術稱之為html+css技術，其實在網頁排版裡圖片的作用是非常重要，而針對網際網路的web網站上圖片的份額更加多，而且常常會及時更新，圖片對於網路流量昂貴的行動網路而言就是人民幣，而瀏覽器是個公共的平臺，雖然我們有很多技術手段可以讓很多圖片快取起來，但是平時運用裡重複載入圖片還是家常便飯，而這樣的流量消耗就是在浪費人民幣，這點也同樣會成為企業競爭的一個砝碼，所以使用APP會對老百姓更加實惠，也能讓商家表達更多對使用者的體貼。

　　６、移動裝置由於螢幕較小，因此製作APP介面設計的複雜度比傳統PC電腦要小，這其實降低了一定的開發難度，而且APP開發的介面效果還是比瀏覽器介面要好。此外桌面軟體開發天然就是響應式驅動，互動性比網頁更好，而且開發響應式應用的難度更低，所以使用APP開發的應用比傳統網頁更加吸引人。

　　由以上6點我們可以知道了，使用者在移動裝置上忽視瀏覽器的原因還是移動瀏覽器的給予使用者的產品沒有APP好，孰好孰壞老百姓的心裡都是雪亮雪亮的，老百姓是很聰明的，忽悠不到他們的。

　　在中國移動網際網路發展迅速，甚至已經開始擠壓PC端瀏覽器的份額，而移動裝置是廣大使用者的首選，那麼這是不是說明web前端技術到了移動網際網路領域就會沒落了？為了說明這個問題，我想談談為啥在PC電腦上我們會選擇瀏覽器開發商家應用，而不是為商家專門開發個客戶端軟體呢？很多人說這點是商家出於成本考慮推動的，因為世界上作業系統很多，如果要做客戶端就得要為每個作業系統開發一個客戶端，就算是同一個作業系統，系統升級後客戶端就得有相應的更新，就算作業系統沒有升級，出於安全考慮很多客戶端也會經常升級，而瀏覽器則不同，開發一套網站就可以打遍天下無敵手，可以不用自己考慮客戶端升級的問題，其實使用者怕麻煩本性也幫助了這個潮流的發展。那麼這個理由在移動網際網路裡還有效嗎？

　　我們看到的現象得到的答案似乎是無效的，因為移動網際網路下瀏覽器已經沒落了，更多人會選擇APP而非移動裝置的瀏覽器，但是PC端瀏覽器大行其道的理由放到移動裝置上，仔細掂量下還是很有市場的。

　　當今世界智慧手機和平板電腦上流行兩大作業系統：蘋果公司的IOS和谷歌的android，雖然Android是一個獨立的作業系統，但是到了各個具體手機生產廠商，其手機上所使用android都會被或多或少的改寫，甚至有的公司能將其改的面目全非，在移動裝置上作業系統的差異處理問題比PC作業系統要嚴重的多，畢竟個人PC電腦上微軟的windows作業系統還是一家獨大，我們只要滿足了windows的客戶端，至少在中國就能滿足90%以上的使用者需求了。APP就和PC電腦上的桌面軟體一樣，開發它需要呼叫大量的作業系統底層API，所以我們想讓自己的應用覆蓋到大多數使用者就不得不為每個作業系統建立一個團隊，而這些團隊開發同樣的業務功能，只不過是使用的技術不同而已，結果會使得一個業務系統擁有多個不同版本，造成了人為的系統異構性，這種異構對系統的運維也產生了很大的影響，不同的系統運維需要彼此獨立的運維團隊，這樣就增加了企業的成本壓力。

　　移動裝置並沒有拋棄瀏覽器，瀏覽器的html、css以及javascript技術不管是那種移動作業系統上都是高度的一致，這種一致性甚至超過了PC電腦上不同廠商瀏覽器（移動瀏覽器基本都是webkit核心）的一致性，通過瀏覽器相關的開發技術消除平臺的差異在移動端任然是可取的，而且現實中移動端的平臺差異性問題的嚴重程度其實已經遠遠超出了PC平臺，其對公司造成的成本壓力也是不可言喻的，但是移動裝置上瀏覽器的侷限性是一個很難跨越的鴻溝，那我們有辦法解決這個問題，答案還真有，移動端作業系統將瀏覽器底層的介面都做成了API，我們很容易將APP和瀏覽器技術結合在一起，因此時下出現了phoneGap技術，phoneGap技術核心就是解決不同移動作業系統的差異性，使用phoneGap的技術人員可以很少去考慮作業系統的相容性問題，而只用關心瀏覽器技術就可以開發出一套在IOS和android都能正常執行的APP，這套技術對於剛剛創業的小規模的網際網路公司非常有現實意義，可惜為了相容不同作業系統，卻犧牲了應用的效能。

　　對於有實力的大公司又該如何選擇了，大公司的成本壓力會比小公司小很多，但是高企的成本也是一種潛在的風險，大公司面對這樣的問題，好的解決方案應該是減少重複性勞動，減輕運維壓力，其實時下大部分的APP都相當於一個自制的瀏覽器，只不過這個瀏覽器是帶有公司自有的業務，因此大公司的做法應該是將APP開發和瀏覽器開發分離開來，APP開發主要職責是做個框架，不過這個框架相當於新開發個瀏覽器，這點和java裡SSH框架有一定區別，而業務開發人員可以只關心瀏覽器開發技術，用瀏覽器技術完成業務開發，至於到了業務執行階段，主要是業務開發人員的事情，這樣就避免了建立重複開發的技術人員團隊同時也達到了專業的人做專業的事情，運維也變得簡單多了，系統穩定性和健壯性也增強了，還有個最關鍵的好處那就是可以複用原來的客戶端開發的技術人員，這是減輕人力成本的一個重要手段。

　　由此說來，web前端在移動網際網路領域並沒有沒落，而且移動網際網路會給web前端帶來大發展的機遇。

　　在移動網際網路時代web前端技術會變得越來越重要，比以前任何時候都要重要。但是移動網際網路對web前端開發帶來了一個弊病，這個弊病就是web前端技術或許會變得越來越複雜。

　　首先不管哪個移動端作業系統，瀏覽器的核心技術達到了前所未有的統一即大部分都是使用webkit核心，由於移動網際網路沒有pc電腦的歷史負擔，移動端的瀏覽器一開始就支援了最新的html5，html5是顛覆性的技術，傳統的web前端開發人員要重新學習很多新的知識才能掌握它。

　　Html5技術提升了瀏覽器做富客戶端開發的能力，這種提升不是量的變化而是質的變化，html5讓web前端在整個web應用裡的作用提升到了前所未有的高度，富客戶端將會更加富有，我們在移動網際網路裡開發web前端不能在那麼隨意了，而是需要將web前端技術更加框架化和工程化，那麼javascriptMVC技術會應用更加廣泛，web前後端分離技術也將更加被人重視，到時如果有人再說web前端技術是一個玩具技術，那麼這人就等於還生活在網際網路的原始社會了。

　　移動網際網路對web前端技術影響或許還會導致一個新的職業方向的出現，這個方向就是客戶端工程師，雖然移動網際網路發展迅速，但是移動網際網路想完全取代PC電腦，這種想法還是非常不現實的，所以在很長時間裡傳統的網際網路和移動網際網路會並行發展，只不過我們再去做網際網路系統客戶端這塊開發不僅只要求滿足PC瀏覽器了，也許公司希望能找到一個能幫忙解決所有客戶端的工程師，當然這種客戶端工程師應該會站在web前端技術之上來消除不過客戶端的差異性，不過到了解決移動網際網路客戶端問題時候，客戶端工程師或多或少都要了解到不同作業系統APP開發技術的細節，當web前端工程師進化為客戶端工程師後，對那種web前端工程師和美工等同的偏見估計會更加沒有市場，新型的客戶端工程師需要掌握的技術門類更多，技術會更加全面，在加以富客戶端在web應用的重要度提升，客戶端工程師也許在整個網際網路行業會更加吃香。

　　移動網際網路的大發展導致當今這個時代做一個大型網站的成本越來越高了，因為我們不得不去滿足更多的客戶端。回到傳統的PC瀏覽器技術，作為一名前端工程師我也感受到最近幾年傳統的PC瀏覽器技術也在以前所未有的速度發展，就連噁心的微軟公司開發的ie瀏覽器也在發生著巨大的變化，版本釋出更加頻繁了。html5剛出來時候有很多朋友說這個東西不知道猴年馬月會流行，不要做深入學習了，這個說法發生在兩年前，但是時下html5技術開始以前所未有的速度普及，很多人可能認為這是瀏覽器廠商的驅動的，但是我確認為根本原因還是移動網際網路上html5的普及間接影響到了PC瀏覽器的發展，移動網際網路的普及擠壓了傳統PC電腦的部分生存空間，迫使那些原來依仗自己壟斷地位不願改變的廠商發生了變化。

　　移動網際網路的普及對網際網路服務端系統架構也會產生很大的影響，對於這個影響的思考還是源自於有一天和一個即將畢業的大學生的聊天，那天他問我自己到底是做web前端開發還是做移動開發好，當時我們簡單聊了下兩種技術的差異，他覺得客戶端技術之間的差異太大，更新太快，他似乎對這種不可控性感到有點害怕，如是他又問我：移動端對應的服務端技術和PC瀏覽器所對應的服務端技術是不是一樣的，我的回答當然是一樣的，所以最後他覺得自己還是從事服務端開發比較好。

　　當我寫這篇文章時候讓我想起了這次聊天，我有個很大的疑問那就是客戶端的不同會對服務端的技術實現產生影響嗎？把這個疑問放的再大點，客戶端的不同會對我們整個web系統架構，不管是web前端架構還是web服務端架構會產生重大影響嗎？

　　我前面說到最棒的APP應該是APP技術和瀏覽器技術結合，但是APP和服務端的資料互動真的可以全部有瀏覽器技術完成嗎？如果某些請求不得不用socket完成，那麼這種互動模式就和傳統PC的web的服務端發生了變化，假如這種情況很多，那麼我們就不得不單獨開發一套針對移動端的服務端程式。就算上面的問題不是問題，小螢幕和大螢幕所能容納的資訊量是不同的，在PC上有些互動一個http請求就可以完成，但是到了移動端可能不得不拆分成多個請求協同完成，這樣的差異也會導致PC端的服務端不能複用，如果這樣的差異很大，我們還是不得不重新開發一套服務端，這麼說來就算服務端技術線路一致，例如都是使用我十分擅長的java，但現實我們還是不得不做很多重複勞動，如果沒有移動網際網路時候，領導讓我們開發一個新網站給我們兩個月時間就能完成，那麼現在開發一個新網站，人力資源不變的前提下，兩個月我們能完成任務嗎？到時這樣的結果一定是老闆和員工一起痛苦了。假如我們真的為不同客戶端對應開發一套新的服務端程式，這做法就好比洪水來了我們趕緊修河堤，洪水越大，我們的河堤就做的越高，最後大河成了天河，那天河堤出了點紕漏很有可能大堤潰壩，後果非常嚴重，治理洪水最好的解決方案應該是我們如何疏導洪水，那麼在軟體領域這種疏導最後是重新審視我們網站系統的整體架構，在架構設計層面就考慮到方方面面，從架構上重構系統往往會達到事半功倍的效果。

　　其實從服務端角度而言，按MVC架構思想考慮，客戶端不同影響到的是V層和C層即檢視層和控制層，對於服務端而言就是控制層了，那麼要減輕服務端改造壓力，我們必須要將服務端的控制層和模型層解耦的更加徹底，最好的方式就是採用分散式技術，控制層和模型層變成兩個獨立的系統，兩個系統通訊就採用我以前講到的高效遠端呼叫的方式，遠端呼叫使用起來和本地呼叫差不多，這樣也減輕了服務端技術變遷的壓力。服務端的控制層和客戶端的關係太過密切，雖然控制層聽起來很高大上，但在做開發時候控制層的發言權實在是小的可憐，所以這裡我想先講講檢視層即客戶端的改變，不管移動端是怎樣的APP，也不管開發移動APP的技術有多好，我相信移動端的APP一定是一個強有力的富客戶端，這點到了PC上的瀏覽器客戶端就有很大的不同，雖然當今ajax技術深入人心，但是想在pc瀏覽器上寫出強大的富客戶端是有一定難度的，而且現實下很多pc瀏覽器端的程式都是非常不健壯和書寫隨意，這主要web前端技術精通門檻較高，還有大量小公司對web前端技術的重視度不夠所致，這樣的現狀就更不要說讓自己的web前端達到javascriptMVC的程度，所以我覺得我們要對pc瀏覽器端的程式進行重構，將pc端的前端做成javascriptMVC模式，那麼javascriptMVC的客戶端就變成了SOA裡的一個服務了，它和控制層的互動就可以像SOA架構裡不同系統呼叫那樣，定義好服務介面報文格式即可，這種做法也非常適合APP，因為APP開發時候也只是在需要服務端資料時候才會互動，而大部分頁面展示都可以在客戶端本地完成，例如我們可以讓所有的服務端資料互動都已json格式進行，那麼如果客戶端請求資料有變化我們頂多就是增加個新介面就行，PC端能被複用到移動端的介面還是可以照用不誤。

　　我相信web前端技術不會沒落的，它只會越來越重要，如果有一天網際網路開發裡真的出現了客戶端工程師，那也是web前端技術的昇華，web前端會越來越專業，要求的技能會越來越高，記得我4年前我打算往web前端發展時候，我曾經碰到很多技術難題，當我找到解答時候發現很多解答卻帶來了更多疑問，疑問源自解答裡依賴於瀏覽器核心的解釋，如是我在一些技術群裡詢問相關瀏覽器核心的資料，某個群裡有位朋友跟我這麼說研究瀏覽器核心有啥用，那是老美做的事情，在中國研究這個一點前途都沒有，只要會用就行了，“不要沒事找抽，自找麻煩”，引號差不多是原話了，而前不久我在京東上買到一本講解webkit核心的書籍，為了以後看懂他，我最近一段時間重溫了很多web前端的技術，看看現在的招聘，很多公司都開始大規模招聘瞭解瀏覽器核心的人才，這件事情讓我有點感慨，學習雖然最終都是為了達到某種功利心，但是要學好東西，一定得要報著解決自己疑問的目的，不畏艱險，而不要過多去考慮現在這個有用如否。

　　好了，文章寫畢，祝大家晚安。