Rapid app development for agile teams

When working in an agile environment its good to be able to prototype quickly, its also good to be able to save time on development tasks. Any software development problem you come across has been solved before so its best not to reinvent the wheel if there is a tried and tested solution out there already that you can utilise.

I am still surprised about how tools like code generators and snippets are often overlooked in the software development sphere. I still see people typing out class definitions, unit test skeletons ect when there are a myriad of tools out there where you can speed things up. Just take a look at Resharper by JetBrains, this has a really cool template tool where you can create snippets of code that you would normal have to type out over and over again. Visual Studio Code has a snippets file which will also work in ATOM IDE too (VSCode is a fork of ATOM by the way). You can even download a lot of the tools and snippets for free.

Just remember all the answers are out there so stop wasting time writing Jasmine describe blocks and create a snippet so you can create the whole test with one keyword and a tab.

I’m going to take things a step further now and demo how to use something called Yeoman code generator (Yeoman) . I am going to create a simple AngularJS application with the tool and generate most of the code as I go along.

Leave a comment if you want me to write more productivity posts including more on Resharper snippets and VSCode snippet json files.

Below is an example of building a new Angular application, the benefits of yeoman are:

  • Immediately setup skeleton app
  • No need to create boilerplate code
  • Create app artifacts with a command
  • Consistent convention used
  • Automatic generation of test stubs
  • Live reload of changes
  • New files added to index.html automatically

Yeoman AngularJS App

Right first things first, you need to goto this github page and read the blurb Yeoman github page. Follow the installation instructions to get the generator installed onto your machine.

This demo will create a simple Angular app that we will add a controller and service to then display the results on a page which will be a view generated by yeoman. We will call this FruitApp

Note: You will also need Node, I used version 6.3.0 to write this

Open a command prompt and create a new directory for your app

mkdir FruitApp

Change into the directory

cd FruitApp

Run the yeoman generator to create the FruitApp app

yo angular FruitApp

You will be asked a series of questions, here is how I answered

? Would you like to use Gulp (experimental) instead of Grunt? (y/N) n

? Would you like to use Sass (with Compass)? (Y/n) n

? Would you like to include Bootstrap? (Y/n) y

? Which modules would you like to include? (Press  to select,  to toggle all, 
< i > to inverse selection

(*) angular-animate.js
( ) angular-aria.js
(*) angular-cookies.js
(*) angular-resource.js
( ) angular-messages.js
(*) angular-route.js
(*) angular-sanitize.js
>(*) angular-touch.js

You know have a complete Angular app in your directory and you can run it with the following command

grunt serve

If everything went to plan then you should see the following site:

yeoman

So you now have a nice AngularJS app to start building upon. Open it up with your IDE of choice, I can highly recommend Visual Studio Code. You will see that you have a nice clean app structure and your application code will be under the [app] folder with a basic controller for main and for the about page. Under the [views] folder you will have your html pages.

Next Steps

Lets create a new page in our app and we’ll make up a dummy service with some data in it that we can pass to our new page and display it on screen. All the code files will be generated by yeoman we just need to add in our own business logic that we need. This is obviously much faster than hand cranking everything and it will automatically follow the same conventions as the rest of the application.

Lets create a new controller, I’m going to create a fruit controller:

yo angular:controller fruit

You should see the following output, notice that a test spec file is generated for you

create app\scripts\controllers\fruit.js
create test\spec\controllers\fruit.js

Lets take a look at the test file out of interest. Notice it has stubbed out setting up the system under test and it has created a test for you ready to go.

'use strict';

describe('Controller: FruitCtrl', function () {

  // load the controller's module
  beforeEach(module('FruitApp'));

  var FruitCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    FruitCtrl = $controller('FruitCtrl', {
      $scope: scope
      // place here mocked dependencies
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    expect(FruitCtrl.awesomeThings.length).toBe(3);
  });
});

This is powerful, time saving and will follow convention across the whole application.

Okay lets update the navigation bar so that we can link to our new controller. Remove the [Contact] navigation item from index.html and add Fruits.

Next we need to change the route so that when that route is hit we point to the right controller. Goto the main app.js file and update the route so that we have a [when] clause for our fruit route.

.when('/fruit', {
        templateUrl: 'views/fruit.html',
        controller: 'FruitCtrl',
        controllerAs: 'fruit'
      })

Hmmmm we don’t have a view for this yet do we, no problem, lets use yeoman to create one for us. What do you think we need to write?

yo angular:view fruit

This creates the view, lets give this a test and make sure we can get to our new view!

grunt serve

While we’re at it lets update the fruit.html file, leave the website running and watch what happens. Just update the view with a new header:

My favourite fruits

Notice that the website refreshes and you can see your changes. There is a watcher running on the site so you can develop the website and watch the changes happen in realtime without having to rebuild the site each time. This is a nice speedy way to develop too.

This is all pretty cools stuff, lets do one more thing though. Lets now create a service that we can inject into the controller with some values we can use on the page.

yo angular:service fruitService

You guessed it, this created a service to use in the application. Lets add some values and inject this into our controller and show them on the page.

Now we can wire up the controller to use the service and add the data to our view.

Controller:

'use strict';

/**
 * @ngdoc function
 * @name FruithApp.controller:FruitCtrl
 * @description
 * # FruitCtrl
 * Controller of the FruithApp
 */
angular.module('FruithApp')
  .controller('FruitCtrl', ['fruitService', function (fruitService) {

    var fruit = this;

    fruit.favourites = fruitService.favouriteFruits;

  }]);

View

<h1>My favourite fruits</h1>

<pre>{{fruit.favourites | json}}</pre>

<table class="table">
 <thead>
 <tr>
 <th>Fruit</th>
 </tr>
 </thead>
 <tbody>
 <tr data-ng-repeat="fruit in fruit.favourites">
 <td>{{fruit}}</td>
 </tr>
 </tbody>
</table>

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s