Skip to content

mclin/plumage.js

 
 

Repository files navigation

Plumage.js Build Status Coverage Status

JS UI framework for complex UIs.

Installation

Currently need to bower install from local repo

git clone https://github.com/twitter/plumage.js.git

cd [my-js-project]
bower install plumagejs=../plumage.js

Someday it might be possible to bower install plumagejs, but not yet.

Getting Started

Add script tags for require.js, config.js (config for require.js) to your index.html

<script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/vendor/require.js"></script>
<script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/config.js"></script>
<!-- include your own require.js config here -->

In your js files, require plumage, and access plumage classes from the Plumage object.

define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage) {
  return Plumage.model.Model.extend({
    urlRoot: '/mymodel'
  });
});

Hello Plumage

To get running, we'll need an App, a Router and a Controller.

controller/MyController.js

define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage, ) {
  return Plumage.controller.BaseController.extend({
    sayHello: function() {
      alert('Hello Plumage!');
    }
  });
});

MyRouter.js

define(['jquery', 'underscore', 'plumage'],
function($, _, Plumage, ) {
  return Plumage.Router.extend({
    controllerRoutes: {
      '': {controller: 'MyController', method: 'sayHello'},
    }
  });
});

application.js

define(['jquery', 'underscore', 'plumage', 'MyRouter', 'controller/MyController'],
function($, _, Plumage, MyRouter) {
  myApp = new Plumage.App({
    initCSRFToken: true,
    controllers: [
      'MyController'
    ]
  });
  window.router = new MyRouter({app: myApp});
  return myApp;
});

Then require your application in your index.html and you're good to go.

<script type="text/javascript">require(['application']);</script>

Load the page and you should see the 'Hello Plumage!' alert.

Next Steps

Next you'll probably want some Models, Collections and Views. A good place to start is the source code of the Countries example.

License

Copyright 2014 Twitter, Inc. and other contributors

Licensed under the MIT License

About

Batteries Included App Framework for Data Intensive UIs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 73.5%
  • CSS 26.5%