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

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

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

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

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

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

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

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

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

移動設備由于屏幕較小，因此制作APP界面設計的復雜度比傳統PC電腦要小，這其實降低了一定的開發(fā)難度，而且APP開發(fā)的界面效果還是比瀏覽器界面要好。此外桌面軟件開發(fā)天然就是響應式驅動，交互性比網頁更好，而且開發(fā)響應式應用的難度更低，所以使用APP開發(fā)的應用比傳統網頁更加吸引人。

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

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

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

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

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

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

由此說來，web前端在移動互聯網領域并沒有沒落，而且移動互聯網會給web前端帶來大發(fā)展的機遇。

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

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

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

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

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

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

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

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

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

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