Rails for Mobile Devices @ Conferencia Rails 2011

Rails for mobile devices Alberto Perdomo Conferencia Rails 2011

Mobile devices

Blackberry Nokia Palm Kindle Windows Phone

Issues

User Interface

Screen Different sizes and resolutions Different orientations: portrait vs. landscape
Zooming

Touch interfaces

Small font size, little space between links No hover Gestures
events vs. mouse events Touch interfaces

The network

Heavy websites

Unsused assets

1 big asset vs. several smaller ones

Solutions

User Interface

<!DOCTYPE html> <html> <head> <title>Hello world!</title> </head> <body> <p>Hello world!</p>
</body>

Viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> Separated by commas,
not semicolons!!!

Responsive Web Designs http://mediaqueri.es/

Fluid layouts and styles depending on width & device capabilities

Simon Collison: http://colly.com/

Andersson-Wise Architects: http://www.anderssonwise.com/

Conferencia Rails by @mamuso: http://conferenciarails.org/

Media Queries W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/

@media screen and (min-width: 900px) { // styles for bigger
displays } block for > 900px Examples <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> or separate CSS file <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> tablets

Frameworks

http://www.sencha.com/products/touch/ open source + commercial licenses

demos.Forms = new Ext.TabPanel({ items: [{ title: 'Basic', xtype: 'form',
id: 'basicform', scroll: 'vertical', items: [{ xtype: 'fieldset', title: 'Personal Info', instructions: 'Please enter the information above.', defaults: { // labelAlign: 'right' labelWidth: '35%' }, items: [{ xtype: 'textfield', name: 'name', label: 'Name', placeHolder: 'Tom Roy', autoCapitalize : true, required: true, useClearIcon: true }, { // ...

Javascript DOM Uniﬁed User Interface

Clean semantic markup + Javascript Uniﬁed User Interface

Features jQuery Cross-platform Lightweight (~12K comp) HTML5 Progressive enhancement Accessibility

Crossbrowser Experience

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> ... </body>
</html> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

Anatomy of a page <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div>
<div data-role="page"> </div>

Example: Single Page <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1>
</div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>

Example: local linked pages <div data-role="page" > <div data-role="header"> <h1>Foo</h1>
</div> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" > ... </div> <p>View internal page called <a href="#bar">bar</a></p> id="foo" id="bar" When loading the HTML page the ﬁrst page is autom. shown and the rest hidden When following a link to a local linked page, there is an animated transition

Other stuff Components: Lists, Buttons, Dialogs, Grid, ... Hijax /
Ajax Page transitions / Animations Theming Dual license: MIT or GPL version 2

The Network

Pa! I: "e manifest

At its simplest, an ofﬂine web application is a list
of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. http://diveintohtml5.org/ofﬂine.html#divingin

IE Firefox Safari Chrome Opera iPhone Android - 3.5+ 4.0+
5.0+ 10.6+ 2.1+ 2.0+ Support

Basic example /index.html <!DOCTYPE HTML> <html > <body> ... /offline.appcache
CACHE MANIFEST /screen.css /application.js /logo.png manifest="/offline.appcache" Content type: text/cache-manifest !!!

<name>.appcache Anatomy of a manifest CACHE MANIFEST List of ﬁles
to fall back in case not available FALLBACK / /offline.html /images/avatars/ /offline_avatar.png Online whitelist, never cached NETWORK /track.cgi CACHE /css/screen.css /css/offline.css /images/logo.png http://example.com/code.js List of ﬁles to cache

Cache what? Read messages Browse articles Read news Place purchase
orders Send messages Ofﬂine & online Online only All pages must be included Reference to manifest in each of them The page that triggers the download of the manifest ﬁle does not to be included

A more complex example CACHE MANIFEST Allow to browse other
pages when online NETWORK * FALLBACK / /offline.html Fallback for ofﬂine pages All pages

Manifest: Status navigator.onLine status (returns boolean) ononline onoffline callbacks

Manifest: DOM & Events window.applicationCache object checking downloading progress cached
noupdate updateready events window.applicationCache.swapCache() reload new cache after updateready

Manifest: DOM & Events manifest attr in <html> first time?
Event: checking no yes Event: downloading Download Event: progress Event: cached Finished changed? Event: noupdate no yes Event: downloading Download Event: progress Event: updateready

Rack Offline by Yehuda Katz https://github.com/wycats/rack-ofﬂine

Automated Mobile::Application.routes.draw do match "/application.manifest" => Rails::Offline Automatically caches all
JS, CSS & HTML in public In development: include SHA based on timestamp to force reload In production: include SHA based on underlying assets

Custom manifest Mobile::Application.routes.draw do offline = Rack::Offline.configure do cache [
"http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css", "http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png", "http://code.jquery.com/mobile/1.0b1/images/ajax-loader.png", "http://code.jquery.com/jquery-1.6.1.min.js", "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js", "favicon.ico"] network "*" end match "/offline.appcache" => offline # ...

Debugging

Part II: Storage

Local Storage Implemented natively in the browsers Key/Value store Persistence
Never sent to server (unlike cookies) Supported in common browsers, even IE > 8.0

Details 5MB by default acessible through localStorage object key: String,
value: Any JS supported type Use parseInt, parseFloat, ... to retrieve objects Synchronous API

Examples Read/Write var foo = localStorage["bar"]; localStorage["bar"] = foo; Clear
key Empty storage localStorage.removeItem("bar"); localStorage.clear();

Competitors: WebSQL SQL database in the browser SQLite Implemented by
some browsers: Safari, Chrome, Webkit Asynchronous API Requires more code but is also more powerful

Competitors: IndexedDB No standard Query Language Access through API functions
Very early stage, not yet usable

Toolbox

Detect requests from mobile devices in your Rails app https://github.com/brendanlim/mobile-fu
https://github.com/shenoudab/active_device

Rails helpers for jQuery Mobile https://github.com/Consoci8/jqmobile_helpers https://github.com/wakeless/rails-jquery-mobile

Manifest https://github.com/wycats/rack-ofﬂine

Modernizr http://modernizr.com/

Examples

Google http://mail.google.com

Wanderlust Stories http://wanderluststories.com/

Testﬂight https://testﬂightapp.com/

PieGuy http://mrgan.com/pieguy

Movie Times http://andrew.harrison.org/movies/

Harmonious http://harmoniousapp.com/app/

Conclusions

Native apps vs. Web apps

Beneﬁts of Native Apps Performance User Experience Installation Monetization options
Distribution & Market visibility

Beneﬁts of Web Apps Interoperability & cross platform Installation &
deployment options URLs Shorter Time to Market Deploy instantly, no approval process Your skills

Resources

Dive Into HTML5 by Mark Pilgrim http://diveintohtml5.org

Introducing HTML5 by Bruce Lawson and Remy Sharp http://introducinghtml5.com/

HTML5 Demos by Remy Sharp http://html5demos.com https://github.com/remy/html5demos

Mobilizer from SpringBox http://www.springbox.com/mobilizer/

Thanks. @albertoperdomo alberto.perdomo @aentos.com

Questions.

Creative Commons Title Author URL iPad vs iPhone Julien GONG
Min http://www.flickr.com/photos/bfishadow/4604166391/ No worries http://www.flickr.com/photos/uggboy/5382476400/ Just Care Baby John Martinez Pavliga http://www.flickr.com/photos/virtualsugar/4590816785/ godzilla-anatomy Joe Wu http://www.flickr.com/photos/ozzywu1974/5143458938/ Manifest of Alien Passengers SS Ultonia Southampton(Apr.22, 1913) - Quebec (May 8, 1913) 1 of 2 Brent http://www.flickr.com/photos/stupiddingo/3728417282/ Pain Nathan Phillips http://www.flickr.com/photos/npphoto/4383990220/ Storage Karl Baron http://www.flickr.com/photos/kalleboo/3277120428/ Jocelyn Foye - Sumo - Face Off - Gateway Japan @ Torrance Art Museum (small) http://www.flickr.com/photos/lifeontheedge/5565245900/ box wrenches S. Diddy http://www.flickr.com/photos/spence_sir/2292721218/

Rails for Mobile Devices @ Conferencia Rails 2011

Rails for Mobile Devices @ Conferencia Rails 2011

More Decks by Alberto Perdomo

Other Decks in Programming

Featured

Transcript