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