Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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, CS...
Native / Hybrid / Web / Cross
Feature Native Hybrid Web Cross
Platform
Development
Language
Native Only
Native or Web
or W...
Cross Platform
Building high-quality native apps is hard
• Different presentation styles, interaction styles and software ...
Nativescript
A runtime for building and running native iOS, Android, and (soon)
Windows Phone apps with a single, JavaScri...
React Native
React Native lets you build mobile apps using only JavaScript. It uses the same
design as React, letting you ...
Xamarin
Xamarin brings open source .NET to mobile development, enabling every
developer to build truly native apps for any...
Xamarin Architecture Choices
Xamarin - UnderThe Hood
IOS Architecture
Xamarin - UnderThe Hood
Android Architecture
Comparison (Development)
Nativescript React Native Xamarin
Language Js / typescript Js C#
Learning Curve (Low/
Medium/High...
Comparison (Debugging)
Nativescript React Native Xamarin
Debugging on Emulator Yes Yes Yes
Debugging on Device Yes Yes Yes...
Comparison (Features)
Nativescript React Native Xamarin
Min IOS Version Support iOS 7 or greater and xcode
version greater...
Comparison (Deployment)
Nativescript React Native Xamarin
Automated Test Yes (http://
docs.nativescript.org/tooling/
testi...
Xamarin - Android Benchmark
FPS (Median) Native Android Xamarin.Forms
Startup 30FPS 5FPS
Text Entry &Toast 4FPS 6FPS
ListV...
Xamarin - Android Benchmark
CPU Usage Native Android Xamarin.Forms
Startup 0,97% 20,35%
Text Entry &Toast 0,44% 1,85%
List...
Xamarin - Android Benchmark
Memory Native Android Xamarin.Forms
Startup 2MB 44MB
Text Entry &Toast 54MB 81MB
ListView Load...
Xamarin - Android Benchmark
GPU Native Android Xamarin.Forms
Startup 0% 0%
Text Entry &Toast 0% 0%
ListView Load - 100 Ite...
VMobile
Upcoming SlideShare
Loading in …5
×

Cross Platform Mobile Development

SMG Presentation

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Cross Platform Mobile Development

  1. 1. CROSS PLATFORM MOBILE APPLICATION DEVELOPMENT 21.10.2016 - Software Infrastructure
  2. 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. 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. 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. 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. 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. 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. 8. Xamarin Architecture Choices
  9. 9. Xamarin - UnderThe Hood IOS Architecture
  10. 10. Xamarin - UnderThe Hood Android Architecture
  11. 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. 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. 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. 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. 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. 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. 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. 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. 19. VMobile

×