Pablo Villalba -
-
Upload
toster -
Category
Technology
-
view
1.497 -
download
1
description
Transcript of 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