Fast Mobile UIs
-
Upload
wooga -
Category
Technology
-
view
2.119 -
download
1
description
Transcript of Fast Mobile UIs
Fast Mobile UIsYou’re an Edge Case
1Thursday, 8 March, 12
Who am I, right?
Horia Dragomir
UI Developer @ wooga
HTML5 Social Games
2Thursday, 8 March, 12
Mobile UI != Desktop UI
3Thursday, 8 March, 12
Mobile UI is Harder
• Awesome standard support
• No IE6
• Super hardware
4Thursday, 8 March, 12
Forget What You Knew
5Thursday, 8 March, 12
Learn by Doing
6Thursday, 8 March, 12
Learn by Solving Problems
7Thursday, 8 March, 12
We Used to Have No Debugging
8Thursday, 8 March, 12
Thank you, Adobe and Opera!
9Thursday, 8 March, 12
Viewport10Thursday, 8 March, 12
Viewport
• It's actually hard to use the full screen
• Use a custom hack
11Thursday, 8 March, 12
Viewport
• Viewporter tries to solve this problem, but fails
• You webapp will run in far too many environments to create profiles for
12Thursday, 8 March, 12
Speed
13Thursday, 8 March, 12
iOS versus AndroidAndroid is usually half as fast*
14Thursday, 8 March, 12
iOS versus AndroidAndroid is usually half as fast
http://daringfireball.net/linked/2012/03/05/ios-android-html5-benchmarks
15Thursday, 8 March, 12
Loading Speed
• Show first, load later
• Loading JS can freeze the UI
• Lazy-loading?
16Thursday, 8 March, 12
HTTP Hates YouRoundtrips are expensive
Try pipelining
17Thursday, 8 March, 12
applicationCache is a lie
• Loads in one gulp
• Loads in order
• the UI will hate this
• Use it with care
18Thursday, 8 March, 12
Golf Everything!140byt.es
19Thursday, 8 March, 12
Golf?
• Make you application smaller and smaller and keep it as small as you can
20Thursday, 8 March, 12
Be Awesome!
21Thursday, 8 March, 12
Be Awesome?
22Thursday, 8 March, 12
23Thursday, 8 March, 12
You Don’t Need jQuery!
• I <3 jQuery, but not on mobile.
• jQuery fills in gaps in APIs
24Thursday, 8 March, 12
HTML5 is Awesome!
25Thursday, 8 March, 12
USE IT!
26Thursday, 8 March, 12
.querySelectorAll()
• [].map.call
• super fast!
27Thursday, 8 March, 12
.querySelectorAll()
[].map.call(node.querySelectorAll('a .super'), function (child) {
//awesome stuff here
});
28Thursday, 8 March, 12
.querySelectorAll()
http://snook.ca/archives/javascript/going-simple-with-javascript
29Thursday, 8 March, 12
getElementsByClassName
• blazing fast!
30Thursday, 8 March, 12
getElementById
31Thursday, 8 March, 12
Use Event Bubbling!
32Thursday, 8 March, 12
Use Event Bubbling!
instead of addingEventListeners to every node, just add one to their parent.
It’s what the cool kids are doing!
33Thursday, 8 March, 12
XMLHttpRequest rocks the boat
• req.overrideMimeType('text/plain; charset=x-user-defined');
34Thursday, 8 March, 12
req.responseCode < 400
35Thursday, 8 March, 12
req.responseCode < 400
An AJAX request to an asset already stored in applicationCache will sometimes yield a responseCode of 0
36Thursday, 8 March, 12
pushState for navigation
• hashChange if you're afraid of pushState
37Thursday, 8 March, 12
requestAnimationFrame
38Thursday, 8 March, 12
requestAnimationFrame
• function(a,b){while(a--&&!(b=this["oR0msR0mozR0webkitR0r".split(0)[a]+"equestAnimationFrame"]));return b||function(a){setTimeout(a,15)}}(5)
• https://gist.github.com/997619
39Thursday, 8 March, 12
Redraws Hate You
• The feeling will be mutual
• Use as little DOM nodes as possible
• Make top level changes that cascade
40Thursday, 8 March, 12
CSS is your friend
41Thursday, 8 March, 12
Animations are hard
• Think of the poor CPU
• Use transitions!
• Use CSS3 transforms
42Thursday, 8 March, 12
Also, cheat and add dummy transforms just to get things HW accelerated
43Thursday, 8 March, 12
Android hates multiple transforms
You will end up having simplified animations for Android. That’s OK.
44Thursday, 8 March, 12
Also, turn off Hardware Acceleration for Android 2.x
Thank you, Ben Green!
45Thursday, 8 March, 12
node[data-mode=”super”]
• set attributes, not just classes
• classes are cool for binary switches, though
46Thursday, 8 March, 12
Tread with care
• CSS3 does not always follow live DOM events
47Thursday, 8 March, 12
Tread with care
• CSS3 does not always follow live DOM events
• See this for an example: http://jsbin.com/orolov/12/edit#html,live
48Thursday, 8 March, 12
Small hacks go a long way
49Thursday, 8 March, 12
onclick is broken
for a good reason
50Thursday, 8 March, 12
Roll your own “onclick”
• use touchstart, touchmove and touchend
• enable longtouch listener
51Thursday, 8 March, 12
document.addEventListener('touchend', function () {}, false);
This enables the :active selector and increases the perceived responsiveness of your app
52Thursday, 8 March, 12
Perceived ResponsivenessDelay JS heavy execution to allow the UI to
respond fast.
53Thursday, 8 March, 12
Perceived Responsivenesshttp://alexmaccaw.co.uk/posts/async_ui
54Thursday, 8 March, 12
55Thursday, 8 March, 12
56Thursday, 8 March, 12
57Thursday, 8 March, 12
format-detection telephone=no
This will not always work, so you will need to insert dummy <span>s here and there
58Thursday, 8 March, 12
pointer-events: none;user-select: none;user-drag: none;
59Thursday, 8 March, 12
name=viewport content="initial-scale=0.5"
• Use CSS3 transforms to scale things back to size
• Or just use bigger graphics
60Thursday, 8 March, 12
Use optimized images
• pngnq
• spritopia
• Android has navigator.connection
61Thursday, 8 March, 12
Android was broken, though
62Thursday, 8 March, 12
You should be an edge casethis means you're doing something special
63Thursday, 8 March, 12
You should be an edge case
@hdragomir @wooga
this means you're doing something special
64Thursday, 8 March, 12