Pablo Villalba -

Mobile development

@micho

I code ruby and javascriptspecializing on user experience

I founded Teambox

share tasks and files with your team

This presentation will be online

I will tweet the link from @micho

Mobile developmentMobile Development with HTML5 and Client-Side Javascript: Development Patterns, Backbone, APIs.

Writing cross-browser apps for multiple devices with a single code base and providing the best user experience.Optimizing resources for bandwith and better load times. Caching. Achieving local-fast apps.

Leveraging native look and feel and native features.

Mobile developmentMobile Development with HTML5 and Client-Side Javascript: Development Patterns, Backbone, APIs.

Writing cross-browser apps for multiple devices with a single code base and providing the best user experience.Optimizing resources for bandwith and better load times. Caching. Achieving local-fast apps.

Leveraging native look and feel and native features.

Usable and fast

1. Design for mobile

2. Client-side patterns

3. Load time performance

Do you remember when...

The web was made of static content

Then pages got more complicated

We processed server-side code

<?php ...

And development changed, using

JS libraries and MVC frameworks

Our tools have changed,but the platform

was always the PC

Mobile is a brave new world

Touch UI

App-stores

GPS, accelerometer, etc

The good

Limited resources

Smaller displays

Apps need to be adapted for touch

The bad

Unknown browser

Unknown device resolution

Difficulty supporting native features

The ugly

Good Design & Speed

What makes for great user experience?

1. Design for mobile

What does Good Design

mean in mobile?

Design for fingertips

Design for fingertips

Design for smaller screens

Design for smaller screens

Navigation differs

Start with the essentialsand add extras if you can

mobile

content

mobile

tablet

content + navigation

mobile

tablet

desktop

content + navigation + extras

(i didn’t make that up)

the cool guys call itresponsive design

prepare layout so your content can resize

use onResize events to adapt your content

now for browsers

mobile is mostly webkit

modern JS and CSS

but HTML5 support is notuniversal just yet

modernizr.jsdetect native HTML5 support

in your device easily

overflow: auto

scrolling in touch devices is stillprety quirky if you use scrollable divs

dropdowns and hover

in touch devices there’s no hoverrevisit your UI to make sure everything works

and then, there’s JS

jQuery and others are still fine,but....

if you are only targeting mobile,there are specific JS libraries

zepto.js

7 Kb (vs jQuery, which is 31 Kb)

targets only

and some specific CSS frameworks

jQuery mobile

Adds powerful CSS conventions to create mobile UIs

and one more thing!

PhoneGap, Appcelerator’s Titanium

These apps allow you to package your web app asa native application, so you may place it in App Storesor leverage platform specific features (like camera)

PhoneGap, Appcelerator’s Titanium

These apps allow you to circumvent thecross-domain policy for web apps, so you can

perform AJAX requests to and from any domain

2. Client-side patterns

Web apps will work mostly fine,

but let’s discuss web apps

When users access yoursite.com

you have two options

a) Serve an responsive app that

adapts the content to mobile UI

with CSS and JS

Pros: Less code to maintain

Cons: You are probably sending too much content

b) Serve a specific app for mobile

Pros: Specific and optimized contents

Cons: You need to maintain separate versions

Detecting mobile browsers

You can do browser sniffing to detect the device

You can use special meta directives for mobile (zoom, icon)

You can use JS to detect dimensions of the viewport

Sophisticated web apps are more data oriented

There’s a new generation of client-side frameworks

Backbone.jsa “MVC” for the browser

normally you wouldadd JS for every action

that’s hard to maintain

normally you wouldask the DOM for data

since we use APIs, that seems redundant

you used to handle clickswith AJAX to render quickly

it’s hard to structure views with AJAX

Backbone.jsYour server sends JSON,

the browser builds the page locallywith Backbone and view templates

Model, Collection

View

Controller (Router)

Model, Collection

Holds JSON data and methods for it

E.g.: Tweet (model), timeline (collection)

{ user: {id: 2, name: “micho”}, tweet: “hai!” }

Views

Linked to a model or collection

Creates HTML from the data andlistens for changes to re-render itself

view = new Views.Tweet({ model: tweet });

$(“#content”).append(view.render().el);

Controllers

Routes pages to render actions

This way you can link to /#!/page and change the viewwithout navigating away. Faster!

http://site.com/#!/activities will render the Activities

Example Twitter app

Model: User

Model: TweetView: My stats

View: Tweet

View: Timeline

View: New tweetCollection: Timeline

Example Twitter app

My stats

5 tweetsTimeline

New tweet

TweetTweetTweet

Example Twitter app

My stats

6 tweetsTimeline

New tweet

TweetTweetTweet

Posting a new tweetupdates the collection.

Views reflect the stateTweet

How Backbone loads data

Bootstrap load the initial state

Navigating can get new data with AJAX,through your server’s API

You can use Websockets and Push

Serving templates

Backbone uses view templates to display data.Your server needs to send these as a JS file.

“@{{user_name}} said: {{tweet}”

Backbone is well suited for mobile

Minimal feature set

JS and data-centric

Built over jQuery and Underscore

Other alternatives...

Spine & Spine Mobile

Sproutcore – more sophisticated

Sencha – adds UI elements too

3. Load time performance

speed matters

slow gunners die

Your app loads like this:

HTML page

CSS and images in parallel

JS: <scripts> block the page loadTemplates, if your app uses them

Every ms matters!

HTML

CSS

JS

Cache aggressively, minimize DOM

Minify, use sprites, adopt conventions

Minify, use async loaders

Page load experience

If you’re building JS apps, your HTML

should be minimal and let the JS populate it.

Add spinners and provide constant feedback to users.

Asset caching

Serve assets with md5s of the contentand no-expire cache headers

application-76fbac76876.js

styles-7f2e1ac10bb.css

HTML5‘s applicationCache

You can “remember” the last HTML you sawto make the page load experience extra fast!

Awesome for offline apps or faster page loading

That’s the intro I wish I had readI hope it was useful for you

We’ve been using all this to build

our collaboration platform

So go ahead and check it out!

Thanks!

I’m @micho on Twitter