Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/CoNarrative/glujs

Specification-driven MVVM framework for building rich apps with Ext JS
https://github.com/CoNarrative/glujs

Last synced: 3 months ago
JSON representation

Specification-driven MVVM framework for building rich apps with Ext JS

Awesome Lists containing this project

README

        

# @{GluJS}
*A framework for rapid development of enterprise-ready reactive web & mobile applications "to spec"*

GluJS is a framework for the test-driven development of reactive applications
leveraging rich javascript widget libraries.

Currently we have adapters with basic support for Ext JS 3.1+ and Ext JS 4.06+, an experimental adapter
for Sencha Touch and we'll soon be doing Titanium.

## Hello World
Our Hello World application is a little richer than most. That's because the whole point of GluJS is to
skip the "just looks pretty" stuff and provide you with what you need for building a reactive application out of the gate.
So our Hello World has a little behavior (pressing the button toggles the title),
is localized via glu's built-in support, and (of course) starts with a specification.

The specification (in coffeescript because it keeps our specs very readable; you can use javascript if you'd like):

```coffeescript
Given 'the hello world app is launched', ->
vm = null
Meaning -> vm = glu.model {ns:'helloworld',mtype:'main'}
ShouldHave 'set arriving to true', -> (expect vm.arriving).toBe true
ShouldHave 'set message to a welcome', -> (expect vm.message).toBe 'Hello World!'
When 'the user changes his/her status', ->
Meaning -> vm.set('arriving', false)
ShouldHave 'set message to a farewell', -> (expect vm.message).toBe 'Goodbye World!'
```
The actual application (javascript):
```javascript
glu.defModel('helloworld.main', {
arriving:true,
message$:function () {
return this.localize(this.arriving ? 'greeting' : 'farewell')
}
});

glu.defView('helloworld.main', {
title:'@{message}',
tbar:[
{
text:'Toggle',
enableToggle:true,
pressed:'@{arriving}'
}
]
});

glu.ns('helloworld').locale = {
greeting:'Hello World!',
farewell:'Goodbye World!'
}

Ext.onReady(function(){glu.viewport('helloworld.main');});
```
## Getting GluJS

If you really just want the minified libraries, grab them here:

[http://glujs.com/download/glujs-1.2.0.zip](http://glujs.com/download/glujs-1.2.0.zip)

If you want the source and full examples, clone this project from github.

## Documentation and Support

Online documentation:

- [User Guide] (http://glujs.com/guide.html)
- [API Reference] (http://conarrative.github.com/glujs-guide/api)

GluJS Support Forums:

- [GluJS on Google Groups] (https://groups.google.com/d/forum/glujs)

## Building/minifying
Install node if you haven't already.

Build using node command line

node build.js build

## Running examples
Before you can run examples, you'll need to download and install your desired widget toolset into the lib folder.
We currently support the following:

- Ext JS 3.0.7+ (put in lib/extjs-3.x)
- Ext JS 4.0.5+ (put in lib/extjs-4.x)
- Sencha Touch 2.0+ (experimental, put in lib/touch-2.x)

and will shortly target Titanium.

After you build GluJS, you can run directly from the fileysystem since we leverage GluJS's ability to mock back-end Ajax calls.
For instance, to run the 'agents' example:

file:///Users/mikegai/Projects/gluJS/examples/agents/index.html

If you would like to avoid a build step and also debug into individual glu source files, we've provided a simple website
you can run in node:

node app.js

We use a Jade layout template to individually reference all of the GluJS source files. We don't use
the Ext JS 4.x Loader framework because we want to make it simple when using non-Sencha widget sets as well.

The examples are laid out as follows:

/examples/*name*/extjs3|extjs4

So to run the agent example for Ext JS 4:

/examples/agents/extjs4

## Testing

We use the excellent jasmine BDD testing library for GluJS testing (and it's also core to how we help you develop and
test your own applications with GluJS).

Once you have the node "glu development" application running, simply hit the specification page:

http://localhost:8123/spec/extjs4

or for Ext JS 3.x testing

http://localhost:8123/spec/extjs3

## Generating your own documentation

Documentation is generated using [jsduck] (https://github.com/senchalabs/jsduck).

Install per their instructions so that jsduck is on your shell path.

From the command line with the path in the root of the GluJS project, run:

jsduck --config jsduck.json

## Contributors

[Mike Gai] (https://github.com/mikegai) (creator), [Nick Tackes] (https://github.com/nicktackes), [Travis Barajas] (https://github.com/tvbarajas)