Important announcement

As of January 25, 2020 our web frameworks are being transitioned into a subscription-based model for selected partners only.

Due to this change all of the repositories have been made private and the documentation will also be available only to subscribers.

This transition will allow us to focus on improving our frameworks and offer new features with a revamped development roadmap.

Subscription plan details will be made public once we're done with all the required platform changes.

A tiny, yet powerful (and beautiful) framework for JS applications


Meet Ladybug.js

Create awesome apps in minutes


Routing

Implement Single Page Apps (SPAs) easily with the built-in hash-based router

Modular

Create modules by extending the base module class and keep your app logic in order

Facebook integration

Build Facebook apps in just minutes with the optional, integrated Facebook support

Templates

Full template support thanks to Underscore.js

API-Ready

Connect easily with your existing Dragonfly APIs thanks to the built-in functionality

With an easy set-up

Include Ladybug in your project

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/ladybug.min.js"></script>

Add your markup with some sweet templates

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ladybug Demo</title>
  </head>
  <body>
    <!-- Base markup -->
    <section>
      <div class="container">
        <div id="client">
          <!--  -->
        </div>
      </div>
    </section>
    <!-- Templates -->
    <script type="text/template" id="page-home">
      <h1>Hello World!</h1>
    </script>
  </body>
</html>

Create your application object

AppSample = Ladybug.Application.extend({
  init: function(options) {
    var obj = this;
    // Call parent's constructor
    obj._super(options);
  },
  onDomReady: function() {
    var obj = this;
    // Start the router
    obj.router.start();
  }
});

Create a basic module

ModuleHome = Ladybug.Module.extend({
  init: function(options) {
    var obj = this;
    // Call parent's constructor
    obj._super(options);
  },
  onDomReady: function(params) {
    // Bind events and stuff
  },
  onRender: function(params) {
    var obj = this;
    app.element.html( obj.templates.page() );
  },
  onPrepareTemplates: function(params) {
    var obj = this;
    obj.templates.page = Ladybug.Utils.compileTemplate('#page-home');
  }
});

Crank it up

var app;
app = new AppSample({
  element: '#client'
});
app.registerModule('home', new ModuleHome);

And that's it. You now have a running Ladybug.js App!

Getting started

To get started, download the zip file.

Once you have it extract the files, configure your instance and you'll be ready to create amazing things.

Temporarily unavailable