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

Free and open source

Being MIT-licensed and completely open source, you can help us to make it even more awesome!

With an easy set-up

1 » 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>

You'll need jQuery 1.9 or later and Underscore.js 1.5 or later

2 » 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>

3 » 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();
	}
});

4 » 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');
	}
});

5 » And 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!

Ladybug.js has a flexible license

MIT License

Copyright © 2015 biohzrdmx

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Brought to you by

Lead coding: biohzrdmx / github.com/biohzrdmx

This project was developed at WebChimp, the best Web Studio in Mexico!