HTML5 vs Native Android: Smart Enterprises for the Future

HTML5 vs Native Android Smart Enterprises for the Future Suzanne Alexandra Android Technology Evangelist

@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 different smartphone and tablet platforms and expect to get apps on all of them." -- Forrester Research

Native Android Mobile middleware four tracks HTML5, JavaScript Hybrid

Hybrid Experience CostNative Web Performance Agility Middleware

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.

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 discoverable on deviceIntegrate with other apps Run smoother, better, faster

image from gallerycamera microphone capturing photo app widget, notifications

Key business benefitsLow barrier to entry Reuse app functionalityDistribute through markets Rich ecosystem, wealth of materialOpen and free platform

Cloud to device messagingPush a message, from your app serverTo Googles messaging serverTo the deviceDevice then contacts another server to download data

Google Play  Easy to upload  Easy to update  Malware checks  Device or feature filtering  MonetizationGoogle Play is a trademark of Google Inc.

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.

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

The platforms Native Android Cross-platform No User interface High Performance High Cost High Updates Google Play Store Languages Java, C, C++

Mobile HTML5

Financial Times One app, many Android devicesvideo http://bit.ly/jbe2tP

Cross platform Android smartphoneiOS Android tablet

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; }

Canvas<canvas id="canvas" width="838" height="220"></canvas>

Geolocationnavigator.geolocation.getCurrentPosition ( function ( position ) { … } );

Offline access … app cache CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js <html manifest="demo.manifest">

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 Beginners Guide to Responsive Mobile Design http://bit.ly/yMwfx7

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 libraryfastclick, assanka.nethttp://bit.ly/p3pLq5

Now.What about security?

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

How HTML5 and Chrome help Origin X-Frame-Options WebSocketsSandboxingMultiprocess architecture

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+ Android 4.0+ Canvas Geolocation 2.0+ Video + Audio 2.3+ App cache 2.1+ Web storage 2.0+ Web sockets Web workers

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

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

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 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.

http://6254733903320575567_760aab98cc57ed5abd37ceebde98ccc1c359a2d0.blogspot.com	14
http://www.delightthem.com	10
http://localhost	5
https://si0.twimg.com	3
http://us-w1.rockmelt.com	2
http://www.twylah.com	2
http://www.verious.com	1

HTML5 vs Native Android: Smart Enterprises for the Future

by Motorola Mobility - MOTODEV

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 37

Statistics