cross-platform mobile that works - coobers

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: hello@coobers.com