Fifty issues have been resolved and it looks like the twitter tweet has been removed from the shell.

I'll be digging around with this a bit and posting any tidbits - I am also going to upgrade the code samples for Roo in Action to 1.2.4 this week, and will post any notes on what I find during upgrades.

Ken

Hi everyone. If you're looking for examples of potential ways to interact with a Spring app from AngularJS, take a look at the project I worked on with Pivotal's David Turanski for ETE, the Quizzo-ETE application.

It's at github.com/krimple/quizzo-ete. Highlights:

Now here's something I ended up using (but not as well as in here) for the quiz. It's a way to send a request to a Angular service asynchronously and receive a result via a message back to the component.

Asynchronous calls to services in Angular

In Angular, everything is asynchronous as much as possible to provide speed. A call to a $http service, which performs ajax methods, doesn't immediately return a value. If you decide to split up your Angular controllers and services, so you separate your UI from the calls to your backends, you'll quickly find that it becomes hard to get a response without some extra work.

One way to orchestrate calls is to use the Angular messaging framework, built into the $scope object. For example, in our controller we can execute a call to fetch games we're able to play right now, but we won't get the response right away. So, we can subscribe to a message, sent by our service, which will then come back to us with data. See this simple JSFiddle for an example:

The service uses a passed $scope variable. I've also injected a $rootScope into the service. Using that one would allow us to broadcast the message to any interested party.

A quick note on Spring Roo - looks like there are plans for a 1.2.4 release sometime in the summer. Alan Stewart tweeted this earlier in the week. Also, the Roobot, which accepts new OSGi bundles and also provides for downloading of existing ones, went down for a while, but due to some work recently by Alan it's up and running for internal bundles as of today.

If you're using Roo and need some basic Roo-provided bundles, they are now online.

Alan is working on getting the Roobot stabilized (some project descriptor might be causing trouble, we'll have to see which one - at one point it was mine). Once that's done they can re-populate the repository with the user-contributed ones.

Finally, the download link seems to be broken (the initial Download button works, but once you bypass registration and go to the download form, the real link is not a link), but follow my reply on this forum thread for a quick workaround.

Once Roo 1.2.4 gets ready for takeoff, I'll post my notes on it. I've recently submitted a contributor agreement to help Alan with some things here and there, and if they accept it, I'll be able to do a bit more for the community.

For my ETE talk, and our internal Chariot Day conference beforehand, I've taken on client-side Single-Page-Web-Application (SPWA) Javascript programming. I started by attempting to learn Backbone.js, but this poor old server-side programmer with a smattering of front-end talents grounded hard on the shallow waters of confusion.

I was not alone. At SpringOne/2GX 2012, VMware's Craig Walls hosted a talk comparing SPWA frameworks, and discussed Backbone's lack of a 'day one story' - a starting point example. He was really interested in the Walmart Labs projects Thorax and Lumbar, which are attempting to bring some higher-level structure and organization to the code base. Also, I ran into the emerging but not yet complete Yeoman
Then Chariot's Don Coleman turned me on to Addy Osmani's TodoMVC project - it implements the same task list use case in oh, about 18+ frameworks.

I spent time looking at each of them and AngularJS caught my eye. It has two-way instant data synchronization, is agnostic with respect to your models, contains a good basic validation scheme, and uses tags and attributes salted to the templates to expose a 'ViewModel' to the view.

What is a view model?

A ViewModel is an element of your MVC model that should be exposed to the page. Spring MVC has this concept - we put things in the Model object to show to the users, but rarely do we put true domain objects in there. If you have web-only beans that you send back-and-forth to the UI, chances are you're using the ViewModel pattern (please let me know if that is a wrong assumption).

A sample view

Let's review some code from our current Quizzo-ETE project, a collaboration with David Turanski of VMware for our upcoming Modern Spring Web Applications talk. We're using AngularJS and Spring to show enterprise developers how to leverage their skills in Spring but also quickly get onboard with a very powerful SPWA framework.

First, a simple view fragment, showing how to emit model elements:

<tr>
    <th span="2">Statistics</th>
</tr>
<tr>
    <th>Score</th>
    <td>{{statistics.score}}</td>
</tr>
<tr>
    <th>Max Score</th>
    <td>{{statistics.maxScore}}</td>
</tr>
<tr>
    <th>% Correct</th>
    <td>{{statistics.percentCorrect}}</td>
</tr>

So, you can see the handlebars-style substitutions of ViewModel elements using the {{ and }} characters.

A sample Angular controller

Here is the Angular controller that put the data in there in the first place:

myApp.controller('ByeCtrl', function($scope) {
  $scope.statistics = {
    "score": "130",
    "maxScore": "150",
    "percentCorrect": "86%",
    "topScorers": ['phil', 'joe', 'alex']
  };

The $scope object is our ViewModel. We're adding a Javascript object called

statistics

to it, hardcoding it for now.

Two-way databinding

The cool thing is that if anything on the page changes the objects, the page changes immediately. A click, an event, even a message from the outside world, can trigger a UI update. The same works the other direction with form elements. Consider this fragment:

  <form class="panelform left">
    <p>
        <label for="nickname"><b>Nickname</b></label>
        <input type="text" 
               ng-model="nickname"
               ng-change="verify_nick(nickname)"
               id="nickname"
                /> 
        <span ng-show="badNick" class="error">
                        Nickname already used...</span>

    <button id="join" ng-click="join_game($location)"
      ng-show="!badNick && nickname">Join</button>
    </p>
</form>

Handling events

The input tag has some special attributes in it - ng-model, which automatically binds the typed in value (live, no less, not even requiring a submit) to a $scope element called nickname. We trigger verification by calling a controller method called verify_nick, passing the nickname into the call. Here is what the controller looks like:

myApp.controller('JoinCtrl', function ($scope, $location, PlayerService, QuizManagerService) {

  $scope.verify_nick = function () {
    var result = PlayerService.searchNickName($scope.nickname);
    $scope.badNick = result;
  };

  $scope.join_game = function (nickName, emailAddress) {
    PlayerService.setNickName(nickname);
    QuizManagerService.startQuiz();
    $location.path("/play");
  };


});

You can see interactions with several objects. For Spring fans, we inject objects in a similar way to how Spring MVC does it - add it to the function's parameter list and it gets injected. NICE.

Services

We inject and use several objects:

• $scope - our ViewModel
• $location - allows us to change the page fragment we're showing
• PlayerService, QuizManagerService - these are stateful service objects that live inside of the browser. Think of them as holding your state and calling business methods, and you're on the right track.

You should note that in this function, we're adding two other named functions to the ViewModel - verify_nick and join_game. Also, for those Spring developers you'll see us delegating most work to our named Service and built-in Angular objects. Just like a good MVC, it's just a front-end. The services do all the work.

Summary

That's all for now, and if you check out the commit with version 33607951b734a0f1cfc8a710b41abd8664cc3e8f you can run the app this way:

• first, install node.js - 0.8 +
• next, do a 'npm install -g express'
• cd to ./angular-prototype/app
• run the server with node server.js
• browse to http://localhost:4567

It looks TERRIBLE right now. But it is a working app with several panes. I'm using Twitter bootstrap on the front-end so expect some ugliness until I get that smoothed out.

To re-iterate, our code is online - please feel free to watch our progress and comment away here if you like, but expect lots of silly steps as we move along). It's at http://github.com/krimple/quizzo-ete.

We have a FANTASTIC show coming up. Just look at the website, phillyemergingtech.com, and you'll see. We have Doug Lea, Cliff Click, Ken Scwaber, Aaron Patterson, the committers of at least five or six javascript single-page and server frameworks, and the list goes on, and on.

As we did last year, we ARE going to record the screens this year of almost every talk (forgive us if we have a technical glitch or two). We won't be streaming live, but we will be doing our best to get the talks out when we can.

So, if you aren't able to go, within a few months we should have the talks available online. Watch the @Chariotsolution or @krimple twitter accounts for the announcements. And you can browse all of our other content at our content site, emergingtech.chariotsolutions.com, including just about all of the 2012 talks, our Science of Big Data conference materials, and over 100 podcasts from the past five years.

Ken

We have quite the show lined up for you, with keynotes from Rich Hickey, the creator of the Clojure language, and Media Six Degrees' Chief Data Scientist, Claudia Perlich. Notable speakers include Ember.js creator (among other things) Yehuda Katz, Jessica McKellar of the Boston Python User Group, contributor to the Python Twisted async network library, the inimitable Aaron Patterson (if you want a laugh, listen to him rib us about our conference name in his Code Chacuterie talk of 2012)...

Also we have Cliff Click (0xdata), author of "Java Performance" Charlie Hunt, Go contributor and creator of Sinatra Blake Mizerany, author of "The Culture Game - Tools for the Agile Manager" Dan Mezick, Jurgen Appelo (author of Management 3.0), the creator of the Scrum process, Ken Schwaber, and more are being added every day.

We even have Angluar.js expert Lukas Ruebbelke (see Angular.js), a Google-sponsored "single page Javascript" client-side application framework that uses JSON/REST and has live two-way data binding. (I didn't even realize we booked him when I published this so ignore my earlier version where I said I am speaking on this topic). And as usual we'll be recording sessions and hopefully podcasting too.

More speakers are being booked each week.

So, don't delay. Last year we sold out with two months to go, and I think as we add additional awesome speakers the competition for a ticket will get intense. Register today at phillyemergingtech.com.

If you want more incentives, the early bird registration is just $385, and ends on February 15th. After that prices go up to $450 (still a steal, but why not save and register now, will ya?)

The method I ended up writing looked like this:

@Test
public void tryStartQuiz() throws Exception {
   this.mvc.perform(get("/engine/start/james"))
        .andExpect(status().isOk())
        .andExpect(content().contentType(MediaType.APPLICATION_JSON))
        .andExpect(jsonPath("$.quiz_id").exists());
}

How did I get here?

I upgraded to Spring 3.2, which has native support for loading Web contexts (well, not in a separate-but-parent/child way where you can mount the web context and business context separately, that's coming, but in one context).

Here is the top of my test class:

import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
import static org.springframework.test.web.servlet.setup.MockMvcBuilders.*;

@WebAppConfiguration
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {
   "file:src/main/webapp/WEB-INF/spring/webmvc-config.xml", 
   "classpath:/META-INF/spring/applicationContext.xml"})
public class EngineControllerTest {

    @Autowired
    WebApplicationContext context;

    MockMvc mvc;

    @Before
    public void setUp() {
        mvc = webAppContextSetup(this.context).build();
    }

    ...

Some analysis...

The MockMvc object, which I referred to as this.mvc in my test, allows me to mock up the web container request and record expectations. It is created in the @Before method, after Spring injects a test WebApplicationContext object, which is driven via the @WebAppConfiguration above.

The WebApplicationContext object is a web app engine in a test engine. It boots a Spring MVC platform, mocking the network engine so that you can submit requests with calls like mvc.perform(get(...) ... and chain assertions, using .andExpect statements to build conditions. It's like headless Spring MVC. This allows you to test by submitting URLs but without having to configure Jetty or Tomcat in a complex server bootstrapped integration test.

But where is it looking for my webapp?

As a nice touch, the default path for the web application is src/main/webapp. If you're not mavenized, or have a test version of your webapp you want to use, you can submit the path to it as the value of the annotation, like:

Assertions and matchers

There are several static imports that make life easier, as outlined in this great slide show from the MVC team (Rossen and friends):

import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.*;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
import static org.springframework.test.web.servlet.setup.MockMvcBuilders.*;

I had to hack a bit with the commands and don't have the DSL figured out much so far. But it is nice to test through the request dispatcher rather than inject a controller directly. It's more natural and lets you really test the way production will handle your requests/responses.

What about more sophisticated checks?

The expect syntax doesn't really allow dicing and slicing of the response as easily as grabbing it in a variable. You can tell the mock MVC object to return the result, which contains the MockHttpServletResponse. In this example, I'm using FlexJson (from Roo's dependencies) to deserialize the JSON request into a HashMap of string keys and values, and assert that the data exists in the proper format.

@Test
public void tryStartQuiz() throws Exception {
	JSONDeserializer<HashMap<String, String>> deserializer
			= new JSONDeserializer<HashMap<String, String>>();

	MvcResult result = this.mvc.perform(get("/engine/start/james"))
			.andExpect(status().isOk())
			.andExpect(content().contentType(MediaType.APPLICATION_JSON))
			.andExpect(jsonPath("$.quiz_id").exists())
			.andReturn();

	Map<String, String> jsonPayload =
			deserializer.deserialize(
					result.getResponse().getContentAsString());

	assertThat(jsonPayload.containsKey("quiz_id"), is(true));
	assertThat(jsonPayload.get("nickname"), is("james"));

	System.err.println(jsonPayload);


}

Roo and Spring 3.2

One more thing - I came from Roo 1.2.2, and as I upgraded the spring.version property to Spring 3.2 (yes, it works just fine) so I had to add one dependency in order for this to work, test scoped:

<dependency>
	<groupId>com.jayway.jsonpath</groupId>
	<artifactId>json-path</artifactId>
	<version>0.8.1</version>
	<scope>test</scope>
</dependency>

Roo was just upgraded to version 1.2.3 this week (check it out here). I am hoping it uses Spring 3.2 out of the box.

This test will be checked into the next update of Quizzo-Angular-Roo - my current obsession which is using Spring Roo on the backend, and Angular.JS on the front-end, for a single-page JS quiz engine.

Where to go to view the code?

Today I've pushed this code (somewhat modified) along with working Jasmine tests, AND a working Maven test suite that includes automatic Jasmine testing every time I run mvn test. Check it out at quizzo-angular-roo on GitHub. I warn you, it will be primitive and so far not really doing much, but it will shape up over time.

todo-txt is a very simple format. Described here and with a client for virtually anything (including the command-line, vim, Android, iOS, even WebOS) you can use it from anything, even a text editor. The clients are all savvy with Dropbox, so putting it on ~/Dropbox/todo is all you need to do.

Here is a groovy script I just wrote up to play with my todo list...

def todoFile = new File('./todo.txt')
def fileReader = new FileReader(todoFile)
def todos = fileReader.readLines()
def projects = [:], contexts = [:]
todos.each { it ->
  println it
  def tokenizer = new StringTokenizer(it)
  while (tokenizer.hasMoreTokens()) {
      def token = tokenizer.nextToken()
      if (token.startsWith("@")) {
          def size = contexts[token] ? contexts[token] : 0
          contexts[token] = size + 1
      }
      if (token.startsWith("+")) {
          def size = projects[token] ? projects[token] : 0
          projects[token] = size + 1
      }
    
  }
}
fileReader.close()

projects.each { key, value -> 
  println "Project ${key} : ${value} tasks"
}

println ""
contexts.each { key, value -> 
  println "context ${key} : ${value} tasks"
}

Fun, eh? Now I can rid myself of the OS X reminders system - although I could really use the ability to store these in my Google calendar as timed events with due dates... Hmm...

Turns out there is a new error that shows up if you try to run anything Groovy within a AJDT project (which is the AspectJ Developer Tools plug-in Roo requires to compile all *.aj files when you're using them in the IDE).

You'll get:

Error compiling Groovy project: Either the Groovy-JDT patch is not installed or JavaBuilder is not being used.

I realize from talking to one of the developers at SpringOne that there have been some issues with the way Groovy handles AspectJ compiled classes, and that using Groovy within a Spring Roo project as general code it won't work properly, but this puts a damper on Spock at least from within the STS IDE. I can still run my tests from IntelliJ, however.

I'm going to post a request in the forums that we can turn off this error, so that we can use Spock for testing. So far, at least with Roo add-ons, I have used it to great effect and productivity, so at least for that use case I'd like to have an option to turn it off.

More soon.

Ken

Ok, we've only been hanging out for a little bit, here and there. But one of the things I'm doing is prepping for an updated talk on Spring Roo add-ons at SpringOne/2GX. Rather than repeat the same things again, I wanted to show some practical help for people writing add-ons, things like how to write good tests.

Also, I wanted to point out a few things that need more work, bring up some issues for the JIRA queue, so that we can improve Roo further after SpringOne. We'll get to that later in this article.

Testing add-on availability

Testing whether an add-on setup command is available to expose to the Roo shell can be a bit tricky. For example, in the Spock Roo add-on, I expect that the user's shell is:

• running in a project context
• the project has to contain two maven dependencies for spock-core and spock-spring
• the project has to contain one dependency for the gmaven-plugin to run Spock tests

So, there are several scenarios to test. I started down the road to testing them all individually. Bad developer. First off, there is a sort of truth table here:

Given:

• depa and depb = the correct two Maven dependencies,
• baddep is a Maven dependency completely unrelated
• depabadversion is the same dependency but a different version
• plug-in is the gmaven-plugin from codehaus
• expectedResult is whether or not we can go ahead and install the add-on (i.e. replace what is there)

As I started the third method I saw so much duplication I started to back off. First I removed whatever extra calls I was making to various methods (such as projectOperations.getDependencies()) which made it easier to test (and debug). Then, I pulled out the data table syntax.

Here is what I ended up with. Totally boss, BTW:

package org.sillyweasel.roo.addons.spock
import org.springframework.roo.project.Dependency
import org.springframework.roo.project.Plugin
import org.springframework.roo.project.ProjectOperations
import org.springframework.roo.project.maven.Pom
import spock.lang.Unroll

class SpockOperationsImplTest extends spock.lang.Specification {

  static def depa = 
    new Dependency("org.springframework", "spock-core", "0.6-groovy-1.8")
  static def depb = 
    new Dependency ("org.springframework", "spock-spring", "0.6-groovy-1.8")
  static def depabadversion =
    new Dependency("org.springframework", "spock-core", "0.6-groovy-1.0")
  static def baddep = 
    new Dependency ("org.springframework", "sbad", "0.6-groovy-1.8")
  static def plugin = 
    new Plugin("org.codehaus.gmaven", "gmaven-plugin", "1.4")


  @Unroll
  def "install check - #situation"() {
    given:
      def pom = Mock(Pom.class)
      def operations = new SpockOperationsImpl()
      def projectOperations = Mock(ProjectOperations.class)
      operations.projectOperations = projectOperations

    when:
      def commandAvailable = operations.isSetupCommandAvailable()

    then:
      1 * projectOperations.isFocusedProjectAvailable() >> true
      1 * projectOperations.getFocusedModule() >> pom
      1 * pom.getDependencies() >> deps
      pom.getBuildPlugins() >> plugins
      assert commandAvailable == res

    where:
    deps          | plugins | res   | situation
    []            | []      | true  | "no installedDependencies or installedPlugin"
    [ depa, depb] | []      | true  | "all installedDependencies...
                                      but no installedPlugin"
    [ depa ]      | [plugin]| true  | "some installedDependencies...
                                       and installedPlugin"
    [ baddep ]    | []      | true  | "a different dependency and no plugins"
    [ depa, depb ]| [plugin]| false | "all installedDependencies and installedPlugin"
    [ depabadversion, depb ] 
                  | [plugin] | true | "bad version of a plugin"
  }
}

What's even better...

See the method name at the top? It has an embedded hash mark, and uses the `situation` field, plus the `@Unroll` annotation, to turn the method into five separate test methods on the fly at test time. Niiiice!

Roo's challenges - addon testing

Why am I doing all of my testing in Groovy when Roo is a Java-based framework? Three reasons:

• I want to get rolling on add-ons,
• I need to understand the weaknesses of the add-on API so I can try to help improve it,
• I need to make sure I test the most code for the least effort!

To the middle point: Roo is based on Maven and Spring. It manages a Maven `pom.xml` file, as well as Spring, Java and other artifacts.

Because the Maven files are managed by some Java wrapper classes, written for the purpose of generating Maven POMs, they are currently good enough - you can fill them via an Xml DOM, for example, but they aren't inherently testable.

For example, the Pom class can't be mocked, so I can't inject a fake set of dependencies or plugins. That is, unless I install two Maven test dependencies, both of which Spock told me to use as a helpful hint! They are: `cglib-nodep` for mocking interface-less classes, and `objenesis` for creating instances of classes as Mocks without no-arg constructors. To wit:

<dependency>
  <groupId>cglib</groupId>
  <artifactId>cglib-nodep</artifactId>
  <version>2.2.2</version>
  <scope>test</scope>
</dependency>

<dependency>
  <groupId>org.objenesis</groupId>
  <artifactId>objenesis</artifactId>
  <version>1.2</version>
  <scope>test</scope>
</dependency>

With that, I can use:

def pom = Mock(Pom.class)

See you at SpringOne/2GX

I'll be talking about this and other techniques at SpringOne/2GX in two weeks, and I'll post my presentation later as well. I hope to see some of you there.

Here is a link to the talk.

The coolest thing is that converting my tests to Spock, I had an easy way to do a truth table testing condition when I wanted to try out a number of scenarios. Check out this snippet, specifically the "where:" block and the values from the where block variables within the test conditions.

I've switched this test to the more formal given: when: then: syntax, and added the where: section for the data tables settings. I think I was using setup: instead of given: and I also didn't put my expectations in the then: section, which they evaluate in regardless. It's more readable this way.

Note, the version of the coffeescript add-on listed in the test is irrelevant, as the method called to fetch the plugin ignores it but the Plugin constructor requires a version.

@Unroll("evalto #evalto for project available #available, 
         packaging #packaging and pluginList #pluginList")
def "test isPluginInstalled with scenarios"() {
    given:
    def projectOperations = Mock(ProjectOperations.class)
    coffeescriptOperations.projectOperations = projectOperations
    def pom = Mock(Pom.class)

    when:
    def result = coffeescriptOperations.isPluginInstalled()

    then:
    coffeescriptOperations.projectOperations
            .isFocusedProjectAvailable() >> available
    coffeescriptOperations.projectOperations.getFocusedModule() >> pom
    pom.getPackaging() >> packaging
    pom.getBuildPluginsExcludingVersion(_) >> pluginList

    result == evalto

    where:
    pluginList | available | packaging  | evalto
    [] | false | "foo" | false
    [] | true  | "war" | false
    [] | true  | "pom" | false
    [new Plugin("com.theoryinpractise",
            "coffee-maven-plugin", "1.2.0") ] | true | "war" | true
    [new Plugin("com.theoryinpractise",
            "coffee-maven-plugin", "1.2.0")] | true | "pom" | false
}

I was able to fold five specific test cases checking whether the project contains the Coffeescript plugin into one test with five data settings (all false except one):

• The focused project is not available
• The packaging is a war, the focused project is available, the add-on is not installed
• The packaging is a "pom" and the project is available
• The plugin exists, the type is a war, the focused module is available (happy!)
• The plugin exists (mounted by hand perhaps) on a pom project which is the current module

I used @Unroll to turn the data table results into five separate tests, each of which listed separately in the test results. Note the method name of the test is comprised of literal strings with data from the datatable columns starting with '#'. Nice, eh?

So I was able to collapse five test scenarios into one with the data tables. Nice.

You can pull the git repository for this add-on by using:

git clone git://git.cloudbees.com/sillyweasel/coffeescript-roo-addon.git

Thanks to Manning's Nermina Miller for helping me get it finished, java.net's Kevin Farnham for publishing it, and Manning's Candace Gillhooley for getting the project going.

I anticipate a few more "cutting room floor" articles, since the book took some twisty turns while Srini and I were formulating the content for the final book.