Getting Started

This guide will show you how to get started with Packages JS. In this guide we will write our first package, example.hello, wich will export a function greeting(). Then we’ll write a second package which uses example.hello to greet the world. But first, let’s get things set up.

Setting up the example page

Create a sample HTML page to use as a test page for your work. You can create one yourself or use this one (also included in the download). First of all, you need to include packages.js into the page. In our example, we will also include log.firebug, so we can see what we are doing on all browsers:

<script type="text/javascript" src="packages.js"></script>
<script type="text/javascript" src="log/firebug.js"></script>

Open the page in your browser to confirm it’s working. You should be able to open up the log console by pressing F12. There won’t be anything in it yet, but we are about to change that!

Creating your first package

Let us create a package named “example.hello”.  Create a file named hello.js inside the example folder. Now we are going to call the Package function to create the package. Place this text inside your new file:

Package("example.hello", [], function() {
});

Note how on the last line we have a curly and a round closing brace? The curly brace is closing the inline function that we are passing as the third argument to Package. The round closing brace is closing the function call to Package itself.

The first parameter to Package is the name of our new package. Packages JS will use this information to locate the file we created. The second parameter is an array of names of packages ours depends on. We just pass an empty array here. And finally the third parameter is an anonymous function. This function will be called by Packages JS once our dependencies have loaded. Inside the body of this function we will place all our package code:

Package("example.hello", [], function() {
  // Create a function greeting...
  function greeting() {
    console.info("Hello world!");
  }
 
  // ...then export it for use by other packages
  Export(greeting, "greeting");
});

There you have it. Our first package and it exports a nice function. But it doesn’t do anything yet. So let’s put it to work.

Using a package from another package

Let’s create a second package that uses our first package. We’ll call it example.greetingtest, so create a file called greetingtest.js in the example folder. Place this code in it:

Package("example.greetingtest", ["example.hello"], function(greeting) {
  greeting();
});

In the code above, pay special attention to the dependency on example.hello that we added to the array passed to Package, and the parameter we added to the callback function. Package checks all objects exported by example.hello and if any of them matches the name of one of our function’s arguments Packages JS will pass that object as the argument.

Now we can include our package in the page. We only have to add an include for example.greetingtest. Packages JS will automatically load example.hello because it is a dependency for example.greetingtest. Add this code to the head section of your HTML document:

<script type="text/javascript" src="packages.js"></script>
<script type="text/javascript" src="log/firebug.js"></script>
<!-- top-level scripts -->
<script type="text/javascript" src="example/greetingtest.js"></script>

Now refresh the page and check the log console. Is your greeting there? If you add the parameter debug=true to the querystring, you’ll see that some information is being logged by Packages JS showing how example.hello was loaded dynamically:

Check out the demo page for this example.

Now start coding you! And if you need some more information, remember to read the documentation.

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