Mobile Web Apps in a Nutshell

Who Am I?

Nicolae Rusan Co-founder, Design/JS Engineer

useframe.com

Frame

Optimized Sites up to Full Blown Apps

in the Browser

What Is Mobile Web?What Is Mobile Web?

What Is Mobile Web?What Is Mobile Web?

Design for a variety of screen sizes and devices

What Is Mobile Web?

Taking advantage of device capabilities

What Is Mobile Web?

Handling Limitations

• Browser Memory

• Slower Networks

• Slower Hardware

• Different Capabilities

Why Mobile Web?

Write once, works everywhere..

Why Mobile Web?

Write once, works everywhere..(Still not there yet.)

Why Mobile Web?

People are used to browsers

Customers• Do they know your site?• Specific use case: more

likely to use browser than native app?

Why Mobile Web?

People are used to browsers

Developers• Familiar technologies:• HTML, Javascript, CSS

Why Mobile Web?

Not competitive with Native Apps!

Why not do both?

Why Mobile Web?

Some frameworks let you:

write web code => compiled to native:

e.g. PhoneGap, Appcelerator’s Titanium etc.

Why Not Mobile Web?

Native Apps still have better

performance and responsiveness.

Why Not Mobile Web?

The App Store is a good distribution channel

• easier to charge

Why Not Mobile Web?

If you need Device APIs

e.g. Camera, Voice

- (Phone Gap Workaround)

Why Not Mobile Web?

It’s good to be an app!

• Homescreen real-estate

• Push notifications

Frameworks

Full out MVC Framework w/ Touch• built on top of Ext JS

Touch

Cross-browser• Both Mobile and Desktop

Touch

Don’t write HTML, glue together “Components”• Lots of GUI Components :• E.g. Carousel, Picker, Toolbars, Animations, Charts and Graphs.

• Lots of Touch Events

Touch

Close integration with PhoneGap

Touch

• Reasonably well documented• Free to use (unless you’re making an app builder)• Can pay for support

Touch

For Examples:Sencha Kitchen Sinkhttp://dev.sencha.com/deploy/touch/examples/kitchensink/

RedditUI (iPad Web App built by Frame CTO on Sencha 2.0) http://www.redditui.com

Touch

Cons:

Touch

• Heavy• 365KB, >40K lines

of code, DOM Bloat• Initial load time.

Cons:

Touch

• Heavy• 365KB, >40K lines

of code, DOM Bloat• Initial load time.

• Weird Bugs, hard to identify best practices

Cons:

Touch

• Heavy• 365KB, >40K lines

of code, DOM Bloat• Initial load time.

• Weird Bugs, hard to identify best practices

• Hard to separate components

Cons:

Touch

• Heavy• 365KB, >40K lines

of code, DOM Bloat• Initial load time.

• Weird Bugs, hard to identify best practices

• Hard to separate components

• Do you need all these browsers supported?

Cons:

Touch

• Sencha 2.0 is out in developer preview, working to fix many of these issues

• Developed by Sencha Labs• Not full MVC (separate from Ext JS)• Touch events (swipe, tap)• Some UI Components (not as may as

sencha)• Fairly performant, decent documentation,

still crashes fairly often

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

• Based on jQuery syntax (familiar selectors, and event binding)

• Very Small: 2KB – they care about speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin

pinchout etc. that you can bind to elements• e.g. $(‘some selector’).swipeLeft(function(){

});

Zepto.js

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

• Based on jQuery syntax (familiar selectors, and event binding)

• Very Small: 2KB – they care about speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin

pinchout etc. that you can bind to elements• e.g. $(‘some selector’).swipeLeft(function(){

});

Zepto.js

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

Zepto.js

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

• Based on jQuery syntax (familiar selectors, and event binding)

Zepto.js

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

• Based on jQuery syntax (familiar selectors, and event binding)

• Very Small: 2KB – helps initial speed.

Zepto.js

• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera

• Based on jQuery syntax (familiar selectors, and event binding)

• Very Small: 2KB – helps initial speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin

pinchout etc. that you can bind to elements• e.g. $(‘some selector’).swipeLeft(function(){

});

Zepto.js

• http://cubiq.org/• Various components + experiments you

can use• e.g. scrollable content, carousels very nice

picker, full-page carousel, pull to refresh• Small file sizes• good examples and explanation of code• Used on Nike.com, Apple and others

Cubiq iScroll – Matteo Spinelli

• Other Frameworks:• DojoToolkit, jQuery Mobile,

• Compile to native apps:• PhoneGap, Appcelerator’s Titanium,

Rhomobile, and many others

Other Frameworks to Checkout

How From The Ground Up

• Setup Web App mode<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Checkout Viewporter: https://github.com/zynga/viewporter/

How From The Ground Up

• Built in Touch Events in Safaritouchstart: a finger is placed on a DOM element.touchmove: a finger is dragged along a DOM element.touchend: a finger is removed from a DOM element.touches: a list of all fingers currently on the screen.targetTouches: a list of fingers on the current DOM element.changedTouches: a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.

How From The Ground Up

• Built in Gesture Events– E.g. pinch,– Not available on all devices/browsers

• Built in Orientation Events

How From The Ground Up

• More than touch:– Accelerometer + Gyroscope APIs– GeoLocation – Other HTML 5 + CSS 3 goodness:• E.g. WebSockets, onhashchange• CSS 3 transforms for hardware acceleration,

instead of javascript

How From The Ground Up

• More than touch:– Accelerometer + Gyroscope APIs– GeoLocation – Other HTML 5 + CSS 3 goodness:• E.g. WebSockets, onhashchange• CSS 3 transforms for hardware acceleration,

instead of javascript

Resources• Checkout Frame for an example of what’s possible:

– www.useframe.com– Sample Store (browse on iPad) : www.shop.kindredclothiers.com

• Frameworks and Libraries:– Zepto: http://zeptojs.com/– Sencha: http://www.sencha.com/products/touch/– jQTouch: http://jqtouch.com/– jQuery Mobile: http://jquerymobile.com/– Cubiq (iScroll): http://cubiq.org/ (also has sample of Add to Homescreen code for webapps)– Scrollability: http://joehewitt.github.com/scrollability/

• Packaging as a Native App– PhoneGap: http://phonegap.com/– Titanium: http://www.appcelerator.com/– AppMobi: http://www.appmobi.com/

• Native Browser Events/ Doing things from scratch– Great Intro Article and Resources: http://www.html5rocks.com/en/mobile/touch.html – Apple documentation on webkit touch events:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

– http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

• Good Presentations– Performance: http://www.slideshare.net/firt/mobile-web-html5-performance-optimization?from=ss_embed– More About Why Perf Matters and Responsive Design: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Future of Mobile Web?

2012:

Gap between native and web shrinks

Device APIs opened up to browsers.

A winning Framework?

Write Web Straight to Native?

Thanks for your time

Resources will be online soon.