Guada Casusogcasuso@Microsoft.comModern Apps COE Architect

Mobile Cross Platform Development using Xamarin

Topics we will cover:

Mobile Cross Platform Development Mobile Landscape: Web, Hybrid and Native  Cross-Platform Architectures

Xamarin Overview and Architecture MVVMCross General Android client and iOS client

Architectures

CrossPlatform Mobile App Development

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

• Performance • APIs Support• Tools• Monetization

CrossPlatform Mobile App DevelopmentQuality is Hard

device

browser

app

Web App

device

Hybrid App

wrapper

app

wrapper API

Native App

device

app

Web App Hybrid App Native App

Use of device specific features and sensors

Portability across platforms

Performance & Native Experience

Updatability

5 OS Versions x 8 Manufacters x 20 Languages x 27

screen sizes3 OS Versions x 8

Devices x 20 Languages

2 OS Versions x 17 Devices x 20 Languages

Mobile Applications Development

  Input Distribution Channels Output Key Players

Mobile Browser HTML, CSS, JavaScript

WWW Web Document Safari – Chrome – Mozila

Web Wrapper HTML, CSS, JavaScript

App Store Hybrid Package PhoneGap

Web-to-native converter

Javascript App Store Native Package Titanium

Native JavaScript API

HTML, CSS, JavaScript

App Store Native Package BB , w8

Native C# App Store Native Package Xamarin

CrossPlatform Mobile App Development

Implementation Approaches

CrossPlatform Mobile App Development

Adoption Factors

Mobile Browser

Web Wrapper

Web-to-native converter

Native JavaScript API

Web Mobile Apps

Top 5 supported featuresGeolocationAPI, offline web application support, WebStorage, CSS3 Selectors and 2D animations are the top five supported features.

A responsive web application developed using HTML5, CSS3, and JavaScript could be viewed on phone browser,To support a variety of device sizes while keeping a single code base, a website should use responsive web development technologies like CSS3 or frameworks like Bootstrap or Foundation.

Hybrid Mobile AppsFor run-of-the-mill business applications, hybrid app provides necessary functionality and performance most of the time.

A hybrid mobile app is build using HTML5, CSS3, JavaScript, PhoneGap and it runs on iOS, Android, Windows Phone and Black Berry.Hybrid app is 'hybrid' because it uses HTML 5 & CSS3 for mobile UI and JavaScript to communicate with device SDK.

Hybrid app = Single Page ApplicationHybrid mobile app is basically a single page application (or SPA). SPA is a web application that lives within a single HTML page.

NATIVE Apps Performance

APIs Support Tools Monetization

Languages, Skills, Versions Maintenance – evolution&

Performance

Native Support, Leverage C# Skills, familiar IDE …

Fully native apps written entirely in C#

Xamarin exposes 100% of iOS and Android APIs in C#

Mobilize existing code, skills, and tools including Visual Studio

Share app logic code across

device platforms

C# unique approachpowered by Xamarin and Microsoft .NET

C# + XIB C# + XML C# + XAML

Native UI Native UI Native UI

Optional Remote Services(ASP.NET Web API

or any server technology)

Shared client app C# logic

What is Xamarin?Extension to Visual Studio• iOS, Android apps

entirely within Visual Studio

• Compiles .NET/C# code to native platforms

• Visual Studio ALM and IDE capabilities fully available

Build apps faster• Leverage skills• Reuse code and binaries

with flexibility• Fully native user

interfaces

Microsoft and Xamarin Partner Globally

With Xamarin, developers combine all of the productivity benefits of C#, Visual

Studio 2013 and Windows Azure with the flexibility to quickly build for multiple

device targets.” S. Somasegar, Corporate Vice President,

Microsoft

Technical collaboration for superior developer

experience

Exclusive MSDN offers that accelerate the

transition to mobile development

Create UI with drag and drop simplicity

Target multiple screen sizes, resolutions, and OS versions

Layouts saved in native resource formats

Worlds best Android designer available in Visual Studio

iOS coming soon

UI design inVisual Studio

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

Xamarin - Architecture

Xamarin.iOS does full Ahead Of Time (AOT) compilation to produce an ARM binary suitable for Apple’s App Store

Xamarin Android takes advantage of Just In Time (JIT) compilation on the Android device

DEMO Xamarin integrated to

Visual Studio

MVVMCross

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

Separate Reusable Code into a Code library

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

MVVMCross

MVVMCross: What is?

MVVM Implementation for multiple platforms

Native, Cross-Platform, Portable, Reusable C#

Code Evolution 1

• Single Mono for Android• Simple – it Works• Good separation of UI from “Model”

code

But• No testing• Portability by cut/paste

Code Evolution 2

• PCL code• Data binding in UI• XML got bigger• Code overall increased in size

Code Evolution 3

• Cross Platform• 100% shared application logic• 100% shared test harness

General Android client and iOS client

Architectures

Architecture of a Mobile App• Xamarin Mobile Apps

share the same architecture across all platforms

• Up to 95% shared code, depending on the Patterns you use

• UI is platform-specific, utilizes the Platform SDK projections

• App Code is in C#• Can reuse existing .NET

Library

UI

App code(C#)

Components

.NET Lib Code

Platform SDK Binding

Shared

Platform specific

Platform specific

Platform Comparison

Package .app .apk .xap

Typeof(Screen) Controller Activity Page

Typeof(Control) View Widget Control

UI Files (xml) .xib .axml .xaml

Default UI Pattern MVC MVC MVVM

Basic Android Architecture

Linux Kernel

Android Framework

Application

Dalvik VM

Activity

Service

Content ProviderBroadcas

t Receiver

Mono VMXamarin .apk

• Mono VM + Dalvik Run Side by Side using a bridge

• Mono VM is Faster than Dalvik

• Interop Directly with Android OS + Dalvik

Basic iOS Architecture

iOS SDK

Mono

Xamarin.iOS

C# Code

MonoTouch.dll

Mono Compiler

Native ARM

Assembly

Is not just a Mobile App, is a Modern App

CrossPlatform Mobile App Development

Tools

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

Xamarin

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

Pair Xamarin.iOS build Host

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

References

Mobile CrossPlatform Developer Economicshttp://www.visionmobile.com/blog/2014/02/developer-economics-q1-2014/

MVVMCrosshttp://www.slideshare.net/slideshow/embed_code/15621659 https://github.com/MvvmCross/MvvmCrosshttps://github.com/MvvmCross/MvvmCross/wiki/MvvmCross-Tutorialshttp://xamarin.com/evolve/2013#session-dnoeeoarfj

Xamarinhttp://xamarin.com/msdn-exclusive

Channel 9 Video Series: http://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Cross-Platform-Development-With-Xamarin

MICROSOFT CONFIDENTIAL – INTERNAL ONLY

References

Mobile WorkForce Technical Overview: http://infopedia/docstore/pages/kcdoc.aspx?k=KC02-23-21345

Mobile Workforce Code and Scripts https://microsoft.sharepoint.com/teams/modernapps/Offerings/_layouts/15/start.aspx#/MobileWorkforce/Forms/AllItems.aspx?RootFolder=%2fteams%2fmodernapps%2fOfferings%2fMobileWorkforce%2fDemo&FolderCTID=0x012000390A00701058EB4EB572AC108FED089C

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.