HTML5 vs Native Android: Smart Enterprises for the Future


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 vs Native Android: Smart Enterprises for the Future

  1. HTML5 vs Native Android Smart Enterprises for the Future Suzanne Alexandra Android Technology Evangelist
  2. @suzalex@motodev#html5vsnative
  3. where well play tonight
  4. 2011: Mobile exceeds PCs business insider
  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. Native Android Mobile middleware four tracks HTML5, JavaScript Hybrid
  7. Hybrid Experience CostNative Web Performance Agility Middleware
  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. Native Android
  10. What is native? android sdk android ndk (c/c++) renderscript
  11. Native apps run here
  12. Key technology benefitsNative user experience Integrate with android platformBest hardware integration More discoverable on deviceIntegrate with other apps Run smoother, better, faster
  13. image from gallerycamera microphone capturing photo app widget, notifications
  14. Key business benefitsLow barrier to entry Reuse app functionalityDistribute through markets Rich ecosystem, wealth of materialOpen and free platform
  15. Cloud to device messagingPush a message, from your app serverTo Googles messaging serverTo the deviceDevice then contacts another server to download data
  16. Google Play  Easy to upload  Easy to update  Malware checks  Device or feature filtering  MonetizationGoogle Play is a trademark of Google Inc.
  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:required="true"/> </manifest>Google Play is a trademark of Google Inc.
  18. But the cost?Development and design* $250,000But, allow 1.5x – 2x $375,000Then repeat, multiple platforms $750,000 ++ * one estimate,
  19. The platforms Native Android Cross-platform No User interface High Performance High Cost High Updates Google Play Store Languages Java, C, C++
  20. Mobile HTML5
  21. Financial Times One app, many Android devicesvideo
  22. Cross platform Android smartphoneiOS Android tablet
  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. Canvas<canvas id="canvas" width="838" height="220"></canvas>
  25. Geolocationnavigator.geolocation.getCurrentPosition ( function ( position ) { … } );
  26. Offline access … app cache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js <html manifest="demo.manifest">
  27. Web socketsvar connection = new WebSocket(ws://;
  28. Web workers var worker = new Worker(worker.js);
  29. Challenge: layoutsdesktop 1600 px tablet 800 / 1280 px smartphone 320 / 480 px
  30. Responsive design Tiles on a flexible grid Media queries to check device @media Think differently about content Beginners Guide to Responsive Mobile Design
  31. Challenge: interaction touch and gesture, tap and swipe
  32. Touch and gesture Touch is instant, but click has ~300ms delay You also need swipe Basically, you need a touch libraryfastclick, assanka.net
  33. Now.What about security?
  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
  35. How HTML5 and Chrome help Origin X-Frame-Options WebSocketsSandboxingMultiprocess architecture
  36. And one more thing App updates are pushed out instantly on your server -- no waiting
  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. 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. 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. Lets talk @suzalex
  41. thanks ·
  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 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 ( and used according to terms described in the Creative Commons 3.0 Attribution License ( 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.