Skip to content

Instantly share code, notes, and snippets.

@derek

derek/README.md

Created August 17, 2012 02:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save derek/3375276 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save derek/3375276 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. derek revised this gist Aug 17, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@

    <script src="script.js"></script>

    <!-- Give it a different 'type' since we don't want to execute it, yet -->
    <!-- This is the script we are going to run inside a WebWorker thread. -->
    <!-- Give it a different 'type' since we don't want to execute it, yet. -->
    <script id="my-script" type="application/web-worker">
    YUI().use('json-stringify', function (Y) {
    postMessage(Y.JSON.stringify([1, 2, 3, 4, 5]));
  2. derek revised this gist Aug 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ I want to use YUI inside of a WebWorker thread. Flickr recently wrote a post on

    Problem
    ---
    But I want to use YUI's CDN (Flickr self-hosts YUI), and WebWorkers enforce a same-origin policity, preventing you from loading in scripts on another domain (e.g. YUI's CDN).
    But I want to use YUI's CDN, which WebWorkers prevent because it enforces a same-origin policy with `importScripts()`

    Solution
    ---
  3. derek revised this gist Aug 17, 2012. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,18 @@
    Scenario
    ---
    I want to use YUI inside of a WebWorker thread
    I want to use YUI inside of a WebWorker thread. Flickr recently wrote a post on this very topic, [Web workers and YUI](http://code.flickr.com/blog/2012/06/06/web-workers-and-yui/).

    Problem
    ---
    WebWorkers have an importScripts([url,]) API that allows you to load in remote scripts, but that is restricted to same-origin requests. That presents a problem if you want to use YUI's CDN and not host it yourself.
    But I want to use YUI's CDN (Flickr self-hosts YUI), and WebWorkers enforce a same-origin policity, preventing you from loading in scripts on another domain (e.g. YUI's CDN).

    Solution
    ---
    This script demonstrates a proof-of-concept technique that uses:
    Two options:

    Option A) Host YUI yourself. Boooo.

    Option B) This script demonstrates a proof-of-concept technique that uses:

    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
  4. derek revised this gist Aug 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ I want to use YUI inside of a WebWorker thread

    Problem
    ---
    WebWorkers include an importScripts([url,]) API that allows you to load in remote scripts, but that is restricted to same-origin requests. That presents a problem if you want to use YUI's CDN and not host it yourself.
    WebWorkers have an importScripts([url,]) API that allows you to load in remote scripts, but that is restricted to same-origin requests. That presents a problem if you want to use YUI's CDN and not host it yourself.

    Solution
    ---
  5. derek revised this gist Aug 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', fu

    // Executed once the entire queue is complete and we have all the scripts
    var onComplete = function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder || Y.config.win.WebKitBlobBuilder)(),
    yuiScripts = eventFacade.value.join('\n'), // This is a combined script of YUI modules
    myScript = Y.one('#my-script').get('text'),
    blob, objURL, webWorker;
  6. derek revised this gist Aug 17, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,8 @@
    <!-- Will only be available outside the worker -->
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

    <script src="script.js"></script>

    <!-- Give it a different 'type' since we don't want to execute it, yet -->
    <script id="my-script" type="application/web-worker">
    YUI().use('json-stringify', function (Y) {
  7. derek renamed this gist Aug 17, 2012. 1 changed file with 0 additions and 0 deletions.
    0 pretty.js → script.js
    View file
    File renamed without changes.
  8. derek revised this gist Aug 17, 2012. 1 changed file with 21 additions and 15 deletions.
    36 changes: 21 additions & 15 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,21 @@
    Scenario: I want to use YUI inside of a WebWorker thread

    Problem: WebWorkers include an importScripts([url,]) API
    that allows you to load in remote scripts, but that is restricted to same-origin requests.
    That presents a problem if you want to use YUI's CDN and not host it yourself.

    Solution: This script demonstrates a proof-of-concept technique that uses:
    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
    * Y.Async to handle the queue
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker

    Credit to solmsted in #yui for original script (http://jsfiddle.net/uqt5c/)
    Prettied by dgathright
    Scenario
    ---
    I want to use YUI inside of a WebWorker thread

    Problem
    ---
    WebWorkers include an importScripts([url,]) API that allows you to load in remote scripts, but that is restricted to same-origin requests. That presents a problem if you want to use YUI's CDN and not host it yourself.

    Solution
    ---
    This script demonstrates a proof-of-concept technique that uses:

    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
    * Y.Async to handle the queue
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker

    Credit to solmsted in #yui for original script (<http://jsfiddle.net/uqt5c/>)

    Prettied by dgathright
  9. derek revised this gist Aug 17, 2012. 2 changed files with 15 additions and 18 deletions.
    15 changes: 15 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    Scenario: I want to use YUI inside of a WebWorker thread

    Problem: WebWorkers include an importScripts([url,]) API
    that allows you to load in remote scripts, but that is restricted to same-origin requests.
    That presents a problem if you want to use YUI's CDN and not host it yourself.

    Solution: This script demonstrates a proof-of-concept technique that uses:
    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
    * Y.Async to handle the queue
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker

    Credit to solmsted in #yui for original script (http://jsfiddle.net/uqt5c/)
    Prettied by dgathright
    18 changes: 0 additions & 18 deletions pretty.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,3 @@
    /*
    Scenario: I want to use YUI inside of a WebWorker thread
    Problem: WebWorkers include an importScripts([url,]) API
    that allows you to load in remote scripts, but that is restricted to same-origin requests.
    That presents a problem if you want to use YUI's CDN and not host it yourself.
    Solution: This script demonstrates a proof-of-concept technique that uses:
    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
    * Y.Async to handle the queue
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker
    Credit to solmsted in #yui for original script (http://jsfiddle.net/uqt5c/)
    Prettied by dgathright
    */

    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {

    // Create a Loader instance to easily build the required module URLs
  10. derek revised this gist Aug 17, 2012. 2 changed files with 1 addition and 30 deletions.
    2 changes: 1 addition & 1 deletion pretty.js
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker
    Credit to solmsted in #yui for original script
    Credit to solmsted in #yui for original script (http://jsfiddle.net/uqt5c/)
    Prettied by dgathright
    */

    29 changes: 0 additions & 29 deletions z_original.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +0,0 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {
    Y.Async.runAll(Y.Array.map([
    'http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js'
    ].concat(new Y.Loader({
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    }).resolve(true).js), function (url) {
    return function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    };
    })).on('complete', function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    webWorker;

    blobBuilder.append(eventFacade.value.join('\n') + '\n' + Y.one('#my-script').getHTML());

    webWorker = new Worker(Y.config.win.URL.createObjectURL(blobBuilder.getBlob()));
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    });
    });
  11. derek revised this gist Aug 17, 2012. 2 changed files with 36 additions and 9 deletions.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <!-- Will only be available outside the worker -->
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

    <!-- Give it a different 'type' since we don't want to execute it, yet -->
    <script id="my-script" type="application/web-worker">
    YUI().use('json-stringify', function (Y) {
    postMessage(Y.JSON.stringify([1, 2, 3, 4, 5]));
    });
    </script>
    36 changes: 27 additions & 9 deletions pretty.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,21 +1,39 @@
    /*
    Scenario: I want to use YUI inside of a WebWorker thread
    Problem: WebWorkers include an importScripts([url,]) API
    that allows you to load in remote scripts, but that is restricted to same-origin requests.
    That presents a problem if you want to use YUI's CDN and not host it yourself.
    Solution: This script demonstrates a proof-of-concept technique that uses:
    * Y.Loader to generate the module URL(s)
    * Y.YQLRESTClient to fetch each URL
    * Y.Async to handle the queue
    * BlobBuilder to create a single blob of all scripts combined
    * createObjectURL to hand off the blob to the WebWorker
    Credit to solmsted in #yui for original script
    Prettied by dgathright
    */

    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {

    // Create a Loader instance to easily build the required URLs
    // Create a Loader instance to easily build the required module URLs
    var loader = new Y.Loader({
    combine: true,
    combine: true, // A good idea
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    })

    // Include the dependencies as well
    // Include the JS dependencies as well
    var urls = loader.resolve(true).js;

    // Don't forget the seed file. Push it onto the front
    // Don't forget the seed file! Push it onto the front
    urls.unshift('http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js');

    // Create the async command queue that will fetch all the scripts
    // Create the async command queue that will fetch the scripts
    var queue = Y.Array.map(urls, function (url) {
    return (function (success) {
    Y.YQLRESTClient.request({
    @@ -27,20 +45,20 @@ YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', fu
    });
    });

    // Executed after the entire queue is complete
    // Executed once the entire queue is complete and we have all the scripts
    var onComplete = function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    yuiScripts = eventFacade.value.join('\n'),
    yuiScripts = eventFacade.value.join('\n'), // This is a combined script of YUI modules
    myScript = Y.one('#my-script').get('text'),
    blob, objURL, webWorker;

    // Combine the YUI module scripts with my script at the end
    blobBuilder.append(yuiScripts + '\n' + myScript);

    // Fetch a blob of everything
    // Get a blob of all the JS code
    blob = blobBuilder.getBlob();

    // Get a URL to represent the script blob
    // Get a URL to represent the blob
    objectURL = Y.config.win.URL.createObjectURL(blob);

    // Create the worker and onmessage listener
  12. derek revised this gist Aug 17, 2012. 2 changed files with 29 additions and 55 deletions.
    55 changes: 0 additions & 55 deletions original.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,55 +0,0 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {

    // Create a Loader instance to easily build the required URLs
    var loader = new Y.Loader({
    combine: true,
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    })

    // Include the dependencies as well
    var urls = loader.resolve(true).js;

    // Don't forget the seed file. Push it onto the front
    urls.unshift('http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js');

    // Create the async command queue that will fetch all the scripts
    var queue = Y.Array.map(urls, function (url) {
    return (function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    });
    });

    // Executed after the entire queue is complete
    var onComplete = function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    yuiScripts = eventFacade.value.join('\n'),
    myScript = Y.one('#my-script').get('text'),
    blob, objURL, webWorker;

    // Combine the YUI module scripts with my script at the end
    blobBuilder.append(yuiScripts + '\n' + myScript);

    // Fetch a blob of everything
    blob = blobBuilder.getBlob();

    // Get a URL to represent the script blob
    objectURL = Y.config.win.URL.createObjectURL(blob);

    // Create the worker and onmessage listener
    webWorker = new Worker(objectURL);
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    };

    // Execute the command queue
    Y.Async.runAll(queue).on('complete', onComplete);
    });
    29 changes: 29 additions & 0 deletions z_original.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {
    Y.Async.runAll(Y.Array.map([
    'http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js'
    ].concat(new Y.Loader({
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    }).resolve(true).js), function (url) {
    return function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    };
    })).on('complete', function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    webWorker;

    blobBuilder.append(eventFacade.value.join('\n') + '\n' + Y.one('#my-script').getHTML());

    webWorker = new Worker(Y.config.win.URL.createObjectURL(blobBuilder.getBlob()));
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    });
    });
  13. derek revised this gist Aug 17, 2012. 1 changed file with 44 additions and 18 deletions.
    62 changes: 44 additions & 18 deletions original.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,55 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {
    Y.Async.runAll(Y.Array.map([
    'http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js'
    ].concat(new Y.Loader({

    // Create a Loader instance to easily build the required URLs
    var loader = new Y.Loader({
    combine: true,
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    }).resolve(true).js), function (url) {
    return function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    };
    })).on('complete', function (eventFacade) {
    })

    // Include the dependencies as well
    var urls = loader.resolve(true).js;

    // Don't forget the seed file. Push it onto the front
    urls.unshift('http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js');

    // Create the async command queue that will fetch all the scripts
    var queue = Y.Array.map(urls, function (url) {
    return (function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    });
    });

    // Executed after the entire queue is complete
    var onComplete = function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    webWorker;
    yuiScripts = eventFacade.value.join('\n'),
    myScript = Y.one('#my-script').get('text'),
    blob, objURL, webWorker;

    // Combine the YUI module scripts with my script at the end
    blobBuilder.append(yuiScripts + '\n' + myScript);

    // Fetch a blob of everything
    blob = blobBuilder.getBlob();

    // Get a URL to represent the script blob
    objectURL = Y.config.win.URL.createObjectURL(blob);

    blobBuilder.append(eventFacade.value.join('\n') + '\n' + Y.one('#my-script').getHTML());

    webWorker = new Worker(Y.config.win.URL.createObjectURL(blobBuilder.getBlob()));
    // Create the worker and onmessage listener
    webWorker = new Worker(objectURL);
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    });
    };

    // Execute the command queue
    Y.Async.runAll(queue).on('complete', onComplete);
    });
  14. derek created this gist Aug 17, 2012.
    29 changes: 29 additions & 0 deletions original.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {
    Y.Async.runAll(Y.Array.map([
    'http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js'
    ].concat(new Y.Loader({
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    }).resolve(true).js), function (url) {
    return function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    };
    })).on('complete', function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    webWorker;

    blobBuilder.append(eventFacade.value.join('\n') + '\n' + Y.one('#my-script').getHTML());

    webWorker = new Worker(Y.config.win.URL.createObjectURL(blobBuilder.getBlob()));
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    });
    });
    55 changes: 55 additions & 0 deletions pretty.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    YUI().use('array-extras', 'gallery-async', 'gallery-yql-rest-client', 'node', function (Y) {

    // Create a Loader instance to easily build the required URLs
    var loader = new Y.Loader({
    combine: true,
    ignoreRegistered: true,
    require: [
    'json-stringify'
    ]
    })

    // Include the dependencies as well
    var urls = loader.resolve(true).js;

    // Don't forget the seed file. Push it onto the front
    urls.unshift('http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js');

    // Create the async command queue that will fetch all the scripts
    var queue = Y.Array.map(urls, function (url) {
    return (function (success) {
    Y.YQLRESTClient.request({
    method: 'get',
    url: url
    }, function (result) {
    success(result.response);
    });
    });
    });

    // Executed after the entire queue is complete
    var onComplete = function (eventFacade) {
    var blobBuilder = new (Y.config.win.BlobBuilder || Y.config.win.MozBlobBuilder)(),
    yuiScripts = eventFacade.value.join('\n'),
    myScript = Y.one('#my-script').get('text'),
    blob, objURL, webWorker;

    // Combine the YUI module scripts with my script at the end
    blobBuilder.append(yuiScripts + '\n' + myScript);

    // Fetch a blob of everything
    blob = blobBuilder.getBlob();

    // Get a URL to represent the script blob
    objectURL = Y.config.win.URL.createObjectURL(blob);

    // Create the worker and onmessage listener
    webWorker = new Worker(objectURL);
    webWorker.onmessage = function (message) {
    Y.one('body').append('<p>' + message.data + '</p>');
    };
    };

    // Execute the command queue
    Y.Async.runAll(queue).on('complete', onComplete);
    });