Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 00:30, 20 November 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Cross Platform Mobile Architecture

From Wiki
Jump to: navigation, search
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
CompatibilityArticle
Created: Aady (25 Feb 2013)
Last edited: hamishwillee (20 Nov 2013)

Contents

Introduction

There is an explosion of smart mobile phones in market. And the need has become to support all the popular platforms like iOS, Android, WP8, Blackberry, etc. To write a platform specific application causes increase in efforts, resources and the cost factor. Cross Platform architecture is the solution to make this difficult task easy and it can be developed using Web or Hybrid app development methods.
In this article we will look at various architectures for mobile development and those supporting cross platform development. Also we will look at some of the third party frameworks which took the cross platform capabilities to a step further. It also provided out of the box solution for multi-platform support with nil or minimal code changes.

Mobile Application Development

To understand Cross Platform Mobile Architecture we first will need to understand the types of mobile app development strategies.

  • Native Apps

Apps developed that are Mobile platform specific. They are developed using the native code sdks and will be very specific coding related to that platform.

  • Web Apps

Apps developed using standard web technologies: HTML5, JavaScript and CSS.

  • Hybrid Apps

In this app, majority of the app is developed using web standards and is wrapped in a native shell/wrapper. These wrappers give access to mobile platform specific features like GPS or camera, native app UI look and feel, etc.

The diagram below shows a comparison of various app development strategies and indicates the cross platform capability which is least on left and most at the right.

HybridMobArchCompare.png

Cross Platform Mobile Architecture & Hybrid/Web Apps

Hybrid Apps takes advantage of both native and web app development and is the best choice for creating cross platform applications. Following are the advantages of using a hybrid technique of app development:

  • Cross platform & Code Sharing – Code once and use it to deploy to various mobile platforms. Use the same HTML UI interface code/third party library code for multiple devices.
  • Native calls using the Native shell.
  • Offline mode helps in giving access to application even if internet is not available.
  • Due to cross platform a large number of users can be provided with the application.
  • Mobile device can be leveraged for local processing, which is not possible for Web apps.
  • App Store distribution gives a native update feel for user.
  • Notifications regarding application and the updates can be provided.


Web Apps allows cross platform capability but is limited. Developers will not be able to take advantage of native UI, local processing and wont be good choice for performance critical apps. But if performance is not an issue and hosting a web app suffices your requirement then this will give you perfect cross compatibility without any overhead of using third party frameworks and can leverage the existing expertise in web technologies.

Native Apps provide very limited to no cross platform advantage, and hence are not recommended for cross platform architecture. But with WP8 there is some scope for code sharing. Use Xamarin to reuse the C# code for other platform app development. Also you can share the same code for Windows 8 platform using techniques like Portable Class Library, Windows Runtime API, etc. Further reference: Maximize code reuse between Windows Phone 8 and Windows 8

Hybrid-Adv.png

Cross Platform Architecture & Code Sharing

In cross platform architecture using Hybrid method, the application is written using web technologies like HTML5, JavaScript and CSS but run inside the mobile platform native shell. Hybrid apps use a web control/web app template to present the web UI so that it can be coded in web technologies. Thanks to the more and more sophistication of cross platform tools the performance is improved drastically and the look and feel of the application is as good as native UI.

HybridArch.png

You can implement a Cross Platform Architecture using following methods:

Hybrid Local App

Create the application in a web template and package it as your native app. Example to create a WP8 app using JavaScript Template. In this architecture you can make use of local device processing power and performance will be much better, though not as good as native. In addition the server calls will be avoided which will act as performance booster. Deploying will require update notification to the user the way it happens for all native apps.
To create a Hybrid WP8 app, use the In Visual Studio 2012 -> New Project -> JavaScript - Windows Store (Template). This will give you complete control on JavaScript, HTML5 & CSS for UI design and calling native wrapper classes through Javascript API provided by cross platform tools mentioned below.
To start with your first “Hello World” program with JavaScript Template, refer Create a "Hello, world" app

Hybrid Server App

You can create a mobile web application and hoist it to a server and simply call the web url in the native shell/container. In this approach your processing will all be done at server. You can improvise the performance by local caching but still not a right choice for performance critical apps. Deploying changes will be easy as you need to change the code and put it in server.
To create a Hybrid WP8 app using this approach:

  • Visual Studio 2012 -> New Project -> Windows Phone Application (Silverlight). This will create a native WP app shell.
  • Add a WebBrowser control to the application page and direct it to the web app hosted on server.

That is it and now your cross platform app is instantly ready.

Third Party Frameworks

Apache Cordova PhoneGap, Sencha Touch & Xamarin.Mobile are example of cross platform tools that provide the wrappers over the native APIs. Because of this its help in cross platform compatibility. You write the code in one language and compile it to the required targets say WP, iPhone, android or other supported devices.
Code Sharing is taken to a next level using this frameworks. In a typical Hybrid application the only reusable code & cross platform capability is limited to the web technologies used. But now the native functionality can be utilized using these frameworks and thus making the Hybrid Apps truly cross platform and much more reusable.

It provides number of JavaScript libraries that can be invoked, with device-specific native code for the respective JavaScript libraries. This combined with a UI framework such as jQuery or Sencha Touch creates a great cross platform WP8 application. Use JavaScript to access a native API, like geolocation, camera, storage, etc. using a single API call irrespective of the mobile platform.
For more information refer Cordova (PhoneGap) and Windows Phone 8
An example of how to get started with WP8 and PhoneGap can be found here Camera Pic & GeoTagging App using PhoneGap

It provides rich HTML5 framework and native api wrappers. Code once and compile to different mobile platforms thus making your application cross platform.
For more information refer Sencha Touch and Windows Phone 8

It lets you use your existing WP8 or Windows 8 middle tier app logic which is in C# and can share this code on various other mobile platforms. Xamarin compiler bundles the .NET runtime and outputs a native executable, packaged as an iOS or Android app. Xamarin extends the code sharing not only for various mobile platforms but also with Windows 8 code.
For more information refer Xamarin Mobile and Windows Phone 8
The following documentation will provide an in depth understanding of how to create cross platform application using Xamarin: http://docs.xamarin.com/guides/cross-platform/application_fundamentals/building_cross_platform_applications

It is a Touch-Optimized HTML5 Web UI Framework based on progressive enhancement and responsive web design (RWD) principles. You can create cross platform code using this framework.
For more information refer JQuery Mobile and Windows Phone

Summary

We have seen what are the advantages of Cross Platform Architecture and how it can implemented using various development strategies. No one methodology can be best, the one that suits best you requirement must be utilized.
Cross Platform Architecture is highly recommended for Enterprise applications as that will help to reduce the time to market and capture the opportunity by using the existing code and target all clients with different mobile platform.

References:

Cordova
Xamarin
What is a Hybrid Mobile App?
Sencha

This page was last modified on 20 November 2013, at 00:30.
209 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×