Technologies for Developing

Mobile Applications

Iulian ILIE-NEMEDI
Software Architect, Axway (iilie@Axway.com)
Lecturer, ASE (inemedi@ie.ase.ro)
Agenda
• Why Developing Mobile Applications?

• Developing the Client Side:

– Going the Native Way;
– Going the Hybrid Way;
– Going the Web Way.

• Developing the Server Side:

– REST Resources.
2
Why Developing
Mobile Applications?
Why Developing Mobile Applications?

Write once, access

Consume SaaS in Cloud Control your devices
from everywhere
with IoT

4
Developing Mobile Applications
Cloud Data

Devices
Mobile Platform
Runtime Layer
Social Networks Data
API Gateway
Integration Layer

Enterprise Data
Analytics
Monitoring Layer

5
Developing the Client Side
Going the Native Way
 Going the Native Way: Solutions
• Android:
– Java with Android SDK & Studio;
– C/C++ with Android NDK.
• iOS:
– Objective-C / Swift with Xcode;
• Windows Phone:
– C# with Windows Phone SDK & Visual Studio.

Gartner 2016
7
Android: Architecture
Applications

Application Framework
Activity Window Content View Notification
Manager Manager Providers System Manager
Package Telephony Resource Location XMPP
Manager Manager Manager Manager Service

Libraries Android Runtime

Surface Media
Manager Framework SQLite Core Libraries

OpenGL | ES FreeType WebKit Dalvik Virtual Machine

SGL SSL libc ART Virtual Machine

Linux Kernel
Display Camera Bluetooth Flash Memory Binder (IPC)
Driver Driver Driver Driver Driver
USB Keypad WiFi Audio Power
Driver Driver Driver Driver Management
8
Android SDK: Views

9
Android SDK: Handling Remote Data

10
 Android SDK: Developing Tools – Studio
• Intelligent code editor;
• Code templates and
GitHub integration;
• Multi-screen application
development;
• Virtual devices for all
shapes and sizes;
• Debugging, testing,
building the
application.
11
Windows Phone: Architecture
Metro Style Application

XAML HTML / CSS

C / C++ C# / VB JavaScript

WinRT APIs
Communication Graphics Devices
and Data and Media and Printing

Application Model

Windows Core OS Services

12
Windows Phone: Views

13
Windows Phone: Handling Remote Data

14
Windows Phone: Development Tools – Visual Studio
• Everything you can
possible ask for,
except it only runs
on Windows!

15
Developing the Client Side
Going the Hybrid Way
Going the Hybrid Way: Solutions
• Cordova;
• Mobile First;
• Appcelerator;
• Xamarin;
• React Native.

17
Cordova: Overview
• The purpose of Cordova is to allow HTML-based web applications to be deployed
and installed as native applications. Cordova web applications are wrapped in a
native application shell, and can be installed via the native app stores for multiple
platforms. Additionally, Cordova strives to provide a common native API set which is
typically unavailable to web applications, such as basic camera access, device
contacts, and sensors not already exposed in the browser.
• To develop Cordova applications, developers will create HTML, CSS, and JavaScript
files in a local directory, much like developing a static website. Approaching native-
quality UI performance in the browser is a non-trivial task - Sencha employs a large
team of web programming experts dedicated full-time to solving this problem. Even
so, on most platforms, in most browsers today, reaching native-quality UI
performance and responsiveness is simply not possible, even with a framework as
advanced as Sencha Touch. Is the browser already “good enough” though? It
depends on your requirements and sensibilities, but it is unquestionably less good
than native UI. Sometimes much worse, depending on the browser.

18
Cordova: Overview (continued)
• Mobile applications with HTML, CSS & JS;
• Target multiple platforms with one code base;
• Application has only one look and feel, no native;
• Uses platform-specific plugins called from JavaScript;
• Plugins are develop in:
– Java on Android;
– Objective-C on iOS;
– C++ / C# / VB.NET on Windows Phone.

19
 Cordova: Architecture
Cordova Application
Web Application Plugins
HTML JavaScript Accelerometer Geolocation
Camera Media

JS APIs
CSS Resources
HTML APIs

Compass Network

Native APIs
Contacts Notification
File Storage
HTML Rendering Engine
(WebView) Custom Plugins

OS APIs
OS APIs

Mobile Operating System Services Sensors Input Graphics

20
Cordova: AngularJS as MVC
AngularJS Application

View DOM Content Controller

Loaded Event
Application Router
HTML / CSS

Static DOM Injector Controller

Dynamic DOM Compile Scope Services Model

Back-end REST Resources

Cordova: Views

22
Cordova: Handling Remote Data

23
Cordova: Develop. Tools – Eclipse Hybrid Mobile
• Supports engines and
libraries (Ionic);
• Develop and deploy to
Android, iOS,
Windows Phone;
• Install external
plugins;
• Included by:
– JBoss Tools;
– Zend Studio.
24
Cordova: Development Tools – Intel XDK
• Visual interface
designer;
• Text editor based on
Bracket from Adobe;
• Debug, test and build
for:
– Android;
– iOS;
– Windows Phone;
– Tizen;
– Others… 25
Cordova: Conclusion
• Pros:
– Significant developer experience with smooth learning curve;
– Extend access to native APIS via plugin architecture;
– Can work with different UI libraries and MVC frameworks;
– Open source and free.
• Cons:
– No native look and feel;
– Need to develop your own plugins for complex device access;
– Performance issues due to execution inside WebView.
• Best suited for applications with less device interaction.
26
Appcelerator: Overview
• Compiles XML and JavaScript into native components;
• Native look and feel;
• Open source, supported by Appcelerator (now Axway);
• Titanium Studio based on Aptana Studio (Eclipse Plugin);
• MVC development model like Flex or ASP.NET;
• Extensive support for cloud and native device APIs,
including powerful analytics.

27
Appcelerator: Architecture
Application
HTML TiApp XML
JS
CSS Boot
Manifest

JavaScript Platform UI Media Process

Titanium
Runtime

Ruby File System Application Notification Network

Python API Analytics Desktop Custom

Common Object Layer Third-party Libraries

Mobile Operating System

28
Appcelerator: Views

29
Appcelerator: Handling Remote Data

30
Appcelerator: Development Tools – Titanium Studio
• Eclipse plugin;
• Template projects;
• Visual layout designer;
• Code generators;
• Debugging and testing
tools;
• Cloud integration with
analytics.

31
Appcelerator: Conclusion
• Pros:
– Native look and feel due to platform specific compilation;
– Enhanced cloud support with analytics;
– Native API support, as a powerful alternative to Cordova;
– Can building hybrid applications with WebView component.
• Cons:
– Can be difficult to debug;
– Must tag certain components as device-specific, leading to
longer development cycles.
• Best for handling applications with lots of integration or
dependencies on device-specific features. 32
Xamarin: Overview
• Xamarin (originally a division of Novell) in the last years has brought to market its own
IDE and snap-in for Visual Studio. The underlining premise of Mono is to create
disparate mobile applications using C# while maintaining native UI development
strategies;
• In addition to creating a visual design platform to develop native applications, they have
integrated testing suites, incorporated native library support and a NuGet style
component store. Recently they provided iOS visual design through their IDE freeing
the developer from opening XCode. In Visual Studio all three platforms are now
supported and a cloud testing suite is on the horizon;
• From the get go, Xamarin has provided a rich Android visual design experience. I have
yet to download or open Eclipse or any other IDE besides Xamarin. What is truly
amazing is that I am able to use LINQ to work with collections as well as create custom
delegates and events that free me from objective-C and Java limitations. Many of the
libraries I have been spoiled with, like Newtonsoft JSON.Net, work perfectly in all three
environments.
33
Xamarin: Overview (continued)
• MVC based on XAML and Xamarin.Forms;
• Leverage the power of C# as programming language;
• Build native UIs using:
– MonoTouch.UIKit on iOS;
– Android.Views on Android;
– XAML / Silverlight on Windows Phone.
• Extensible plugins that access device-specific capabilities.

34
Xamarin: Architecture
iOS Application

API
Native API
Wrapper
Wrapper
Core Presentation Layer

iOS
Application Layer UI Layer

Callable Native
Library XAML
Native API

Mono
Mono
Mono Callable
Data Service Business Layer
Android Application

Wrapper
Wrapper

Android
Access Access

Android
Model Objects
Layer Layer Application Layer UI Layer

Mono
Android Callable Wrapper

Windows Phone App

Windows
Cloud

Phone
Phone
Application Layer UI Layer
Services
Common Language Runtime

35
Xamarin: Views
<ContentPage Title="Profile"
Icon="Profile.png">
<StackLayout Spacing="20" Padding="20">
<Entry Placeholder="Username“
Text="{Binding Username}"/>
<Entry Placeholder="Password"
Text="{Binding Password}“
IsPassword="true"/>
<Button Text="Login“
TextColor="White"
BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage> 36
Xamarin: Handling Remote Data
Data

Xamarin Forms
View Data Bindings Controller Model

Events

37
Xamarin: Development Tools – Visual Studio

38
Xamarin: Development Tools – Studio

39
Xamarin: Conclusion
• Pros:
– C# can be used to code all platforms, including iOS in Visual Studio;
– Performance is comparable to native, much faster than Cordova;
– Highly customizable to create native look and feel applications;
– Full support for hardware features like camera, accelerometer, GPS.
• Cons:
– Cost of Xamarin license is not cheap ($1000 per platform / per dev);
– Latest support depends on how fast Xamarin opens up these APIs;
– High learning curved;
– Need to write platform-specific for coding the UI, but still in C#.
• Not a write once, run anywhere, but best solution for developing and
sharing C# codebase among Android, iOS and Windows Phone. 40
Reactive Native: Overview
• Porting React to the native world, by running:
– Embedded in a WebView;
– Native with ComponentKit engine.
• Based on calling JavaScript against Virtual DOM, that can
be mapped to DOM in a WebView or to native components;
• Uses JSX, now part of ES6 to declare the UI components.

41
Reactive Native: Architecture

JSX File Browser

DOM
React JSX
JavaScript Interpreter
Transformer Operating
React Virtual DOM System
JS File Native
APIs
React Runtime
Library Native
Application Controls

42
React Native: Views

43
React Native: Handling Remote Data

44
React Native: Development Tools – Nuclide
• Built-in Debugging;
• Language support
for ES6 with JSX.

45
React Native: Conclusion
• Pros:
– Native look and feel;
– Write code for a single JavaScript runtime with ES6;
– Reuses the same codebase for business logics.
• Cons:
– You have to write a thin UI layer that is platform specific;
– Custom controls also require to write some native code;
– Adds an abstraction layer between application and runtime.
• Best suited for replacing Web mobile frameworks.

46
Thank you!

47