Responsive interfaces
Upcoming SlideShare
Loading in...5
×
 

Responsive interfaces

on

  • 11,452 views

 

Statistics

Views

Total Views
11,452
Views on SlideShare
11,381
Embed Views
71

Actions

Likes
23
Downloads
171
Comments
0

7 Embeds 71

http://www.slideshare.net 48
http://speakerrate.com 13
http://www.linkedin.com 3
https://www.linkedin.com 3
http://www.lmodules.com 2
http://paper.li 1
http://www.avionnhealthcare.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Responsive interfaces Presentation Transcript

  • Responsive Interfaces Nicholas C. Zakas Principal Front-end Engineer, Yahoo! Homepage Bayjax – April 13, 2010
  • The UI Thread
    • Two jobs:
      • Draw UI updates
      • Execute JavaScript
    • Only one job can happen at a time
    • Jobs are added to a queue if they are generated while the UI thread is busy
    • <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 (){
    • //do something
    • };
    • };
    • </script>
  • When Clicked
    • A button UI change job is created
      • Draws the button in the down state
    • A JavaScript execution job is created
      • The onclick event handler
    • A button UI change job is created
      • Draws the button in the up state
  • 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</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>
  • UI updates must use the latest info available
  • Long-running JavaScript = Unresponsive UI
  • Runaway Script Timer
    • Designed to prevent the browser from affecting the operating system
    • Limits the amount of time a script is allowed to execute
    • Two types of limits:
      • Execution time
      • Number of statements
    • Always pops up a scary dialog to the user
    • Exception: Opera has no runaway timer
  • Internet Explorer
  • Firefox
  • Safari
  • Chrome
  • Runaway Script Timer Limits
    • Internet Explorer: 5 million statements
    • Firefox: 10 seconds
    • Safari: 5 seconds
    • Chrome: Unknown, hooks into normal crash control mechanism
    • Opera: none
  • How long is too long?
  • How Long Is Too Long?
    • “ 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.”
    • - Jakob Nielsen
  • Translation: JavaScript should not execute for longer than 100ms to ensure responsive UI
  • Recommendation: Limit JavaScript to no more than 50ms at a time
    • function processArray(items, process, callback){
    • for ( var i=0,len=items.length; i < len; i++){
    • process(items[i]);
    • }
    • callback();
    • }
  • Timers to the rescue!
  • JavaScript Timers
    • Created using setTimeout()
    • Schedules a new JavaScript execution job for some time in the future
    • When the delay is up, the job is added to the UI queue
      • 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
  • JavaScript Timers
    • For complex processing, split up into timed functionality
    • Use timers to delay some processing for later
    • function timedProcessArray(items, process, callback){
    • //create a clone of the original var todo = items.concat();
    • setTimeout(function(){
    • var start = +new Date();
    • do {
    • process(todo.shift());
    • } while (todo.length > 0 &&
    • (+ new Date() - start < 50));
    • if (todo.length > 0){
    • setTimeout(arguments.callee, 25);
    • } else {
    • callback(items);
    • }
    • }, 25);
    • }
  • Web Workers to the rescue!
  •  
  • Web Workers
    • Asynchronous JavaScript execution
    • Execution happens in a separate process
      • Not on the UI thread = no UI delays
    • Data-driven API
      • Data is serialized when sending data into or out of Worker
      • No access to DOM, BOM
      • Completely separate execution environment
    • //in page var worker = new Worker(&quot;code.js&quot;);
    • worker.onmessage = function (event){
    • alert(event.data);
    • };
    • worker.postMessage(&quot;Nicholas&quot;);
    • //in code.js
    • self.onmessage = function (event){
    • self.postMessage(&quot;Hello, &quot; + event.data + &quot;!&quot;);
    • };
  • Web Workers Support
    • Firefox 3.5
    • Safari 4
    • Chrome 4
  • Summary
    • UI thread is used both for JavaScript execution and UI updates
    • UI cannot be updated while JavaScript is executing
    • Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing
  • Etcetera
    • My blog: www.nczonline.net
    • My email: [email_address]
    • Twitter: @slicknet