9/7/2018 4:46 PM Creative Hacking: Delivering React Native App A/B Testing Using CodePush John M. Wargo © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

ReactiveConf October 27, 2017 Bratislava, Slovakia 9/7/2018 4:46 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

@johnwargo Software Developer, Writer, Presenter, Husband, Father, Geek Principal Program Manager @ Microsoft Part of the team working on Visual Studio Mobile Center Responsible for Microsoft’s JavaScript Mobile tooling: Visual Studio Code Extensions for Cordova and React Native Contributor to the Apache Cordova Project Authored some books on mobile development

Creative Hacking Not some cool methodology for delivering more thoughtfully crafted code. Instead: “Using a tool for a purpose other than for which it was designed.”

React Native A/B Testing What are my options? Deploy two or more versions of my React Native app; use analytics to track user activity in each Mock up two versions of the app with React (or some other framework) then use existing web A/B testing approaches to split the audience across the two versions; use analytics to track user activity in each Utilize something that enables me to deploy one app, but with different content; use analytics to track user activity in each

Microsoft Visual Studio Mobile Center Cloud offering, in Preview today Includes the following services: Build Test Distribute (two options) Push notifications Crash Analytics Expected expansion to include MBaaS services

Visual Studio Mobile Center: CodePush Over the air (OTA) updates to application’s content Supports Apache Cordova and React Native Distribute app with initial content Use Mobile Center command-line interface (CLI) to: Define additional deployment channels Upload content to deployment channels Deploy app updates through the cloud Deploy an update to a percentage of the user population

Using CodePush Client-side: Two Options CodePush automatically checks for updates and applies them Application manually triggers update check depending on application needs App Store Warning: Content update should not change the nature of the application

A/B Testing Using the CodePush CLI Deploy the alternate version using the CLI code-push release-react APP_NAME PLATFORM --rollout 25 code-push release-react APP_NAME PLATFORM –r 25

A/B Testing Another Way Deploy the updated version of the app to CodePush Use Mobile Center push notifications to deliver the CodePush deployment key to the app Application logic triggers CodePush sync using the deployment key Application content refreshes within the ap Use Mobile Center Crashes feature to detect crashes Use Mobile Center Analytics to track user’s activities within the app

The Approach Visual Studio Mobile Center CodePush Service CodePush CLI React Native App (base) React Native App (Revision A) Visual Studio Mobile Center Push Service The ’Cloud’ Smartphone React Native App (Revision B) Visual Studio Mobile Center Crashes & Analytics

9/7/2018 4:46 PM Demo © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Getting the Deployment Key code-push deployment ls <App_Name> -k

Constructor

Push Listener

Resources Visual Studio Mobile Center: Source Code: Blog post https://www.visualstudio.com/vs/mobile-center/ Source Code: https://github.com/jwargo/ReactiveConf-2017 Blog post http://blog.nparashuram.com/2017/09/ab-testing-for-react-native-apps-with.html

9/7/2018 4:46 PM © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.