Code that scales

Radian is the perfect set up for projects that need to scale fast. The AMD structure allows single developers to large teams to quickly and efficiently write and deploy great apps.

Rapid set up

Radian comes with everything out the box, that means there’s all the minification and concatination tasks as well as a local server and even a PhantomJS web crawler to deal with SEO woes.

Light weight

Radian is a way of doing things, so there’s nothing new to install and no additional dependancies to AngularJS and RequireJS.

100% code coverage

Testing is at the heart of Radian, so out the box it comes complete with all the unit tests you could want, here’s the proof.

Generate with Yeoman

Radian is better with Yeoman, use it to set up your project and use the subgenerators to quickly create your app’s code, with tests included.

Your app, your way

Radian is highly customisable; from the offset you can start with the barebones app or reverse engineer the example code.

Quick start

The purpose of Radian is to help your team and you start building your app with minimal set up. There are two ways to create a Radian project: using Yeoman or by cloning the Radian project on GitHub.

Dependencies

There are a few dependencies to install before we can get started:

Install these by running:

npm install -g grunt-cli bower

If you want to use Yeoman to generate your app, you’ll need to install it and the Radian generator:

npm install -g yo generator-radian

If you want to write your app in CoffeeScript, you’ll need to install that as well; just follow the instructions on the website.

Radian using Yeoman

Once you have Yeoman and the Radian generator installed, you can set up your Radian project simply by running:

yo radian

Radian gives you the option of how you want to code your app. By default it will use CoffeeScript, SASS and Jade; however as you run the set up via Yeoman it will give you the options of which CSS preprocessors you want to use, if any, from the following list:

You can also choose not to use any preprocessors and instead just use vanilla JS, CSS and HTML. All the fun!

You can then make use of the built in subgenerators to create your project files, you have the choice of two types of generators, you use them by running:

yo radian:TYPE 'NAME'
  • TYPE: is the generator you’re wanting to use and…
  • NAME: is the file/class/module name; this will be automatically slugified/camelized/classified for you, so it’s better to write something like ‘foo bar’, rather than ‘fooBar’.

Generating CoffeeScript files

This generator will create a TYPE, say controller, in assets/coffee/TYPE and create a test spec in test/unit/TYPE; where TYPE is one of the following:

  • controller
  • service
  • factory
  • filter
  • directive
  • collection
  • vo

Eg running:

yo radian:controller 'foo bar'

Creates assets/coffee/controller/foo-bar-controller.coffee containing:

define [
  'controller/radian-controller'
], (RC) ->
  class extends RC
    @register 'FooBarController', [
      '$scope'
    ]

    init: () ->

And test/unit/controller/foo-bar-controller-spec.coffee containing:

define [
  'config'
  'angular'
  'controller/foo-bar-controller'
], (cfg, A) ->
  describe 'Foo Bar controller', () ->
    $scope = null
    createController = null

    beforeEach module cfg.ngApp

    beforeEach inject ($injector) ->
      $controller = $injector.get '$controller'
      $rootScope = $injector.get '$rootScope'

      $scope = $rootScope.$new()

      createController = () ->
        $controller 'fooBarController',
          $scope: $scope

    it 'should load', () ->
      controller = createController()

Note that you can also use the generator to create vanilla JavaScript files. It’s all down to the config options you choose when you create your project using Yeoman.

Generating partials

This generator creates a partial and an accompanying style partial (note that the types of partial will depend on your Yeoman set up options, e.g. if you chose to use Jade and SASS, then a Jade partial with a SASS style partial would be created), e.g. running:

yo radian:partial 'my new view'

Creates assets/css/partial/_my-new-view.sass and assets/partial/my-new-view-partial.jade, and finally updates assets/css/_partials.sass to include the newly created SASS file.

Radian without using Yeoman

All you need to have installed is git and the dependencies listed above.

To start using Radian simply download the code from github.com and set it up:

npm install
grunt install
grunt

And then…

Running grunt will generate all the JS, CSS and HTML, and it’ll also start the local server, so point your browser to http://localhost:8000 and you’re laughing.

Testing

To test your new application, you need to make sure some test dependencies are installed globally so they are available on your $PATH:

npm install -g protractor karma
webdriver-manager update

This will install Protractor, Angular’s end-to-end testing framework, Karma, a Javascript test runner, and the latest Selenium standalone server and Chromedriver.

You will then be able to execute all tests – unit, integration and end-to-end – by running:

grunt test