Beyond the React Native Benchmark

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@kulkarniankita9 Raise your hand ✋ How many of you are working towards or already have apps in the app store?

Slide 3

Slide 3 text

@kulkarniankita9 Hi, I’m Ankita!

Slide 4

Slide 4 text

@kulkarniankita9 Let’s go on a project journey

Slide 5

Slide 5 text

@kulkarniankita9 From a project perspective

Slide 6

Slide 6 text

@kulkarniankita9 Bootstrap your project

Slide 7

Slide 7 text

@kulkarniankita9 Directory structure index.js App.js ios/ android/ src screens login index.js actions/epic/reducer/selector common components button primaryButton/secondaryButton/tertiaryButton

Slide 8

Slide 8 text

@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"

Slide 9

Slide 9 text

@kulkarniankita9 Routing

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@kulkarniankita9 Do you have an existing web app?

Slide 12

Slide 12 text

@kulkarniankita9 Business logic

Slide 13

Slide 13 text

@kulkarniankita9 Business logic • Move your business logic to a utility library

Slide 14

Slide 14 text

@kulkarniankita9 Challenges • A lot of shared context made it diﬃcult to share code Vertical slicing modules eg: auth, biometrics

Slide 15

Slide 15 text

@kulkarniankita9 From components perspective

Slide 16

Slide 16 text

@kulkarniankita9 Translations

Slide 17

Slide 17 text

@kulkarniankita9 Component library

Slide 18

Slide 18 text

@kulkarniankita9 Common components ✨ • ScrollView • SafeAreaView ⛑ • KeyboardAwareScrollView ⌨ • Text components: Headings, Body, Captions ✅ • Form components: InputText, Button

Slide 19

Slide 19 text

@kulkarniankita9 Challenges • Creating basic components was getting diﬃcult to manage We adopted styled-components for design components We used Stylesheets for screen design

Slide 20

Slide 20 text

@kulkarniankita9 From a design perspective

Slide 21

Slide 21 text

@kulkarniankita9 Static assets As a user , I want to see the company’s logo in the login background company-logo.png [email protected] [email protected] React-native-vector-icons: IcoMoon

Slide 22

Slide 22 text

@kulkarniankita9 Design tokens

Slide 23

Slide 23 text

@kulkarniankita9 Use Storybook

Slide 24

Slide 24 text

@kulkarniankita9 Challenge • Biggest hurdle: Communication between design & dev Storybook and design tokens

Slide 25

Slide 25 text

@kulkarniankita9 From a release perspective

Slide 26

Slide 26 text

@kulkarniankita9 Continuous everything

Slide 27

Slide 27 text

@kulkarniankita9 Continuous everything • App distribution to devices is easier • CodePush: Push live updates is faster

Slide 28

Slide 28 text

@kulkarniankita9 Bugs and regressions

Slide 29

Slide 29 text

@kulkarniankita9 Bugs and regressions

Slide 30

Slide 30 text

@kulkarniankita9 You can ship hot ﬁxes without going through

Slide 31

Slide 31 text

@kulkarniankita9 Challenges • There are too many tools out there that try to solve CI/CD We used VS App Center

Slide 32

Slide 32 text

@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: Deﬁnitely provide a test account

Slide 33

Slide 33 text

@kulkarniankita9 Misc.

Slide 34

Slide 34 text

@kulkarniankita9 Animations with Lottie

Slide 35

Slide 35 text

@kulkarniankita9 This is pretty much the end.. Questions? Comments? Feedback…make it positive— Catch me after!!

Slide 36

Slide 36 text

@kulkarniankita9 You did it