The Enterprise Dilemma: Native vs. Web

1,958 views

Published on

MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform.

Topics include:
-Key business and technology advantages of each approach
-Examples of apps built on each platform
-Browser support of HTML5 features
-The hybrid app approach


Twitter hashtag: #nativevsweb

Got questions about this event tweet @motodev or post them on community.developer.motorola.com

2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,958
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

The Enterprise Dilemma: Native vs. Web

  1. 1. The Enterprise Dilemma:Native vs WebSuzanne AlexandraAndroid Technology Evangelist
  2. 2. reach  me  @suzalex  @motodev    #na1vevsweb  Suzanne  Alexandra  
  3. 3. 2012   mobile  ubiquity  "We  now  live  and  always  will  live  in  a  mul:-­‐device  world,  where  companies  and  consumers  choose  different  smartphone  and  tablet  pla?orms  and  expect  to  get  apps  on  all  of  them." -­‐-­‐  Forrester  Research  
  4. 4. na:ve  android   mobile  middleware   four  tracks   hybrid   html5,  javascript  
  5. 5. Hybrid Experience CostNative Web Performance Agility Middleware
  6. 6. the  answer   it  depends  its  both  business  and  technical  
  7. 7. na1ve  android  
  8. 8. what  is  na1ve?   android  sdk   android  ndk  (c/c++)   renderscript  
  9. 9. citrix  receiver   citrix  receiver  vmware  view   splashtop  remote  desktop  
  10. 10. key  technology  benefits  na1ve  experience   integrate  with  android  plaForm  beDer  access  to  device  features   more  discoverable  on  device  integrate  with  other  apps   run  smoother,  beDer,  faster  
  11. 11. key  business  benefits  low  barrier  to  entry   reuse  app  func1onality  distribute  through  markets   rich  ecosystem,  wealth  of  material  open  and  free  plaForm  
  12. 12. the  android  plaForm   apps  run  here  
  13. 13. android  security  001  
  14. 14. android  security  001  each  app  runs  in  its  own  process  
  15. 15. android  security  001   each  app  runs  in  its  own  process  each  app  can  access  only  its  own  data  
  16. 16. android  market              easy  to  upload            easy  to  update            malware  checks            device  or  feature  filtering  
  17. 17. market  filtering   <?xml version="1.0" encoding="utf-8"?> <manifest ... > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" /> <uses-feature android:name="android.hardware.bluetooth" /> <uses-feature android:name="android.hardware.camera.autofocus" android:required="true"/> </manifest>
  18. 18. the  plaForms   Native Android Cross-platform No User interface High Performance High Cost High Updates Android Market Languages Java, C, C++
  19. 19. Lets take a poll
  20. 20. html5  
  21. 21. box   npr  bit.ly   find  parking  lots  
  22. 22. mobile-­‐op:mized   web  sites   the  spectrum   html5  web  apps  
  23. 23. cross  plaForm   sketchpad  
  24. 24.  graceful  degrada:on  <canvas>  Your  browser  is  not  supported  </canvas>   feature  detec:on   !!document.createElement (canvas).getContext   cross  browser   mul:ple  css  files   styles.css                    mobile.css                    android.css <h1 { color:white; text-align:center; }
  25. 25. canvas   <canvas  id="canvas"  width="838"  height="220"></canvas>
  26. 26. geoloca1on   navigator.geoloca:on.getCurrentPosi:on                                  (  func:on  (  posi:on  )  {  …  }      );
  27. 27. video   <video  src="movie.webm"></video>
  28. 28. offline  access  …  app  cache   CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js <html  manifest="demo.manifest">  
  29. 29. web  sockets  var connection = new WebSocket(ws://html5rocks.websocket.org/echo);
  30. 30. web  workers   <script type="text/javascript"> var worker = new Worker(worker.js); ... </script>
  31. 31. the  big  ques1on.   security  
  32. 32. a  few  1ps       Make  sure  the  device  is  password  protected  and  encrypted.       Store  locally  only  a  small  subset  of  enterprise  data.           Consider  changing  the  schema  of  a  local  database.       Do  origin  checks  on  cross-­‐document  messaging.       Remember  Google  Chrome.  
  33. 33. on  chrome  beta   X-­‐Frame-­‐Op:ons   WebSockets  Sandboxing  Mul:process  architecture  
  34. 34. browser  comparison   Android Browser Google Chrome Feature Android 1.5+ Android 4.0+ Canvas 2.1+   Geolocation 2.0+   Video + Audio 2.3+   App cache 2.1+   Web storage 2.0+   Web sockets Web workers
  35. 35. what  about  ui?   fixed  posi:on  areas     +  scrolling  areas   touch   mul:touch   canvas  3d  with  accelera:on  
  36. 36. Sensa  Touch  Charts   SproutCore  also:  jQuery  Mobile  
  37. 37. viewpoints   look  like  a  na:ve     mobile  app   look  like  the  web   be  consistent     across  pla?orms  
  38. 38. whats  motorola  doing?   "If  we  can  standardize  device  APIs  that  provide  developers   quote here … access  to  the  whole  device,  efficiently  …  then  I  think  we   will  really  see  the  emergence  of  a  ubiquitous,  cross  device   web  pla?orm  and  an  ecosystem  based  on  open   standards."   Gilles  Drieu   VP,  Sohware  Engineering   Motorola  Mobility
  39. 39. the  plaForms   Native Android HTML5 Cross-platform No Yes User interface High Medium to high Performance High Medium Cost High Low Updates Android Market Your server Languages Java, C, C++ HTML, CSS, JavaScript
  40. 40. Lets take another poll
  41. 41. hybrid  wrapper  
  42. 42. why  hybrid?   Hybrid Experience Cost Native Web Performance Agility Middleware
  43. 43. geTng  started   MOTODEV  Studio   +   hybrid  sample   web  app  or  site   moto.ly/wrappersample  
  44. 44. @Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String url = "http://www.motorola.com"; Intent i = new Intent(Intent.ACTION_VIEW); i.setData( Uri.parse(url) ); startActivity(i); this.finish();}
  45. 45. javascript  bridge  Na:ve  calls  HTML5  loadURL("javascript: addInteger("+integer+");");HTML5  calls  na:ve  WebView.addJavascriptInterface( new Gesture(), "gesture" );
  46. 46. the  plaForms   Native Android HTML5 Hybrid Wrapper Cross-platform No Yes No User interface High Medium to high Medium to high Performance High Medium Medium Cost High Low Low Updates Android Market Your server Android Market Languages Java, C, C++ HTML, Java, HTML, CSS, CSS,JavaScript JavaScript
  47. 47. the  boDom  line.    if  …  Invested  in  na:ve  already    …      na:ve  Demand  top  performance    …    na:ve  App  is  very  complex  or  highly  interac:ve    …    na:ve  Targe:ng  mul:ple  pla?orms  and  have  web  exper:se    …    HTML5  Need  na:ve  only  for  part  of  a  cross-­‐pla?orm  app    …      hybrid  Want  to  distribute  through  an  app  market    …    na:ve  or  hybrid  
  48. 48. Questions? @suzalex @motodev
  49. 49. More info MOTODEV for Enterprisedeveloper.motorola.com/enterprise
  50. 50. LEGALLICENSE NOTICESExcept where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below.Copyright © 2012, Motorola, Inc. All rights reserved except as otherwise explicitly indicated.•  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:•  Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.•  Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.•  Neither the name of the Motorola, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.•  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.Other source code displayed in this presentation may be offered under other licenses.Apache 2.0 Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.Creative Commons 3.0 Attribution License Portions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/). MOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC. All other trademarks are the property of their respective owners. © 2012 Motorola Mobility, Inc. All rights reserved.

×