你已经投入了大量的时间和精力来学习JavaScript。React为你提供了一个组织良好的框架来编写优秀的单页应用程序(SPA)。但是,移动方面呢?你可以去学习iOS平台的Objective C或Swift。还有,你可以去学习Android平台的Java或Kotlin。但是,如果你可以使用你已经拥有的技能,写一次代码并在iOS和Android上运行呢?看起来很牵强?这正是React Native带给你的东西。
不过还有一个挑战:在苹果应用商店或谷歌应用商店更新代码可能需要数周时间。想象一下,你在React Native中建立并部署了一个新的功能到应用商店,而你在事后发现了一个重大问题。等待两周(或更长时间)的更新会很快让你的用户群对你的应用感到失望。这就是功能标志的作用。
功能标志是一种控制谁可以使用某项功能以及何时使用的方法。你可以只对内部的测试人员启用一个功能,然后再扩大到外部的测试人员群体,最终对所有人启用这个功能。如果该功能出了问题,你可以按下 "大红按钮"--一个即时禁止所有人使用该功能的开关。所有这些就像你的应用程序的远程控制。该功能已在生产中并在应用商店中使用。我们把这称为 "生产中的测试"。
在这篇文章中,我告诉你如何使用Split闪亮的新React Native SDK在生产中进行测试。Split是一个配置和管理功能标志的平台,可以监测性能,并对任何异常行为发出警报。首先要做的是:创建一个免费的Split开发者账户。
开始使用功能标志
如果你还没有一个免费的Split账户,请注册一个。
一旦你登录了你的Split账户,点击左上角的DE。Split有一个工作区的概念,你可以拥有多个工作区。当你第一次创建账户时,会给你提供一个默认的工作空间,这就是DE所代表的。在工作区弹出的底部,点击管理设置(在你的组织名称下面)。点击API密钥。注意,一些API密钥类型已经为你分配好了。当你创建一个账户时,一组服务器端和客户端的密钥被分配到暂存和生产环境中。你可以在这些环境中拥有任何数量的环境和任何数量的API密钥,但这些是合理的默认值,涵盖了大多数使用情况。
客户端API密钥比服务器端API密钥的权限要小,适用于任何 "公共 "类型的应用程序。这就是浏览器、移动和桌面类型的应用程序,这也是我们在这篇文章中所关注的内容。它们被称为 "公共",因为你对它们的运行环境没有任何控制。黑客很容易在二进制应用程序的有效载荷中搜索重要的字符串,如API密钥。因此,在这些环境中使用特权较少的密钥是比较安全的。
复制客户端Prod-default API密钥,并将其保存在某个地方,以便以后我们挖掘代码时使用。
下一步的工作是创建一些功能标志,我们以后在代码中行使。
在左边的导航中,点击Splits。分割是特征标志的同义词。点击 "创建分割"。给它起个名字:profile_feature,为流量类型设置用户,然后点击创建。祝贺你!你已经创建了你的第一个分片。但是,如果没有定位规则,它的作用就不大了。定位规则决定了该功能将如何(或是否)对个人用户可用。单独的目标定位规则被称为处理。点击添加规则。这立即会出现一个有很多选项的页面。这是因为你可以为一个功能标志拥有任何数量的处理方法,以及如何使用这些处理方法的许多不同规则。现在,我们要接受合理的默认值。也就是说,有两个预定义的处理方法:on 和off ,默认规则是off 。点击保存更改。每当你在Split中做了一个改变,你就会看到一个确认屏幕。这向你展示了所有以加减法的不同风格改变的元素。向下滚动并点击确认。
使用上述步骤再创建一个分割(用默认的处理方法)。但是,把这个分割称为:about_feature。
我们很快将在代码中检查的情景是,你已经为你的应用程序添加了一些新的功能,以显示用户的个人资料,并提供关于应用程序的信息。你已经将这些新功能部署到了应用商店,但你想控制谁能看到这个新功能,以便有控制地推广。最初,你的大多数新用户不会看到这些新功能。但是,当你在生产中完成测试后,你将在Split中 "打开开关",每个人都可以看到这些新功能,而不需要你发布一个新版本(并等待数周时间让它出现在应用商店)。
使用功能标志的React Native的操作
这篇文章的代码可以在Split的官方React Native例子GitHub repo中找到。
克隆 Repo 并在你选择的编辑器中打开该项目。我使用Visual Studio Code。
运行示例代码的前提条件
为了开始工作,你需要一个或两个移动应用程序的开发环境。虽然你不需要直接处理这些工具,但React Native确实使用他们的工具来构建和运行你的代码。
对于iOS,你需要有一台Mac和Xcode开发工具。
对于Android,你需要有Android Studio。注意:你需要至少安装一个模拟器来测试Android的代码。
你还需要安装Node.js。截至本文写作时,我使用的是Node.js v14.16.1。nvm工具对于管理Node.js版本也是非常方便的。
这个例子的应用是用expo-cli工具创建的。这个工具使你可以很容易地在本地处理你的应用程序,并为你的React Native应用程序在应用程序商店的发布做准备。在这篇文章中,我们将从头开始构建应用程序,所以你需要这个工具。
下面的章节概述了从头开始构建应用程序,但如果你想跟着做,也可以使用GitHub repo)。让我们开始构建吧!
Bootstrap React Native与Split
下面是我们如何在本地使用React原生应用的一点经验。
在命令行中,我创建了一个裸体项目。从项目文件夹中,我启动了expo,它又启动了一个方便的网络界面。从浏览器中,我可以启动iOS模拟器和Android模拟器,并在当前状态下启动应用程序。当我们做出改变时,两者都会对应用的改变做出反应。
要开始,请执行以下操作。
expo init react-native-sdk-example
Code language: Java (java)
选择空白并点击回车。这将创建一个空的项目,并为你安装初始依赖。
接下来,执行下面的命令。
cd react-native-sdk-example npm install @splitsoftware/splitio expo start
Code language: Java (java)
这将把Split SDK的依赖关系安装到应用程序中(目前尚未使用),并在浏览器中启动开发工具。从那里,你可以启动iOS模拟器和Android模拟器。
注意:你不必同时启动这两个模拟器,但在这篇文章中,我将使用这两个模拟器来演示React Native的 "一次编写,随地运行 "的概念。
在这一点上,你应该处于类似于上图的状态。
更新应用程序以整合Split
在前面的命令中,我们已经安装了Split SDK的依赖项。现在,我们将添加使用它的代码。
让我们从Split中抓取React Native示例,并复制代码和资产。在一个新的终端窗口,执行以下命令。
git clone https://github.com/splitio/react-native-sdk-example react-native-sdk-example-complete cd react-native-sdk-example cp ../react-native-sdk-example-complete/assets/* assets/ cp ../react-native-sdk-example-complete/App.js .
Code language: Java (java)
这些命令将官方的Split React Native SDK示例克隆到你之前生成的那个文件夹旁边。然后,代码的关键元素被复制过来。所有这些都可以在expo仍在运行时完成。
在你选择的编辑器中打开App.js 文件,用你在文章前面复制的api密钥替换<API-KEY> 。保存该文件。回到expo正在运行的终端窗口,点击r 键,重新加载。现在,你应该看到,每隔3秒,应用程序就会从你账户中的功能标志列表中随机拉入一个功能标志的状态信息。如果你一直跟着这个帖子走到现在,你应该看到你之前创建的profile_feature 和about_feature 功能标志的信息。
注意: 当在安卓设备或模拟器上以调试模式运行你的应用程序时,你可能会收到一个警告通知,指出 "在安卓系统中设置一个长时间的定时器是一个性能和正确性问题"。由于SDK是如何使用JS定时器的,忽略或隐藏这个警告是完全安全的。
请注意,处理值总是off 。这是因为我们把它作为默认处理。回到你的浏览器中,在你登录到你的Split账户中,让我们更新这些功能标志的行为。
点击左手边导航上的Splits。点击about_feature。向下滚动,在 "设置默认规则"部分,将数值从关闭改为开启。点击保存更改。注意到差异并点击确认。
下一次应用程序更新并选择about_feature 功能标志时,你应该看到该处理现在是打开的。
这是一个查看代码的好地方,可以真正看到发生了什么。然后,我们再来看看一些功能标志的设置及其对应用程序的影响。
在App.js 的顶部,你可以看到我们正在导入SplitFactory 。
import { SplitFactory } from '@splitsoftware/splitio';
Code language: JavaScript (javascript)
这看起来很直接。在幕后,这个声明是利用了Split对SDK的模块化设计。只有那些对你的应用程序来说是必要的对象才会被带入范围。这可以使你的二进制文件更加紧凑,这在Android上尤其值得关注。
看看_initSdk (为了简洁起见,我省略了部分内容)。
_initSdk() { const factory = SplitFactory({ core: { authorizationKey: '<API KEY>', key: 'react_native_example', }, debug: false }); this.client = factory.client(); this.manager = factory.manager(); ... }
Code language: C# (cs)
在这里,我们用一个包括你的API密钥的配置来实例化SplitFactory 。然后,我们使用这个工厂来获得对Split客户端和Split管理器的访问。正是Split管理器允许我们获得定义的特征标志的列表。看一下_initSdk 函数的其余部分。
_initSdk() { ... this.client.on(this.client.Event.SDK_READY, () => { this.intervalId = setInterval(() => { // store id for cleanup on unmount. const splitNames = this.manager.names(); const evaluatedSplit = splitNames[Math.floor(Math.random() * splitNames.length)]; this.setState({ treatment: this.client.getTreatment(evaluatedSplit), evaluatedSplit: evaluatedSplit, splitNames }); }, 3000); }); }
Code language: JavaScript (javascript)
这里有很多事情要做,所以让我们把它分解一下。首先,Split SDK有一个事件驱动模型。我们不想使用客户端或管理器,直到我们确定它已经准备好了。因此,我们在SDK_READY 事件上添加一个监听器。该事件的处理程序使用JavaScript的setInterval 函数,每隔3秒执行另一个函数。
被执行的主要内容如下。
- 获得一个功能标志名称的列表。
const splitNames = this.manager.names() - 从列表中随机选择一个名字。
const evaluatedSplit = splitNames[Math.floor(Math.random() * splitNames.length)]; - 获得所选处理的状态。
this.client.getTreatment(evaluatedSplit) - 在应用程序中显示所选择的治疗方法的名称、其状态以及特征标志的列表。
this.setState({ treatment: this.client.getTreatment(evaluatedSplit), evaluatedSplit: evaluatedSplit, splitNames });
更多高级功能标志设置
假设你发现你的新about_feature ,导致应用程序崩溃或在应用程序中出现不可接受的延迟。在这成为问题之前,你可以很容易地触发 "杀戮开关",对所有人禁用该功能。
在你的浏览器中的Split控制台,点击左侧导航中的Splits,然后点击about_feature。点击右上方的红色 "杀死"按钮。在表格栏中输入KILL,然后点击Kill确认。回到你的安卓模拟器和iOS模拟器中,你应该看到about_profile ,该功能显示为关闭。
假设你想在生产中以可控的方式进行测试。你可以增加看到新功能的人,并监测结果。假设一切顺利,你可以按百分比不断增加,直到达到100%on ,这时所有用户都会看到新功能。
在你的浏览器中的Split控制台,点击左侧导航中的Splits,然后点击profile_feature。向下滚动到设置默认规则部分,从服务下拉菜单中选择百分比。将on 设置为90(这将自动将off 设置为 10)。点击保存更改并确认。回到iOS模拟器和安卓模拟器中,你应该可能看到,profile_feature 现在是on 。然而,如果它仍然显示off ,这不是一个错误。它只是意味着你落在了Split随机创建的10%的桶里。
React Native和功能标志的下一步是什么?
我希望这个关于Split的React Native SDK和功能标志的旋风之旅,对你来说是有用的。能够利用你已经掌握的技能,立即成为一名移动开发者,是一件令人激动的事情!而且,有了功能标志,你不需要再去做什么。有了功能标志,你就不必担心应用商店的缓慢更新周期。用斯普利特的方式在生产中发布和测试!
你可以用Split做的还有很多,包括监控、警报和实验。这里有一些资源,你可能会觉得有用。
- 15分钟内完成特征监控 (代码教程
- 用警报策略快速响应指标 的下降 (博客)
- 实验的基本指南