A dummies guide to native, html5 and hybrid mobile apps

8,077 views

Published on

Updated version of presentation 'A Dummies Guide to Native, HTML5 and Hybrid Mobile Apps' delivered at Mastering Enterprise Mobility with SAP conference in Melbourne 2012.

Accompanying blog can be found on the SAP Community Network here ...
http://scn.sap.com/community/mobile/blog/2012/11/15/a-dummies-guide-to-understanding-native-hybrid-and-html5-mobile-apps-with-sap

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,077
On SlideShare
0
From Embeds
0
Number of Embeds
1,122
Actions
Shares
0
Downloads
268
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

A dummies guide to native, html5 and hybrid mobile apps

  1. 1. Supported  by:   Produced  by:  
  2. 2. John  Moy  SAP  Mentor  A  Dummies  Guide  to  Understanding  Na;ve,  HTML5  and  Hybrid  Mobile  Apps  UPDATED  15  November  2012  
  3. 3. Disclaimer   Thoughts  and  opinions  expressed  here  represent  my  own  and  not   those  of  SAP   All  content  provided  in  this  presenta;on  is  for  informa;onal   purposes  only.    The  author  makes  no  representa;ons  as  to  the   accuracy  or  completeness  of  any  informa;on  in  this  presenta;on.     The  author  will  not  be  liable  for  any  errors  or  omissions  in  this   presenta;on  nor  for  the  availability  of  this  informa;on.   Mastering  Enterprise  Mobility  with  SAP  2012  |  3  
  4. 4. Main  Message   Whether  it  be  na;ve  mobile  plaNorms,  HTML5  web  apps,  or   complementary  mobile  frameworks,  the  last  few  years  has  seen   an  explosion  in  possibili;es  for  mobile  app  development.   Understand  the  pros  and  cons  for  the  various  op;ons  before   deciding  which  to  incorporate  into  your  mobile  strategy.   Mastering  Enterprise  Mobility  with  SAP  2012  |  4  
  5. 5. What  I’ll  Cover  •  Na;ve  Apps  •  HTML5  –  why  the  big  fuss?  •  Complementary  HTML5  /  mobile  frameworks  (including  Hybrid  op;ons)   •  jQuery  Mobile   •  Sencha  Touch   •  PhoneGap   •  Appcelerator  •  Mapping  the  frameworks  and  styles  to  SAP’s  Mobility  offerings  •  Ques;ons  •  Key  Points  to  Take  Home   Mastering  Enterprise  Mobility  with  SAP  2012  |  5  
  6. 6. NaGve  Apps   Mastering  Enterprise  Mobility  with  SAP  2012  |  6  
  7. 7. NaGve  Apps  -­‐  Pros   Op;mum  device   ✔ fidelity  and  user   experience   ✔ Fully  leveraging  all   na;ve  device   features   Mastering  Enterprise  Mobility  with  SAP  2012  |  7  
  8. 8. NaGve  Apps  -­‐  Cons   ✗   Skills  shortages   Objec;ve-­‐C  +  iOS  SDK,  Mac   Cost  to  develop   ✗   across  mul;ple   Java  +  Android  SDK   plaNorms   C++  or  C#/.Net,  XAML   C/C++  Na;ve  SDK  (BB10)   Blackberry  Java  SDK   Mastering  Enterprise  Mobility  with  SAP  2012  |  8  
  9. 9. Introducing  HTML5  •  HTML5  is  not  yet  a  W3C  Standard.    •  It  is  a  Working  Drae,  expected  to  be   finalised  in  2014  •  First  official  update  to  HTML  spec   since  HTML4.01  in  1999   “By  2015,  Gartner  predicts  HTML5  will   deliver  50%  of  all  applica;ons  that   would  have  been  na;ve  in  2011”   Mastering  Enterprise  Mobility  with  SAP  2012  |  9  
  10. 10. HTML5  –  A  collecGon  of  features  •  A  few  of  the  useful  features  …   Geoloca;on*   4   1   Applica;on   Caching   =  Offline  Capable   5   File  API*   (eg.  Camera  Access)   2   Local  Storage   Many  other  features:   6   Placeholder  text,  video,   3   Drawing  Canvas   CSS3*  rounded  corners,  etc.   *  Not  strictly  part  of  HTML5  specifica;on  but  included  as  synonymous  with  HTML5   Mastering  Enterprise  Mobility  with  SAP  2012  |  10  
  11. 11. HTML5  +  CSS3  and  Responsive  Web  Design   The  control  which  designers  know   in  the  print  medium,  and  oeen   desire  in  the  web  medium,  is   simply  a  func;on  of  the  limita;on   of  the  printed  page.  We  should   embrace  the  fact  that  the  web   doesn’t  have  the  same  constraints,   and  design  for  this  flexibility.  But   first,  we  must  “accept  the  ebb  and   flow  of  things.”   John  Allsopp,  “A  Dao  of  Web   Design”   hqp://www.alistapart.com/ar;cles/responsive-­‐web-­‐design/   Mastering  Enterprise  Mobility  with  SAP  2012  |  11  
  12. 12. HTML5  Mobile  Web  Apps  –  Pros   Leverage  common  web  development  skills   ✔ HTML5  +  CSS3  +  Javascript   ✔ Build  cross-­‐plaNorm  apps  (for  mobiles,  tablets,   desktops  etc.)  more  quickly  and  cheaply     Mastering  Enterprise  Mobility  with  SAP  2012  |  12  
  13. 13. HTML5  Mobile  Web  Apps  –  Cons   Mobile  web  apps  can  compromise  on   ✗   op;mum  user  experience*   Mobile  web  apps  may  not  have  access  to  all   ✗   na;ve  device  capabili;es   *  Studies  support  asser;on  that  Mobile  Web  Apps  rate  lower  than  Na;ve  apps  in  usability  tests      hqp://www.useit.com/alertbox/mobile-­‐sites-­‐apps.html   Mastering  Enterprise  Mobility  with  SAP  2012  |  13  
  14. 14. Nonetheless  …  HTML5  even  capable  of  delivering  games   Source:  Beginning  HTML5   Mobile  Game  Programming   with  jQuery  Mobile  by  The   Rock  n  Coder   hqp://therockncoder.blogspot.com.au/2012/10/beginning-­‐html5-­‐mobile-­‐game-­‐programming.html   Mastering  Enterprise  Mobility  with  SAP  2012  |  14  
  15. 15. HTML5  Apps  with  jQuery  Mobile   Free  open  source  HTML5  mobile  web  framework   Based  on  the  very  popular  jQuery  (Javascript)  library   Relies  upon  HTML5  +  CSS3  +  Javascript/jQuery  skills   Supports:     Mastering  Enterprise  Mobility  with  SAP  2012  |  15  
  16. 16. HTML5  Apps  with  jQuery  Mobile  -­‐  Approach   2   Custom   HTML5   jQuery   1   Mobile   Custom   Framework   3   Javascript   (Javascript/CSS)   Mastering  Enterprise  Mobility  with  SAP  2012  |  16  
  17. 17. HTML5  Apps  with  jQuery  Mobile  –  Sample  Code   Mastering  Enterprise  Mobility  with  SAP  2012  |  17  
  18. 18. HTML5  Apps  with  jQuery  Mobile  –  Development   Rapid  Interface  Builder  hqps://01.org/rib/online/  (Chrome  browser  only)   Mastering  Enterprise  Mobility  with  SAP  2012  |  18  
  19. 19. HTML5  Apps  with  jQuery  Mobile  –  Theming   jQuery  Mobile  Theme  Roller  hqp://jquerymobile.com/themeroller/index.php   Enterprise  Mobility  with  SAP  2012  |  19   Mastering  
  20. 20. HTML5  Apps  with  jQuery  Mobile  -­‐  Demo   Mastering  Enterprise  Mobility  with  SAP  2012  |  20  
  21. 21. HTML5  Apps  with  Sencha  Touch   Based  on  a  pure  Javascript  framework  genera;ng  HTML5     Also  supports  na;ve  hybrid  packaging   Available  with  a  (free)  commercial  soeware  license   Supports:     Mastering  Enterprise  Mobility  with  SAP  2012  |  21  
  22. 22. HTML5  Apps  with  Sencha  Touch  -­‐  Approach   Custom   2   Javascript   Source   HTML5   Sencha   3   generated   1   Framework   dynamically  in   (Javascript)   mobile  browser   Mastering  Enterprise  Mobility  with  SAP  2012  |  22  
  23. 23. HTML5  Apps  with  Sencha  Touch  –  Sample  Code   Mastering  Enterprise  Mobility  with  SAP  2012  |  23  
  24. 24. HTML5  Apps  with  Sencha  Touch  -­‐  Development   Mastering  Enterprise  Mobility  with  SAP  2012  |  24  
  25. 25. HTML5  Apps  with  Sencha  Touch   Mastering  Enterprise  Mobility  with  SAP  2012  |  25  
  26. 26. Hybrid  Apps  with  PhoneGap   Free  open  source  framework  for  packaging   mobile  web  apps  in  a  Na;ve  wrapper   Exposes  Javascript  APIs  to  access  na;ve   device  features   Renamed  to  Apache  Cordova   Supports:     Mastering  Enterprise  Mobility  with  SAP  2012  |  26  
  27. 27. Hybrid  Apps  with  PhoneGap  -­‐  Approach   PhoneGap   Embedded  Web   1   Wrapper   2   App  (eg.  jQuery   (na;ve  code  with   Mobile,  Sencha   Javascript  APIs)   etc.)   Embedding  web  browser  view   Mastering  Enterprise  Mobility  with  SAP  2012  |  27   Mastering  Enterprise  Mobility  with  SAP  2012  |  27  
  28. 28. Hybrid  Apps  with  PhoneGap  :  Features   Mastering  Enterprise  Mobility  with  SAP  2012  |  28  
  29. 29. Hybrid  Apps  with  PhoneGap  -­‐  Demo   Mastering  Enterprise  Mobility  with  SAP  2012  |  29  
  30. 30. Hybrid  Apps  with  Appcelerator  Titanium   Open  source  framework  for  building   cross-­‐plaNorm  na;ve  apps  powered  by  Javascript   Na;ve  container  provides  full  na;ve  user  experience,     with  underlying  code  driven  by  unified  Javascript  code-­‐base   Complementary  cloud  plaNorm  services  available   Supports:     Mastering  Enterprise  Mobility  with  SAP  2012  |  30  
  31. 31. Hybrid  Apps  with  Appcelerator  Titanium  –  Sample  Code   Mastering  Enterprise  Mobility  with  SAP  2012  |  31  
  32. 32. Hybrid  Apps  with  Appcelerator  Titanium  –  Development   Mastering  Enterprise  Mobility  with  SAP  2012  |  32  
  33. 33. Hybrid  Apps  with  Appcelerator  Titanium  -­‐  Approach   3   Cloud   services   Titanium   Embedded   1   Wrapper   2   Javascript  to   (na;ve   drive  na;ve  app   wrapper  with   Javascript  APIs)   Mastering  Enterprise  Mobility  with  SAP  2012  |  33  
  34. 34. Hybrid  Apps  with  Appcelerator  Titanium  -­‐  Demo   Mastering  Enterprise  Mobility  with  SAP  2012  |  34  
  35. 35. But  ….  How  do  you  choose  from  all  these?   Mastering  Enterprise  Mobility  with  SAP  2012  |  35  
  36. 36. It  depends  upon  your  prioriGes  …   Criteria   NaGve   HTML5   Hybrid   User  Experience   ★★★★   ★★   ★★★   BYOD  support  (mul;-­‐device)   ★   ★★★   ★★   Leverage  na;ve  device  features   ★★★★   ★★   ★★★   Offline  capability   ★★★   ★★   ★★★   Ease  of  development  &  support   ★   ★★   ★★   Ease  of  deployment   ★★   ★★★   ★★   Mastering  Enterprise  Mobility  with  SAP  2012  |  36  
  37. 37. Understand  where  SAP  supports  different  OpGons   =  “SAP  Mobile  PlaNorm”   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  37  
  38. 38. Pabern  A:  ABAP  Web  Server  serves  HTML5  and/or  REST  APIs     •     Custom  build  of  REST  APIs  from  within  ABAP  Internet  Communica;on  Framework  (ICF)   •     Op;onally  serve  HTML5  apps  using  BSP,  ICM  file  system,  or  alternate  web  server   •     Support  any  na;ve,  HTML5  or  Hybrid  approach   Reverse  Proxies  etc.   •     SAP  offers  SAP  NetWeaver  Gateway  as  a  framework  to  alleviate  custom  build  effort  here   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  38  
  39. 39. Pabern  B:  Portal  on  Device  soluGon   •     Requires  SAP  NetWeaver  Portal  7.3  SP07  or  higher   •     Based  on  jQuery  Mobile  libraries   Reverse  Proxies  etc.   •     Does  not  solve  mobile-­‐enablement  of  Business  Suite  content   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  39  
  40. 40. Pabern  C:  Mobile  app  connecGng  with  NetWeaver  Gateway   •     Mobile  app  interacts  with  ODATA  REST  APIs  exposed  by  SAP  NetWeaver  Gateway   •     Support  any  na;ve,  HTML5  or  Hybrid  approach   Reverse  Proxies  etc.   •     SAP  partnerships  with  Sencha  &  Appcelerator  (Titanium)   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  40  
  41. 41. Pabern  D:  Mobile  app  connecGng  to  Gateway  via  SUP   •     Mobile  app  interacts  with  ODATA  REST  APIs  exposed  by  SAP  NetWeaver  Gateway   •     Sybase  Unwired  PlaNorm  serves  as  proxy  for  communica;ons   •     Use  ODATA  SDK  for  Sybase  Unwired  PlaNorm  (na;ve  iOS,  Android,  Blackberry  apps)   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  41  
  42. 42. Pabern  E:  Mobile  web  app  using  SUP  Hybrid  Web  Container   •     Hybrid  web  app  interacts  with  mobile  business  objects  (MBOs)  in  SUP;  OR   •     Hybrid  web  app  interacts  with  ODATA  from  SAP  NetWeaver  Gateway  (new  in  SUP  2.2)   •     Hybrid  Web  Container  ships  with  jQuery  Mobile  by  default,  but  can  be  subs;tuted   Reverse  Proxies  etc.   •     SAP  supports  use  of  PhoneGap  in  the  Hybrid  Web  Container   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  42  
  43. 43. Pabern  F:  NaGve  Mobile  App  using  Sybase  Unwired  Pladorm   •     Na;ve  app  interacts  with  mobile  business  objects  (MBOs)  in  Sybase  Unwired  PlaNorm   •     Na;ve  code  genera;on  to  deliver  baseline  app  (produc;vity  aids)   •     Currently  supports  na;ve  iOS,  Android,  Blackberry,  Windows,  Windows  Mobile   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  43  
  44. 44. Pabern  G:  Mobile  App  using  SUP  REST  API   •     New  in  SUP  2.2   •     Support  any  na;ve,  HTML5  or  Hybrid  approach          (eg.  Windows  8,  Sencha,  Appcelerator  Titanium  etc.)   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  44  
  45. 45. Pabern  H:  Mobile  apps  via  Syclo  Agentry   •     Configurable  na;ve  mobile  apps  provided  out  of  box  using  proprietary  Syclo  framework   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  45  
  46. 46. Pabern  I:  Mobile  apps  via  Sybase  Mobilizer   •     Solu;on  for  mobile  consumer  facing  scenarios     •     Originated  from  mCommerce  solu;on  for  financial  ins;tu;ons   Reverse  Proxies  etc.   •     Support  na;ve,  HTML5  or  Hybrid  approaches   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  46  
  47. 47. Pabern  J:  Mobile  apps  via  Business  Objects  Mobile   •     Na;ve  mobile  app  (Webi  /  Crystal).    SAP  looking  to  deliver  Excelsius  on  HTML5.   •     Not  considered  a  target  plaNorm  for  custom  mobile  app  development   Reverse  Proxies  etc.   Firewalls  /     A   B   C   D   E   F   G   H   I   J   REST     ODATA   ODATA   MBO   MBO   API   Mobile  Business  Objects   SAP  NetWeaver   Sybase  Unwired   Syclo   BO  Mobile  Server   Afaria   Mobilizer   Portal   PlaNorm  (SUP)   Agentry   Business   Objects   SAP  NetWeaver  Gateway   SAP  Business  Suite   Mastering  Enterprise  Mobility  with  SAP  2012  |  47  
  48. 48. Key  Points  to  Take  Home  •  Before  deciding  upon  your  mobile  development  op;ons,  carefully   consider  your  priori;es  and  your  dependencies.   –  Development  and  support  costs  versus  na;ve  high  fidelity  user  experience   –  In-­‐house  skills,  system  integrator  skills   –  Even  when  purchasing  pre-­‐built  apps,  understand  any  support  implica;ons  •  Understand  that  currently  HTML5  offers  the  best  longer  term   opportunity  to  support  a  true  mul;-­‐channel  strategy,  whilst  na;ve   apps  provide  the  best  possible  user  experience   Mastering  Enterprise  Mobility  with  SAP  2012  |  48  
  49. 49. How  to  contact  me:  John  Moy  SAP  Mentor  Email    john@BlueT.com.au  Phone  0403  197727  
  50. 50. References  •  HTML5   Dive  into  HTML5  hqp://diveintohtml5.info  •  jQuery  Mobile  www.jquerymobile.com   SAP  NetWeaver  Portal  on  Smartphone  (video)  hqp://www.youtube.com/watch?v=GhgYdEa9_B0   SAP  NetWeaver  Portal  on  Tablet  (video)  hqp://www.youtube.com/watch?v=NA9W0MCwTtM  •  Sencha  Touch  www.sencha.com/products/touch   SAP  Partnership  hqp://www.sencha.com/blog/sencha-­‐touch-­‐odata-­‐connector-­‐and-­‐samples-­‐for-­‐sap/  •  PhoneGap  www.phonegap.com   SCN  Blog  on  using  jQuery  Mobile  with  PhoneGap  hqp://bit.ly/HsnMJJ  •  Appcelerator  Titanium  hqp://www.appcelerator.com   SAP  Partnership  www.appcelerator.com/sap   Mastering  Enterprise  Mobility  with  SAP  2012  |  51  

×