HTML5 versus Android: Apps or Web for Mobile Development?

Arya MirInternet και Εφαρμογές Web

15 Δεκ 2011 (πριν από 5 χρόνια και 8 μήνες)

1.255 εμφανίσεις

Should you develop native Android apps or use web apps? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, native apps and app stores are incredibly popular. The speakers presented both perspectives in an app development smackdown.

HTML5 versus Android: Apps or Web for Mobile
Development?
Google I/O 2011: May 11 (3:00 PM – 4:00 PM)
Speakers
RETO MEIER, Developer Advocate for Android
MICHAEL MAHEMOFF, Developer Advocate for Chrome
Summary
Should you develop native Android apps or use web apps? It's often a hard choice when
deciding where to invest your mobile development resources. While the mobile web continues to
grow, native apps and app stores are incredibly popular. The speakers presented both
perspectives in an app development smackdown.
Notes
The Case for HTML5
Native
HTML5 is Mobile
HTML5 is Capable
HTML5 is Open
The Case for Native
Native is Boss
Native is more powerful that web apps
Conclusion
Notes
The Case for HTML5
HTML5 defined: Not just the standard elements, but HTML, CSS, JavaScript, and related APIs.
There are many apps across devices, but only one service
Native
The problem with native:
!
When you talk about “native” in mobile, which native are you talking about? Linux-based,
Microsoft OS, Apple, RIM, Symbian....
!
Each has its own APIs and SDKs.
"
You have to do a lot of relearning or outsourcing.
"
It costs a lot of money to test all these platforms
!
Therefore, it's compelling to see one platform to target everything.
HTML5 is Mobile
HTML5 is everywhere
!
You can’t imagine a mobile device without a browser.
!
Many mobile browsers use WebKit, which is also used by some desktop browsers, like
Chrome.
!
HTML5 is on the phone, on tablet, on TVs, on desktops.
!
Instead of having to learn Java, Objective C, XNA/Silverlight, and so on, you can just
use HTML5 for all devices.
!
The claim is not that you can write one app that works everywhere, but that you can use
one technology that applies everywhere. You still need to customize, but it’s the same
code base.
HTML5 is flexible
!
Because of the separation, you can reuse the content and use most of the CSS in
different devices. Users get very different experience, but with the same markup.
!
You can target CSS to have a mobile style sheet, or even an Android-specific style
sheet.
!
The web is not tied to a particular OS, so it works well for all.
!
Graceful degradation is another plus.
"
Not all HTML5 is supported by every browser, but nothing explodes.
"
You can always fall back; the browser just ignores the stuff it does not
understand.
"
This lets you reach different devices, because each device has different abilities
to support, but the browser doesn't throw error messages.
HTML5 is fluid
!
The web has fluid layouts. Small screens or large monitors. Designers have been
creating flexible layouts.
!
Things stretch in different ways in different screen resolutions. But no worries, there are
established ways of handling fluid.
HTML5 is Capable
HTML5 has technology that rivals native apps.
Input
!
HTML5 can accept a lot of input, not just on keyboard or mouse.
!
You can take advantage of mobile APIs, like geolocation, which can be used on both
mobile and desktop.
!
Touch events, not just mouse events. Gestures, such as multi-touch, are built in. You get
an array of all the touched objects.
!
Device orientation.
!
Device API and speech recognition <input x-webkit-speech>
Output
!
HTML5 has markup and styling with semantic tags and CSS3.
!
CSS3 lets you decorate things.
!
Rich graphics with canvas and 3D transformation. More and more in the device.
!
Multimedia is supported.
!
Works cleanly on desktop and mobile
!
Demo of Bit.ly
Networking
!
Proper real-time streaming.
!
Technologies
"
XMLHttpRequest
"
Cross-origin resource sharing
"
WebSocket
Offline
!
Use App Cache. You just need to list your assets in a manifest.
!
It's not just being offline, but also massive performance improvement.
!
You don’t have to load all things each time you start an app.
!
Demo: Michael took a picture of everyone with an offline photo app. Pictures were stored
with app cache and local storage.
!
Technologies
"
Local Storage
"
WebSQL Database
"
Indexed Database
"
File System
HTML5 is Open
HTML5 is standard
!
Web apps are searchable.
!
They are also accessible through screen readers.
!
Standards-based, so browsers want to comply.
HTML5 is well-supported
!
JavaScript is the lingua franca of the web.
!
If you already have a website, just leverage what you have to use in mobile.
!
Lots of libraries.
!
Great debugging tools.
!
Whole community. Blogs, forums, and tutorials.
!
Easy to get on board. Get text editor, run in a browser, and that's it.
The Case for Native
Native defined: Native is anything built on top of Android, including Dalvik. Native Development
Kit using C/C++, Renderscript using C99, and so on.
If you can’t improve your web app using the Andorid API, you’re doing it wrong!
Native is Boss
Why go native then?
!
There are a lot of android users out there and you want to optimize it for them.
!
Richer experience.
!
Broader access to device hardware.
!
Apps optimized specifically for the hardware it’s running on. It's not just optimized for the
screen size, but the hardware as well.
!
Faster, smoother, and more efficient.
!
Better integration with hardware and other apps.
The trend
!
Mobile devices are resource constrained. Yes, they are getting powerful, but still
constrained.
!
They're gonna get smaller and battery will last longer, but not necessarily faster. So the
performance of your app is going to be even more important to users.
Mobile innovation
!
The problem with standards is that it trails innovation.
!
New hardware innovation
"
New sensors
"
3D cameras and displays
"
Multiple cameras and displays.
!
New software innovation
"
Animations
"
Background services
"
Hardware acceleration
"
Widgets
!
The velocity is phenomenal. Compare that to desktop. It's just keyboard and mouse—
fundamentally the same user experience. Mobile s amazing.
"
2007: Multi-touch, accelerometers, microphone
!
2008: Video, compass, background apps
!
2009: Bluetooth, multiple screen sizes
!
2010: Gyroscopes, front facing cameras
!
2011: Barometer, NFC, tablets, USB accessories
!
2012: ???
"
Mobile innovation leverages hardware.
!
Location-based services - Google Maps
!
Audio input - Shazam
!
Video input - Google Goggles
!
Touch screens - Angry Birds
"
Mobile is taking advantage of these new APIs without waiting for standards. You can be
a market leader, by being the first to develop apps.
"
Device manufacturers are competing with hardware, so you see them coming up with
clever new things.
"
Same thing on the software side.
"
The way games are played was completely changed by mobile.
Native is more powerful that web apps
Mobile ecosystem
"
Native apps are not just sitting in the sandbox in the browser.
"
It can be part of ecosystem of the device.
"
It can listen to events. For example, it can listen for a phone call to come in and do
reverse lookup.
"
Apps are all first class citizens. You can replace the apps with another one. For example,
you can have a new dialer or contact managers.
"
True background apps. You can listen to music app while doing something.
"
Concurrent apps.
"
Server side push. You can tell app, download updates and restart.
Full offline support
"
Have app on standby. Every hour, pull out the latest feed. So when app is launched, all
that new info is shown. It saves battery life, because it doesn’t have to be constantly
syncing.
Beyond icons
"
Your apps are more than just icons.
!
Widgets and live wallpapers.
!
Quick search box
!
Notifications
!
Apps built on top of each other.
"
Users don’t have to go to the app. The widgets can get people to use your apps more.
Conclusion
The answer is not easy
!
If it were, Google would just focus on one.
!
If you can build only one app, do HTML5.
!
But if you want really better experience, go native.
!
So maybe start out with HTML5, then create an optimized version, an app with web view.
!
Web view is web content in your native app.
"
Use web view to render content.
"
Bridge to native functionalities with JavaScript shims.
"
Example: The Google IO 2011 Android App
!
The map is a web view.
!
The tweets are in a web view.
!
Everything else is native.
A few tips for HTML5
!
There are frameworks and libraries.
!
Progressive enhancement. Start basic, and then get more complex.
!
HTML5 can do feature detection. You cant detect every device. Even if you couldn’t (and
you wouldn’t want to anyway) create version of apps for every device, just give
intelligence to your app to decide what to do depending on the capabilities of the device.
Maybe it can downlad xyz or do someting else.
!
Regressive enhancement. If browser doesn’t have the feature, you can fake it.
"
No SVG? Use Canvas.
"
No storage? Use cookies.
"
No Geolocation? Use Google Geo.