18
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
One code source for ios and android
Javascript based
Potentially easy to expand
js code
system js engine
native plugins
sdk
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 jsengine
browser’sjs engine
plugins
native plugins sdk
dom
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 nativeplugins
platform js engine
sdk
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
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
Costs of database driven offline-product app ios+android phone
Real hours required to
achieve good quality360
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
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
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
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
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
React Native:
cloud integrationUsing 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
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
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
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
Exampleapps
Thank you!Gdańsk (CB Madison)ul. Jana Heweliusza 9
Campus Warszawaul. Ząbkowska 31
tel. +48 58 355 40 25mail: [email protected]
