sector

Sector.js
======

$3

Sector is a lightweight Javascript library for creating modular, easily
maintainable, and scalable browser based applications.

The goals for Sector are simple:

- To be a lightweight library that doesn't force project structure or get in the
way of other libraries or frameworks you may want to use. Including forcing the
use of external dependencies like jQuery that may not be needed.

- To be as unobtrusive as possible when it comes to markup and any markup should
be valid.

- To provide the maximum portability and testibility of components as possible.

$3

Sector is based on three core concepts to meet the goals above:

#### Components

Sector components are independant, easily testable, and flexible "black boxes"
of functionality. Components can provide functionality to do anything from
manage a user interface to interact with REST APIs. By leveraging the strict
seperation of concerns that Sector's components provide, you are freed of the
memory issues that plague other popular frameworks. Components do not keep
references to other components and a component's lifecycle directly correlates
to that of the DOM node that it is attached to. Therefore, if something were to
remove a DOM node that a component is attached to, all listeners etc. are
unbound automatically and the component is dereferenced and ready for garbage
collection.

#### Publish/Subscribe

Directly referencing component instances within other components creates a tight
coupling and breaks the "black box" paradigm. Therefore Sector uses an event
based publish/subscribe pattern to allow components to communicate while
remaining de-coupled. Components are able to subscribe to global events that
other components publish.

For example, a data component may be responsible for loading a list of todos
from local storage. Once the list is loaded, the component "publishes" a message
with the topic 'data.todosLoaded' with an array of all the todos. Another
component that is responsible for rendering the list of todos, "subscribes" to
the 'data.todosLoaded' topic and will receive an array of todos to display.

The flexibility of the pub/sub pattern really becomes apparent when we want to
add another component that stores and retrieves the list of todos from a remote
data source like a REST API. As long as the REST data component publishes the
same topic of 'data.todosLoaded', no modifications need to be made to the
display component at all. In fact, both the local storage and the REST data
components can go on doing what they were meant to do.

#### Mixins

Sector's mixins provide an easy way to keep code module and focused on specific
concerns. Instead of creating a giant monolithic component that encompasses
everything whether you need for a specific instance or not, mixins allow you to
keep your code focused and easy to maintain.

For example, in the core Sector library there is a View mixin that provides
easy access to the DOM, easy event binding, and template based rendering. There
is also a Bound mixin that provides one-way and two-way binding of data to DOM
elements and their attributes. Knowing that there are "views" that don't have a
need for binding, we kept them seperate to make it easier to maintain. Since
you can use as many mixins as you want to add functionality to your components
and keep things simple and avoid the kitchen sink approach to development.

Installation
------------
Sector can be easily installed with Bower:

> bower install sector

or through npm:

> npm install sector

Usage
-----
Sector supports standalone, AMD, and CommonJS deployment with
Browserify.

$3

To use as a standard standalone script installed via Bower:

Sector doesn't have any external dependencies but if you are already using
lodash in your project, you can save a few KBs by using
the slim version of Sector located in the dist directory.

Once the script has been included in your page the library will be available in
the global variable sector.

For an example see the Hello World Example

$3

The Bower installed script can also be used as an AMD module loaded via
RequireJS.

For an example see the
RequireJS version of the Hello World Example.

$3

If Sector is installed via NPM, you can simply require('sector') in your
client-side javascript then compile with Bower as you would any other npm module.

Examples
--------
You can find some examples of the core Sector functionality in the
examples directory.

A TodoMVC example is also available at
todomvc-sector
(source).

Extensions
----------

sector-router: an extension for the
Sector.js library that adds a router component and mixins to support route aware
components.

sector-list: an extension for the
Sector.js library that allows repeating and binding to a collection with
selection management.

Browser Support
---------------
Chrome, Safari, Firefox, Opera, IE 9+