ES6 dynamic Javascript loading with Jsdelivr CDN

Experimental

What is script-y

An experimental tiny lib (3kb) to load any JS library from jsdelivr.com dynamically based on the lib name. Specific version also supported. Project source is on Github

The idea

This library made using ES6 Custom Elements which is not supported in all browsers yet, it depends on jsdilvr CDN and using its APIs to search for any well-known library by name (nearest value) and inject it dynamically into your page.

Warning

One more time, this is an experimental library and was made just for testing purposes, it uses the nasty synchronous HTTP calls (which is already deprecated) to simulate the same blocking behavior done by the script tag. More info about script tag and loading behavior is from here

How to

Usage

Add the small tiny little script tag at the header

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

Create scripty tag with the needed library name using packages property

<script-y packages="jquery"></script-y>

If the library name got 2 words (ex: angular icons or angular translate) just place the name with space and it will be replaced automatically by * as search APIs uses minimatch. It will take the first item as closest value when search performed

<script-y packages="jquery*ui"></script-y>

Loading specific version is also possible using @ after the library name

<script-y packages="jquery@3.1.0"></script-y>

Scripts are loaded in order, so if there is a dependency between the different libs, just put them in order

<script-y packages="angularjs,angular translate"></script-y>

You can also load some local JS files if needed by using locals property (always will be loaded after packages complete)

<script-y packages="jquery" locals="myscript.js"></script-y>

Add a callback function if needed, although the scripts are running in a blocking mechanism which means any script will come after scripty will be executed as in the same normal order.

<script-y packages="jquery" locals="external.js" oncomplete="amCallbackFunc()" ></script-y>

Side notes

Why the synchronous calls, because DOMContentLoaded awaits only for HTML and scripts, but won’t wait for a script created by document.createElement (called dynamic script).

The loading is quite it slow as the component flow as following :

  1. Render the component and read all the content passed from the html and setting its properties.
  2. Hit jsdilvr APIs to look for the needed library and retrieve all the info will be used to get the lib.
  3. Create script tag and add to the DOM after evaluating the script loaded.
  4. Call the callback method when the whole DOM is ready by using DOMContentLoaded.

Running example

Clone the project, run the almighty npm install then run gulp watch

And to find which version was loaded in case you mentioned only the library name, open console and it will mention which version was downloaded jquery@3.1.1

Experimental

Roadmap

  • Alternative to blocking mechanism (Async) with proper callback (on progress)
  • Download the content first time and load it locally in the coming requests
  • Any suggestions are welcome
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s