Creating Hybrid mobile apps with YUI

Y! Local mobile case study Gonzalo Cordero @goonieiam

AGENDA• Intro, demo & design principles• Deconstruction of a hybrid application• Conclusion

WHEN TO USE NATIVE

WHEN TO USE NATIVE• Anything that needs to access the device’s hardware

WHEN TO USE NATIVE• Anything that needs to access the device’s hardware• You can put it on the app store

WHEN TO USE NATIVE• Anything that needs to access the device’s hardware• You can put it on the app store• That’s it*

WHEN TO USE NATIVE • Anything that needs to access the device’s hardware • You can put it on the app store • That’s it**We’ll cover a few gotchas later in the presentation

FOR EVERYTHING ELSE

FOR EVERYTHING ELSE• You are familiar with the technologies

FOR EVERYTHING ELSE• You are familiar with the technologies• Write once and use everywhere

FOR EVERYTHING ELSE• You are familiar with the technologies• Write once and use everywhere• You decide when/how to update

Hybrid - Best of both worlds?

*NATIVEWe ended up using it more than we wanted

WHY?• Paying that beginners price?

WHY?• Paying that beginners price?• Some “web” features not reliable enough

WHY?• Paying that beginners price?• Some “web” features not reliable enough• Some “web” features were not available at the time

NATIVE*

NATIVE*Geo

NATIVE* GeoNavigation Controls

NATIVE* GeoNavigation Controls Storage

WEBAll content

WEB All contentAll interactions

YUI3 MOBILE EXAMPLE

YUI3 MOBILE EXAMPLEpulldown event

YUI3 MOBILE EXAMPLEpulldown event ScrollView module

YUI3 MOBILE EXAMPLEpulldown event ScrollView module touch-events + CSS3

TECHNOLOGIES

TECHNOLOGIES ????

“There is no mobile web,just the web” - Stephen Hay

YUI().USE(“ALL”) “Use”One statement to rule them all

YUI.USE(“...”)

YUI.USE(“...”)Loader

YUI.USE(“...”)LoaderEvents

YUI.USE(“...”) Loader EventsY.Lang.Substitute

YUI.USE(“...”) Loader Transitions EventsY.Lang.Substitute

YUI.USE(“...”) Loader Transitions Events App FrameworkY.Lang.Substitute

1. Load & Delivery

App delivery through app store

Pack light or pack for a month?

WHAT TO PACK, WHAT TO PACK• Base core ﬁles(including YUI)• Anything that doesn’t change frequently or is static

Load the data pieces on demand

YUI().USE(“LOADER”)

YUI().USE(“LOADER”) Feature based loading

YUI().USE(“LOADER”) Feature based loading Dependency calculation

YUI().USE(“LOADER”) Feature based loading Dependency calculation On demand loading

YUI().USE(“LOADER”) Feature based loading Dependency calculation On demand loading Manual or Automatic

CACHING THE ASSETS• We cached all the assets once we downloaded the ﬁrst time• Using native storage

How about HTML5 Manifest?Probably but...

HTML5 MANIFEST

HTML5 MANIFEST• At the time we saw some inconsistencies with how the data persisted in memory

HTML5 MANIFEST• At the time we saw some inconsistencies with how the data persisted in memory• Flushing the cache wasn’t reliable either

CACHING THE DATA

CACHING THE DATA JSON

CACHING THE DATA JSON Y.Lang.Substitute

2. Navigating around

NAVIGATION CONTROLS

NAVIGATION CONTROLS• All the navigation is done natively

NAVIGATION CONTROLS• All the navigation is done natively• Logic & visual aspects not available at the time

NAVIGATION CONTROLS• All the navigation is done natively• Logic & visual aspects not available at the time• Some major drawbacks

NAVIGATION

NAVIGATION position: ﬁxed wasn’t working properly at the time.

NAVIGATION position: ﬁxed wasn’t working properly at the time. Navigation logic was easier to implement natively

NATIVE NAVIGATION

NATIVE NAVIGATION1. Load the view

NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls

NATIVE NAVIGATION1. Load the view2. While loading, disablenavigation controls3. Send articles informationto native

NATIVE NAVIGATION

NATIVE NAVIGATION• Loading more data than we needed

NATIVE NAVIGATION• Loading more data than we needed• Race conditions

NATIVE NAVIGATION• Loading more data than we needed• Race conditions• Several bridge calls

If I were to build it today...

A BETTER SOLUTIONTransitions App Framework

YUI().USE(“APP”) route

YUI().USE(“APP”) route Home

YUI().USE(“APP”) route Saved Home Items

YUI().USE(“APP”) route Saved Home Settings Items

YUI().USE(“TRANSITION”)

YUI().USE(“TRANSITION”)Y.one(#homeView).transition({ width: { duration: 0.5, easing: ease-out, value: 0 }}, function() { showNextView();});

BENEFITS• Logic and content from the same stack• No race conditions between native + web• Reusability & maintainability

3. Reacting to gestures

YUI().USE(“GESTURES”)

YUI.USE(“EVENT-FLICK”)movieCarousel.on("flick", onMovieFlick, {// only notify me if the flick covered// more than 20px and was faster than 0.8px/ms minDistance:20, minVelocity:0.8, axis : “x”});function onMovieFlick (e) { //Go to the next movie}

YUI().USE(“EVENT-MOVE”)• Itprovides a set of synthetic events to detect gestures• gesturemovestart, gesturemove, gesturemoveend.

movieCarousel.delegate("gesturemovestart", function(e) { var item = e.currentTarget, swipeEnd, isSwipeLeft, swipeStart; item.setData("swipeStart", e.pageX); item.once("gesturemoveend", function(e) { swipeStart = item.getData("swipeStart"); swipeEnd = e.pageX; isSwipeLeft = (swipeStart - swipeEnd) >MIN_SWIPE; if (isSwipeLeft) { //Go to the previous movie } else { //Go to the next movie } });

YUI().USE(“SCROLLVIEW”)

YUI().USE(“SCROLLVIEW”)• Provides scrollable content for touch enabled devices.• Two plugins: ScrollViewScrollbars & ScrollViewPaginator

HOW TO? <ul id=”movies”> <li> <img src=”movie.jpeg”alt=”somemovie”> </li> </ul>

YUI({...}).use("scrollview", function(Y){ var scrollview = new Y.ScrollView({ srcNode:"#movies", flick : {minVelocity:0.8}, deceleration : 0.98, bounce: 0.1, width:"20em" });});

4. Offline & save modes

OFFLINE• Two distinctions: Ofﬂine mode & Save articles to read later• In both cases we are using native storage

OFFLINE MODEUsed to display the most recent data in case of no connectivity

OFFLINE MODEUsed to display the most recent data in case of no connectivity Data(native storage)

OFFLINE MODEUsed to display the most recent data in case of no connectivity Data(native storage) Y.Lang.Substitute (for templating)

OFFLINE MODEUsed to display the most recent data in case of no connectivity Data from Local Data(native storage) storage Y.Lang.Substitute (for templating)

OFFLINE(SAVE)

OFFLINE(SAVE)Core ﬁles(Already cached)

OFFLINE(SAVE)Core ﬁles(Already cached) Content

OFFLINE(SAVE) Core ﬁles(Already cached) ContentHTML

OFFLINE(SAVE) Core ﬁles(Already cached) ContentHTML CSS

OFFLINE(SAVE) Core ﬁles(Already cached) ContentHTML CSS JS

OFFLINE(SAVE) Core ﬁles(Already cached) ContentHTML CSS JS Media

SO...• Ifyou need to store big ﬁles + media: Use native storage• Otherwise store JSON in localStorage & use templates

5. The bridge

THE BRIDGETwo way communication between Native & Web

NATIVE->WEB

NATIVE -> WEB• Call directly into JS• Using Y.Env to expose global method• Use Y.applyTo to call into speciﬁc function

WEB -> NATIVE• By navigating to a local host/protocol• You can use : window.location or XHR

WINDOW.LOCATION

WINDOW.LOCATIONOn your JS: window.location = myProtocol://performAction?param=foo

WINDOW.LOCATIONOn your JS: window.location = myProtocol://performAction?param=fooOn your native code:if([[request.URL scheme] isEqualToString:@"myProtocol"]){ //Parse the request, perform an action}else { return TRUE; //Navigate}

XHR• Cross domain policies restrictions• Works if the content is loaded locally• Can send a response back

General best practices

var true = TRUE;Everything you’ve learned still applies

- Keep your JS small

- Keep your JS small- Don’t touch the DOM. Keep itSmall

- Keep your JS small- Don’t touch the DOM. Keep itSmall- Every byte counts as “double” inmobile

Reduce your http requests:

Reduce your http requests:- Pre-pack as much as you can.

Reduce your http requests:- Pre-pack as much as you can.- Use data URI for small images.

Reduce your http requests:- Pre-pack as much as you can.- Use data URI for small images.- Use cached templates to load similarviews.

Perceived performance:Give constant UI feedback

Shrink your images

Take advantage of the shinny:

Take advantage of the shinny:- Imageless designs(CSS3)

Take advantage of the shinny:- Imageless designs(CSS3)- Hardware acceleration (don’t abuseit)

Take advantage of the shinny:- Imageless designs(CSS3)- Hardware acceleration (don’t abuseit)- Use new semantic HTML5 elements

One more thing...

Got a cool idea? Build it!http://yuilibrary.com/gallery/

FINAL THOUGHTS• YUI3is well suited for both Hybrid and Mobile web apps.• Everything you need is already available

YUI.USE(“RESOURCES”)• http://davidbcalhoun.com/2011/mobile-performance-manifesto• http://www.yuiblog.com/blog/2011/01/17/video-yuiconf2010- desai/• http://www.slideshare.net/nzakas/mobile-web-speed-bumps

YUI().USE(“THANK YOU”) @goonieiam http://yuilibrary.com http://yuilibrary.com/theater/

Creating Hybrid mobile apps with YUI

by Gonzalo Cordero on Nov 07, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 10

Statistics

Creating Hybrid mobile apps with YUI — Presentation Transcript

http://lanyrd.com	7
http://a0.twimg.com	2
http://us-w1.rockmelt.com	1