Slide 1

Slide 1 text

Rails for mobile devices Alberto Perdomo Conferencia Rails 2011

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Mobile devices

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Blackberry Nokia Palm Kindle Windows Phone

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Issues

Slide 9

Slide 9 text

User Interface

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Touch interfaces

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

The network

Slide 14

Slide 14 text

Heavy websites

Slide 15

Slide 15 text

Unsused assets

Slide 16

Slide 16 text

1 big asset vs. several smaller ones

Slide 17

Slide 17 text

Solutions

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

User Interface

Slide 20

Slide 20 text

Width

Slide 21

Slide 21 text

Hello world!

Slide 22

Slide 22 text

Viewport meta tag Separated by commas, not semicolons!!!

Slide 23

Slide 23 text

Responsive Web Designs http://mediaqueri.es/

Slide 24

Slide 24 text

Fluid layouts and styles depending on width & device capabilities

Slide 25

Slide 25 text

Simon Collison: http://colly.com/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@media screen and (min-width: 900px) { // styles for bigger displays } block for > 900px Examples or separate CSS file tablets

Slide 30

Slide 30 text

Frameworks

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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 }, { // ...

Slide 33

Slide 33 text

Javascript DOM Uniﬁed User Interface

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Clean semantic markup + Javascript Uniﬁed User Interface

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Crossbrowser Experience

Slide 38

Slide 38 text

Page Title ...

Slide 39

Slide 39 text

Anatomy of a page

...

Slide 40

Slide 40 text

Example: Single Page

Page Title

Page content goes here.

Page Footer

Slide 41

Slide 41 text

Example: local linked pages

Foo

I'm first in the source order so I'm shown as the page.

Page Footer

...

View internal page called bar

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

The Network

Slide 44

Slide 44 text

Pa! I: "e manifest

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

.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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Manifest: DOM & Events manifest attr in 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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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 # ...

Slide 57

Slide 57 text

Debugging

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Part II: Storage

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Toolbox

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Modernizr http://modernizr.com/

Slide 70

Slide 70 text

Examples

Slide 71

Slide 71 text

Google http://mail.google.com

Slide 72

Slide 72 text

Wanderlust Stories http://wanderluststories.com/

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

PieGuy http://mrgan.com/pieguy

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Harmonious http://harmoniousapp.com/app/

Slide 77

Slide 77 text

Conclusions

Slide 78

Slide 78 text

Native apps vs. Web apps

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Resources

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Thanks. @albertoperdomo alberto.perdomo @aentos.com

Slide 89

Slide 89 text

Questions.

Slide 90

Slide 90 text

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/