This document discusses the history and generations of mobile app development from websites and jQuery mobile to native iOS/Android apps to modern approaches using JavaScript and frameworks like React Native. It provides an overview of React Native, highlighting that it allows developing for iOS and Android with one codebase, uses native components for performance, and simplifies testing and debugging. The document also discusses considerations for choosing development approaches and common issues to watch out for with React Native.

2. History of
mobile app development
Generation
ios 1.0 websites,
jquery mobile
Generation
native ios /
android apps
Generation
webview
based apps
Generation
javascript engine
native apps
1st 2nd 3rd 4th

3. One code source for ios and android
Javascript based
Potentially easy to expand
js code
system js engine
native plugins
sdk

4. Based on phonegap legacy
Complex and inefficient structure
Extremely bad performance on entry
level devices
Very hard to test
Impossible to achieve commercial quality
html/css js code
system js
engine
browser’s
js engine
plugins
native
plugins
sdk
dom

5. As fast to native as possible
Easiest to organize and code
Cross platform to larger degree
Very easy/Seamless SDK integration
Fast debugging
Easy testing
js code
plugins native
plugins
platform js engine
sdk

6. Client always require
great performance
Clients always make changes during
project development
Startup changes during development
New logic is introduced on spot
Functionality is more important than
quality
React Native:
Quality in commercial projects
companies startups

7. App to be done quickly
App must be cheap
Mobile app development risk assessment in
commercial environment
Be ready to make a lot of
small or bigger changes
App must work fast
Be constructed according
UX rules
Use native SDK elements
Native Ionic Phonegap Xamarin React native
It’s compicated
No way
x
x
x x x x
x
x

8. Costs of database driven offline-product app
ios+android phone
Real hours required to
achieve good quality
360
40-60$
10-40
14400-21600$
400-2400$
490
25-45$
160-220
12250-22050$
4000-9900$
670
50-60$
60-90
33500-40200$
3000-5400$
240
35-50$
10-40
8400-12000$
350-2000$
Cost per hour
Hours to implement
yearly update
Initial cost
Yearly cost
Native Ionic Xamarin React native

9. Runs using native development environment
For Javascript uses same environment as Node.JS
Significantly simplifies full-stack development
You must be enrolled developer with Apple and Google
React Native:
Environment

10. React Native:
Integration with existing apps
React Native can be integrated
with existing app
You can embed multiple instances
You can put it anywhere, in any view, any
layer without overflow or z-index problems
Facebook app uses it in their app
for events section
App structure:
SDK
native code
react native
views

11. You don’t need to program using native languages
With one exception: installing addons
Windows is experimental (lacks most of extensions)
iOS / Android in version 0.34 is very consistent
Biggest problem is internal platform architecture
Test, test, test - thankfully it’s easy
React Native:
multiplatform

12. Test on multiple devices
Without cables
See changes instantly
If automatic update is off, you need to manually shake
device to reload code
Changes done natively require normal app reinstallation
React Native:
testing

13. React Native:
cloud integration
Using OpenAPI
JS API connection code can be generated
automatically
With offline support and full sync
Realm.io can be used as JS layer to multiplatform
equivalent to Apple’s CoreData
JS can use fetch for simple data download
You can use same standards in web app and mobile app

14. React:
different approach toward coding
React for web and React native uses States
Programmer set states
States are rendered into views
High level of abstraction allows smaller amount of code
Create efficiency problems
Changing state during animation causes frames drop

15. React Native:
Common issues / bottlenecks
Understand states
Understand animations
Bad efficiency due to bad coding
Very fast pace of framework development
Mayor architecture limitation: Single threat

16. React Native:
Integration with native code
Use NativeModules to connect to native code
Define Objective-C and Java class that bind directly to
javascript
Run!
Native code can run in react-native View without overflow
You cannot return values directly, must use callbacks

17. Exampleapps

18. Thank you!
Gdańsk (CB Madison)
ul. Jana Heweliusza 9
Campus Warszawa
ul. Ząbkowska 31
tel. +48 58 355 40 25
mail: hello@coobers.com