Responsive Interfaces Nicholas C. Zakas Principal Front-end Engineer, Yahoo! Homepage Bayjax – April 13, 2010
The UI Thread <ul><li>Two jobs: </li></ul><ul><ul><li>Draw UI updates </li></ul></ul><ul><ul><li>Execute JavaScript </li><...
<ul><li><button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> </li></ul><ul><...
When Clicked <ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the down state </li></ul>...
Before Click Start UI Thread UI Queue
When Clicked Start UI Thread onclick UI Queue
When Clicked Start UI Thread onclick UI Queue
When Clicked onclick Start UI Thread UI Queue
When Clicked onclick Start UI Thread UI Queue
No UI updates while JavaScript is executing!
Why?
JavaScript May Cause UI Update <button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</...
UI updates must use the latest info available
Long-running JavaScript = Unresponsive UI
Runaway Script Timer <ul><li>Designed to prevent the browser from affecting the operating system </li></ul><ul><li>Limits ...
Internet Explorer
Firefox
Safari
Chrome
Runaway Script Timer Limits <ul><li>Internet Explorer: 5 million statements </li></ul><ul><li>Firefox: 10 seconds </li></u...
How long is too long?
How Long Is Too Long? <ul><li>“ 0.1 second [100ms] is about the limit for having the user feel that the system is reacting...
Translation: JavaScript should not execute for longer than 100ms to ensure responsive UI
Recommendation: Limit JavaScript to no more than 50ms at a time
<ul><li>function  processArray(items, process, callback){ </li></ul><ul><li>for  ( var  i=0,len=items.length; i < len; i++...
Timers to the rescue!
JavaScript Timers <ul><li>Created using setTimeout() </li></ul><ul><li>Schedules a new JavaScript execution job for some t...
JavaScript Timers <ul><li>For complex processing, split up into timed functionality </li></ul><ul><li>Use timers to delay ...
<ul><li>function  timedProcessArray(items, process, callback){ </li></ul><ul><li>//create a clone of the original   var  t...
Web Workers to the rescue!
 
Web Workers <ul><li>Asynchronous JavaScript execution </li></ul><ul><li>Execution happens in a separate process </li></ul>...
<ul><li>//in page var  worker =  new  Worker(&quot;code.js&quot;); </li></ul><ul><li>worker.onmessage =  function (event){...
Web Workers Support <ul><li>Firefox 3.5 </li></ul><ul><li>Safari 4 </li></ul><ul><li>Chrome 4 </li></ul>
Summary <ul><li>UI thread is used both for JavaScript execution and UI updates </li></ul><ul><li>UI cannot be updated whil...
Etcetera <ul><li>My blog:  www.nczonline.net </li></ul><ul><li>My email: [email_address] </li></ul><ul><li>Twitter: @slick...
Upcoming SlideShare
Loading in...5
×

Responsive interfaces

9,929

Published on

0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,929
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
180
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide
  • So what have we talked about? Maintainable JavaScript is made up of four components. First is Code Conventions that describe the format of the code you’re writing. Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers. Third is Programming Practices that ensure your code is readable and easily debugged. Fourth is creating a Build Process
  • Responsive interfaces

    1. 1. Responsive Interfaces Nicholas C. Zakas Principal Front-end Engineer, Yahoo! Homepage Bayjax – April 13, 2010
    2. 2. The UI Thread <ul><li>Two jobs: </li></ul><ul><ul><li>Draw UI updates </li></ul></ul><ul><ul><li>Execute JavaScript </li></ul></ul><ul><li>Only one job can happen at a time </li></ul><ul><li>Jobs are added to a queue if they are generated while the UI thread is busy </li></ul>
    3. 3. <ul><li><button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>window.onload = function (){ </li></ul><ul><li>document.getElementById(&quot;btn&quot;).onclick = function (){ </li></ul><ul><li>//do something </li></ul><ul><li>}; </li></ul><ul><li>}; </li></ul><ul><li></script> </li></ul>
    4. 4. When Clicked <ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the down state </li></ul></ul><ul><li>A JavaScript execution job is created </li></ul><ul><ul><li>The onclick event handler </li></ul></ul><ul><li>A button UI change job is created </li></ul><ul><ul><li>Draws the button in the up state </li></ul></ul>
    5. 5. Before Click Start UI Thread UI Queue
    6. 6. When Clicked Start UI Thread onclick UI Queue
    7. 7. When Clicked Start UI Thread onclick UI Queue
    8. 8. When Clicked onclick Start UI Thread UI Queue
    9. 9. When Clicked onclick Start UI Thread UI Queue
    10. 10. No UI updates while JavaScript is executing!
    11. 11. Why?
    12. 12. JavaScript May Cause UI Update <button id=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> <script type=&quot;text/javascript&quot;> window.onload = function (){ document.getElementById(&quot;btn&quot;).onclick = function (){ var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); }; }; </script>
    13. 13. UI updates must use the latest info available
    14. 14. Long-running JavaScript = Unresponsive UI
    15. 15. Runaway Script Timer <ul><li>Designed to prevent the browser from affecting the operating system </li></ul><ul><li>Limits the amount of time a script is allowed to execute </li></ul><ul><li>Two types of limits: </li></ul><ul><ul><li>Execution time </li></ul></ul><ul><ul><li>Number of statements </li></ul></ul><ul><li>Always pops up a scary dialog to the user </li></ul><ul><li>Exception: Opera has no runaway timer </li></ul>
    16. 16. Internet Explorer
    17. 17. Firefox
    18. 18. Safari
    19. 19. Chrome
    20. 20. Runaway Script Timer Limits <ul><li>Internet Explorer: 5 million statements </li></ul><ul><li>Firefox: 10 seconds </li></ul><ul><li>Safari: 5 seconds </li></ul><ul><li>Chrome: Unknown, hooks into normal crash control mechanism </li></ul><ul><li>Opera: none </li></ul>
    21. 21. How long is too long?
    22. 22. How Long Is Too Long? <ul><li>“ 0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” </li></ul><ul><li>- Jakob Nielsen </li></ul>
    23. 23. Translation: JavaScript should not execute for longer than 100ms to ensure responsive UI
    24. 24. Recommendation: Limit JavaScript to no more than 50ms at a time
    25. 25. <ul><li>function processArray(items, process, callback){ </li></ul><ul><li>for ( var i=0,len=items.length; i < len; i++){ </li></ul><ul><li>process(items[i]); </li></ul><ul><li>} </li></ul><ul><li>callback(); </li></ul><ul><li>} </li></ul>
    26. 26. Timers to the rescue!
    27. 27. JavaScript Timers <ul><li>Created using setTimeout() </li></ul><ul><li>Schedules a new JavaScript execution job for some time in the future </li></ul><ul><li>When the delay is up, the job is added to the UI queue </li></ul><ul><ul><li>Note: This does not guarantee execution after the delay, just that the job is added to the UI queue and will be executed when appropriate </li></ul></ul>
    28. 28. JavaScript Timers <ul><li>For complex processing, split up into timed functionality </li></ul><ul><li>Use timers to delay some processing for later </li></ul>
    29. 29. <ul><li>function timedProcessArray(items, process, callback){ </li></ul><ul><li>//create a clone of the original var todo = items.concat(); </li></ul><ul><li>setTimeout(function(){ </li></ul><ul><li>var start = +new Date(); </li></ul><ul><li>do { </li></ul><ul><li>process(todo.shift()); </li></ul><ul><li>} while (todo.length > 0 && </li></ul><ul><li>(+ new Date() - start < 50)); </li></ul><ul><li>if (todo.length > 0){ </li></ul><ul><li>setTimeout(arguments.callee, 25); </li></ul><ul><li>} else { </li></ul><ul><li>callback(items); </li></ul><ul><li>} </li></ul><ul><li>}, 25); </li></ul><ul><li>} </li></ul>
    30. 30. Web Workers to the rescue!
    31. 32. Web Workers <ul><li>Asynchronous JavaScript execution </li></ul><ul><li>Execution happens in a separate process </li></ul><ul><ul><li>Not on the UI thread = no UI delays </li></ul></ul><ul><li>Data-driven API </li></ul><ul><ul><li>Data is serialized when sending data into or out of Worker </li></ul></ul><ul><ul><li>No access to DOM, BOM </li></ul></ul><ul><ul><li>Completely separate execution environment </li></ul></ul>
    32. 33. <ul><li>//in page var worker = new Worker(&quot;code.js&quot;); </li></ul><ul><li>worker.onmessage = function (event){ </li></ul><ul><li>alert(event.data); </li></ul><ul><li>}; </li></ul><ul><li>worker.postMessage(&quot;Nicholas&quot;); </li></ul><ul><li>//in code.js </li></ul><ul><li>self.onmessage = function (event){ </li></ul><ul><li>self.postMessage(&quot;Hello, &quot; + event.data + &quot;!&quot;); </li></ul><ul><li>}; </li></ul>
    33. 34. Web Workers Support <ul><li>Firefox 3.5 </li></ul><ul><li>Safari 4 </li></ul><ul><li>Chrome 4 </li></ul>
    34. 35. Summary <ul><li>UI thread is used both for JavaScript execution and UI updates </li></ul><ul><li>UI cannot be updated while JavaScript is executing </li></ul><ul><li>Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing </li></ul>
    35. 36. Etcetera <ul><li>My blog: www.nczonline.net </li></ul><ul><li>My email: [email_address] </li></ul><ul><li>Twitter: @slicknet </li></ul>
    1. A particular slide catching your eye?

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

    ×