README.md

StreamHub-Backbone binds Livefyre StreamHub with Backbone.js so you can make amazing Content experiences like comment feeds, media walls, and slideshows. This is the core library, and there are other libraries for pluggable Views.

StreamHub-Backbone was used to power Livefyre's CES 2013 NewsHub

Livefyre StreamHub is the web's first Engagement Management System. StreamHub turns your site into a real-time social experience. Curate images, videos, and Tweets from across the social web, right into live blogs, chats, widgets, and dashboards. The world's biggest publishers and brands use StreamHub to power their online Content Communities.

StreamHub-Backbone displays Collections of Content in StreamHub Networks. To get your own Network so you can create your own Collections, engage your own community of SSO Users, and curate Content that appeals to your users, contact Livefyre about subscribing to StreamHub.

Backbone.js is an MVC framework for building JavaScript applications that was sent from the heavens to make JavaScript fun again. Big thanks to @documentcloud.

Using it

Bower is used for dependency management. You can install the dependencies with

bower install

If you are unable to use bower, you can download the components dir as a tar

curl -L "http://d.pr/f/DC3b+" > components.tar.gz
tar -xvf components.tar.gz

StreamHub-Backbone is written as a series of AMD modules. You will need to use an AMD loader like RequireJS to use it. Add it as a package in your RequireJS config:

packages: [{
    name: 'streamhub-backbone',
    location: './path/to/streamhub-backbone'
}]

Then you can use it like:

require(['streamhub-backbone'], function (Hub) {
    // Hub some Streams, yo
})

If you refuse to use your own AMD loader, streamhub-backbone.almond.js has a pre-loaded AMD loader as require. You probably want to use that unless your project uses RequireJS. (TODO: Namespace this require)

This is a new project. It will have bugs and is released under an MIT License. Please feel free to leave a GitHub issue to report a bug, submit a Pull Request, or just say Hi.

If you are using this in production for important things, you should fork the repo.

main.css contains some good default styles for the default views.

Example

Most interesting things involve using the StreamHub JavaScript SDK, which you can find here

Load an sdk for a given StreamHub Network, then create a Hub

require(['streamhub-backbone'], function (Hub) {
    fyre.conv.load({
        network: 'labs.fyre.co'
    }, [{
        app: 'sdk'
    }], _loadApp);
    function _loadApp (sdk) {
        var app = new Hub({
            el: document.getElementById("example-id"),
            sdk: sdk,
            collection: {
                siteId: '320568',
                articleId: "brands_canonical"
            }
        });
    }
});

You can also see some demos in index.html, index-built.html (with almond build), and test/examples/*.

Hub Constructor

The module can be used with new to construct a Hub for Streams to play in. It accepts these parameters:

• sdk - An instance of the Livefyre StreamHub JS SDK, loaded from fyre.conv.load
• collection - An object with the siteid and articleId of the Collection you want to display. There will someday be support for many Collections bound to one Hub, or other sets of Content like results from the Most Liked API
• el - The HTML Element to display in
• view - (FeedView) - A Backbone View that should handle the visuals. Hub will create a Collection model and start it up, then proxy to your View for arbitrary forms of hubbing and streaming

Documentation

StreamHub-Backbone uses jsdoc3 to generate HTML documentation from the source code.

You can read the docs here.

Building the Documentation

The code is documented using jsdoc3. From the project root:

Install jsdoc3

npm install git://github.com/jsdoc3/jsdoc.git

Generate this project's docs into the 'docs' directory

node_modules/jsdoc/jsdoc -c tools/jsdoc.conf.js models/* views/* main.js const/* README.md templates/* -d docs

Tests

There are a decent number of tests written for StreamHub-Backbone's core models and views. There is a jasmine runner you can use in test/index.html and BDD specs in test/spec.

You can always run the tests online.

Building

Generate almond build:

node tools/r.js -o tools/build.js