Grace Hopper 2018 presentation on Walking the road less traveled - Achieving cross-platform mobile development using React Natice

1. Mahi Sethuraman | @mahisethuraman
WALKING THE ROAD LESS TRAVELED
#GHC18
#TeamAmEx
C R O S S - P L A T F O R M M O B I L E D E V E L O P M E N T U S I N G R E A C T N A T I V E
“Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth”
By Robert Frost

2. PAGE 2 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#GHC18
#TeamAmex
Mahi Sethuraman
• Vice President Engineering, Global Risk and Finance
• American Express
• Twitter: @mahisethuraman
• LinkedIn: https://www.linkedin.com/in/mahisethuraman/
• Interests outside of work – mom, gardener and volunteer
ABOUT ME

3. PAGE 3 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#GHC18
#TeamAmex
OVERVIEW
• Mobile development options
• Design considerations
• Glass framework & Prism components
- Navigation
- Internationalization
- Native language specification
- Redux integration
• Native Modules
• Lessons learned
• Q&A

4. #GHC18PAGE 4 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC18
#TeamAmex
Native
Platform specific
• Rich native UX
• Performant
• Proven path
Progressive
Web App
Hybrid React Native
MOBILE DEVELOPMENT OPTIONS
Reuse UX across web
and mobile
• HTML5, CSS3 and
JS
• Responsive
• Limited native
features
• Varied browser
support
Reuse UX across iOS
& Android
• HTML and
WebView
• Plugins to access
native features/API
Reuse UX across iOS
& Android
• Native UI wrapped
in JS
• RCTbridgemodule
to write native
modules
• Hot reloading

5. PAGE 5 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#TeamAmex
DESIGN CONSIDERATIONS
Target audience
3 international markets
New channel to drive digital engagement
Team
Mostly web developers
iOS and Android were popular mobile OS in markets Time and money
Success of pilot to determine future
investment
Funded enough to launch pilot
App features
View transactions, statements and cross-sell offers

6. PAGE 6 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#TeamAmex
GLASS FRAMEWORK
GLASS – Our hassle-free framework to build an enterprise React Native app with Amex
environment context built-in

7. PAGE 7 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#TeamAmex
Internationalization – wrapper around react-native-i18n.js, async translation fetch
React Navigation – Stacked header style
Redux – Logger, crash reporting, analytics
Prism UI Components - Input Box adhering to design language specification
Appium test automation framework
Prism Native Components – needed a few!
PRISM COMPONENTS
Core components created

8. PAGE 8 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#TeamAmex
NATIVE MODULES
vPDF viewing – RNFileRenderer
vSecure store
vBiometric authentication

9. PAGE 9 | GRACE HOPPER CELEBRATION 2018
PRESENTED BY ANITAB.ORG AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC18
#TeamAmex
LESSONS LEARNED
v Debugging app crashes requires upfront planning
v Surprises with network API
v Native build tooling is complex!
v Coming soon – over-the-air-update

10. “Two roads diverged in a wood, and I—
I took the one less traveled by,
And that has made all the difference.”
Robert Frost
#GHC18

11. #GHC18
#TeamAmex
We’re hiring!
Visit American Express @ Booth
#7042