Famo.us on devices with Grunt and Cordova

The all mighthy famo.us people are building a wrapper for native apps as we speak I’m hearing. It’s supposed to be better then Cordova/Phonegap, but since I’m pretty familier with Cordova I thought of giving it a go and testing the juice.

What do you need?
1: Yeoman famo.us generator
2: Cordova installed and available on command line.

Lets do this!
First I created a project:

yo famous

Then I created a new Cordova project, and added the iOs platform with a plugin:

cordova create platforms com.frankbolviken.Geo Geo
cd platforms
cordova platform add ios
cordova plugin add org.apache.cordova.geolocation

Now there is a Cordova project defined, with iOs added as a platform with the addition of a geolocation plugin. As I inspected the platforms/www directory, I saw that there was a folder there. I deleted that, so that it only contained config.xml. Same for platforms/ios/www.

Basically I had now everything I needed to test this, but I wanted to do more! I wanted to optimize it so that I did not manually have to copy stuff to the platforms/www folder, and then initiating a build.

Whats next?
I wanted to be able to just to a simple command like ‘grunt native’, and It should build everything, copy the resources to platforms/www folder and initiate a Cordova build.

First step was to make sure that Grunt automagically copied the stuff needed to the platforms/www folder.
1: in grunt/copy.js I added the following lines after ‘dist’:

deploy: {
      files: [{
        expand: true,
        cwd: '<%= config.dist %>',
        dest: 'platforms/www',
        src: ['**/*']
      }]
  }

I then added a new task in Grunt, which build the project, and copied the required content:

 grunt.registerTask('native', [
    'build',
    'copy:deploy'
  ]);  

If I know executed ‘grunt native’ in the terminal, the source was built, and copied. Sweet!

Enter Exec
I wanted to also automatically create the Cordova build, so that the only thing I needed to do in XCode was to hit “play”.
Firstly, I installed the grunt-exec plugin:

npm install grunt-exec --save-dev

I then added a new file inside the grunt folder, called exec.js with the following content:

// Copies remaining files to places other tasks can use
module.exports = {
    native: {
        cmd: 'cordova build ios',
        cwd: 'platforms',
        stdout: true,
        stderr: true
    }
};

Lastly I added the exec:native target in the native task we created earlier, so that it looks like this:

  grunt.registerTask('native', [
    'build',
    'copy:deploy',
    'exec:native'
  ]);  

When I know executed ‘grunt native’, the application was build and copied to platforms/www, and the iOS project was build.
I opened up the project in XCode, hit “play”, and wolla.. Win!

Advertisement

Famo.us with Google Maps – dragging on devices

Background

I’ve been experimenting with the interesting famous framework for the last couple of days. I won’t go into details about what it is and how it works here, but basically it’s a new way of working with the DOM with pure javascript, to create html5 applications for mobile devices. I’ve been using a lot of Sencha Touch for this matter before, both work and private applications but I have not been too happy with the performance (all tough not bad!).

So I decided to test this framework by creating a small and simple application using Google Maps to view a map (wow, thats advanced!).

Problem arises

Step one was adding a surface with placeholder for maps component:

var mapSurface = new Surface({
content: '<div id="myMap" style="width: 100%; height: 100%;"></div>'
});

First trick.. needed to add the actual instantiation of the map inside a Timer (if not, the map wont load).

setTimeout(function() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById('myMap');

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('myMap'),
mapOptions);
}, 1000);

It all worked nice in the browser, but when testing on a device (using cordova/phonegap) I could not scroll the map by dragging the finger.
After a lot of back en forth, i was pointed in the direction by @zawaung on Twitter, saying that famo.us prevented scrolling in browser (thereby disabling dragging in the google maps component).

Solution

Since the boilerplate code is using a CDN delivered minified version of the famo.us javascript library a different approach was needed. So heres what I did.

1: Installed famous generator for yeoman
2: Created new project in command line: yo famous
3: Commented out line 120  – 122 in Engine.js (which disabled touchmove event)

// prevent scrolling via browser
// window.addEventListener('touchmove', function(event) {
// event.preventDefault();
//}, true);

4: Build the project: grunt
5: Wolla, works!

Hope this will save some time for some people out there!

Extjs: Build and Deploy CONTINUED

I have created a little repo in GitHub:
https://github.com/frankbolviken/sencha-plugin-gradle

This gradle (SUPER BASIC) plugin should simplify the process of building an production ready version of an ExtJS application, with automatic swapping of index-files, including of resources, and configuration project and company name in the build files. Unfortunatly I haven’t had the time to develop this further, so the features are for now really basic.

Extjs: Build and Deploy

So… I have this problem.

I’m trying to integrate Extjs with some kind of building tool, and using SDK tools to build and minify the app. I’m wondering if anyone out in the big world is using this approach? Or maybe you have fallen back into using something else to achieve this?

If you are reading this, and have any tips/suggestions, or you would just like to have a discussion on this subject, feel free to leave a comment or mail me at frank.bolviken(at)gmail.com

Cheers, 

Frank

Welcome

Thought I’d jump on the bandwagon and started blogging. Will focus on development and webdesign subjects.

Currently working in a big project which I have architectural responsibilities on the client side (ExtJS). Don’t be suprised if there will be a few posts about that. Other than that, if I come over anything interesting I will share that on this blog 🙂