HTML5 vs           Native Android   Smart Enterprises for the Future                      Suzanne Alexandra           Andr...
@suzalex@motodev#html5vsnative
where well play tonight
2011: Mobile exceeds PCs                           business insider http://read.bi/LX1kgl
2012: Mobile ubiquity   "We now live and always will live in a multi-device world,   where companies and consumers choose ...
Native Android                  Mobile middleware                      four tracks            HTML5, JavaScript           ...
Hybrid         Experience                  CostNative                                        Web         Performance      ...
Enterprise class apps   Real mobile experiences that challenge the processing   power, memory and display of the best mobi...
Native Android
What is native? android sdk                   android ndk (c/c++)    renderscript
Native apps run here
Key technology benefitsNative user experience      Integrate with android platformBest hardware integration   More discove...
image from gallerycamera   microphone                              capturing photo                          app widget,   ...
Key business benefitsLow barrier to entry         Reuse app functionalityDistribute through markets   Rich ecosystem, weal...
Cloud to device messagingPush a message, from your app serverTo Googles messaging serverTo the deviceDevice then contacts ...
Google Play             Easy to upload             Easy to update             Malware checks             Device or fea...
Market filtering   <?xml version="1.0" encoding="utf-8"?>   <manifest ... >   <uses-sdk android:minSdkVersion="8"         ...
But the cost?Development and design*           $250,000But, allow 1.5x – 2x              $375,000Then repeat, multiple pla...
The platforms                        Native Android      Cross-platform          No      User interface         High      ...
Mobile HTML5
Financial Times                             One app,                             many Android devicesvideo http://bit.ly/j...
Cross platform                            Android smartphoneiOS           Android tablet
Graceful degradation<canvas>Your browser is not supported</canvas>                              Feature detection         ...
Canvas<canvas id="canvas" width="838" height="220"></canvas>
Geolocationnavigator.geolocation.getCurrentPosition                       ( function ( position ) { … } );
Offline access … app cache                        CACHE MANIFEST                        index.html                        ...
Web socketsvar connection =  new WebSocket(ws://html5rocks.websocket.org);
Web workers        var worker = new Worker(worker.js);
Challenge: layoutsdesktop 1600 px                       tablet 800 / 1280 px                     smartphone 320 / 480 px
Responsive design Tiles on a flexible grid Media queries to check device  @media Think differently about content Beginn...
Challenge: interaction                         touch and gesture,                             tap and swipe
Touch and gesture Touch is instant, but click has ~300ms delay You also need swipe Basically, you need a touch libraryf...
Now.What about security?
A few tips Make sure the device is password protected and encrypted. Store locally only a small subset of enterprise dat...
How HTML5 and Chrome help                                   Origin                                   X-Frame-Options      ...
And one more thing         App updates are pushed out instantly             on your server -- no waiting
Browser comparison                     Android Browser          Google Chrome Feature              Android 1.5+           ...
The platforms                   Native Android            HTML5 Cross-platform          No                   Yes User inte...
Wheres it all going?The business model also changes as the revenue streamsgenerated from app stores diminish, causing vend...
Lets talk         @suzalex         @motodevdeveloper.motorola.com/enterprise
thanks · graciasdeveloper.motorola.com/enterprise
LEGALLICENSE NOTICESExcept where noted, sample source code written by Motorola Mobility Inc. and provided to you is licens...
Upcoming SlideShare
Loading in...5
×

HTML5 vs Native Android: Smart Enterprises for the Future

4,327

Published on

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

No Downloads
Views
Total Views
4,327
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

HTML5 vs Native Android: Smart Enterprises for the Future

  1. 1. HTML5 vs Native Android Smart Enterprises for the Future Suzanne Alexandra Android Technology Evangelist
  2. 2. @suzalex@motodev#html5vsnative
  3. 3. where well play tonight
  4. 4. 2011: Mobile exceeds PCs business insider http://read.bi/LX1kgl
  5. 5. 2012: Mobile ubiquity "We now live and always will live in a multi-device world, where companies and consumers choose different smartphone and tablet platforms and expect to get apps on all of them." -- Forrester Research
  6. 6. Native Android Mobile middleware four tracks HTML5, JavaScript Hybrid
  7. 7. Hybrid Experience CostNative Web Performance Agility Middleware
  8. 8. Enterprise class apps Real mobile experiences that challenge the processing power, memory and display of the best mobile devices and platforms, for large brands and large audiences, with vibrant content, at transactional scale.
  9. 9. Native Android
  10. 10. What is native? android sdk android ndk (c/c++) renderscript
  11. 11. Native apps run here
  12. 12. Key technology benefitsNative user experience Integrate with android platformBest hardware integration More discoverable on deviceIntegrate with other apps Run smoother, better, faster
  13. 13. image from gallerycamera microphone capturing photo app widget, notifications
  14. 14. Key business benefitsLow barrier to entry Reuse app functionalityDistribute through markets Rich ecosystem, wealth of materialOpen and free platform
  15. 15. Cloud to device messagingPush a message, from your app serverTo Googles messaging serverTo the deviceDevice then contacts another server to download data
  16. 16. Google Play  Easy to upload  Easy to update  Malware checks  Device or feature filtering  MonetizationGoogle Play is a trademark of Google Inc.
  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>Google Play is a trademark of Google Inc.
  18. 18. But the cost?Development and design* $250,000But, allow 1.5x – 2x $375,000Then repeat, multiple platforms $750,000 ++ * one estimate, http://bit.ly/HHaLb
  19. 19. The platforms Native Android Cross-platform No User interface High Performance High Cost High Updates Google Play Store Languages Java, C, C++
  20. 20. Mobile HTML5
  21. 21. Financial Times One app, many Android devicesvideo http://bit.ly/jbe2tP
  22. 22. Cross platform Android smartphoneiOS Android tablet
  23. 23. Graceful degradation<canvas>Your browser is not supported</canvas> Feature detection !!document.createElement(canvas). getContext cross platform Multiple CSS files styles.css mobile.css android.css <h1 { color:white; text-align:center; }
  24. 24. Canvas<canvas id="canvas" width="838" height="220"></canvas>
  25. 25. Geolocationnavigator.geolocation.getCurrentPosition ( function ( position ) { … } );
  26. 26. Offline access … app cache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js <html manifest="demo.manifest">
  27. 27. Web socketsvar connection = new WebSocket(ws://html5rocks.websocket.org);
  28. 28. Web workers var worker = new Worker(worker.js);
  29. 29. Challenge: layoutsdesktop 1600 px tablet 800 / 1280 px smartphone 320 / 480 px
  30. 30. Responsive design Tiles on a flexible grid Media queries to check device @media Think differently about content Beginners Guide to Responsive Mobile Design http://bit.ly/yMwfx7
  31. 31. Challenge: interaction touch and gesture, tap and swipe
  32. 32. Touch and gesture Touch is instant, but click has ~300ms delay You also need swipe Basically, you need a touch libraryfastclick, assanka.nethttp://bit.ly/p3pLq5
  33. 33. Now.What about security?
  34. 34. A few tips 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 Chrome for Android. article http://bit.ly/IdtGyr
  35. 35. How HTML5 and Chrome help Origin X-Frame-Options WebSocketsSandboxingMultiprocess architecture
  36. 36. And one more thing App updates are pushed out instantly on your server -- no waiting
  37. 37. Browser comparison Android Browser Google Chrome Feature Android 1.5+ Android 4.0+ Canvas Geolocation 2.0+ Video + Audio 2.3+ App cache 2.1+ Web storage 2.0+ Web sockets Web workers
  38. 38. The platforms Native Android HTML5 Cross-platform No Yes User interface High Medium to high Performance High Medium Cost High Low Updates Google Play Store Your server Languages Java, C, C++ HTML, CSS, JavaScript
  39. 39. Wheres it all going?The business model also changes as the revenue streamsgenerated from app stores diminish, causing vendors to turnto value added services to generate income. - Smiths Point Analytics
  40. 40. Lets talk @suzalex @motodevdeveloper.motorola.com/enterprise
  41. 41. thanks · graciasdeveloper.motorola.com/enterprise
  42. 42. 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.

×