Using Mimosa and Durandal

After looking at a bunch of Web App frameworks, I like the way Durandal works. It’s well-documented and clean. The creator of Durandal also has a build system called Mimosa, and based on his Durandal work I want to give it a try. Yeoman and Grunt have that unix-y undocumented magic that leads to puzzling ickiness, because the mental models are not documented.

File Organization

Switching to my “mimosa-test” directory, I compared the bower.json with that in inqsimtest. To install leapjs and threejs, I did:

bower install leajps threejs --save

The --save flag tells bower to update the bower.json file as well.

Now, the matter of how the code is organized! Let’s compare!

  • InqSimTest, was built using yeoman’s default webapp skeleton, has an “app” folder at the top level, with scripts, components, and styles. Startup is in app/index.html, which loads scripts/main.js. The top level is where node modules and build/config tools live.
  • MimosaTest was built using Mimosa, using a Durandal webapp skeleton. The top level is organized as “assets” and “public”. Assets has all the fonts, images, javascripts, and vendor libraries, and is compiled into Public. main.js is in The rest of the top level is much like the InqSimTest, with build.config tools and node modules. However, the build tool is Mimosa, not Grunt.

Mimosa’s source files are in the view and assets/javascripts/app/ folders. The application starts by loading view/index.html, which loads javascript/app/main.js.

Durandal has the notion of routes, viewmodels, and views. It uses KnockOut to bind viewmodels and views together. It also can “composite” views together, which I think means you can write separate code to handle multiple subviews, and have it composited into the main view. This is done through KnockOut, using a “compose” verb.

<div data-bind="compose:'views/header.html'"></div> just composes the html. <div data-bind="compose:'viewmodels/header'"></div> loads the viewmodel and associated view (?).

So Durandal is like a framework built around KnockOut. My question is: how does the viewmodel javascripts talk to a central controller object?

… taking a break … maybe I should reread knockout js, but I think I’ll come back and just wedge code in.

Continuing Thursday, January 16

Started by attempting to copy main.js from inqsimtest to mimosatest. Main.js actually loads app.js. THe difference is that inqsimtest’s app.js is a module written by us, whereas in durandal app.js is a controller that handles routing. IT has a set of conventions. First the

It passes control to an initial viewmodel called shell through a app.setRoot() call. The shell viewmodel itself as a module that:

  • depends on plugins/router and durandal/app
  • returns router: router
  • returns method search()
  • returns method activate()

The concept behind Durandal is that each application “view” is a module, and each model has a view and viewmodel. The way that the page looks is the view, and the data that is populating the view is in viewmodel. The viewmodel is bound to the view through KnockoutJS.

I’m quickly getting stuck in the weeds. There’s a lot to look at here as far as application conventions go. Take a deep breath. What do I want to do is just get our stupid code running. I am just not sure where to put it. I think what I need to do is make it into a view of its own. A viewmodule is our module! our organizational principle is that views are modules. Then there’s hidden secret stuff.

@InqSim Prototype Step 3: Implementing the Skeleton Front End

GoalSetting

Is there an advantage to creating a simple HTML prototype? Not really, because routing isn’t handled. Durandal will help set up a skeleton. We’ll make a simple base application with two pages.

Installing Mimosa

I might as well give this a whirl. Installing it globally with npm install -g mimosa while I am in my user directory

Exploring Mimosa

The documentation at mimosa.io is excellent. The configuration file is mimosa-config.coffee, but Mimosa is a conventions-based system.

Do mimosa skel:new durandal. Then, make start followed by browsing to http://localhost:3000.

  • Uncompiled assets are stored in “assets’ folder.
  • Compiled assets are stored in “public” folder.

Installing libraries:

  • Mimosa works with Bower to install dependencies where they belong, in the vendor directories usually.

Running Mimosa means:

  • mimosa watch --server — starts watching filesystem, starts app server. It will compile all CSS, Javascript, and Microtemplates
  • Mimosa supoprts growl!

Deploying:

  • mimosa watch --server --minify – create optimized static sources
  • mimosa watch --server --optimize – build optimized javascript file, based on requirejs dependencies. Also minifies through r.js.