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