The native app development environments support multiple threads. Titanium however does not (out of the box), it only supports a single thread. In this presentaton, Ronald Treur will shortly explain how threading works and why this knowledge matters. But more important, he will show you how to keep heavy duty processes from blocking others.

1. Making the most of your
single thread
Titanium - Fundamentals

2. Congrats!
!
Your app is in the
hands of the public!
Your users click on buttons,
open windows, and at some
point someone touches a
button that results in…

3. Absolutely
Nothing.
He tries touching it three
times, before deciding, after
a mere few seconds, that
your app has crashed.
!
He kills your app.

4. Had he waited
for ‘but’ 5
seconds..
.. he would have noticed
three windows opening in
rapid succession. Three
identical windows, as he
would observe when using
the ‘back’-button.

5. What did you do wrong?
•
There’s no loading indicator showing
•
There is no mechanic in place to prevent additional
windows from opening

6. What did you do wrong?
•
There’s no loading indicator showing
•
There is no mechanic in place to prevent additional
windows from opening
•
But more important: You blocked the UI far too long!
You did not make the best use of your single
thread!

7. Ronald Treur
Co-founder Snowciety
!
Freelance developer
!
2.5 yrs Titanium experience
!
@ronaldtreur
ronald@funcracker.net

8. Making the Most of Your Single Thread
•
Threads & Threading
•
How it works in Native & Titanium
•
Javascript call stack example
•
Underscore - Defer

9. Thread
The smallest subset of a
process that could be
independently handled
by the OS.
or
The smallest piece of
code, that could be
executed independently
from the rest of the
code.

10. Thread
Process
Threads

11. Threading
•
Multi-threaded:
- Threads (can) run in parallel, meaning:
- Multiple pieces of code can execute at the same time.
#1
#2
!
#3
#4
!
•
#1
Single-threaded:
- Threads can only run serially, meaning:
- Only one piece of code can execute at a time.
#2
#3

12. How Native works
Main
Thread
Thread
#1
Thread
#2
Thread
#3
Thread
#4
Thread
#..

13. How Titanium works
UI
JS
Debug
Main
Thread
Thread
#1
Thread
#2
Thread
#3
Thread
#4

14. How your app works
JS
Thread
#1

15. Thread Safe
Javascript is by definition NOT thread safe.
•
If multiple threads would be able to access and change
the same object/variable, a race condition might occur.
•
aka: the outcome of a piece of code would be
unpredictable.

16. Single Threaded
Javascript is by definition NOT thread safe. Thus it is, by
nature, single threaded.
•
Timers are not part of Javascript, they are part of the
JS engine (Rhino, V8, JavaScriptCore)
•
Timers allow for asynchronous delays, but code
execution remains single threaded.
•
When a timer expires, or an event fires, the resulting
execution is queued.

17. Call Stack
ms
‘events’
0
foo()
foo()
foo()
0
10
20
ms
30
40
50

18. Call Stack
ms
‘events’
0
0
0
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
nerf()
foo()
bar()
bar()
bar()
bar()
bar()
30
40
50
foo()
0
10
20
ms

19. Call Stack
[click]
foo()
‘events’
0
0
0
6
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
nerf()
bar()
foo()
0
ms
10
bar()
bar()
bar()
bar()
30
40
50
click
handler
20
ms

20. Call Stack
ms
In Titanium the queue is
FIFO (first in, first out).
[click]
foo()
0
0
0
6
10
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
nerf()
bar()
foo()
0
‘events’
10
bar()
bar()
bar()
bar()
40
50
click
bar()
handler
20
ms
30

21. Call Stack
[click]
foo()
‘events’
0
0
0
6
10
20
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
Interval & Timer fire
nerf()
bar()
foo()
0
ms
10
bar()
bar()
bar()
bar()
click
bar() nerf()
handler
20
ms
30
40
50

22. Call Stack
ms
The interval at 20ms is
ignored, an execution is
already scheduled.
[click]
foo()
0
0
0
6
10
20
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
Interval & Timer fire
nerf()
bar()
foo()
0
‘events’
10
bar()
bar()
bar()
bar()
click
bar() nerf()
handler
20
ms
30
40
50

23. Call Stack
ms
The interval at 30ms is
queued, since no
execution is scheduled.
[click]
foo()
0
0
0
6
10
20
30
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
Interval & Timer fire
Interval fires
nerf()
bar()
foo()
0
‘events’
10
bar()
bar()
bar()
bar()
click
bar() nerf() bar()
handler
20
ms
30
40
50

24. Call Stack
ms
‘events’
nerf()
0
0
0
6
10
20
30
40
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
Interval & Timer fire
Interval fires
Interval fires
bar()
bar()
Interval at 40ms is
ignored.
[click]
foo()
bar()
foo()
0
10
bar()
bar()
click
bar() nerf() bar()
handler
20
ms
30
40
50

25. Call Stack
ms
Interval at 50ms is the first
to execute at the correct
time (though 2 executions
were dropped).
[click]
foo()
nerf()
bar()
foo()
0
10
bar()
‘events’
0
0
0
6
10
20
30
40
50
foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interval fires
Interval & Timer fire
Interval fires
Interval fires
Interval fires
bar()
bar()
click
bar() nerf() bar()
handler
20
ms
30
40
bar()
bar()
50

26. Conclusions
•
If code is already executing, events and timers are
queued
•
Timers may not execute exactly when you were
expecting
•
Intervals may not fire as often as you were expecting
•
User interaction is queued as well, which the user
interprets as the UI being unresponsive.

27. setTimeout vs setInterval
setTimeout ( function nerf() {
…..
setTimeout ( nerf, 10);
}, 10);
-VSsetInterval ( function() {
…..
}, 10);

28. Underscore - Defer
_.defer(function, [*arguments])
Defers invoking the function until the current call stack has cleared,
similar to using setTimeout with a delay of 0. Useful for performing
expensive computations or HTML rendering in chunks without blocking
the UI thread from updating. If you pass the optional arguments, they
will be forwarded on to the function when it is invoked.
!
_.defer ( function() { alert(‘deferred’); });
!
// Returns from the function before the alert runs.

29. Live demo
Defer FTW!

30. https://github.com/RonaldTreur/lp.DeferTests
The above link contains the live demo test cases

31. Conclusions
•
Try to keep the User experience as responsive as
possible. Use _.defer!
•
Always show loading-indicators when you can’t.
•
Limit the amount of actions everywhere in your app. For
example: Widgitize your button and/or use _.throttle.

32. Underscore - Throttle
_.throttle(function, wait, [options])
Creates and returns a new, throttled version of the
passed function, that, when invoked repeatedly,
will only actually call the original function at most
once per every wait milliseconds. Useful for ratelimiting events that occur faster than you can keep
up with.
var throttled = _.throttle ( updatePosition, 100);
$(window).scroll(throttled);

33. The End
Questions?