ENTERPRISE

HYBRIDFEASIBILITY ANALYSIS

OBJECTIVETo establish the feasibility of using the same code base of a responsive web

application into a hybrid app to run on Android, iOS, Windows and Windows

phone using Cordova

Definitions

Platform < desktop, phone, tablet />

Environment < DEV, STAGING, PROD />

Architecture < Process flow />

App Container < A native app that renders a web app in its web-view />

Cordova < Apache Cordova is a set of device APIs that allow a mobile app

developer to access native device function such as the camera

or accelerometer from JavaScript

Points of Analysis

Design UI/UX

Build Architecture

OS Build and OS Specific Support

Deployment Architecture

Testing

Remote Updating and Native Updates

Hybrid Apps

X-Dev

Write once, deploy everywhere

Resource Benefit

Web /Mobile devs use their skills to build for multiple platforms

Fast Product delivery

Reach more markets faster, release product for multiple platforms faster

Unification

Same product, same features* on every platform

Design UI/UX

Design UI/UX

Does the current design fit a mobile app look and feel?

Was it build with responsive mobile-first in mind, will the same design

suit multiple platforms?

Do you need to improve performance of scrolling, touch

responsiveness and animations?

Design and UX improvements should be aligned to meet minimum

OS app store requirements while maintaining consistency

throughout different platforms.

Android

Checklist

iOS

Checklist

Windows & Windows Phone

Checklist

App Store Review Guidelines

Build ArchitectureSERPERATION OF CONCERN

Build Architecture

Zero Effort

Implies the developers are able to maintain the same codebase but

deployed into web and native environments

The build design should be able to deploy and run tests based on build

configuration

The build process for web and native should be automated and not

handled outside the main build process.

Build files from a web build task are copied in here – this are the app files(HTML, JS, CSS)

OS Specific scripts, a build task will collect them here for every OS build. E.g A pollyfillfor android < 4.4

Hybrid Dev Dependencies

Native code for platforms

Native plugins

Platform specific assets. A build task will collect them here for every OS build

Builds from Build tasks will be in here for every OS

HYBRID

PROJECT

STRUCTURE

POC

OS Build and OS Specific Support

merges is used to add platform-specific codeExample:For Windows 8, Windows 8.1, and Windows Phone 8.1, a winstore-jscompat.js file is included in the merges\windows folder to enable support for a variety of JavaScript libraries.

res is used for platform-specific visual assets (icons and splash screens), signing certificates, and (if

needed) platform-specific configuration files

Deployment Architecture

BUILD

Debug

Staging

Release

iOS

Android

Windows

App Store

iOS

Android

Windows

Sauce Labs

• Automated Cross Browser testing• Automated Mobile testing• Manual real browser / platform testing

Testing

BUILD

Debug

Staging

Sauce Labs

Remote Updating & Native Updates

Apple does not reject your

app because its hybrid…

It all depends…

on what?

A few things…

mmm

1. Do not publish an app with and empty container

2. Remote updating is possible as long as it does not modify what the app says it does.

3. It should not feel like a website – no sluggish business here... only butter smooth

4. The UX should satisfy minimum design guidelines.

5. Do not just wrap a web app, make use of some native features – Cordova comes with native plugins that we make use of

Remote Updating

The app container can contain the default web app and pull

updates from the server as you publish web updates, updates can

be stored on the devices local storage.

Bug Fixes,

Minor Enhancements

This will ensure the app does not get rejected by

the Apple store

Native Updating

Native updating is a new submission to the app store with step up build version – users will download an update from the app store

Think about making web app features part of a native update rather than remotely updating them – May or may not work based on your organizations requirements

Reduce bandwidth consumption of remote updates

Native App updates

When specific Cordova platform updates are released with bug fixes and enhancements (e.g iOS platform updates)

When specific Cordova plugin updates are released with bug fixes and enhancements (e.g Geo-location plugin updates)

Native Security updates

References

Source Labs

Link

Cordova

Link

Further Reading

Intel XDK

Link

Apple Review Guidelines

link

THANK YOU

Lawrence NyakisoSoftware Development EngineerStandard Bank | ROA Team68 Grayston