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