-
Notifications
You must be signed in to change notification settings - Fork 1
Develop
The modeler primarily uses AngularJS for its view layer, and JEFRi for the data layer. grunt manages the build as whole, compiling the assets in app/ to appropriate locations in build/, running tests, and other automated project management tasks. Tests are run written in a combination of Jasmine and QUnit, run with a combination of PhantomJS and Testacular (controlled with Grunt). In the app, scripts are mostly written in a fork of LiveScript with additional eventing operators. Markup is jade; styles are stylus; the visual framework is bootstrap with sprinklings of AngularUI, jquery, and jquery-ui for widgets.
.
├── app
│ ├── components # Script, markup, and styles for Angular directives around Entity objects.
│ ├── entityContext.json # JEFRi context for a JEFRi context. Meta.
│ ├── images # Global images
│ ├── scripts # Application-level scripts
│ │ ├── lib # 3d-party libraries
│ │ └── ls # App scripts written in LiveScript
│ │ ├── app.ls # Defines app's Angular namespace
│ │ ├── directives # General directives (might get refactored into their own projects)
│ │ ├── filters # Custom filters
│ │ └── services # General services, usually to expose 3d party libs to Angular
│ │ └── model.ls # Model services, loads the base model.
│ ├── styles # Application-level styles
│ │ ├── lib # 3d party styles (eg Bootstrap)
│ │ └── styl # Stylus application styles
│ │ └── modeler.styl
│ └── views # Application-level templates
│ ├── page
│ │ ├── app.jade # Specific app layout markup
│ │ └── index.jade # General file-loading markup
│ └── templates.html # Compiled components/ markup.
├── build # Where everything goes...
│ ├── dist # Minified JS, CSS
│ ├── index.html # All markup, minified
│ ├── scripts # Compiled, unminified scripts
│ └── styles # Compiled, unminified styles
├── config # Testacular configs (moving into grunt.js)
├── grunt.js
├── package.json
├── scripts # Testacular scripts (Moving into grunt.js)
└── test # e2e tests; Component unit tests should be in their respective test.ls files.
├── e2e
│ └── runner.html
├── e2e.js
└── libDepending on what piece you're working on, you'll probably want to start in one of the components folders. Each component has three or four files. view.jade is the markup for the rendering template. script.ls is the script controlling the directive. style.styl has the styles specific to that component. test.ls has unit testing code for that component specifically.
Follow along with the Angular Tutorial, but use this fork (the original tutorial code puts controllers in the global scope - This is a BadThing).
Running grunt in the root folder will run all the build steps and tests. Running grunt --help will list the available tasks. You'll probably want the alias tasks towards the bottom, as they handle task dependency ordering.
Start browsing LiveScript's homepage for examples of code. Copy snippets into their compiler, or look at build output, to see what gets generated.
The jade and stylus project pages have their documentation front and center. The goals of Jade and Stylus are to be as straightforward as possible; anyone with familiarity of CSS and HTML should have a fairly straight-forward time reading and writing code.
Browsing the bootstrap and AngularUI project pages are probably the best place to start getting a feel for these, as well.