Front End Development - mdoroudi/TraceHealth GitHub Wiki

Setup

Install Node

brew install node

Install npm

if this command doesn't work, download the script from http://npmjs.org/install.sh and run sh on it.

curl http://npmjs.org/install.sh | sh

http://howtonode.org/05896bb828f0d7e9251dd5b4cfd72350896990bd/introduction-to-npm

Install bower

http://bower.io/

npm install -g bower

Site Dependency Installation

External dependencies are managed using bower. Running the following command to take care of everything

bower install

Technologies

HTML

We generate HTML pages using haml, and haml_coffee_assets for client-side templates. Static pages that can be viewed without a login (about, team, security, etc) should be served by Rails and so written in haml. These pages should be saved in /app/views in the normal fashion for Rails. Information about writing and including client-side templates will be included in the Javascript section.

CSS

Stylesheets are generated using SCSS. SCSS files live in /app/assets/stylesheets. To have a stylesheet included in the application, make sure to import it in the main stylesheet file, application.css.scss

Javascript

Code Architecture

The front end of the application is organized using Backbone.js. Modular development is done through RequireJS. To configure RequireJS, edit /config/requirejs.yml. Note: after editing requriejs.yml, the development server needs to be restarted before the changes take affect (the auto-reload won't catch the change).

Testing

Jasmine is used for testing. To run tests, go to localhost:3000/jamsine in your web browser. Dependencies that exist only for testing should be configured in specRunner.coffee, not requirejs.yml.