6. Mobile development
Mobile 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.
7. Mobile development
Usable and fast
Mobile 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.
8. 1. Design for mobile
2. Client-side patterns
3. Load time performance
44. if you are only targeting mobile,
there are specific JS libraries
zepto.js
7 Kb (vs jQuery, which is 31 Kb)
targets only
45. and some specific CSS frameworks
jQuery mobile
Adds powerful CSS conventions to create mobile UIs
46. and one more thing!
PhoneGap, Appcelerator’s Titanium
These apps allow you to package your web app as
a native application, so you may place it in App Stores
or leverage platform specific features (like camera)
47. PhoneGap, Appcelerator’s Titanium
These apps allow you to circumvent the
cross-domain policy for web apps, so you can
perform AJAX requests to and from any domain
51. 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
52. b) Serve a specific app for mobile
Pros: Specific and optimized contents
Cons: You need to maintain separate versions
53. 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
54. Sophisticated web apps are more data oriented
There’s a new generation of client-side frameworks
61. Model, Collection
Holds JSON data and methods for it
E.g.: Tweet (model), timeline (collection)
{ user: {id: 2, name: “micho”}, tweet: “hai!” }
62. Views
Linked to a model or collection
Creates HTML from the data and
listens for changes to re-render itself
view = new Views.Tweet({ model: tweet });
$(“#content”).append(view.render().el);
63. Controllers
Routes pages to render actions
This way you can link to /#!/page and change the view
without navigating away. Faster!
http://site.com/#!/activities will render the Activities
64. Example Twitter app
Model: User View: My stats
Model: Tweet View: Tweet
View: Timeline
Collection: Timeline
View: New tweet
66. Example Twitter app
New tweet My stats
6 tweets
Timeline
Tweet Posting a new tweet
Tweet updates the collection.
Tweet
Tweet Views reflect the state
67. 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
68. Serving templates
Backbone uses view templates to display data.
Your server needs to send these as a JS file.
“@{{user_name}} said: {{tweet}”
69. Backbone is well suited for mobile
Minimal feature set
JS and data-centric
Built over jQuery and Underscore
70. Other alternatives...
Spine & Spine Mobile
Sproutcore – more sophisticated
Sencha – adds UI elements too
74. Your app loads like this:
HTML page
CSS and images in parallel
JS: <scripts> block the page load
Templates, if your app uses them
75. Every ms matters!
HTML Cache aggressively, minimize DOM
CSS Minify, use sprites, adopt conventions
JS Minify, use async loaders
76. 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.
77. Asset caching
Serve assets with md5s of the content
and no-expire cache headers
application-76fbac76876.js
styles-7f2e1ac10bb.css
78. HTML5‘s applicationCache
You can “remember” the last HTML you saw
to make the page load experience extra fast!
Awesome for offline apps or faster page loading
