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

原文 BY Tommy MacWilliam

无论是为了让用户的体验更好,还是为了跑A/B测试,我们一直都在努力提升Quora的移动端和网页端的用户体验。Quora的iPhone和Android版App都能够通过内置浏览器Webviews来执行Javascript代码,这样我们就能够跳过App/Play Store来进行较大规模的更新(进一步阅读:从头开始重新构建iPhone版Quora)。

让我们来看一些例子,首先从第一打开App的时候开始:

Quora登录注册页

这个页面上的所有内容都能够进行A/B测试而不用发布新版本。事实上,整个页面是个全屏的WebView,里面呈现了我们服务器上的Html5页面。我们使用了一些原生代码来处理登录注册相关的交互,却能够在不更新客户端的前提下替换页面上的任意内容。通过这种方式我们能够轻松进行A/B测试。

当你登录之后首先看到的是Feed流,下面这张图说明了这个页面哪些用了原生代码,而哪些是使用了Web代码:

Feed页面(蓝色的是原生部分,绿色的是Web部分)

绿色框中的内容我们都可以任意A/B测试而不用更新客户端,而蓝色框中的内容想要更改就只能去App Store发布新版本了。例如,当你按下导航栏坐上角的Feed按钮时会触发一个原生事件,因此这种情况下我们没有办法不通过App Store就改变这中交互。但是,这个原生事件触发后的效果是下划一个新的包含了WebViewUIView,因此里面包含的内容我们是能够进行A/B测试的。

点击Feed按钮弹出的下拉框 里面的内容可以轻松替换

不过上面说的并不意味着在不更新App/Play Store的客户端的前提下,所有的使用原生代码实现的功能都无法修改。当我们添加一些新内容时,我们都会在其中隐藏一些“钩子”(hooks),进而这些内容都能够通过Javascript来修改了。例如,下部导航栏的标签都是原生的组件,但在我们写它们的时候加入了即使不修改原生代码,也能够允许上面的文字改变的功能。可能一些聪明的用户已经注意到之前我们上线测试写文章模块时(Write Page)并没有发布新版本,尽管原生部分的改变相当明显。这都归功于之前加入的功能,把底部标签栏标签上的文字从"Open Questions"改为了"Write"。

另外像新添加文字这种小的修改我们也能够不发布新版本就进行A/B测试。比如说想要在"Your Content"部分进行A/B测试,我们应该怎么做?

Your Content

再回到上面Feed的例子,顶部导航和底部标签栏中间的所有部分都是在服务器上生成的Web网页,因此我们可以很方便地对语言、布局、颜色或字体大小等进行修改。顶部导航上的标题是原生的部分,但也能够通过Javascript修改,也不需要发布新版本。右上角的按钮也一样,Javascript决定上面显示的内容,因此这里也可以很方便地对语言做A/B测试。当你按下这个按钮,你会看到这样的一个浮层:

点击Feed右上角的按钮后

显然这里能看到的所有东西都能够很方便地修改,无论是内容、按钮文字、标题或是按钮的行为等。事实上,我们能够在不提交App/Play Store新版本的情况下改变任何一个原生按钮的行为。所以说,如果我们想要对某个页面的切换行为做A/B测试:切换导航与弹出浮层 —— 依然不需要提交新版本。更夸张一点,甚至将一个按钮改为做另一件完全不同的事(比如,在当前页弹出一个搜索栏),依然不需要新版本。

最后总结一下,我们能够不通过App/Play Store而改变App上绝大多数UI元素(无论是原生的还是Web的)的行为。这种架构以及我们的持续开发模型(continuous deployment model)使得我们能够快速迭代,从而做出更好的产品。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容