how to hybrid : effective tactics in html5-native app development

25
How To Hybrid Effective Tactics in HTML5-Native App Development MICHAEL HANTLER

Upload: droidcontlv

Post on 27-Jan-2015

111 views

Category:

Technology


2 download

DESCRIPTION

Gartner has predicted that by 2016, “more Than 50 Percent of Mobile Apps Deployed Will be Hybrid.” Knowing how and when to utilize HTML5 technology in your application will help you prepare for that future. This lecture will cover several techniques and real life examples on how to utilize hybrid development in your applications. The tools and tactics for how to connect (or bridge) your “native” Java code implementations with HTML5 will be presented with code samples. The lecture will also cover the right and wrong ways to implement HTML5 in your application, and when to “stick to native.”

TRANSCRIPT

Page 1: How to Hybrid : Effective Tactics in HTML5-Native App Development

How To HybridEffective Tactics in HTML5-Native App DevelopmentMICHAEL HANTLER

Page 2: How to Hybrid : Effective Tactics in HTML5-Native App Development

Here’s Looking at you Multiplatform

Page 3: How to Hybrid : Effective Tactics in HTML5-Native App Development

The Woes of Multiplatform1. Multiple code bases

1. Duplicate code2. Bug fixes for each platform 3. New features require multiplied resources

2. Separate dedicated development teams1. Resources locked to platforms2. Extra synchronization needed to align features

Page 4: How to Hybrid : Effective Tactics in HTML5-Native App Development

So What is the Answer?

Page 5: How to Hybrid : Effective Tactics in HTML5-Native App Development
Page 6: How to Hybrid : Effective Tactics in HTML5-Native App Development

HTML5: The Answer to All our Prayers

Page 8: How to Hybrid : Effective Tactics in HTML5-Native App Development
Page 9: How to Hybrid : Effective Tactics in HTML5-Native App Development

HTML5 Adoption Mobile (~ 2/3)

No Partial Yes0

20

40

60

80

100

120

Android Browser 4.4.3

No Partial Unknown Yes0

20

40

60

80

100

120

iOS Safari 8.0

Data provided by http://caniuse.com/

No 33Partial 16Unknown 1Yes 103

No 31Partial 15Yes 107

Page 10: How to Hybrid : Effective Tactics in HTML5-Native App Development

Only need a few blocks to make apps

$$

Page 11: How to Hybrid : Effective Tactics in HTML5-Native App Development

Building the next-big-mega-HTML5-app

Page 12: How to Hybrid : Effective Tactics in HTML5-Native App Development

And………Forget this I’m out!

Page 13: How to Hybrid : Effective Tactics in HTML5-Native App Development

JavaScript: Performance on Mobile

From the articles “Mobile web apps are slow” and “Why mobile web apps are slow” by Drew Crawford

Page 14: How to Hybrid : Effective Tactics in HTML5-Native App Development

What the big boys are saying…A “reason we’ve gone native is trying to get some of the animations — the spinners and the way they work — getting that smoothness, we felt like we needed native to really do that well.” - Kiran Prasad LinkedIn’s senior director for mobile engineering (VentureBeat)

“When I'm introspective about the last few years, I think the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native.” – Mark Zucherberg CEO Facebook (CNET)

Page 15: How to Hybrid : Effective Tactics in HTML5-Native App Development

To the recycling bin?

Page 16: How to Hybrid : Effective Tactics in HTML5-Native App Development

We can rebuild it, we have the technology

=+HTML5: reusable

code, dynamic from server.

Native: Powerful, fast, full access to

OS feature set, optimized.

Hybrid: Best of both worlds.

Page 17: How to Hybrid : Effective Tactics in HTML5-Native App Development

Gartner Reports: Hybrid or Bust

Gartner, “the world's leading information technology research

and advisory company”1, “predicts that more than 50 percent of mobile apps deployed by 2016 will be hybrid.”2

Page 18: How to Hybrid : Effective Tactics in HTML5-Native App Development

PhoneGap (Cordova) framework

An open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.

Page 19: How to Hybrid : Effective Tactics in HTML5-Native App Development

Under the bridge

JavaScript Java

Page 20: How to Hybrid : Effective Tactics in HTML5-Native App Development

Examples on GitHub All example code can be found on Github at https://github.com/mhant/DroidConTLV2014

Page 21: How to Hybrid : Effective Tactics in HTML5-Native App Development

Basic Bridge example

Page 22: How to Hybrid : Effective Tactics in HTML5-Native App Development

Example: Ads

Page 23: How to Hybrid : Effective Tactics in HTML5-Native App Development

Example: Drawer

Page 24: How to Hybrid : Effective Tactics in HTML5-Native App Development

Example: Login

Page 25: How to Hybrid : Effective Tactics in HTML5-Native App Development

Shout Outs

www.AndroidDev101.com

Delivering the highest quality mobile app and web app development. Previous clients include Caesars Interactive Entertainment, YMCA related firms, and a wide assortment of breakthrough startups.