SMG Presentation

1. CROSS PLATFORM MOBILE APPLICATION
DEVELOPMENT
21.10.2016 - Software Infrastructure

2. 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

3. Native / Hybrid / Web / Cross
Feature Native Hybrid Web Cross
Platform
Development
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
Knowledge
Low High High High
User Experience High Medium Medium High
Native Look and
Feel
Yes Emulated Emulated Yes
Deployment
Low
Always via app
stores
Medium
Usually via app
stores
High
Medium
Usually via app
stores

4. Cross Platform
Building 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..

5. Nativescript
A 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

6. React Native
React 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

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

8. Xamarin Architecture Choices

9. Xamarin - UnderThe Hood
IOS Architecture

10. Xamarin - UnderThe Hood
Android Architecture

11. 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
framework
Yes 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

12. 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) )

13. 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
Yes
https://github.com/airbnb/react-native-maps
React Native Mapview component for iOS + Android
Yes
Xamarin.Forms.Maps -https://developer.xamarin.co
Customizing Maps -https://developer.xamarin.com/

14. 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)

15. Xamarin - Android Benchmark
FPS (Median) Native Android Xamarin.Forms
Startup 30FPS 5FPS
Text Entry &Toast 4FPS 6FPS
ListView Load - 100 Items 22FPS 37FPS
ListView Load - 1000 Items 6FPS 2FPS
ListView Scroll - 1000 Items 58FPS 22FPS
MapView Load 19FPS 21FPS
Carousel Load & Swipe 34FPS 36FPS
Tab Panel Load & Swipe 33FPS 33FPS
Image Scroll 57FPS 53FPS

16. Xamarin - Android Benchmark
CPU Usage Native Android Xamarin.Forms
Startup 0,97% 20,35%
Text Entry &Toast 0,44% 1,85%
ListView Load - 100 Items 3,20% 18,49%
ListView Load - 1000 Items 0,70% 0,86%
ListView Scroll - 1000 Items 9,85% 13,53%
MapView 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%

17. Xamarin - Android Benchmark
Memory Native Android Xamarin.Forms
Startup 2MB 44MB
Text Entry &Toast 54MB 81MB
ListView Load - 100 Items 59MB 91MB
ListView Load - 1000 Items 60MB 96MB
ListView Scroll - 1000 Items 60MB 106MB
MapView Load 98MB 128MB
Carousel Load & Swipe 90MB 144MB
Tab Panel Load & Swipe 86MB 137MB
Image Scroll 89MB 158MB

18. Xamarin - Android Benchmark
GPU Native Android Xamarin.Forms
Startup 0% 0%
Text Entry &Toast 0% 0%
ListView Load - 100 Items 0% 0%
ListView Load - 1000 Items 0% 0%
ListView Scroll - 1000 Items 18% 8%
MapView Load 9% 0%
Carousel Load & Swipe 4% 5%
Tab Panel Load & Swipe 5% 9%
Image Scroll 11% 8%

19. VMobile