Skip to content
MadRabbit edited this page Jun 8, 2012 · 4 revisions

What's Lovely.IO?

Lovely.IO is a full-stack front-side development platform. It includes project management tools, automatic packages hosting (including CDN/docs/demos hosting) and a collection of micro-frameworks that form STL

Centralized Hosting

The first thing you need to realize is that Lovely.IO has a centralized packages repository with its own CDN hosting for all the scripts and assets.

All the packages you use, are supposed to be hooked up from the lovely.io server so that there was a single link for every package across all the sites that use lovely.io.

You can launch a lovely.io substitute if you need (say locally on your computer during the development prices). But generally, http://lovely.io is supposed to be used as the default packages source.

Asynchronous Modules Definition

Lovely.IO is based on what's called AMD or Asynchronous Modules Definition. Basically it looks like that.

<script src="http://cdn.lovely.io/core.js"></script>
<script type="text/javascript">
  Lovely(['dom', 'ajax', ...], function($, Ajax, ...) {
    $(function() { // dom-ready
      Ajax.get('some.url', success: function() {
        $('#semething').update(this.responseText);
      });
    });
  });
</script>

Firstly, you include the core.js file as a normal include on your page. It's just 3k in size and provides you with basic tools like, packages loading, OOP classes and default tools like isArray, trim and so on.

Then, with the Lovely function you specify the list of modules you need and a callback function where you run your actual application code. Lovely will asynchronously load specified packages and once done, will call your callback function with the objects that represent the packages you asked it to load.