About Me
•Mobile Engineer @ JiveSoftware.com
•JavaScript Hacker @ SocialWire.com
•VP of Technology @ GROU.PS
•Project Director @ LiveGO.com (gone to deadpool)
•CTO @ cember.net (acquired by Xing)
Slide 3
Slide 3 text
Other Places You
Can Find Me
•geekli.st/volkan
•github.com/v0lkan
•twitter.com/linkibol
•linkedin.com/in/volkanozcelik
•volkan.io
Slide 4
Slide 4 text
Psst…
I Have a Book
o2js.com/interview-questions
Slide 5
Slide 5 text
Today’s Talk
•Why Mobile First? & WhyJavaScript?
•Mobile Limitations & Challenges
•Need For Speed
•Network, Render, Cache, React, Execute
•Be Frugal
•When You Can’t Make it; Fake It
•It All Depends
•Questions
Slide 6
Slide 6 text
Why Mobile
First?
If your stuff, if your content,
if your information, if your products,
if your services are not available on mobile,
they don’t exist for these people.
!
Karen McGrane
Slide 7
Slide 7 text
Why Mobile
First?
https://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
% Daily Mobile Usage (of >2 hours)
0 6.5 13 19.5 26
At Home
At Work
While Watching TV
While Waiting in Line
During Commute
Slide 8
Slide 8 text
Why
JavaScript?
Any application that can be written in
JavaScript will be written in JavaScript.
!
Jeff Attwood
Slide 9
Slide 9 text
Mobile
Limitations
&
Challenges
Slide 10
Slide 10 text
Mobile
Constraints
•Network
•State of Radio
•Type of Network
•Memory
•Processing Power
•Battery
Slide 11
Slide 11 text
What Kills
Your Battery
•Network Requests (#1)
•JavaScript (#2)
•Layered Architecture
•Extensive OO Programming
•Images (#3)
•DOM Size (#4)
Slide 12
Slide 12 text
Desktop
Mobile
!
http://highscalability.com/blog/2013/9/18/if-youre-programming-a-cell-phone-like-a-server-youre-doing.html
Slide 13
Slide 13 text
As Fast As
Native?
Hardware
Core OS
Services
Media
Cocoa Touch
Webkit
WebCore
JavaScript Runtime
Network is
Expensive
•Use Smart Caching Techniques
•Decouple UX From Network Activities
•Reduce # of HTTP Requests
http://www.lukew.com/ff/entry.asp?1797
Slide 19
Slide 19 text
Decouple UX
From Network
•Decouple Feedback
•Batch Your Requests
•Abstract Your Server Communication
Slide 20
Slide 20 text
Decouple UX
From Network
Slide 21
Slide 21 text
Reduce HTTP
Requests
•Keep Assets on the Device if You Can
•Inline Critical CSS and JavaScript
•Combine Asset
•CSS Sprites
•Defer Fetching Non-Critical Resources
•Reduce Images Used
Slide 22
Slide 22 text
Latency is
Your Nemesis
•It’s not the Bandwidth; it’s Latency
•Latency Kills
•Network Requests Are Expensive
•More than You Think
•Performance is a design feature, treat it that way!
Slide 23
Slide 23 text
Latency is
Your Nemesis
•Latency Is Highly Variable
•Have an “Offline Mode”
•Have an Intelligent Retry Strategy
•Do Not Retry While Offline
•Retry request at increasing
intervals; Give up if it all fails.
Slide 24
Slide 24 text
On Demand
Loading
•Remember Network Latency
•Consider Prefetching Assets
•Consider Using LocalStorage as a Cache
•Know Your Requirements
Slide 25
Slide 25 text
It’s
Complicated
•Things Will Change A Lot
•HTTP 2.0
•SPDY
•Perception Is as Important as Reality
Slide 26
Slide 26 text
Render
Faster
Slide 27
Slide 27 text
Best Practices
Still Hold
•YSlow
•http://developer.yahoo.com/
performance/rules.html
•Google PageSpeed
•https://developers.google.com/
speed/pagespeed/
Slide 28
Slide 28 text
Render
Faster
•Avoid Shadows and Gradients
•Avoid Excessive Animations
•Always Use CSS To Animate
•Use a Simple Logicless Template
•Do Not Nest Templates
•Do Not Nest View Objects
Slide 29
Slide 29 text
Avoid Nesting Views
Slide 30
Slide 30 text
Avoid Nesting Views
Slide 31
Slide 31 text
Jank Busting
•Avoid Jankiness [1]
•You have 16ms
•Use requestAnimationFrame
•Have a consistent frame rate
•Respond to Everything <100ms
•Learn How Browsers Optimize Things
•There’s Always a Tradeoff
[1] http://jankfree.org/
Slide 32
Slide 32 text
Go Flat
!
•Remove shadows, border radius,
gradients…
•When more than one is combined,
it’s lethal!
•Things will get worse as your DOM
size increases.
Slide 33
Slide 33 text
60 FPS
Not Only For Games
•Scrolling
•Orientation Change
•Changing/Refreshing Views
•User Gestures
•Swiping
•Zooming/Oanning
Slide 34
Slide 34 text
GPU
Acceleration
•transform: translateZ(0);
•Use Only When Necessary
•Always Test
Slide 35
Slide 35 text
Invisible
Elements
•position:relative;left:-9999px;
•will be painted!
Slide 36
Slide 36 text
Minimize
Reflows
•Page Load
•Orientation Change
•Style Info Request [1]
•Altering CSS Box Model
•Display Changes
[1] http://mir.aculo.us/2010/08/17/when-does-javascript-trigger-reflows-and-rendering/
Slide 37
Slide 37 text
Scrolling
•Is a harder problem than you think
•Infinite Scroll === Infinite Memory
•Remove items that are outside the
viewport
•Try to use fixed-height items
•Cache DOM attributes
•A tool might be useful [1]
[1] http://airbnb.github.io/infinity/
Slide 38
Slide 38 text
Cache
Faster
Slide 39
Slide 39 text
Caching to
The Rescue
•The answer to the meaning of life,
the universe, and everything is …
•Caching!
Slide 40
Slide 40 text
Use Cache
Wisely
•HTML5 Application Cache Sucks
•Use LocalStorage as Much as You Can
•IndexedDB/WebSQL are Slower than
LocalStorage
Slide 41
Slide 41 text
Use Cache
Wisely
•LocalStorage is Limited (5MB)
•It’s not as much as it seems
•You can store part of the data
•Retrieve the rest from the server
•You can compress the data [1]
•With some decompression overhead
[1] http://pieroxy.net/blog/pages/lz-string/index.html
Slide 42
Slide 42 text
Use Cache
Wisely
•Have a Single Cache Point
•LocalStorage is Faster
•Cap Size of Each Cache Entry
•Use a LRU Algorithm [1]
•Cache TTL
•Cache Eviction
•JSON.stringify(localStorage).length
[1] https://npmjs.org/package/lru-cache
Slide 43
Slide 43 text
React
Faster
Slide 44
Slide 44 text
Responsiveness
FTW
•User Feedback is Beyond Everything
•Never Block UI
•During a Gesture, UI Should Move
•Smooth Transitions (16ms / frame)
•Smooth Actions (<100ms)
Frameworks?
Think Thrice!
•Frameworks are Expensive
•Have Economies of Scale
•Will Always Be Slower
•Frameworks Increase Your Dependency
•Frameworks Need Maintenance
•Patches
•Upgrading
•I am NOT saying don’t use them
Slide 50
Slide 50 text
Frameworks?
Think Thrice!
A Typical Setup
Slide 51
Slide 51 text
Frameworks?
Think Thrice!
With One Modification…
Slide 52
Slide 52 text
Frameworks?
Think Thrice!
Results:
0 1250 2500 3750 5000
4397
4314
4061
445
jQuery
jQuery + jQ Mobile
jQ + jQM + Underscore
jQ + jQM + US + Backbone
# of function calls:
•This is just to “warm up”.
•Nothing is rendered on the page yet.
Slide 53
Slide 53 text
Frameworks?
Think Thrice!
jQuery +
jQuery Mobile +
Underscore +
Backbone +
Your Business Logic
(BLL + DAL + Cache)+
Helper Plugins =
Memory Leaks
•It’s Not Magic
•Extremely Important For Mobile
•Always Be Testing For Leaks
•Manage Memory Wisely
•Object Pools [1]
[1] http://buildnewgames.com/garbage-collector-friendly-code/
Slide 56
Slide 56 text
Memory Leaks
Slide 57
Slide 57 text
Reduce DOM
Access
•DOM is a Sync API
•JavaScript is Single-Threaded
•Think UI Thread as if it’s a Node.JS
Event Loop
•Yield as Fast as You Can
Slide 58
Slide 58 text
Web Workers
•Are Supported on Most Mobile Platforms
•Yield Heavy Computations to Them
Slide 59
Slide 59 text
Be
Frugal
Slide 60
Slide 60 text
Be Frugal:
Reduce JavaScript
•Do As Little As Possible [1]
•Page Visibility API
•Don’t Drain Your Users’ Battery
•“Inception” Rule
•Remove Unused JavaScript [2]
•Reduce JSON Payload
[2] http://gotwarlost.github.io/istanbul/
[1] http://alistapart.com/column/do-as-little-as-possible
Slide 61
Slide 61 text
Be Frugal:
Reduce DOM
•Reduce DOM Node Size and Depth
•Reduce the Number of Offline Nodes
•Don’t Cache Nodes, Cache Data
•Has an Additional Parsing/
Rendering Cost
Slide 62
Slide 62 text
Be Frugal:
Reduce Network
•Batch Your Requests
•Buffer/Queue Your Requests
•Combine them and send in batches.
•Will be useful for “offline mode”
Slide 63
Slide 63 text
Be Frugal:
Reduce Network
•The fastest request is no request at all.
•With fewer network requests:
•Your app will be faster
•Your battery will live longer
Slide 64
Slide 64 text
Be Frugal:
Know Your Budget
•Set a Performance Budget
•Make this a Design Constraint
•If A New Feature Fail Your Budget: [1]
•Either Optimize Existing Features;
•Or Remove Existing Features;
•Or Don’t Add the New Feature.
[1] http://fsm.bdconf.com/podcast/web-performance
Slide 65
Slide 65 text
Cannot Make It?
Fake It
Slide 66
Slide 66 text
Cannot Make It?
Fake It
•Providing any kind of progress will
make app feel faster.
•Overestimate remaining time.
•Feedback that starts earlier feels to
finish sooner.
•When in Doubt, KISS
Slide 67
Slide 67 text
Cannot Make It?
Fake It
•What Users Hate Most:
•Lack of Immediate Feedback (#1)
•Janky Scrolling (#2)
•Tap Delay (#3)
Slide 68
Slide 68 text
It All
Depends
Slide 69
Slide 69 text
Know Thy App
•Each app has different performance needs
•Each app has different bottlenecks
•Each app has a different audience
•Each app is a different beast
•Always measure, never assume!
Slide 70
Slide 70 text
Know Thy App
•Don’t Optimize W/O Measurement
•Be Frugal
•Don’t Upscale, Always Downscale
•Each Added Feature has a Cost
•Have a Performance Budget
Slide 71
Slide 71 text
Know Thy App
•First Profile on Desktop Browser
•to Have an Initial Idea
•Then Test on a Real Device
•Do Not Trust Simulator/Emulator
•Test on a Mobile Network
Slide 72
Slide 72 text
Always Test Your
Assumptions
ops/sec
0 3500000 7000000 10500000 14000000
114187
12777996
getElementsByClassName
querySelectorAll
http://jsperf.com/getelementbyid-vs-getelementsbyclassname/21
Slide 73
Slide 73 text
Entropy Always
Increases
•Coding Things Right is Not Enough
•Your App’s Performance Won’t Stay the
Same
•Your App’s Performance Won’t Improve
•Unless You Regularly Pay Attention
•There is Always a Tradeoff
Slide 74
Slide 74 text
People to
Follow
•@linkibol (me :D )
•@standardista (Estelle Weyl)
•@souders (Steve Souders)
•@slicknet (Nicholas Zakas)
•@codepo8 (Christian Heilmann)
•@firt (Maximiliano Firtman)
•@ariyahidayat (Aria Hidayat)
•@stubbornella (Nicole Sullivan)
* Names don’t have any specific order.
* Not a comprehensive list.