Successfully reported this slideshow.

HTML5 Mobile Application Framework

532 views

Published on

HTML5 Mobile Hybrid Application Framework

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 Mobile Application Framework

  1. 1. HTML5  MOBILE  FRAMEWORK     1
  2. 2. 1.  Challenges  with     Implementing  Mobile  Application   How  do  We  accommodate  all  the     How  do  I  design  and  develop  a     different  mobile  platforms?   high-­‐quality  User  Experience?  •  Highly  fragmented  set  of  …   •  High  quality  user  experience  is  a   •  Platforms  and  devices   requirement   •  Languages,  APIs,  and  tools   •  Quality  inOluenced  as  much  by    •  Native  programming  models     design  as  it  is  by  function   not  portable  across  platforms   We  need  to  develop  different  apps     We  need  to  connect  my  apps  to     for  different  Customers  –  quickly.   existing  systems  (DMS,  DMS-­‐HO)  •  Higher  frequency  of     •  Existing  services  typically  need     releases  and  updates   to  be  adapted  for  mobile  •  Added  pressure  on  teams  to     •  Enterprise  wireless  networks     deliver  on  time  and  with  quality   are  running  out  of  bandwidth     for  employee  devices   Version  0.5  (Draft) 2
  3. 3. 1.2.  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  proOile  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  Oield  is  still  evolving,  so  an  enterprise  would  want  to  pick  a   platform  that  can  adapt  to  the  future.   Version  0.5  (Draft) 3
  4. 4. 1.4.  Delivering  for    Multiple-­‐Mobile-­‐Platforms   Client  Challenge   Using  standards-­‐based  technologies  and  tools     and  delivering  an  enterprise-­‐grade  services     layer  that  meets  the  needs  of  mobile  employees   and  customers   Key  Capabilities   Mobile  optimized  middleware   §  Open  approach  to  3rd-­‐party  integration   §  Strong  authentication  framework   §  Encrypted  ofOline  availability   §  Enterprise  back-­‐end  connectivity   §  UniOied  push  notiOications   §  Data  collection  for  analytics   §  Direct  updates  and  remote  disablement   §  Packaged  runtime  skins   Version  0.5  (Draft) 4
  5. 5. 1.5.  Native  Apps  VS  Web  Apps    •  Existing  Native  Apps:  Android,  iOS,  Win8,  Blackberry.  •  Existing  Web  Apps:  DMS,  Portal,  ERP  …  •  What  if  we  can  develop  apps  with  beneOits  from     both  Native  and  Web  Apps?     Version  0.5  (Draft) 5
  6. 6. 1.6.  Hybrid  Apps  –  Why  not?    •  What  if  we  can  develop  with  beneOits  from  both  Native  and  Web  apps?       Hybrid  Apps  •  But  Company  regulatory,  audit,  legal  or  time-­‐to-­‐market  restrictions  ?   Version  0.5  (Draft) 6
  7. 7. 1.1.  HTML5  &  CSS3  Performance   Semantics   Styling   Multimedia  3D  Effects   OfOline  &  Storage   Connectivity   Device  Access   Version  0.5  (Draft) 7
  8. 8. 1.3.  Old  School  Web   Browser   Cloud  Platform   Data  Model   Integration   Back  End   Data   HTML   Sync  Engine  1)  Browser  to  Server:  HTTP  Get  2)  Server  to  Browser:  Dynamically  generated  HTML   Version  0.5  (Draft) 8
  9. 9. 1.3.  AjaxiOied  Web   Browser   Cloud  Platform   Data  Model   Integration   Run  JS   Back  End   Data   HTML   Display  Data   Sync  Engine  1)  “Run  JS”  to  Server:  HTTP  Get  2)  Server  to  Browser:  Data  only  3)  Browser:  Display  Data   Version  0.5  (Draft) 9
  10. 10. 1.3.  OfOline-­‐able  Data   Browser   Cloud  Platform   Data  Model   Integration   Run  JS   Back  End   Data   HTML   Display  Data   Sync  Engine  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) 10
  11. 11. OfOline-­‐able  Web  Apps   Browser   Cloud  Platform   Data  Model   Integration   Run  JS   Back  End   Display  Data   Sync  Engine  1)  Browser:  using  Cached/Local  HTML  2)  OfOline-­‐able  Data:       Run  JS  à  Local  Storage  à  Display  Data  3)  Sync  via  HTTP  POST  +  GET  when  online   Version  0.5  (Draft) 11
  12. 12. 2.  Hybrid-­‐App  MVC  q Model  –  View  –  Controller  q Store:  act  as  a  cache,  which  contains  a  collection  of  Models.  q ProOile:  enable  to  easily  customize  UI  for  tablets  &  phones   Version  0.5  (Draft) 12

×