tisdag 11 mars 2014

Building Cordova apps with Yeoman

It is really quite easy to get Yeoman and Cordova to work together:
First install all the required stuff:

$ npm install yeoman -g
$ npm install cordova -g




In this example I am using the angular generator, but it should work with any yeoman generator

$ npm install -g generator-angular




Now, create a yeoman app

$ mkdir myAngularApp
$ cd myAngularApp
$ yo angular

Then, create a subfolder where the cordova stuff will live:

$cordova create cordova
$cd cordova

Add some platforms (ios, android). Note that each platform require their own sdk:s, which you will have to install. I am using ios.

$ cordova platform add ios  

back to the yeoman app
Aaaalmost done. We just have to make some changes to our Gruntfile. We want grunt to copy all of our yeoman stuff into the cordova app, so open the gruntfile.

First, change the dist folder to
dist: 'cordova/www'
This means that any time we run
$ grunt build
our minified scripts will be put in the cordova folder.

But it is really difficult to debug minified code, so we also want to be able to publish our source code. Add the following to the copy section of the grunf file:

cordova: {
        files: [{
          expand: true,
          dest: 'cordova/www',
          cwd: 'app',
          src: [
            '**',
          ]
        }]
      },


Now, by running

$ grunt copy:cordova

 we copy all of our source code over to cordova.

Now try it out by running

$ grunt copy:cordova
$ cd cordova
$ cordova run ios

This should open up an ios simulator, or deploy to an ios device if it is connected via usb cable to the computer.

fredag 20 september 2013

Backgrid and CouchDB changes

According to the Backgrid documentation, the way to save our Backbone models to the database is by building our models like:
var MyModel = Backbone.Model.extend({
  initialize: function () {
    Backbone.Model.prototype.initialize.apply(this, arguments);
    this.on("change", function (model, options) {
      if (options && options.save === false) return;
      model.save();
    });
  }
});
That looks good at first, but will become a real problem if we use CouchDB and _changes to get real time data in our app. What happens is: We change our model -> it get persisted to Couch. Couch informs all listeners that a document has been changed, which meens that our Backgrid app will change the model, which in turn will trigger the change event in our model. Then: a new save to Couch and so forth. Can anybody spot an infinite loop? What we did instead was to have our models simple like this:
var MyModel = Backbone.Model.extend({
});
And then, in our view where we instansiate the grid, include the following.

var bg = new Backgrid.Grid({
    columns: gridColumns,
    collection: self.collection,
    footer: footer
});

bg.listenTo(self.collection,"backgrid:edited",function(model){
    if(Object.getOwnPropertyNames(model.changed).length > 0){
        model.save();
    }
});

tisdag 17 september 2013

How to solve $.browser errors when using Backbone + CouchDB

We are building an application using Backbone + Marionette + Require, and decided to go for CouchDB as our backend. Since all we are doing in the backend is basic CRUD we beleive that going directly towards a Couch db will really speed things up.

It's really quite simple to set up, but there are some caveats that has to be resolved.

First of: The jquery-couch is using a $.browser function, which is really old and not existing in newer jQuery versions. To solve that, you can either rely on an jQuery version from the Jurassic period, or you can include the jquery-migrate.js


tisdag 27 augusti 2013

Jasmine test a require.js + backbone + marionette application

We are building an application using Backbone. And since just about everyone talks about using Require.js, this was an obvious thing to do. The application gets really neat, but it turns out that testing the application is a bit harder...

Just in case someone stumbles upon this, here is a small gist on how I did it:
https://gist.github.com/me97esn/6353749

måndag 29 april 2013

Porting a Java Spring Hibernate Maven application over to Grails - Part 1

If you want to learn to build an application from scratch, there are plenty of tutorials available online. But what if you are stuck with an existing Java application, how easy is it to port it over to Grails? If the existing application is using spring, maven and hibernate or JPA, it is actually quite easy. But before we start the porting, lets look at the Grails architecture compared to a "standard Java architecture":
As you can see, the architecture of Grails is quite similar to the one on the left (which is a Java + Spring MVC application I pulled from GitHub).
There are some small differences:
- Grails has no DAO-layer (What! No more DAO? That's the most fun of all the Java programming I do!)
- The Java application on the left hand side uses Maven to handle dependencies and building, Grails on the right handles dependencies and building on it's own (If you want, you can choose to continue to build with Maven, more on that later in this article).

The similarities makes the porting over to Grails pretty painless, hopefully we only have to place the files in the correct place according to the Grails conventions, and we're good to go.

Next up, part2

fredag 26 april 2013

Porting a Java Spring Hibernate Maven application over to Grails - Slides

Yesterday I gave a presentation at https://sites.google.com/site/stockholmgtug/Home/april-mte-2013 about how to port an existing java application over to Grails. This is the slides from that presentation. http://www.youtube.com/watch?v=msr3LcDjmIc&feature=youtu.be

onsdag 21 mars 2012

Testing a JSON-RPC service with Firefox

Let's say you've created a json-rpc service like suggested here and you want to verify that it works. How can you do that?
The easiest way I've found is with the RESTClient plugin to firefox.
I have created a 'hello' method in my service, without any parameters, and am calling it like this: