0
Making the most of your
single thread

Titanium - Fundamentals
Congrats!
!

Your app is in the
hands of the public!
Your users click on buttons,
open windows, and at some
point someone ...
Absolutely
Nothing.
He tries touching it three
times, before deciding, after
a mere few seconds, that
your app has crashed...
Had he waited
for ‘but’ 5
seconds..
.. he would have noticed
three windows opening in
rapid succession. Three
identical wi...
What did you do wrong?
•

There’s no loading indicator showing

•

There is no mechanic in place to prevent additional
win...
What did you do wrong?
•

There’s no loading indicator showing

•

There is no mechanic in place to prevent additional
win...
Ronald Treur
Co-founder Snowciety

!
Freelance developer

!
2.5 yrs Titanium experience

!
@ronaldtreur

ronald@funcracker...
Making the Most of Your Single Thread
•

Threads & Threading

•

How it works in Native & Titanium

•

Javascript call sta...
Thread
The smallest subset of a
process that could be
independently handled
by the OS.

or
The smallest piece of
code, tha...
Thread
Process

Threads
Threading
•

Multi-threaded: 

- Threads (can) run in parallel, meaning:

- Multiple pieces of code can execute at the sam...
How Native works

Main
Thread

Thread
#1

Thread
#2

Thread
#3

Thread
#4

Thread
#..
How Titanium works

UI

JS

Debug

Main
Thread

Thread
#1

Thread
#2

Thread
#3

Thread
#4
How your app works

JS

Thread
#1
Thread Safe
Javascript is by definition NOT thread safe.
•

If multiple threads would be able to access and change
the same...
Single Threaded
Javascript is by definition NOT thread safe. Thus it is, by
nature, single threaded.
•

Timers are not part...
Call Stack

ms

‘events’

0

foo()

foo()

foo()
0

10

20

ms

30

40

50
Call Stack

ms

‘events’

0
0
0

foo()
setInterval(bar, 10)
setTimeout(nerf, 20)

nerf()

foo()

bar()

bar()

bar()

bar(...
Call Stack

[click]

foo()

‘events’

0
0
0
6

foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked

nerf()

bar...
Call Stack

ms

In Titanium the queue is
FIFO (first in, first out).

[click]

foo()

0
0
0
6
10

foo()
setInterval(bar, 10)...
Call Stack

[click]

foo()

‘events’

0
0
0
6
10
20

foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Interv...
Call Stack

ms

The interval at 20ms is
ignored, an execution is
already scheduled.
[click]

foo()

0
0
0
6
10
20

foo()
s...
Call Stack

ms

The interval at 30ms is
queued, since no
execution is scheduled.
[click]

foo()

0
0
0
6
10
20
30

foo()
s...
Call Stack

ms

‘events’

nerf()

0
0
0
6
10
20
30
40

foo()
setInterval(bar, 10)
setTimeout(nerf, 20)
Button clicked
Inte...
Call Stack

ms

Interval at 50ms is the first
to execute at the correct
time (though 2 executions
were dropped).
[click]

f...
Conclusions
•

If code is already executing, events and timers are
queued

•

Timers may not execute exactly when you were...
setTimeout vs setInterval
setTimeout ( function nerf() {
	 …..
	 setTimeout ( nerf, 10);
}, 10);
-VSsetInterval ( function...
Underscore - Defer
_.defer(function, [*arguments])
Defers invoking the function until the current call stack has cleared,
...
Live demo

Defer FTW!
https://github.com/RonaldTreur/lp.DeferTests

The above link contains the live demo test cases
Conclusions
•

Try to keep the User experience as responsive as
possible. Use _.defer!

•

Always show loading-indicators ...
Underscore - Throttle
_.throttle(function, wait, [options])
Creates and returns a new, throttled version of the
passed fun...
The End

Questions?
Upcoming SlideShare
Loading in...5
×

Titanium - Making the most of your single thread

4,012

Published on

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.

Published in: Education, Technology, Business
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,012
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Titanium - Making the most of your single thread"

  1. 1. Making the most of your single thread Titanium - Fundamentals
  2. 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. 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. 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. 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. 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. 7. Ronald Treur Co-founder Snowciety ! Freelance developer ! 2.5 yrs Titanium experience ! @ronaldtreur ronald@funcracker.net
  8. 8. Making the Most of Your Single Thread • Threads & Threading • How it works in Native & Titanium • Javascript call stack example • Underscore - Defer
  9. 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. 10. Thread Process Threads
  11. 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. 12. How Native works Main Thread Thread #1 Thread #2 Thread #3 Thread #4 Thread #..
  13. 13. How Titanium works UI JS Debug Main Thread Thread #1 Thread #2 Thread #3 Thread #4
  14. 14. How your app works JS Thread #1
  15. 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. 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. 17. Call Stack ms ‘events’ 0 foo() foo() foo() 0 10 20 ms 30 40 50
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. setTimeout vs setInterval setTimeout ( function nerf() { ….. setTimeout ( nerf, 10); }, 10); -VSsetInterval ( function() { ….. }, 10);
  28. 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. 29. Live demo Defer FTW!
  30. 30. https://github.com/RonaldTreur/lp.DeferTests The above link contains the live demo test cases
  31. 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. 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. 33. The End Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×