1. 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.

2. 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.

3. @johnwargo
Software Developer, Writer, Presenter, Husband, Father, Geek
Principal Program 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

4. 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.”

5. 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

7. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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.

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

16. Constructor

17. Push Listener

18. Resources Visual Studio Mobile Center: Source Code: Blog post
Source Code:
Blog post

19. 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.