【譯】Quora的iPhone版App都在哪里使用了Html5游昼?

原文 BY Tommy MacWilliam

無論是為了讓用戶的體驗更好仪缸,還是為了跑A/B測試,我們一直都在努力提升Quora的移動端和網頁端的用戶體驗痴荐。Quora的iPhone和Android版App都能夠通過內置瀏覽器Webviews來執(zhí)行Javascript代碼血柳,這樣我們就能夠跳過App/Play Store來進行較大規(guī)模的更新(進一步閱讀:從頭開始重新構建iPhone版Quora)。

讓我們來看一些例子蹬昌,首先從第一打開App的時候開始:

Quora登錄注冊頁

這個頁面上的所有內容都能夠進行A/B測試而不用發(fā)布新版本混驰。事實上,整個頁面是個全屏的WebView,里面呈現了我們服務器上的Html5頁面栖榨。我們使用了一些原生代碼來處理登錄注冊相關的交互昆汹,卻能夠在不更新客戶端的前提下替換頁面上的任意內容。通過這種方式我們能夠輕松進行A/B測試婴栽。

當你登錄之后首先看到的是Feed流满粗,下面這張圖說明了這個頁面哪些用了原生代碼,而哪些是使用了Web代碼:

Feed頁面(藍色的是原生部分愚争,綠色的是Web部分)

綠色框中的內容我們都可以任意A/B測試而不用更新客戶端映皆,而藍色框中的內容想要更改就只能去App Store發(fā)布新版本了。例如轰枝,當你按下導航欄坐上角的Feed按鈕時會觸發(fā)一個原生事件捅彻,因此這種情況下我們沒有辦法不通過App Store就改變這中交互。但是鞍陨,這個原生事件觸發(fā)后的效果是下劃一個新的包含了WebViewUIView步淹,因此里面包含的內容我們是能夠進行A/B測試的。

點擊Feed按鈕彈出的下拉框 里面的內容可以輕松替換

不過上面說的并不意味著在不更新App/Play Store的客戶端的前提下诚撵,所有的使用原生代碼實現的功能都無法修改缭裆。當我們添加一些新內容時,我們都會在其中隱藏一些“鉤子”(hooks)寿烟,進而這些內容都能夠通過Javascript來修改了澈驼。例如,下部導航欄的標簽都是原生的組件筛武,但在我們寫它們的時候加入了即使不修改原生代碼缝其,也能夠允許上面的文字改變的功能∨橇可能一些聰明的用戶已經注意到之前我們上線測試寫文章模塊時(Write Page)并沒有發(fā)布新版本氏淑,盡管原生部分的改變相當明顯。這都歸功于之前加入的功能硕噩,把底部標簽欄標簽上的文字從"Open Questions"改為了"Write"。

另外像新添加文字這種小的修改我們也能夠不發(fā)布新版本就進行A/B測試缭贡。比如說想要在"Your Content"部分進行A/B測試炉擅,我們應該怎么做?

Your Content

再回到上面Feed的例子阳惹,頂部導航和底部標簽欄中間的所有部分都是在服務器上生成的Web網頁谍失,因此我們可以很方便地對語言、布局莹汤、顏色或字體大小等進行修改快鱼。頂部導航上的標題是原生的部分,但也能夠通過Javascript修改,也不需要發(fā)布新版本抹竹。右上角的按鈕也一樣线罕,Javascript決定上面顯示的內容,因此這里也可以很方便地對語言做A/B測試窃判。當你按下這個按鈕钞楼,你會看到這樣的一個浮層:

點擊Feed右上角的按鈕后

顯然這里能看到的所有東西都能夠很方便地修改,無論是內容袄琳、按鈕文字询件、標題或是按鈕的行為等。事實上唆樊,我們能夠在不提交App/Play Store新版本的情況下改變任何一個原生按鈕的行為宛琅。所以說,如果我們想要對某個頁面的切換行為做A/B測試:切換導航與彈出浮層 —— 依然不需要提交新版本逗旁。更夸張一點嘿辟,甚至將一個按鈕改為做另一件完全不同的事(比如,在當前頁彈出一個搜索欄)痢艺,依然不需要新版本仓洼。

最后總結一下,我們能夠不通過App/Play Store而改變App上絕大多數UI元素(無論是原生的還是Web的)的行為堤舒。這種架構以及我們的持續(xù)開發(fā)模型(continuous deployment model)使得我們能夠快速迭代色建,從而做出更好的產品。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末舌缤,一起剝皮案震驚了整個濱河市箕戳,隨后出現的幾起案子,更是在濱河造成了極大的恐慌国撵,老刑警劉巖陵吸,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異介牙,居然都是意外死亡壮虫,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門环础,熙熙樓的掌柜王于貴愁眉苦臉地迎上來囚似,“玉大人,你說我怎么就攤上這事线得∪幕剑” “怎么了?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵贯钩,是天一觀的道長募狂。 經常有香客問我办素,道長,這世上最難降的妖魔是什么祸穷? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任性穿,我火速辦了婚禮,結果婚禮上粱哼,老公的妹妹穿的比我還像新娘季二。我一直安慰自己,他們只是感情好揭措,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布胯舷。 她就那樣靜靜地躺著,像睡著了一般绊含。 火紅的嫁衣襯著肌膚如雪桑嘶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天躬充,我揣著相機與錄音逃顶,去河邊找鬼。 笑死充甚,一個胖子當著我的面吹牛以政,可吹牛的內容都是我干的。 我是一名探鬼主播伴找,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼盈蛮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了技矮?” 一聲冷哼從身側響起抖誉,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎衰倦,沒想到半個月后袒炉,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡樊零,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年我磁,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片驻襟。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡十性,死狀恐怖,靈堂內的尸體忽然破棺而出塑悼,到底是詐尸還是另有隱情,我是刑警寧澤楷掉,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布厢蒜,位于F島的核電站霞势,受9級特大地震影響,放射性物質發(fā)生泄漏斑鸦。R本人自食惡果不足惜愕贡,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望巷屿。 院中可真熱鬧固以,春花似錦、人聲如沸嘱巾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旬昭。三九已至篙螟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間问拘,已是汗流浹背遍略。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留骤坐,地道東北人绪杏。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像纽绍,于是被迫代替她去往敵國和親蕾久。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內容