Building finance app from scratch Groww

In this presentation, i have shared my experience on building a full-fledged finance application called Groww

Transcript

1. Meetup #05
2. Building a Finance App using React-Native
3. John Francis Frontend Developer @ @john1jan
4. is rated one of the highest rated app in Mutual fund category 4.5+ Google Playstore Rating 1Million+ installs on Android.
5. Why • Vast developer community support • Great user experience • High-performance • Reusable components • Single code-base for both Android and iOS • Building anything in native and bridge it ?
6. BolierPlate • Starting a project from scratch can be a lot of work and finding the right boilerplate can help speed up your development process https://infinite.red/ignite
7. • A good file structure • Great documentation • Best practices built-in and ready to go • A vibrant community • New and updated libraries like redux, redux-saga, react-navigation, etc • CLI for creating components and containers. • Supports multiple themes • Built-in support for API testing
8. Other boilerplates Snowflake
9. Dev environments • react-native-config: https://github.com/luggit/react-native- config • Give 12 factor love to your apps
10. • CodePush is a service provided by Microsoft • Push out new versions of your javascript bundle
11. Types of mode • Silent Mode • Active Mode
12. Types of silent mode push • IMMEDIATE: The update will be applied to the running application immediately. • ON_NEXT_RESTART: The update will be downloaded but not installed immediately. • ON_NEXT_RESUME: The update will be downloaded but not installed immediately.
13. Pros 1. Fix any critical bugs without the need to update the app 2. Update app without going through Apple Store review 3. Rollback any feature or bug Cons 1. Native side changes can’t be pushed 2. Adds up app’ start-up time 3. Complex to maintain bundles and code push versions
14. Capturing crashes Don’t blindly guess… Crash reporting gives you the power to know.
15. Tools
16. Bugsnag stacktrace
17. Bugsnag dashboard
18. ErrorBoundaries React 16
19. Super Dad (react 16)
20. Error Screen
21. Where to use ErrorBoundary ? • Root Component (must) • Main Sections of the page like Header, Footer and Middle Content • Stand alone components like Chat Window, Search Bar • Wherever you suspect that the error might occur
22. When does it wont catch ? • Errors in the same component • On event handlers unless error is due to state change • Error in try catch block unless error is due to state change • Error in asynchronous code unless error is due to state change • Server side rendered web applications
23. componentDidCatch(error, info) { this.setState( hasError: true }) bugsnag.notify(error); } Log errors
24. Onboarding Users New users who come on to your platform are motivated to make the most out of your product, so make it simpler and easy for them to do so.
25. Some react native packages used • react-native-image-picker: For capturing pictures of the documents of the user and for recording videos of the user • react-native-video-player: For playing the video of the user • react-native-google-signin: For adding google sign in feature • react-native-firebase: For adding firebase push notification, remote config and other features firebase has. • react-native-signature-capture: For capturing users signature on the app • react-native-modalbox: For popups • react-native-local-auth: For securing the app with the device’s passcode • react-native-custom-tabs: For opening chrome custom tabs
26. Releasing Groww in iOS
27. iOS changes • Font change • Toast messages • DatePicker • Push notification • iPhone X support
28. Test on both platforms while developing
29. @john1jan Thank You @john1jan Follow us on Medium https://medium.com/groww-engineering