HTML5 Mobile Web Framework - High Level Design

ENTERPRISE HYBRID-‐APPS MOBILE FRAMEWORK

Version 2.0 by [email protected] 1

Agenda

Version 1.0

1.  Introduction

2.  HTML5 + Native Hybrid-‐Apps

3.  Mobile Chart: TBD

4.  Mobie Map

5.  Reference

2

61% of CIOs put mobile as priority

increased productivity with mobile apps 45%

10 Billion devices by 2020

①  Mobile Cloud for the ENTERPRISE

Challenges with Implementing Mobile Application

Ø  Highly fragmented set of … •  Platforms and Devices •  Languages, APIs, and tools

Ø  Native programming models not portable across platforms

Accommodate different Mobile Platforms: iOS, Android, Windows 8, Blackberry 10, …

Ø  Higher frequency of releases and updates

Ø  Added pressure on teams to deliver on time and with quality

We need to develop different Applications for different Customers – quickly.

Ø  Existing services typically need to be adapted for mobile

Ø  Enterprise Integration and Bring Your Own Device (BYOD)

We need to connect to existing systems: DMS, Cloud Gateway, Azure, SAP, Salesforce

Ø  High quality user experience: •  Pro[ile: Phone vs. Tablet •  Native API: Push, Camera, …

Ø  Quality in[luenced as much by design as it is by function

How do I design and develop a High-‐Quality User Experience?

4

1.3. Evolving Mobile Landscape Development Challenges

q  Mobile Development is more expensive than traditional Web App Development: v  Which smartphone? Which tablet? Which form factor?

àAndroid, iOS, Windows Phone, then Blackberry v  Skills? à Web or native apps? Java or Objective C? Or other? v  Maintenance?

à Separate software stacks for each major OS à Separate applications for each major OS à How do We keep software current?

v  Enterprise Integration? à How do I build cross-‐channel app? How do I use existing authentication frameworks, customer pro[ile repositories, Reuse existing investments in backends?

v  Security? à Encryption? Authentication? Response to stolen/lost devices?

v  Management? à Can I see my apps? Can I disable them remotely? q  Since the Mobile [ield is still evolving, so an enterprise would want to pick a

platform that can adapt to the future.

Version 0.5 (Draft) 5

1.4. Delivering for Multiple-‐Mobile-‐Platforms

Client Challenge

Key Capabilities

Using standards-‐based technologies and tools and delivering an enterprise-‐grade services layer that meets the needs of mobile employees and customers

Mobile optimized middleware §  Open approach to 3rd-‐party integration §  Strong authentication framework §  Encrypted of[line availability §  Enterprise back-‐end connectivity §  Uni[ied push noti[ications §  Data collection for analytics §  Direct updates and remote disablement §  Packaged runtime skins


1.5. Native Apps VS Web Apps

•  Existing Native Apps: iOS, Android, MonoTouch … •  Existing Web Apps: Map, Dashboard, Collaboration, … •  What if we can develop apps with bene[its from both Native and Web Apps?


1.6. Hybrid Apps – Why not?

•  What if we can develop with bene[its from both Native and Web apps? Hybrid Apps

•  But company regulatory, audit, legal or time-‐to-‐market restrictions ?


1.7. Open, Cost-‐effective, Cross-‐Platform App Development

Compatible with prominent HTML5 libraries and tools:

App development using native and/or familiar web technologies: •  HTML5 •  CSS3 •  JavaScript

App delivery in variety of forms: •  Mobile Web App •  Hybrid App •  Native


Mobile Cloud Platform for Enterprise

Mobile Cloud Solution 10

Mobile Applications File System

(Mobile Device)

Native Container

HTML, CSS, JavaScript

Mobile Operating System

Combine the best of both worlds: •  Mostly written in HTML5, CSS, JS •  Allowing total access to device features.

Mobile-‐Cloud Business to Enterprise

10/8/12 Mobile Cloud Solution 12

Device and back-‐end diversity

Device choice Device and App management

Security Ease of use

Apps and more Apps

End-‐user requirements

Enterprise requirements

Development Tools and TCD/TCO (*)

(*) Total cost of deployment/total cost of ownership

ERP

CRM

ECM

Portal CLOUD GATEWAY

Mobile Solution for the ENTERPRISE

1. Market Trend Market Trend

Mobile-‐Cloud Business to Enterprise

2. Cross-‐Platforms Mobile Cloud Mobile Application: Cross-‐Platform & Native API

Cloud-‐SaaS

Enterprise Mobility Platform Cross-‐Platform Mobile-‐Application

Seamly Integrated to Enterprise Data Access

BYOD – Bring Your Own Device Manage Mobile Application Lifecycle

Mobile Device Management

Enterprise Data Access Local Device Data Catching, Sync, Security, NotiNication

Enterprise Service Bus (ESB)

①  Comprehensive BYOD Approach – Why?

Simple Approach

Comprehensive Approach

I Can Use iPads/Androids on My Network End User

Drive New Business Models Enabled by Mobile Devices

Reduce Costs and Increase Employee Productivity with BYOD

Business

Increase Agility Through Enabling Mobile Collaboration

Attract/Retain Top Talent Who Highly Value Their Devices à 2 Devices: company & personal


Bring Your Own Device (BYOD) strategy is the extent that an IT organization prohibits, tolerates, supports or embraces the use of personal mobile devices at work and the controls to enforce such policy.

Challenges q Proliferation of mobile devices on corporate networks impacts security

q Consumers are setting the rules with personal and mobile device and application use

q IT teams need visibility and control; user, device, application, data and network

Risks q  Data loss Lost phone or laptop Unauthorized access Compromised system Unknown data protection

q  Malware Phishing, access mobile/app

q Compliance Rogue devices, unauthorized apps, inconsistent policy


①  BYOD – Challenges & Risks

CONNECT Heterogeneous Sources

DB, FILES MULTIMEDIA

REST-WS JSON, ODATA

AZURE, SAP SALESFORCE

USER AUTH (LDAP/AD)

CONSUME

ARDROID

IOS

WINPHONE 8

BLACKBERY

Heterogeneous Devices

SENCHA / PHONEGAP

CREATE

MOBILE HYBRID-APPS Development Platform

MO

BIL

E B

USI

NES

S O

BJE

CTS

HYBRID MOBILE APPLICATION

MVC CHART MAP

HTML5 & CSS3

NATIVE APPLICATION

DEVICE API PUSH STORAGE

MOBILE NATIVE DEPLOYMENT

ECLIPSE / XCODE

MDM

CONTROL (BYOD)

MAM

Mobile Components


1.1. HTML5 & CSS3


Performance

3D Effects

Semantics

Of[line & Storage

Styling

Connectivity

Multimedia

Device Access

1.3. Old School Web

1)  Browser to Server: HTTP Get 2)  Server to Browser: Dynamically generated HTML


Data Model

Cloud Platform

Sync Engine

Back End

Integration

Browser

HTML Data

1.3. Ajaxi[ied Web

1)  “Run JS” to Server: HTTP Get 2)  Server to Browser: Data only 3)  Browser: Display Data


Data Model

Cloud Platform

Sync Engine

Back End

Integration

Browser

Run JS

Display Data HTML Data

1.3. Of[line-‐able Data

1)  “Run JS” to Server: HTTP Get 2)  Server to Browser: Data only 3)  Browser: Local Storage 4)  Browser: Display Data


Data Model

Cloud Platform

Sync Engine

Back End

Integration

Browser

Run JS

Display Data HTML Data

Of[line-‐able Web Apps

1)  Browser: using Cached/Local HTML 2)  Of[line-‐able Data:

Run JS à Local Storage à Display Data 3)  Sync via HTTP POST + GET when online


Data Model

Cloud Platform

Sync Engine

Back End

Integration

Browser

Run JS

Display Data

2. Hybrid-‐App MVC

q Model – View – Controller q Store: act as a cache, which contains a collection of Models. q Pro[ile: enable to easily customize UI for tablets & phones


3. Native API

q Native Device q Native Libs: Barcode scanning, biometrics


Push Noti[ication

Back-‐end System Back-‐end System

Back-‐end System Back-‐end System

Polling Adapters

Message-‐based Adapters

Uni[ied Push API

Noti[ication State DB

User-‐Device Database

iOS Dispatcher

Android Dispatcher

Apple Push Servers (APNS)

Google Push Servers (GCM)

3rd Party SMS Gateway

Administrative Console

SmartMobile Client-‐Side Push Services

SmartMobile Client-‐Side Push Services

iOS Push API

Android Push API

SMS API SMS Dispatcher

REQUIREMENTS REUSE

Why do we need it? §  Performance monitoring and compliance §  Facilitate in impact analysis §  Reduce elicita:on and analysis effort §  Assist in maintenance of exis:ng solu:ons §  Corporate governance §  Consistency across enterprise

What do we need to do? §  Iden:fy requirements that are

candidates for long-‐term usage by the enterprise

§  Reference Organiza:onal Process Assets

§  Manage requirements traceability

What are the reusable requirements? §  On-‐going (approved) §  Sa:sfied (approved) §  Deferred (unapproved)

What are the output? §  Suitable for long-‐term usage across enterprise … key factors:

• Packaging, classifying, tracing • Stored in a common repository • Easily available; easy to find and access • Clearly named and described

MANAGE REQUIREMENTS TRACEABILITY

Traceability helps manage scope by connecting requirements to the business need behind an initiative. It also assists in making sure that the implemented solution “conforms to requirements”, and in turn supports the business need.

Derivation Allocation

VISUALIZATION

Reusable Requirements Repository

Artefacts Global Product UOM

Global Product UOM Proj #1 Product UOM Proj #2 Product UOM Proj #3 Product UOM

Artefacts Proj #2 Product UOM

OR

A Business Analyst

Solution Requirements

Business & Stakeholder Needs

Con[iguration File

SCRUM Master Validate Products

Product Owner

Assess Products

•  Business Problem •  Business Opportunit

y •  Business Vision •  Resources •  Supporting Materials

•  Business Goals •  Business Objectives •  Strategies •  Resources •  Supporting Materials

FSB to define and align our products business goals, objec:ves and strategies. This will align our team and products to achieve the business targets set by FSB.

FSU3 to provide the current and future business problems, opportuni:es and their desired outcome (vision)

1.  Product owner interacts with FSU3 2.  Collect informa:on from FSU3 3.  Assess product to ensure it meet the business

needs

1.  Scrum Master interacts with FSB 2.  Validate product to ensure the product’s futures are ali

gn and meet the business goal & objec:ves. 3.  Validate product to ensure it brings value to FSB.

R&D Soldiers to analyse the collected informa:on from FSU3 and align them to FSBs & Consultants goals, objec:ves, & strategies. To make sure they will bring business value to the organiza:on, before they’ll be developed.

Informa:on

Requirements

Decomposi:on • Naviga:on • Mock-‐up • Business Rules

Manageable Stories

Product Backlog

R&D Soldiers define the requirements and solu:on scope, based on the given informa:on from FSU3. This will ensure FSB will have the full control and ownership of the solu:ons and products. Further it will help us focus on research & development.

1. Discover

Stakeholder Needs

2. Analyze, Prioritize

and Decide

3. Make Architectural

Trade-‐Offs

4. Communicate Your Plan

5. Build, Deploy and

Validate

6. Scale Mobile Solution

Mobile Center of Excellence

Executive Leadership

Project Teams Mobile Stakeholders

Advise Executive Leadership

Centralize Project

Coordination

Facilitate Stakeholder

Communication

33

Mobility Framework Detail

Architecture

Security

Applications

Process

People

Strategy

§  Application Procurement / Development §  Deployment §  Quality control §  Architectural Governance §  Project Planning and Management §  Support §  Mobility Center of Excellence

§  Update Security Policies §  Assign Membership / Policies §  Track Assets §  Monitor / Track Security Violations §  Disable Lost / Stolen device §  Remote Kill / Lock §  Over The Air Application Updates §  Over The Air Client delivery §  Compliance Activity logging

§  Application Portfolio Management §  Mobile App Roadmap §  Mobile App Store §  User / Stakeholder Communities §  Usability / Functionality / Reliability §  Access Management §  Authentication

§  Styles of computing §  Device / platform standards §  Integration with enterprise systems §  Development tooling §  Device testing §  Frameworks

§  Aligned with overall business strategy §  Business opportunities roadmap §  Mobile capabilities roadmap §  Mobile device management strategy §  Mobility Governance

§  Roles and responsibilities de[inition §  Talent Management / Skills Optimization §  Recruiting §  Training

Reference

•  http://scn.sap.com/community/mobile/blog/2012/12/21/building-‐sap-‐mobile-‐apps-‐with-‐sencha-‐touch-‐-‐part-‐1

•  http://www2.developerforce.com/mobile •  http://www.sencha.com/blog/sencha-‐touch-‐spotlight-‐xero

•  http://www.sencha.com/products/touch/whos-‐using/

Version 1.0 34

Technology

HTML5 Mobile Web Framework - High Level Design