Load module-dependent JavaScript with basket.js

I tried different scripts, here is a spreadsheet of some of the JavaScript loaders available, but in the end I went with basket.js. Mostly because it uses local storage, it can order dependencies and supports loading of multiple scripts.
Code #
Here is…


This content originally appeared on justmarkup and was authored by justmarkup

I tried different scripts, here is a spreadsheet of some of the JavaScript loaders available, but in the end I went with basket.js. Mostly because it uses local storage, it can order dependencies and supports loading of multiple scripts.

Code

Here is my approach to load JavaScript for page modules:

var version = 1,
  isModern = 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
if (isModern) {
  /* "HTML5" browsers */
  document.documentElement.className = 'js';
    /* load scripts/libs necessary for all pages */
    basket
      .require({url:"dist/js/base.min.js", unique: version})
        .then(function(){
          /* load fonts, see http://bdadam.com/blog/loading-webfonts-with-high-performance.html */
          basket.require({url:"dist/js/fonts.js", unique: version});

          [].forEach.call(document.querySelectorAll('.js-module'), function(module) {
            /* load js for every module present on the current page
            * example: class="js-module js-module-gallery" data-module-name="module-gallery"
            */
            var src = 'dist/js/modules/' + module.dataset.moduleName + '.js';
            basket.require({url: src, unique: version});
          });
        })
  });
} else {
  /* "HTML4" browsers */
}

Here is what the HTML looks like for a module (in this case an embed tweet).

<div class="js-module js-module-twitter" data-module-name="module-twitter">
  <blockquote class="twitter-tweet" lang="en">
    <p>DevTools Wishlist: emulate (low) RAM, GPU and CPU</p>
    Michael (@justmarkup) 
    <a href="https://twitter.com/justmarkup/status/555801249866854400">January 15, 2015</a>
  </blockquote>
</div>

And in the JavaScript file dist/js/modules/module-twitter.js the widgets.js from Twitter will be loaded to change the static blockquote into the interactive tweet version.

Advantages

  • JavaScript is loaded async
  • On repeated view the scripts are served from local storage (decreases requests)
  • Module-dependent JavaScript only gets loaded if module is visible on the page (Eg. you probably don’t need the twitter embed widget on every site)
  • Progressive enhanced (if a user uses an old browser, JavaScript is not available or fails to load you still get to see the content)

Further improvements

If you use modules with a lot of extra CSS, you may also want to load this CSS dependent on your module, here is an example showing how you can achieve this with basket.js.

What do you think?

I am really curious what you think about my way of loading JavaScript for page modules. Are there any disadvantages I miss? Let me know!


This content originally appeared on justmarkup and was authored by justmarkup


Print Share Comment Cite Upload Translate Updates
APA

justmarkup | Sciencx (2015-01-19T13:13:11+00:00) Load module-dependent JavaScript with basket.js. Retrieved from https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/

MLA
" » Load module-dependent JavaScript with basket.js." justmarkup | Sciencx - Monday January 19, 2015, https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/
HARVARD
justmarkup | Sciencx Monday January 19, 2015 » Load module-dependent JavaScript with basket.js., viewed ,<https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/>
VANCOUVER
justmarkup | Sciencx - » Load module-dependent JavaScript with basket.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/
CHICAGO
" » Load module-dependent JavaScript with basket.js." justmarkup | Sciencx - Accessed . https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/
IEEE
" » Load module-dependent JavaScript with basket.js." justmarkup | Sciencx [Online]. Available: https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/. [Accessed: ]
rf:citation
» Load module-dependent JavaScript with basket.js | justmarkup | Sciencx | https://www.scien.cx/2015/01/19/load-module-dependent-javascript-with-basket-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts