[Openmind 2012] Mobile HTML5 in the Open World by Kimmo Puputti (Software Developer, Futurice)

MOBILE HTML5 IN THE OPEN WORLD KIMMO PUPUTTI ☆ OKFESTIVAL
SEP 19, 2012 @kpuputti [email protected]

ABOUT ME Frontend stuff at Futurice since May 2011 Previously
Hexagon IT, Zokem, TKK Graduated from Aalto University Master's Thesis (2012): Mobile HTML5: Implementing a Responsive CrossPlatform Application Available at: http://kpuputti.github.com/thesis/

FUTURICE “Web, mobile and enterprise solutions, A Lean IT company”
www.futurice.com/

OUTLINE What is HTML5? Why should I care? Native vs.
HTML5: where are we at?

WHAT IS HTML5?

http://en.wikipedia.org/wiki/File:HTML5APIsandrelated technologiesbySergeyMavrody.png

<!DOCTYPE HTML>... Standardized parsing Standardized existing features in browsers New
elements and attributes Accessibility features (e.g. forms) CSS3 APIs for web applications: Offline support Device APIs Multimedia and graphics (canvas!) Workers, sockets, drag and drop, etc. “ It's all about JavaScript ”

EXAMPLE: GEOLOCATION Locate me!

CODE n a v i g a t o r
. g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s ) { a l e r t ( p o s . c o o r d s . l a t i t u d e + " , " + p o s . c o o r d s . l o n g i t u d e ) ; } , f u n c t i o n ( ) { a l e r t ( " C o u l d n o t g e t l o c a t i o n . . . " ) ; } ) ;

WHY SHOULD I CARE?

Mark Zuckerberg: “The biggest mistake we made as a company
was betting too much on HTML5. While building native apps that were basically just a wrapper for the mobile web standard let it experiment quickly, it made the apps run way too slow. We burnt two years.”

Wait a second... it continues: “... it just wasn’t there.
And it’s not that HTML5 is bad. I’m actually, on longterm, really excited about it. One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.”

Simon Cross (Developer Advocate at Facebook): “Facebook's problems are not
everyone's problems.”

SO WHICH ONE IS IT, WEB OR NATIVE?! SORRY, WRONG
QUESTION.

LET'S LOOK AT WHAT WE HAVE

Charland, A., and Leroux, B. Mobile Application Development: Web vs.
Native. Communications of the ACM 54, 5 (2011), 4953.

DEVICES Laptops Desktops ereaders Game consoles Notebooks Mobile phones Tablets
Watches TVs Home theaters Fridges

THEY ALL HAVE A WEB BROWSER!

</HYPE>

NATIVE APPS

NATIVE APPS Best performance Best UX Best integration to the
platform UI innovation

HOWEVER, DO YOU NEED ALL THIS POWER?

ARE YOU PROVIDING CONTENT OR A SERVICE? or ARE YOU
PROVIDING AN EXPERIENCE?

IS IT OK TO DROP A LARGE PERCENTAGE OF YOUR
POTENTIAL USERS OUT OF REACH? IS IT ENOUGH TO PROVIDE YOUR SERVICE WELL FOR ONLY SOME PEOPLE?

MIGHT BE http://upload.wikimedia.org/wikipedia/en/a/ac/World_Wide_Smartphone_Sales_Sha

APPLICATION STORES Unnecessary burden or a golden possibility? App submission
Updates Monetization Discoverability Analytics Integration to social networks THE WEB IS YOU APP STORE!

HYBRID APPS

HYBRID APPS “Combination of web and native technologies.”

HYBRID APPS Complex Following platform UI guidelines Difficult workflow Awesome
web app vs. crappy native app is great, but has a lot of surprises PhoneGap

WEB APPS

WEB APPS well... “Write once, run everywhere.”

MOBILE HTML5 APPS ARE HARD Browsers Supported features and APIs
Not anymore just a collection of jQuery plugins

IT'S ALL ABOUT PERFORMANCE! Follow up what has been doing
for the past 5 years. Steve Souders

KNOW YOUR TOOLS AMD RequireJS MVC Grunt Modernizr Backbone.js Yeoman
Sass less Functional programming JSHint Jasmine BDD Responsive design HTML5 Boilerplate Progressive enhancement

SUMMARY Crossplatform is hard Crossplatform HTML5 is hard You have
to be on the web anyways Your site will be accessed with all types of devices Responsive web design Go native, if really needed Know the good and bad parts of web/native Know your place between idealism and realism

Tim BernersLee, Scientific American, 2010: “people must be able to
put anything on the Web, no matter what computer they have, software they use or human language they speak and regardless of whether they have a wired or wireless Internet connection. ” “And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. ”

THANKS! These slides available at: Contact info: http://kpuputti.github.com/mobilehtml5presentation/ @kpuputti [email protected]

[Openmind 2012] Mobile HTML5 in the Open World by Kimmo Puputti (Software Developer, Futurice)

[Openmind 2012] Mobile HTML5 in the Open World by Kimmo Puputti (Software Developer, Futurice)

More Decks by COSS

Other Decks in Technology

Featured

Transcript