pablo villalba -
DESCRIPTION
TRANSCRIPT
![Page 1: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/1.jpg)
Mobile development
![Page 2: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/2.jpg)
@micho
![Page 3: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/3.jpg)
I code ruby and javascriptspecializing on user experience
![Page 4: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/4.jpg)
I founded Teambox
share tasks and files with your team
![Page 5: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/5.jpg)
This presentation will be online
I will tweet the link from @micho
![Page 6: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/6.jpg)
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.
![Page 7: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/7.jpg)
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
![Page 8: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/8.jpg)
1. Design for mobile
2. Client-side patterns
3. Load time performance
![Page 9: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/9.jpg)
Do you remember when...
The web was made of static content
![Page 10: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/10.jpg)
Then pages got more complicated
We processed server-side code
<?php ...
![Page 11: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/11.jpg)
And development changed, using
JS libraries and MVC frameworks
![Page 12: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/12.jpg)
Our tools have changed,but the platform
was always the PC
![Page 13: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/13.jpg)
Mobile is a brave new world
![Page 14: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/14.jpg)
Touch UI
App-stores
GPS, accelerometer, etc
The good
![Page 15: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/15.jpg)
Limited resources
Smaller displays
Apps need to be adapted for touch
The bad
![Page 16: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/16.jpg)
Unknown browser
Unknown device resolution
Difficulty supporting native features
The ugly
![Page 17: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/17.jpg)
Good Design & Speed
What makes for great user experience?
![Page 18: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/18.jpg)
1. Design for mobile
![Page 19: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/19.jpg)
What does Good Design
mean in mobile?
![Page 20: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/20.jpg)
![Page 21: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/21.jpg)
Design for fingertips
![Page 22: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/22.jpg)
Design for fingertips
![Page 23: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/23.jpg)
Design for smaller screens
![Page 24: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/24.jpg)
Design for smaller screens
![Page 25: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/25.jpg)
Navigation differs
![Page 26: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/26.jpg)
![Page 27: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/27.jpg)
![Page 28: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/28.jpg)
![Page 29: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/29.jpg)
Start with the essentialsand add extras if you can
![Page 30: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/30.jpg)
mobile
content
![Page 31: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/31.jpg)
mobile
tablet
content + navigation
![Page 32: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/32.jpg)
mobile
tablet
desktop
content + navigation + extras
![Page 33: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/33.jpg)
(i didn’t make that up)
the cool guys call itresponsive design
![Page 34: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/34.jpg)
prepare layout so your content can resize
use onResize events to adapt your content
![Page 35: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/35.jpg)
now for browsers
![Page 36: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/36.jpg)
mobile is mostly webkit
![Page 37: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/37.jpg)
modern JS and CSS
![Page 38: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/38.jpg)
but HTML5 support is notuniversal just yet
![Page 39: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/39.jpg)
modernizr.jsdetect native HTML5 support
in your device easily
![Page 40: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/40.jpg)
overflow: auto
scrolling in touch devices is stillprety quirky if you use scrollable divs
![Page 41: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/41.jpg)
dropdowns and hover
in touch devices there’s no hoverrevisit your UI to make sure everything works
![Page 42: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/42.jpg)
and then, there’s JS
![Page 43: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/43.jpg)
jQuery and others are still fine,but....
![Page 44: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/44.jpg)
if you are only targeting mobile,there are specific JS libraries
zepto.js
7 Kb (vs jQuery, which is 31 Kb)
targets only
![Page 45: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/45.jpg)
and some specific CSS frameworks
jQuery mobile
Adds powerful CSS conventions to create mobile UIs
![Page 46: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/46.jpg)
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)
![Page 47: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/47.jpg)
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
![Page 48: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/48.jpg)
2. Client-side patterns
![Page 49: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/49.jpg)
Web apps will work mostly fine,
but let’s discuss web apps
![Page 50: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/50.jpg)
When users access yoursite.com
you have two options
![Page 51: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/51.jpg)
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
![Page 52: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/52.jpg)
b) Serve a specific app for mobile
Pros: Specific and optimized contents
Cons: You need to maintain separate versions
![Page 53: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/53.jpg)
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
![Page 54: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/54.jpg)
Sophisticated web apps are more data oriented
There’s a new generation of client-side frameworks
![Page 55: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/55.jpg)
Backbone.jsa “MVC” for the browser
![Page 56: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/56.jpg)
normally you wouldadd JS for every action
that’s hard to maintain
![Page 57: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/57.jpg)
normally you wouldask the DOM for data
since we use APIs, that seems redundant
![Page 58: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/58.jpg)
you used to handle clickswith AJAX to render quickly
it’s hard to structure views with AJAX
![Page 59: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/59.jpg)
Backbone.jsYour server sends JSON,
the browser builds the page locallywith Backbone and view templates
![Page 60: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/60.jpg)
Model, Collection
View
Controller (Router)
![Page 61: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/61.jpg)
Model, Collection
Holds JSON data and methods for it
E.g.: Tweet (model), timeline (collection)
{ user: {id: 2, name: “micho”}, tweet: “hai!” }
![Page 62: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/62.jpg)
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);
![Page 63: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/63.jpg)
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
![Page 64: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/64.jpg)
Example Twitter app
Model: User
Model: TweetView: My stats
View: Tweet
View: Timeline
View: New tweetCollection: Timeline
![Page 65: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/65.jpg)
Example Twitter app
My stats
5 tweetsTimeline
New tweet
TweetTweetTweet
![Page 66: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/66.jpg)
Example Twitter app
My stats
6 tweetsTimeline
New tweet
TweetTweetTweet
Posting a new tweetupdates the collection.
Views reflect the stateTweet
![Page 67: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/67.jpg)
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
![Page 68: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/68.jpg)
Serving templates
Backbone uses view templates to display data.Your server needs to send these as a JS file.
“@{{user_name}} said: {{tweet}”
![Page 69: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/69.jpg)
Backbone is well suited for mobile
Minimal feature set
JS and data-centric
Built over jQuery and Underscore
![Page 70: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/70.jpg)
Other alternatives...
Spine & Spine Mobile
Sproutcore – more sophisticated
Sencha – adds UI elements too
![Page 71: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/71.jpg)
3. Load time performance
![Page 72: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/72.jpg)
speed matters
![Page 73: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/73.jpg)
slow gunners die
![Page 74: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/74.jpg)
Your app loads like this:
HTML page
CSS and images in parallel
JS: <scripts> block the page loadTemplates, if your app uses them
![Page 75: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/75.jpg)
Every ms matters!
HTML
CSS
JS
Cache aggressively, minimize DOM
Minify, use sprites, adopt conventions
Minify, use async loaders
![Page 76: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/76.jpg)
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.
![Page 77: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/77.jpg)
Asset caching
Serve assets with md5s of the contentand no-expire cache headers
application-76fbac76876.js
styles-7f2e1ac10bb.css
![Page 78: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/78.jpg)
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
![Page 79: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/79.jpg)
That’s the intro I wish I had readI hope it was useful for you
![Page 80: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/80.jpg)
We’ve been using all this to build
our collaboration platform
So go ahead and check it out!
![Page 81: Pablo Villalba -](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54b5d3864a7959cc268b46cc/html5/thumbnails/81.jpg)
Thanks!
I’m @micho on Twitter