CROSS PLATFORM MOBILE APPLICATION DEVELOPMENT

21.10.2016 - Software Infrastructure

Mobile Development Platforms• Native

‣ iOS(Objective-c or Swift), Android(Java), Windows Phone (C#, XAML)

• Web

‣ HTML5, CSS and Javascript Features in Web Browser

• Hybrid

‣ HTML5, CSS and Javascript Features via Web Browser in Native Application

• Cross Platform

‣ Runs Javascript, C# and UI Elements as Native

Native / Hybrid / Web / CrossFeature Native Hybrid Web Cross

PlatformDevelopment

Language Native Only Native or Web or Web Only Web Only C# or Javascript

or Java etc..Code Portability

and Optimisation

None High High High

Access Device-Specific Features High Medium Low High

Leverage Existing

KnowledgeLow High High High

User Experience High Medium Medium HighNative Look and

Feel Yes Emulated Emulated Yes

DeploymentLow

Always via app stores

MediumUsually via app

storesHigh

MediumUsually via app

stores

Cross PlatformBuilding high-quality native apps is hard

• Different presentation styles, interaction styles and software stacks • Devices have different screen sizes, input modes and hardware capabilities • New devices and OS versions are introduced multiple times per year • Network connectivity and power levels fluctuate widely in typical usage scenarios • New consumer applications regularly extend and revise the standards and set the bar

higher for good mobile applications

Solution: Cross Platform Mobile Development (Write Once, Run Anywhere)

Alternatives: Nativescript, React Native, Xamarin, etc..

NativescriptA runtime for building and running native iOS, Android, and (soon)

Windows Phone apps with a single, JavaScript code base.

• Created & Supported by Telerik • Fully Open Source • Use V8 (on Android) and JavascriptCore (on IOS) Engines • Use existing JS and CSS , xml / html skills • ES6 & Typescript & Angular2 • Restricted Css Support • First public beta Released @ 5 March 2015 • Release v1.0 @May 2015

React NativeReact Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

• React Native started as a Facebook's Hackathon project in the summer of 2013 • Open source Javascript Library • Facebook Ads Manager on IOS and Android share %85 of the code • Leverage existing skill sets to write apps with native feel • Microsoft brings React Native to the Windows ecosystem • Samsung builds React Native for its hybrid platform (Tizen) • 500+ companies and developer who published apps to Apple’s app store • 200+ companies and developer who published apps to Google’s Play store

XamarinXamarin brings open source .NET to mobile development, enabling every developer to build truly native apps for any device in C# and F#.

Xamarin Architecture Choices

Xamarin - Under The HoodIOS Architecture

Xamarin - Under The HoodAndroid Architecture

Comparison (Development)Nativescript React Native Xamarin

Language Js / typescript Js C#

Learning Curve (Low/Medium/High) WPF Developer)

High High Low

Learning Curve (Low/Medium/High) Web Developer)

Low Medium Medium

Learning Curve (Low/Medium/High) Mobile Developer)

Medium Medium Low +

IDE Visual Studio Code, Visual Studio any text editor.

JS Editors Visual Studio Xamarin Studio

Mac Requirement for IOS Development

Yes Yes Yes

CSS Support Yes(Restricted) Restricted No (Xaml Style)

Component Library Telerik UI Components(http://www.telerik.com/nativescript-ui)

https://facebook.github.io/react-native/docs

Xamarin(components.xamarin.com) SyncFusion (https://www.syncfusion.com/products/xamarin) Suitable for creating

frameworkYes Yes Yes

Native Binding Yes Yes Yes (Xamarin.IOS, Xamarin.Android)

Plugin Support https://github.com/EddyVerbruggen/nativescript- plugin-firebase

https://facebook.github.io/react-native/docs

Xamarin Plugins

Comparison (Debugging)

Nativescript React Native Xamarin

Debugging on Emulator Yes Yes Yes

Debugging on Device Yes Yes Yes

Remote Debugging (Browser)

Android (Yes) http://docs.nativescript.org/runtimes/android/debug/debug-eclipse

Yes (https://facebook.github.io/react-native/docs/debugging.html)

No

Live Reload Reload application Yes Yes (Only Xaml) (XAML Previewer for Xamarin.Forms (alpha) )

Comparison (Features)

Nativescript React Native Xamarin

Min IOS Version Support iOS 7 or greater and xcode version greater than 6

iOS 8.0+ iOS 6.1 or higher

Min Android Version Support

17(4.2) Android 4.1+ (API 16) Android 4.0.3 (API 15) or higher

Windows Phone Support Not Yet Officially not, Microsoft Community supported

Yes

PN Support (IOS 10 RN?) Yes IOS Component exists Android plugin exists

Yes

Device Features Support (Camera, Sensors, TouchID, IRIS..)

Camera,Location, plugins.. Camera, Location plugins exists

Camera,Location,Xamarin Plugins

Native Map Support nativescript-maps A NativeScript module for using native map APIs A NativeScript module for using native map APIs. This module is currently limited and should be viewed as a proof of concept—it only supports latitude and longitude attributes and only works on iOS.

Yes https://github.com/airbnb/react-native-maps React Native Mapview component for iOS + Android

Yes Xamarin.Forms.Maps -https://developer.xamarin.com/guides/xamarin-forms/user-interface/map/ Customizing Maps -https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/map/

Comparison (Deployment)

Nativescript React Native Xamarin

Automated Test Yes (http://docs.nativescript.org/tooling/testing) Automated Test : (Appium) : https://github.com/NativeScript/NativeScript/issues/553

Yes (https://facebook.github.io/react-native/docs/testing.html)

Yes

Deploy without market No Yes No

Easy Deployment & Continuous Integration

Yes ( with CLI) Yes Yes

Package Size APK :21.8 MB (Android & Bundle with WebPack) IPA : 32.9 MB (iphone & Bundle with WebPack) APK : 38 MB (Android & Without bundle) IPA : 67 MB (IOS & Without bundle)

APK 8,47 MB (Android) IPA 7.5 MB (Iphone)

APK 16 MB (Android) APP 46,4 MB (iOS)

Xamarin - Android BenchmarkFPS (Median) Native Android Xamarin.Forms

Startup 30FPS 5FPSText Entry & Toast 4FPS 6FPS

List View Load - 100 Items 22FPS 37FPSList View Load - 1000 Items 6FPS 2FPSList View Scroll - 1000 Items 58FPS 22FPS

Map View Load 19FPS 21FPSCarousel Load & Swipe 34FPS 36FPSTab Panel Load & Swipe 33FPS 33FPS

Image Scroll 57FPS 53FPS

Xamarin - Android BenchmarkCPU Usage Native Android Xamarin.Forms

Startup 0,97% 20,35%Text Entry & Toast 0,44% 1,85%

List View Load - 100 Items 3,20% 18,49%List View Load - 1000 Items 0,70% 0,86%List View Scroll - 1000 Items 9,85% 13,53%

Map View Load 8,68% 10,88%Carousel Load & Swipe 2,26% 4,22%Tab Panel Load & Swipe 2,68% 3,41%

Image Scroll 2,93% 4,88%

Xamarin - Android BenchmarkMemory Native Android Xamarin.Forms

Startup 2MB 44MBText Entry & Toast 54MB 81MB

List View Load - 100 Items 59MB 91MBList View Load - 1000 Items 60MB 96MBList View Scroll - 1000 Items 60MB 106MB

Map View Load 98MB 128MBCarousel Load & Swipe 90MB 144MBTab Panel Load & Swipe 86MB 137MB

Image Scroll 89MB 158MB

Xamarin - Android BenchmarkGPU Native Android Xamarin.FormsStartup 0% 0%

Text Entry & Toast 0% 0%List View Load - 100 Items 0% 0%List View Load - 1000 Items 0% 0%List View Scroll - 1000 Items 18% 8%

Map View Load 9% 0%Carousel Load & Swipe 4% 5%Tab Panel Load & Swipe 5% 9%

Image Scroll 11% 8%

VMobile