先來看一下現在的互聯網項目需要哪些部分組成,比如淘寶,天貓,京東,微博,等等.我們會發現現階段一個互聯網項目它同時具有網頁端,app甚至還有一個微信入口,在過去我們的程序員選擇工作的時候,可以選擇做網頁開發,做網站又或者選擇學習安卓然后做app開發。
現在來看一些實際的例子,這些項目都是使用NativeBridge技術來實現的,我們說的FaceBook的框架ReactNative以及著名的混合App框架PhoneGap等也是使用的類似NativeBridge原理。
京東的活動頁面，點擊進去，是一個app的詳情頁，是用原生的來寫的,在微信火起來以后,外面就出現了很多微信公眾平臺開發的崗位,然而現在企業需求的并不是我有一個企業官網,然后再做一個app,而是一個完備的系統.它的數據業務應該是一個整體它的入口有很多,如網頁,app,微信,微博等,都可以是整個平臺的流量入口,而整個產品也可以通過各個不同的端口來為用戶提供服務。
這們的設計整個技術棧層級很深,通常企業要維系這樣的一個項目運營,需要有Liunx運維人員,然后需要有數據庫管理員,需要Web后端開發人員如PHP,Java,若是做網頁端則需要H5前端工程師,做App的話需要分別有IOS,Android兩套,若是在加上WinPhone以及其它那些市場占有率不太高的平臺,則開發人員的數量會變得更多。
這樣導致的直接后果就是項目開發運營成本高,開發周期長,團隊管理難度大.
人才儲備困難,到項目穩定運營后各崗位工作飽和度并不高.卻要維系一個龐大的團隊來運營一個項目,如果從考慮項目穩定性出發,所有的崗位都需要冗余,這樣算下來,有那么多移動互聯網項目跨掉就不奇怪了。
基于上述原因催生了全棧工程師這樣一類技術人員的火爆,我們常常在招聘網站上看到這樣的崗位,招聘移動互聯網項目開發的php程序員,招聘混合app開發的H5程序員,招聘微信開發的Java程序員等諸如此類的崗位.其實這些崗位都是全棧工程師能輕松拿下的崗位。
可是在過去的幾年中,全棧工程師的發展卻沒有那么快.根本原因在于一個人要同時掌握那么多技能并靈活運用,不是一件容易的事情.好在大公司給我們指明了方向國內以騰訊,阿里為首;而國外最大的網絡社區facebook,它們都采用了同一種方式來解決這一問題。
我們知道做為單一程序員精通的技能越多越好,然而做為企業解決方案應該盡可能的減少不同種類的技術引用,因為每多引入一種技術,就要配備相應技能的人員,尤其是引入了使用面不那么廣的技術,可能導致招聘都困難。
同時精通PHP,Java,JS,OC,Linux以及Mysql這樣的程序員肯定不多見.如果有這樣的程序員也就大概三五個,便能將傳統開發模式下幾十人運營和維護的項目拿下來.可這種程序員卻實是太少了,即便是像京東,百度這樣的公司里面傳統意義上的全棧工程師數量也不多.我們來看看這些大公司是如何解決這些問題的.市場上最多的就是Web程序員,徜若我們給Web開發程序員增加一些額外的技能,能不能讓他們完成全棧工程師完成的工作呢?
當然可以了,答案就是我們今天要給大家介紹的Native Bridge技術.普通Web程序員通常會掌握一門后端開發語言以及前端Web開發語言JS,比如你之前學的是JavaEE那么你肯定會Java語言和JS語言,如果你學的是PHP,那么你精通的是PHP語言和JS語言.如果你專門去學H5在涉及到Ajax與服務器通信的時候,你也需要同PHP或者是Java等后端語言進行交互。
我們知道全球有82%的網站是用PHP做的,PHP程序員都會PHP和JS,如果我們僅使用兩種編程語言甚至是一種編程語言,就能完成一個擁有網頁端,微信端,app端的多端應用.那么我們將能培養大量的全棧工程師,這批全棧工程師可以勝任移動互聯網領域所有的開發崗位。
現在市面上流行的混合app框架有很多,這些構架大部分都是國外的.比如:FaceBook開源的ReactNative就是其中的佼佼者,在加上單頁App技術成熟與普及使得僅使用PHP加JS就可以完成整個項目開發。
那么是不是我們只學習類似ReactNative構架就可以做全棧工程師了呢?問題沒那么簡單,如果你在國外或許還真行,可是在國內我們要想精通混合App開發模式,我們需要了解混合App實現原理也就是NativeBridge技術,因為國外的框架是不會集成支付寶和微信的,而國外集成的很多好用的組件也因為國內網絡的特殊性導致我們部分組件無法正常使用。
要能靈活地使用NativeBridge完成自己的項目開發,我們除了必要的編程語言技能外,還需要對移動互聯網的整個生態與行業特點,比如說在國內我們很多的項目會接入微信公眾平臺,并且微信也有提供相應的JSSDK讓我們的網頁擁有調用掃碼,語音識別的能力.那么我們開發的平臺要想讓我們的程序做到一次開發多端兼容,那么我們除了兼容IOS,Android以外還應把微信,支付寶,微博這樣的行業巨頭考慮進去。
NativeBridge的實現原理其實并不復雜,大的原則來說就是講數據渲染,用戶交互,流程控制等核心業務類開發需求交給Web程序員來完成.而涉及到手機硬件和第三方平臺提供的功能則使用底層封裝并提供統一的JS與PHP接口,這種封裝技術叫做NativeBridge。
那么我們下面在來看一下Android和IOS分別是如何實現NativeBridge的.以下的演示是為了方便大家看懂原理,所以對代碼進行了大量的簡化,與兄弟會在商業項目中正在大量使用的封裝存在較大差距.如果是把商業級代碼直接擺出來不利于大家理解,也違反公司規定。
Objective-C怎么訪問JavaScript呢？
在我們iOS應用里面會嵌套一個叫UIWebView的類似瀏覽器的組件，可以展示HTML。
UIWebView對象有一個方法：
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
該方法能夠執行一段JavaScript字符串, 并返回字符串類型的返回值。
在iOS里面，JavaScript 是不能直接調用Objective-C的，在ios7以前我們會用攔截協議的形式實現。這個適合一些比較簡單的情況，不需要引入框架，只需要web前端配合就可以。
攔截協議。其實就是URL請求截獲。在UIWebView的瀏覽器的JavaScript中, 沒有相關的接口可以調用Objective-C的相 關方法. 一般采用JavaScript 在瀏覽器環境中發出URL請求, Objective-C 截獲請 求以獲取相關請求的思路. 在Objective-C 中在實現UIWebViewDelegate 時截獲請求。
我們來看demo的效果：
JS 調用 Native 方法 ：在網頁里面的輸入框里面輸入文本，然后作為參數傳遞到 Native，Native接受參數后在界面進行展示。
Native 調用 JS 的方法 ：在Native里面也有2個輸入框接收用戶輸入，將輸入作為參數傳遞給JS之后，JS控制在網頁里面顯示。
我們首先來看看大家比較關心的HTML是怎么寫的。
JS實現如下：
JS調用Native，就是在這里和iOS還有安卓約定好一個jsObj對象，這個jsObj對象是移動端提供的，大家在HTML代碼里是沒有看到的。
其實移動端在加載HTML的時候，會在上下文中注入這個對象到咱們JS中。咱們就可以直接調用這個對象的方法,這個對象提供了一個HtmlcallJava方法，并接受2個參數，JS用,window.jsObj.HtmlcallJava(username, password);調用就行。類似的還需要其他方法，跟移動端約定好后往jsObj對象里面添加就行，然后可以直接調用了。
提供給Native調用的方法就簡單了，按照約定好方法名和參數，接受參數后實現我們的業務就行。
還是相對比較簡單，但在我們的業務里面是遠遠不夠的，往往參數很多，傳參的時候可能要序列化成json格式，有必要的時候還要加密，還有和移動端交互的方法很多，還要便于管理。當然在這里我們只是給大家提供一個思路，原理和實現，在我們實際開發中會有一套嚴格的規范，在后續的直播課或者咱們兄弟連的全棧班里面會陸續給大家講解
HTML是可以放在服務器里面，提供URL給客戶端調用，在這里我們為了方便調用放在客戶端本地。
很簡單，沒有做大的布置。界面里面嵌套了一個web組件，下面是iOS放置的一些控件提供輸入還有提交。
先來說說JS調用iOS：在HTML加載完畢時注入 JS對象jsObj，當JS調用相應方法時候由注入的jsObj對象對應的方法發送一個URL，這個URL帶上了該方法名，還有參數。
當JS調用的時候，也即URL觸發的時候，會在web組件的代理即回調里面相應。截取該URL，然后根據截取URL后的信息，解析出來方法名，還有參數。
這個時候就會調用iOS已經寫好的提供的方法了，例子的方法接收參數，給加界面上的組件賦值就可以展示。
iOS調用JS就比較簡單了，用web組件提供的方法。
(NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
執行JS代碼就行了。
