Upload
wooga
View
2.121
Download
1
Tags:
Embed Size (px)
DESCRIPTION
I will show you how to use the new features in HTML5 to create mobile games and the hoops you have to jump through to build a sleek and responsive user interface while trying to avoid most of the headaches that come with the job when you are always an edge case.
Citation preview
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