Your SlideShare is downloading. ×
HTML5 Mobile Web Framework - High Level Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Mobile Web Framework - High Level Design

591
views

Published on

HTML5 Mobile Web Framework - High Level Design

HTML5 Mobile Web Framework - High Level Design

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ENTERPRISE  HYBRID-­‐APPS     MOBILE  FRAMEWORK     Version  2.0  by  Sun.SmartBiz@gmail.com 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

×