HTML5 Mobile Web Framework - High Level Design
4 likes1,572 views
This document discusses developing mobile applications for enterprises. It notes challenges around supporting multiple mobile platforms and devices. It proposes using HTML5, CSS and JavaScript to build hybrid mobile apps that can access native device features. This allows apps to be developed once and deployed across platforms. The document advocates developing apps using a mobile cloud platform to integrate with back-end systems and support enterprise requirements like security, management and BYOD.
HTML5 Mobile Web Framework - High Level Design
- 1. ENTERPRISE HYBRID-‐APPS MOBILE FRAMEWORK Version 2.0 by [email protected] 1
- 2. Agenda Version 1.0 1. Introduction 2. HTML5 + Native Hybrid-‐Apps 3. Mobile Chart: TBD 4. Mobie Map 5. Reference 2
- 3. 61% of CIOs put mobile as priority increased productivity with mobile apps 45% 10 Billion devices by 2020 ① Mobile Cloud for the ENTERPRISE
- 4. 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
- 5. 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
- 6. 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 Version 0.5 (Draft) 6
- 7. 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? Version 0.5 (Draft) 7
- 8. 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 ? Version 0.5 (Draft) 8
- 9. 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 Version 0.5 (Draft) 9
- 10. Mobile Cloud Platform for Enterprise Mobile Cloud Solution 10
- 11. 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.
- 12. 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
- 13. 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)
- 14. ① 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 10/8/12 Mobile Cloud Solution 14 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.
- 15. 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 10/8/12 Mobile Cloud Solution 15 ① BYOD – Challenges & Risks
- 16. 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 MOBILEBUSINESSOBJECTS HYBRID MOBILE APPLICATION MVC CHART MAP HTML5 & CSS3 NATIVE APPLICATION DEVICE API PUSH STORAGE MOBILE NATIVE DEPLOYMENT ECLIPSE / XCODE MDM CONTROL (BYOD) MAM
- 17. Mobile Components Version 0.5 (Draft) 17
- 18. 1.1. HTML5 & CSS3 Version 0.5 (Draft) 18 Performance 3D Effects Semantics Of[line & Storage Styling Connectivity Multimedia Device Access
- 19. 1.3. Old School Web 1) Browser to Server: HTTP Get 2) Server to Browser: Dynamically generated HTML Version 0.5 (Draft) 19 Data Model Cloud Platform Sync Engine Back End Integration Browser HTML Data
- 20. 1.3. Ajaxi[ied Web 1) “Run JS” to Server: HTTP Get 2) Server to Browser: Data only 3) Browser: Display Data Version 0.5 (Draft) 20 Data Model Cloud Platform Sync Engine Back End Integration Browser Run JS Display Data HTML Data
- 21. 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 Version 0.5 (Draft) 21 Data Model Cloud Platform Sync Engine Back End Integration Browser Run JS Display Data HTML Data
- 22. 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 Version 0.5 (Draft) 22 Data Model Cloud Platform Sync Engine Back End Integration Browser Run JS Display Data
- 23. 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 Version 0.5 (Draft) 23
- 24. 3. Native API q Native Device q Native Libs: Barcode scanning, biometrics Version 0.5 (Draft) 24
- 25. Push Noti[ication Back-‐end System Back-‐end System Back-‐end System Back-‐end System Polling Adapters Message-‐bas ed 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
- 26. 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
- 27. 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
- 28. VISUALIZATION Reusable Requirements Repos itory 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
- 29. SCRUM Master Validate Products Product Owne r 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:ve s 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, o pportuni: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 the m to FSBs & Consultants goals, objec :ves, & strategies. To make sure they will bring business value to the orga niza:on, before they’ll be developed.
- 30. 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 o wnership of the solu:ons and products. Further it will help us focus on research & development.
- 31. 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
- 32. Mobile Center of Excellence Executive Leadership Project Teams Mobile Stakeholders Advise Executive Leadership Centralize Project Coordination Facilitate Stakeholder Communication
- 33. 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
- 34. 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