Importance of Mobile App Architecture For Mobile App Development
Web, Mobile, App and Back!
-
Upload
connectwebex -
Category
Business
-
view
517 -
download
0
Transcript of Web, Mobile, App and Back!
![Page 1: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/1.jpg)
Web, Mobile, App and Back! CQCON 2013, Basel
Gabriel Walt Product Manager Web Experience Management @GabrielWalt [email protected]
![Page 2: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/2.jpg)
Web, Mobile, App and Back!
![Page 3: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/3.jpg)
What is it about? – Making the content available for the mobile visitors – Delivering an adapted experience (limitations & possibilities) – Recognize the same users identically (personalization & targeting) – Measure the same things the same way
Web, Mobile, App and Back!
![Page 4: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/4.jpg)
ADAPTIVE
RESPONSIVE Client adapts the layout to the browser/device
SERVER SIDE
ADAPTIVE
Server adapts the rendition to the browser/device
Set of strategies to adapt the experience to browsers/devices
Adaptive Strategy
![Page 5: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/5.jpg)
Responsive • Client Side • Continuous adaptation of the layout to the browser (e.g. !uid grid)
• Same content served to all browsers and devices • Single URL for all devices • Mobile "rst Adaptive • Server Side (in our case)
• De"ned set of optimized experiences (e.g. desktop, tablet, touch phones, legacy)
• Different renditions generated by server for the given set of devices • Different URLs (because CQ is RESTful)
• Need redirection
Adaptive VS Responsive
![Page 6: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/6.jpg)
Different Use-Cases
Responsive Site Same content for all browsers Layout is adapted by the browser è Maximal Reuse
Adaptive Site Partially different experience è Partial Reuse
Separate Site Disconnected experience è No Reuse
e.g. Desktop e.g. Mobile
![Page 7: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/7.jpg)
Different Use-Cases
Content
Structure
Content
Structure
Content
Structure
Responsive Site Same content for all browsers Layout is adapted by the browser è Maximal Reuse
Adaptive Site Partially different experience è Partial Reuse
Separate Site Disconnected experience è No Reuse
![Page 8: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/8.jpg)
Different Use-Cases – Adaptive
Adaptive Structure Same content, optimized layout
Adaptive Content Same layout, optimized content
Content
Structure
Content
Structure
Adaptive Site Partially different experience Content
Structure
![Page 9: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/9.jpg)
Key Features • Mobile Simulator • LiveCopy – to keep content in sync • BrowserMap – to redirect the visitor
Key Features • Responsive Simulator • Adaptive Image Component
Responsive Site
Adaptive Site
Separate Site
Adaptive Structure
Adaptive Content
Different Use-Cases
![Page 10: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/10.jpg)
Separate Content Tree / Separate Rendition
When the CONTENT needs adaptations: è Separate Content Tree (typically kept in sync using LiveCopy)
When the RENDITION needs adaptations: è Separate Selector or è Separate Content Tree
Adaptive Content
Adaptive Structure
Content
Structure
Content
Structure
![Page 11: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/11.jpg)
Live Copy
Master Content
Mobile Content
Content
Adaptive Site Architecture
Phone Site
Tablet Site
Desktop Site
HTML Rendi1ons
![Page 12: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/12.jpg)
Live Copy Phone Site
Tablet Site
Desktop Site /site/news.html
Master Content /content/site/news
Mobile Content
Web Path Repository Path
Adaptive Site Architecture
/site-‐mobile/news.tablet.html
/site-‐mobile/news.phone.html
/content/site-‐mobile/news
![Page 13: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/13.jpg)
Apps
![Page 14: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/14.jpg)
Let’s keep the focus – Making the content available for the mobile visitors – Delivering an adapted experience (limitations & possibilities) – Recognize the user (personalization & targeting) – Measure the same things the same way
Apps
Web VS Native
Site App Site App
Maximal Reuse – Of Code & Skills – Of Content & Data – Of Processes & Work!ows
Less Reuse – Reuse is harder – More maintenance – Less agility
![Page 15: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/15.jpg)
Web VS Native
Maximal Reuse – Of Code & Skills – Of Content & Data – Of Processes & Work!ows
Less Reuse – Reuse is harder – More maintenance – Less agility
– Needs to be compiled for each OS – Can access device APIs – Distributed through AppStores – Pushed through AppStores – Faster
Other Differences – Cross Platform – Limited to the browser – Distributed by URL – Instant Updates – Fast
Site App Site App
![Page 16: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/16.jpg)
First, Some Guidelines – Architect for performance
• Single Page Architecture • Cache everything • Don’t wait for data to display the UI • Don’t generate UI on the server
– Provide structure to your application • Use Feature Detection • Use a MV* architecture • Use Frontend Templates
– Abstract Non-Standard APIs e.g. Browser or PhoneGap speci"c
Web App
![Page 17: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/17.jpg)
![Page 18: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/18.jpg)
PhoneGap
Obj C Java NDK
J2ME C# C++ C++ C/C++
Na1ve
![Page 19: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/19.jpg)
PhoneGap
Fully Cross-‐Pla>orm
WebApp
![Page 20: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/20.jpg)
PhoneGap
PhoneGap is a Wrapper
+ PhoneGap
Build
![Page 21: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/21.jpg)
PhoneGap
+ PhoneGap has a vibrant
Community
PhoneGap is a Bridge
![Page 22: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/22.jpg)
Web VS Native
Maximal Reuse – Of Code & Skills – Of Content & Data – Of Processes & Work!ows
Less Reuse – Reuse is harder – More maintenance – Less agility
– Needs to be compiled for each OS – Can access device APIs – Distributed through AppStores – Pushed through AppStores – Faster
Other Differences – Cross Platform – Device & Browser APIs – $rough AppStores (and URLs)
– Pushed through AppStore – Fast
![Page 23: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/23.jpg)
Mobile Content Synchronization
![Page 24: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/24.jpg)
Exports Content from the repository as a ZIP "le • Client Technology Agnostic:
– Requires HTTP client – Requires ZIP library
• Optimized for low bandwidth consumption – Only diff is transferred – Content is packaged in one compressed "le
• Can synchronize any kind of content: – HTML, CSS, JS – XML, JSON, etc. – Binaries, like images, PDFs, etc. – Static "les or Dynamically rendered "les
Content Synchronization
![Page 25: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/25.jpg)
ContentSync + PhoneGap
ContentSync
PhoneGap Build
PhoneGap App
ContentSync Diff Update
Under Progress
PhoneGap ContentSync Diff Update Integra1on
CQ5
![Page 26: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/26.jpg)
• Not suited for Content Synchroniza1on – Heavy files (e.g. very large images)
– Huge amounts of content – Content with high frequency of change (e.g. forum posts)
– User specific data • Strategies for handling that
– Load user content asynchronously (e.g. at app launch, through a user web service) – Load heavy content asynchronously (e.g. first 1me user requests it)
– Load frequently changing content in a web view, or beTer asynchronously too
Content Synchronization
![Page 27: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/27.jpg)
✓ Making the content available for the mobile visitors ✓ Delivering an adapted experience (limitations & possibilities) ✓ Recognize the same users identically (personalization & targeting) ✓ Measure the same things the same way
Web, Mobile, App and Back!
![Page 29: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/29.jpg)
One More $ing…
Gabriel Walt Product Manager Web Experience Management @GabrielWalt [email protected]
![Page 30: Web, Mobile, App and Back!](https://reader036.fdocuments.us/reader036/viewer/2022062420/55c87e2bbb61ebbf6c8b464b/html5/thumbnails/30.jpg)
New CQ Components è 1nyurl.com/cqcomponent
Improve: • Extensibility • Reusability • Separation of concerns • Help structuring real projects