Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Beyond the React Native Benchmark

Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=47 Ankita Kulkarni
July 11, 2019

Beyond the React Native Benchmark


Ankita Kulkarni

July 11, 2019


  1. @kulkarniankita9 Beyond the React Native Benchmark Ankita Kulkarni, Solutions Architect,

  2. @kulkarniankita9 Raise your hand ✋ How many of you are

    working towards or already have apps in the app store?
  3. @kulkarniankita9 Hi, I’m Ankita!

  4. @kulkarniankita9 Let’s go on a project journey

  5. @kulkarniankita9 From a project perspective

  6. @kulkarniankita9 Bootstrap your project

  7. @kulkarniankita9 Directory structure index.js App.js ios/ android/ src screens login

    index.js actions/epic/reducer/selector common components button primaryButton/secondaryButton/tertiaryButton
  8. @kulkarniankita9 Directory structure • Add a package.json to the root

    level directory structure so your imports look normal: import { TextInput } from “@app/common/components/form/textInput” And not: import { TextInput } from “../../../../common/components/form/textInput"
  9. @kulkarniankita9 Routing

  10. @kulkarniankita9 React native navigation challenges • Major re-write • Documentation

  11. @kulkarniankita9 Do you have an existing web app?

  12. @kulkarniankita9 Business logic

  13. @kulkarniankita9 Business logic • Move your business logic to a

    utility library
  14. @kulkarniankita9 Challenges • A lot of shared context made it

    difficult to share code Vertical slicing modules eg: auth, biometrics
  15. @kulkarniankita9 From components perspective

  16. @kulkarniankita9 Translations

  17. @kulkarniankita9 Component library

  18. @kulkarniankita9 Common components ✨ • ScrollView • SafeAreaView ⛑ •

    KeyboardAwareScrollView ⌨ • Text components: Headings, Body, Captions ✅ • Form components: InputText, Button
  19. @kulkarniankita9 Challenges • Creating basic components was getting difficult to

    manage We adopted styled-components for design components We used Stylesheets for screen design
  20. @kulkarniankita9 From a design perspective

  21. @kulkarniankita9 Static assets As a user , I want to

    see the company’s logo in the login background company-logo.png company-logo@2x.png company-logo@3x.png React-native-vector-icons: IcoMoon
  22. @kulkarniankita9 Design tokens

  23. @kulkarniankita9 Use Storybook

  24. @kulkarniankita9 Challenge • Biggest hurdle: Communication between design & dev

    Storybook and design tokens
  25. @kulkarniankita9 From a release perspective

  26. @kulkarniankita9 Continuous everything

  27. @kulkarniankita9 Continuous everything • App distribution to devices is easier

    • CodePush: Push live updates is faster
  28. @kulkarniankita9 Bugs and regressions

  29. @kulkarniankita9 Bugs and regressions

  30. @kulkarniankita9 You can ship hot fixes without going through

  31. @kulkarniankita9 Challenges • There are too many tools out there

    that try to solve CI/CD We used VS App Center
  32. @kulkarniankita9 App Store submission checklist • Read the Human 9

    Interface Guidelines carefully • Links must be clickable with touchable area • If you are using a 3rd party provider, provide more info • Section: Additional info - provide a lot of detail ℹ • Test Account: Definitely provide a test account
  33. @kulkarniankita9 Misc.

  34. @kulkarniankita9 Animations with Lottie

  35. @kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make

    it positive— Catch me after!!
  36. @kulkarniankita9 You did it