I posted a while ago about CDN technology allowing anyone to start using Swell while linking it on a Content Delivery Network, meaning visitors will always get the library from the closest point, and as the first milestone has been reached, I guess it’s time to do a little introduction on the way you will be able to make Swell-enabled applications.

At first, you need to determine which component you need. If you try to implement one of the examples in previous or future posts, you can get this information from the code snippet itself.

In our case, let’s say we want to use setStyle() to change our page’s background color. We want it black, the reason is irrelevant.

This will get our background black:

$(document.body).setStyle({backgroundColor : '#000'});

As setStyle() is part of the Core.Element Swell library, we’ll need it, but also its dependencies. “Core.Element” requires “Core.Hashtable” which requires “Core.CustomEvent” which requires “Core.Core”, who are all requiring the “Swell” namespace itself.
Dependencies are a pain, so we’ll just ignore them and include “Element” (Core.Element‘s alias name). The server-side system will automatically include everything we need in a very convenient way.

http://get.swl.fr/1.0/Element.js

Yep, that’s all. With this URL, I’ll include the Element lib from Swell, with all its dependencies, from the “1.0″ stable branch. If you feel adventurous, you can replace “1.0″ with “trunk” and get bleeding edge code.

<script type="text/javascript" src="http://get.swl.fr/1.0/Element.js"></script>
<script type="text/javascript">
$(document.body).setStyle({backgroundColor : '#000'});
</script>

Looks simple, try it too!

Finally, you might want to include more than one library. This is also possible, and is really easy. Let’s say we want Ajax and Event too, the URL would become: http://get.swl.fr/1.0/Element/Ajax/Event.js. The (obvious) goal is to include everything you need without including tons of different files.

Just a final note: using Swell only to change your page’s background color is called overkill. Try out the other examples on the blog and start building rich web applications!

One of the best ways we found on SwellJS to reduce installation hassle is to remove the installation process. We will instead provide the library via a CDN.

So, what will a “CDN” do, and how does it helps to avoid installation of the SwellJS library?

A Content Delivery Network (CDN) is an architecture designed to make content available to anyone as fast as possible. This means that someone accessing a file on a CDN from New York will get it from a server located in New York, while someone accessing the same file from Tōkyō will get it from a server located in Tōkyō.

This will allow us to provide SwellJS by directly hosting it ourselves, without having to worry about the fact that it might make websites hosted in other countries than our own slower. This also means that when you use SwellJS via this method, someone accessing your website from a different country will load the SwellJS library faster than your own website.

We also have plans to optimize lazy loading of SwellJS components, effectively reducing number of HTTP queries required to make a page work.

Finally, SwellJS assets will also be available via CDN, meaning that a full-swell website will usually be faster than the same hosted directly.