Titanium - Making the Most of your Single Thread

You launched your app, your users are downloading it like crazy and thoroughly enjoying it. Until someone presses a button and... nothing happens. They try again and again, but nothing. After a mere few seconds they think it crashed and kill it. Had they waited 5 seconds, they would have noticed three identical windows opening. What did you do wrong? No loading indicator, no mechanism to limit the number of windows, but most importantly: You blocked the UI far too long! You did not make the best use of your single thread. In this talk I'll show you how you can prevent these issues from happening and make optimal use of your single thread.

Transcript

1. S I N G L E T H R E A D M A K I N G T H E M O S T O F Y O U R R O N A L D T R E U R T I C O N F E U - 2 0 1 4
2. A U S E R U S I N G Y O U R A P P P I C T U R E T H I S … .
6. S I N G L E T H R E A D M A K I N G T H E M O S T O F Y O U R R O N A L D T R E U R T I C O N F E U - 2 0 1 4
7. K E E P I N G Y O U R A P P R E S P O N S I V E O R
8. R O N A L D T R E U R W H O A M I Freelance developer - Lost Particle Co-founder Snowciety (app) 2.5+yrs Titanium experience Titan @ronaldtreur
 ronald@lostparticle.net github.com/RonaldTreur
9. C O N T E N T S • SINGLE THREAD • DEFER • PITFALLS • TASKMANAGER • TI.NEXT
10. S I N G L E T H R E A D
12. R E S T R O O M Q U E U E No matter how fast you are… …your time to complete also depends on those in front of you.
13. Queue Q U E U E
14. Queue Q U E U E milliseconds
15. Queue Q U E U E milliseconds
17. Queue Q U E U E milliseconds
19. S I N G L E T H R E A D E D I S J AVA S C R I P T
20. ms Y O U R P R O C E S S I N I T I A L I Z AT I O N
21. Create views Load local data Open window Fetch cloud data Update local data Setup gps listener
22. on window open cloud callback GPS location callback
23. J AVA S C R I P T = / = A S Y N C H R O N O U S
24. A S Y N C • Timers • External events • Cloud calls returning • UI events • Every native component you interact with
25. ms Y O U R P R O C E S S I N I T I A L I Z AT I O N
26. I N I T I A L I Z AT I O N C L O U D R E S U LT G P S ms Y O U R P R O C E S S W I N D O W O P E N E D + + +
27. ms 0 100 200 300 400 500 600 700 800 900 1000 A F T E R 0 M S C U R R E N T E X E C U T I O N
28. ms I N I T I A L I Z AT I O N 0 100 200 300 400 500 600 700 800 900 1000 A F T E R 0 M S C U R R E N T E X E C U T I O N
29. ms I N I T I A L I Z AT I O N 0 200 300 400 500 600 700 800 900 1000 A F T E R 2 0 0 M S C U R R E N T E X E C U T I O N 1100 1200
30. ms I N I T I A L I Z AT I O N 200 300 400 500 600 700 800 900 1000 A F T E R 2 0 0 M S C U R R E N T E X E C U T I O N 1100 1200 Cloud Response
31. ms A F T E R 2 0 0 M S C U R R E N T E X E C U T I O N I N I T I A L I Z AT I O N 200 300 400 500 600 700 800 900 1000 1100 1200 C R Q U E U E D
32. ms A F T E R 4 0 0 M S C U R R E N T E X E C U T I O N I O N 0 400 500 600 700 800 900 1000 1100 1200 C R 1300 1400
33. ms A F T E R 4 0 0 M S C U R R E N T E X E C U T I O N I O N 400 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W I N D O W O P E N
34. ms A F T E R 4 0 0 M S C U R R E N T E X E C U T I O N I O N 400 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O Q U E U E D
35. ms A F T E R 5 0 0 M S C U R R E N T E X E C U T I O N 0 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500
36. ms A F T E R 5 0 0 M S C U R R E N T E X E C U T I O N 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500
37. ms A F T E R 5 0 0 M S C U R R E N T E X E C U T I O N 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500 U S E R TA P Q U E U E D
38. ms A F T E R 5 5 0 M S C U R R E N T E X E C U T I O N 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500 U S E R TA P
39. ms A F T E R 5 5 0 M S C U R R E N T E X E C U T I O N 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500 U S E R TA P
40. ms A F T E R 5 5 0 M S C U R R E N T E X E C U T I O N 500 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500 U S E R TA P G P S Q U E U E D
41. ms A F T E R 5 8 5 M S C U R R E N T E X E C U T I O N 00 600 700 800 900 1000 1100 1200 C R 1300 1400 W O 1500 U S E R TA P G P S 100 ms
42. ms A F T E R 6 8 5 M S C U R R E N T E X E C U T I O N 00 700 800 900 1000 1100 1200 1300 1400 W O 1500 U S E R TA P G P S 1600
43. ms A F T E R 6 8 5 M S C U R R E N T E X E C U T I O N 700 800 900 1000 1100 1200 1300 1400 W O 1500 U S E R TA P G P S 1600 C R Q U E U E D
44. D E F E R
45. B E I N G A G E N T L E M A N
46. D E L AY S S T I L L S I N G L E - T H R E A D E D A S Y N C H R O N O U S
47. setTimeout(fn, 0)
48. _.defer(fn, [args])
49. ms Y O U R P R O C E S S I N I T I A L I Z AT I O N
50. Create views Load local data Open window Fetch cloud data Update local data Setup gps listener
51. D E F E R T R A I N ! function init1() { … _.defer(init2); } ! function init2() { … _.defer(init3); } ! function init3() { … }
52. ms I N I T I A L I Z AT I O N 0 100 200 300 400 500 600 700 800 900 1000 A F T E R 0 M S C U R R E N T E X E C U T I O N
53. ms 0 100 200 300 400 500 600 700 800 900 1000 A F T E R 0 M S C U R R E N T E X E C U T I O N
54. ms A F T E R 0 M S C U R R E N T E X E C U T I O N 0 100 200 300 400 500 600 700 800 900 1000
55. ms A F T E R 6 5 M S C U R R E N T E X E C U T I O N 0 100 200 300 400 500 600 700 800 900 1000
56. ms A F T E R 6 5 M S C U R R E N T E X E C U T I O N 0 100 200 300 400 500 600 700 800 900 1000
57. ms A F T E R 9 0 M S C U R R E N T E X E C U T I O N 0 100 200 300 400 500 600 700 800 900 1000
58. ms A F T E R 9 0 M S C U R R E N T E X E C U T I O N 0 100 200 300 400 500 600 700 800 900 1000
59. ms C U R R E N T E X E C U T I O N 0 200 300 400 500 600 700 800 900 1000 1100 1200 A F T E R 2 0 0 M S
60. ms C U R R E N T E X E C U T I O N A F T E R 2 0 0 M S 1100 1200 200 300 400 500 600 700 800 900 1000 C R Cloud Response
61. ms C U R R E N T E X E C U T I O N A F T E R 2 6 0 M S 1100 1200 200 300 400 500 600 700 800 900 1000 C R
62. ms C U R R E N T E X E C U T I O N A F T E R 2 6 0 M S 1100 1200 200 300 400 500 600 700 800 900 1000 C R
63. ms C U R R E N T E X E C U T I O N A F T E R 3 7 5 M S 1100 1200 300 400 500 600 700 800 900 1000 C R 1300
64. ms C U R R E N T E X E C U T I O N A F T E R 3 7 5 M S 1100 1200 300 400 500 600 700 800 900 1000 C R 1300 100 ms
65. ms C U R R E N T E X E C U T I O N A F T E R 3 9 0 M S 1100 1200 00 400 500 600 700 800 900 1000 C R 1300
66. ms C U R R E N T E X E C U T I O N A F T E R 3 9 0 M S 1100 1200 00 400 500 600 700 800 900 1000 C R 1300
67. ms C U R R E N T E X E C U T I O N A F T E R 4 7 5 M S 1100 1200 400 500 600 700 800 900 1000 1300 1400
68. ms C U R R E N T E X E C U T I O N A F T E R 4 7 5 M S 1100 1200 400 500 600 700 800 900 1000 1300 1400 C R
69. ms C U R R E N T E X E C U T I O N A F T E R 4 7 5 M S 1100 1200 400 500 600 700 800 900 1000 1300 1400 C R
70. ms C U R R E N T E X E C U T I O N A F T E R 4 9 0 M S 1100 1200 00 500 600 700 800 900 1000 1300 1400 C R
71. ms C U R R E N T E X E C U T I O N A F T E R 4 9 0 M S W I N D O W O P E N 1100 1200 00 500 600 700 800 900 1000 1300 1400 C R W O
72. ms C U R R E N T E X E C U T I O N A F T E R 4 9 0 M S W I N D O W O P E N 1100 1200 00 500 600 700 800 900 1000 1300 1400 C R W O
73. P I T FA L L S
74. D O I N G I T W R O N G function init() { _.defer(init1); _.defer(init3); _.defer(init4); } ! function init1() { … } ! function init2() { … } ! function init3() { … }
75. D O I N G I T R I G H T ! function init1() { … _.defer(init2); } ! function init2() { … _.defer(init3); } ! function init3() { … }
76. D O I N G I T R I G H T function startHeavy() { heavy(0); } ! function heavy(i) { task(_array, i); ! if (i++ < _array.length) { _.defer(heavy, i); // deferred recursion } } ! function task(array, i) { // Do something with array[i] }
77. D E F E R When used sparingly: No worries, but responsiveness won’t improve much
78. D E F E R When used throughout the app: New pitfalls arise, but responsiveness will improve considerably
79. T H E R E C A N B E O N LY O N E !
80. Only ONE deferred function should be on the CALL STACK at all times!
81. TA S K M A N A G E R
82. Y O U • Define each Controller’s logic as a sequence of Tasks • Let the TaskManager know when a Controller becomes active (usually via ‘its’ window)
83. TA S K S var ownerId = TaskManager.register(‘index’, this); ! TaskManager.addTasks(ownerId, [{ fn: foo, arguments: [{bar: ‘really’}], name: ‘non unique name for debugging and benchmarking’ },{ fn: authorize, arguments: [‘admin’, ‘bestpasswordever’], name: ‘authorize’ },{ fn: LibObject.initialize, context: LibObject, name: ‘Library Initialization’ },{ fn: fetchAgents, activeOnly: true, name: ‘Retrieving agents’ }]);
84. TA S K M A N A G E R • Higher level abstraction (don’t invoke defer yourself) • Prevents pitfalls
85. S TAT E - R U N N I N G selectTask() executeTask()
86. S TAT E - R U N N I N G selectTask() executeTask() 1) find next task 3) execute task 2) pass task 4) repeat
87. S TAT E - R U N N I N G selectTask() executeTask() 1) find next task 3) execute task 2) pass task 4) repeat DEFER B O T H C A L L S
88. S TAT E - S T O P P E D selectTask() executeTask() When Tasks run out, the loop stops X
89. G I T H U B . C O M / R O N A L D T R E U R / G R AV I T O N . TA S K M A N A G E R
90. T I . N E X T
91. Q U E S T I O N S ? A N D F I N A L LY. . @ronaldtreur
 ronald@lostparticle.net github.com/RonaldTreur