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 Development

SMG Presentation

  • 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:// ui) react-native/docs Xamarin( SyncFusion (https:// for creating framework Yes Yes Yes Native Binding Yes Yes Yes (Xamarin.IOS, Xamarin.Android) Plugin Support EddyVerbruggen/nativescript- plugin-firebase 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) runtimes/android/debug/debug- eclipse Yes (https:// 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 React Native Mapview component for iOS + Android Yes Xamarin.Forms.Maps - Customizing Maps -
  14. 14. Comparison (Deployment) Nativescript React Native Xamarin Automated Test Yes (http:// testing) Automated Test : (Appium) : NativeScript/issues/553 Yes (https:// 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

    Be the first to comment

    Login to see the comments


    Oct. 24, 2016

    Sep. 26, 2017

SMG Presentation


Total views


On Slideshare


From embeds


Number of embeds