README.md in modularity-rails-0.6.0 vs README.md in modularity-rails-0.6.1
- old
+ new
@@ -1,13 +1,17 @@
# Modularity::Rails [![Build Status](https://secure.travis-ci.org/kevgo/modularity-rails.png)](http://travis-ci.org/#!/kevgo/modularity-rails)
Makes the [Modularity CoffeeScript](http://github.com/kevgo/modularity-coffeescript) library available to
Rails 3.1 applications.
+Modularity is a pattern and framework for lightweight object-oriented JavaScript
+that allows to compose functionally rich web pages in a clean and testable way
+out of well structured and reusable components.
-## Installation
+# Installation
+
Add this line to your application's Gemfile:
```ruby
gem 'modularity-rails'
```
@@ -17,29 +21,43 @@
```bash
$ bundle
```
Finally, you have to load the modularity file into your application's javascript.
-The easiest way is to add it to `application.js`:
+The easiest way is to add it to `application.coffee`:
-```javascript
-/**
- *= require jquery
- *= require modularity
- */
+```coffeescript
+ # require jquery
+ # require modularity
```
-## Usage
+# Usage
-See [http://github.com/kevgo/modularity-coffeescript].
+Modularity is a lightweight framework for building powerful AJAX applications.
+Modularity avoids magic and heavyness. It focusses on providing a pragmatic and interoperable foundation
+for clean hand-written code bases.
+Modularity provides practices to create code bases of incredible complexity that are still
+nicely manageable and perform very well.
+
+# Modules
+
+Modules are native CoffeeScript classes that are specialized for doing what most JavaScript running in browsers does:
+managing a UI consisting of DOM elements, reacting to events that happen within that section,
+representing application logic specific to that section, and providing high-level APIs for others to interact with the section.
+
+Each module has a container. The container is the outermost DOM element of a section.
+Everything the module does must happen inside this container.
+The module is responsible for managing the inner DOM-structure of the container.
+
+
## Mixins
Similar to Ruby mixins, mixins in Modularity allow to include orthogonal functional aspects defined in separate objects into a class.
-```coffeescript
+```coffeescript
myMixin =
# This will be called when an instance of a class that includes this mixin is created.
constructor: ->
@@ -55,14 +73,32 @@
# The super constructor will call the mixin constructors here.
super
# ...
-
```
+## Reusable example modules and mixins.
+
+Modularity comes bundled with a bunch of example modules and mixins that can be used in production code.
+The example modules are located in `vendor/assets/javascripts/modules/` and _vendor/assets/javascripts/mixins_
+and must be explicitly required in your Rails files using the `require` commands of the asset pipeline.
+
+
+### Modules
+
+* __button.coffee__: A simple button. Fires the `clicked` event when anything inside the container is clicked. Uses the `clickable` mixin.
+* __counter_button.coffee__: Similar to button, but includes the click count as data payload in the fired event.
+
+
+### Mixins
+
+* __clickable.coffee__: Including this mixins adds a 'clickable' aspect to your module, i.e. turns it into a button. Clicking anywhere inside the container makes it fire the 'clicked' event.
+* __closable.coffee__: Including this mixin makes a module closable. This means that when the user clicks on an embedded DOM element with the class 'CloseButton', a 'closing' event will be fired, and the whole module will be removed from the DOM.
+
+
# Development
## Contributing
1. Fork it
@@ -75,5 +111,18 @@
## Running the unit tests
```bash
$ evergreen run
```
+
+
+## Automatically refreshing the browser during development.
+
+Modularity-Rails comes with support for [LifeReload](https://github.com/mockko/livereload) via [Guard](https://github.com/guard/guard).
+
+* Install the LiveReload browser extension: [Chrome](https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei)
+* Run the evergreen server: ```$ evergreen run```
+* Run the guard server: ``` $ bundle exec guard ```
+* Start the LiveReload plugin in Chrome (button in address bar).
+* Navigate to the test page that you want to observe.
+* Change and save code and see the browser reload.
+