Web, Mobile, App and Back!
Upcoming SlideShare
Loading in...5
×
 

Web, Mobile, App and Back!

on

  • 721 views

Presentation “Web, Mobile, App and Back!“ by Gabriel Walt at CQCON2013 in Basel on 19 and 20 June 2013.

Presentation “Web, Mobile, App and Back!“ by Gabriel Walt at CQCON2013 in Basel on 19 and 20 June 2013.

Statistics

Views

Total Views
721
Views on SlideShare
713
Embed Views
8

Actions

Likes
0
Downloads
32
Comments
1

1 Embed 8

http://www.markszulc.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Gabriel, enjoyed your presentation! You are welcome to check ours about PhoneGap right here http://www.slideshare.net/MobiDev/how-to-create-one-app-for-all-platforms-using-phonegap
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web, Mobile, App and Back! Web, Mobile, App and Back! Presentation Transcript

  • Web, Mobile, App and Back!CQCON 2013, BaselGabriel WaltProduct ManagerWeb Experience Management@GabrielWaltgwalt@adobe.com
  • Web, Mobile, App and Back!
  • 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 wayWeb, Mobile, App and Back!
  • ADAPTIVERESPONSIVEClient adapts thelayout to thebrowser/deviceSERVERSIDEADAPTIVEServer adapts therendition to thebrowser/deviceSet of strategies toadapt the experienceto browsers/devicesAdaptive Strategy
  • Responsive•  Client Side•  Continuous adaptation of the layout to the browser (e.g. fluid grid)•  Same content served to all browsers and devices•  Single URL for all devices•  Mobile firstAdaptive•  Server Side (in our case)•  Defined 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 redirectionAdaptive VS Responsive
  • Different Use-Cases  Responsive SiteSame content for all browsersLayout is adapted by the browserè Maximal ReuseAdaptive SitePartially different experienceè Partial ReuseSeparate SiteDisconnected experienceè No Reusee.g. Desktop e.g. Mobile
  • Different Use-Cases  ContentStructureContentStructureContentStructureResponsive SiteSame content for all browsersLayout is adapted by the browserè Maximal ReuseAdaptive SitePartially different experienceè Partial ReuseSeparate SiteDisconnected experienceè No Reuse
  • Different Use-Cases – Adaptive  Adaptive StructureSame content, optimized layoutAdaptive ContentSame layout, optimized contentContentStructureContentStructureAdaptive SitePartially different experienceContentStructure
  • Key Features•  Mobile Simulator•  LiveCopy – to keep content in sync•  BrowserMap – to redirect the visitorKey Features•  Responsive Simulator•  Adaptive Image ComponentResponsive SiteAdaptive SiteSeparate SiteAdaptive StructureAdaptive ContentDifferent Use-Cases
  • Separate Content Tree / Separate RenditionWhen the CONTENT needs adaptations:è Separate Content Tree (typically kept in sync using LiveCopy)When the RENDITION needs adaptations:è Separate Selectororè Separate Content TreeAdaptive ContentAdaptive StructureContentStructureContentStructure
  • Live  Copy  Master ContentMobile ContentContent  Adaptive Site ArchitecturePhone SiteTablet SiteDesktop SiteHTML  Rendi1ons  
  • Live  Copy  Phone SiteTablet SiteDesktop Site/site/news.html  Master Content/content/site/news  Mobile ContentWeb  Path   Repository  Path  Adaptive Site Architecture/site-­‐mobile/news.tablet.html  /site-­‐mobile/news.phone.html  /content/site-­‐mobile/news  
  • Apps
  • 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 wayAppsWeb VS NativeSite App Site AppMaximal Reuse–  Of Code & Skills–  Of Content & Data–  Of Processes & WorkflowsLess Reuse–  Reuse is harder–  More maintenance–  Less agility
  • Web VS NativeMaximal Reuse–  Of Code & Skills–  Of Content & Data–  Of Processes & WorkflowsLess 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–  FasterOther Differences  –  Cross Platform–  Limited to the browser–  Distributed by URL–  Instant Updates–  FastSite App Site App
  • 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 APIse.g. Browser or PhoneGap specificWeb App
  • PhoneGapObj C JavaNDKJ2ME C# C++ C++ C/C++Na1ve  
  • PhoneGapFully  Cross-­‐Pla>orm  WebApp  
  • PhoneGapPhoneGap  is  a  Wrapper  +  PhoneGap  Build  
  • PhoneGap+  PhoneGap  has  a  vibrant  Community  PhoneGap  is  a  Bridge  
  • Web VS NativeMaximal Reuse–  Of Code & Skills–  Of Content & Data–  Of Processes & WorkflowsLess 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–  FasterOther Differences  –  Cross Platform–  Device & Browser APIs–  Through AppStores (and URLs)–  Pushed through AppStore–  Fast
  • Mobile Content Synchronization
  • Exports Content from the repository as a ZIP file•  Client Technology Agnostic:–  Requires HTTP client–  Requires ZIP library•  Optimized for low bandwidth consumption–  Only diff is transferred–  Content is packaged in one compressed file•  Can synchronize any kind of content:–  HTML, CSS, JS–  XML, JSON, etc.–  Binaries, like images, PDFs, etc.–  Static files or Dynamically rendered filesContent Synchronization
  • ContentSync + PhoneGapContentSync  PhoneGap  Build  PhoneGap  App  ContentSync  Diff  Update  Under  Progress  PhoneGap  ContentSync  Diff  Update  Integra1on  CQ5  
  • •  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
  • ✓ 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 wayWeb, Mobile, App and Back!
  • Ques1ons?  Gabriel WaltProduct ManagerWeb Experience Management@GabrielWaltgwalt@adobe.com
  • One More Thing…Gabriel WaltProduct ManagerWeb Experience Management@GabrielWaltgwalt@adobe.com
  • New  CQ  Components  è  1nyurl.com/cqcomponent  Improve:•  Extensibility•  Reusability•  Separation of concerns•  Help structuring real projects
  • Thanks!  Gabriel WaltProduct ManagerWeb Experience Management@GabrielWaltgwalt@adobe.com