Making (good) Webapps

James Long, Mozilla Webdev

January 17, 2013

http://jlongster.github.com/writing-webapps

Performance is critical

(Perceived) performance is critical

What is a webapp?

Page refreshes are rare
Hardware-level integration
Notifications, structured UI, etc

Is HTML5 ready? (hint: yes!)

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/

Touch vs click

*Immediate* feedback is important!

jsfiddle

Touch vs click


var clickEvent = ('ontouchstart' in document.documentElement ?
                  'touchstart' :
                  'click');

$(node).on(clickEvent, function() { ... });

Avoid refreshing the entire page

History API
Either ajax load sections or dump most/all of your app on first load

Avoid refreshing the entire page

jsfiddle

Smooth animations

Use transforms instead of top/left
CSS3 transitions and animations (definitely don't use jQuery's `animate`)
Working with CSS3 animations from javascript: css-animations.js

Relative font-sizes

ems
vw/vh

Reduce memory allocations

Reuse DOM elements
Only create DOM nodes that are visible for long lists

Always compress/concatenate resources

Mobile = less bandwidth
If possible, optimize images too

Want Offline? Use AppCache

It's tricky though
http://www.html5rocks.com/en/tutorials/appcache/beginner/
mortar generates it, also see http://appcache.rawkes.com/
Testing for updates

manifest.webapp

mortar

pre-built templates that has all (or most) of this stuff
mortar-layouts

Firefox OS Simulator

https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/