移動互聯(lián)網(wǎng)給前端工程師帶來了什么

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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