Category Archives: open source

IBM Acquires StrongLoop – Leveling Up Node.js in the Enterprise

Today IBM announced the acquisition of StrongLoop, Inc,  leaders in enterprise development on Node.js and major contributors to Express, LoopBack, and other Node.js tools and frameworks.


Node.js is an incredible tool for rapidly building highly performant and scalable back end systems, and you develop it using a familiar core language that most front-end developers are already accustomed to, JavaScript. This acquisition is positioned to greatly enhance Node.js in the enterprise, and StrongLoop’s offerings will be integrated into IBM Bluemix, IBM MobileFirst, and WebSphere.

Even though the acquisition is still “hot off of the presses”, you can start using these tools together today:

You can read more about this acquisition and the future vision between IBM and StrongLoop on the StrongLoop blog, IBM Bluemix Blog, and IBM MobileFirst Blog.

If you haven’t heard about StrongLoop’s LoopBack framework, it enables you to easily connect and expose your data as REST services. It provides the ability to visually create data models in a graphical (or command line) interface, which are used to automatically generate REST APIs – thus generating CRUD operations for your REST services tier, without having to write any code.

Why is this important?

It makes API development easier and drastically reduces time from concept to implementation.  If you haven’t yet looked at the LoopBack framework, you should definitely check it out.  You can build API layers for your apps literally in minutes.  Check out the video below for a quick introduction:

Again, be sure to check out these posts that detail the integration steps so you can start using these tools together today:



Complete Walkthrough and Source Code for “Building Offline Apps”

I recently put together some content on building “Apps that Work as Well Offline as they do Online” using IBM MobileFirst and Bluemix (cloud services).  There was the original blog post, I used the content in a presentation at ApacheCon, and now I’ve opened everything up for anyone use or learn from.

The content now lives on the IBM Bluemix github account, and includes code for the native iOS app, code for the web (Node.js) endpoint, a comprehensive script that walks through every step of of the process configuring the application, and also a video walkthrough of the entire process from backend creation to a complete solution.

Key concepts demonstrated in these materials:

  • User authentication using the Bluemix Advanced Mobile Access service
  • Remote app logging and instrumentation using the Bluemix Advanced Mobile Access service
  • Using a local data store for offline data access
  • Data replication (synchronization) to a remote data store
  • Building a web based endpoint on the Node.js infrastructure

You can download or fork any of the code at:

The repo contains:

  • Complete step-by-step instructions to guide through the entire app configuration and deployment process
  • Client-side Objective-C code (you can do this in either hybrid or other native platforms too, but I just wrote it for iOS).  The “iOS-native” folder contains the source code for a complete sample application leveraging this workflow. The “GeoPix-complete” folder contains a completed project (still needs you to walk through backend configuration). The “GeoPix-starter” folder contains a starter application, with all MobileFirst/Bluemix code commented out. You can follow the steps inside of the “Step By Step Instructions.pdf” file to setup the backend infrastructure on Bluemix, and setup all code within the “GeoPix-starter” project.
  • Backend Node.js app for serving up the web experience.


New UI Article and Architectural Presentation on PhoneGap

A couple of PhoneGap related activities I’ve been up to recently…

First, an article I recently wrote on Creating a Card-based UI in PhoneGap has been published on DZone.  Be sure to check it out for some tips on creating the user interface, all with just HTML, CSS, and JavaScript.   This covers both basic/static and dynamic use cases.


Second, a video of my presentation on “Architectural Considerations for PhoneGap and Mobile Web Apps” has been published by the Atlanta HTML5 meetup group.  Check it out in the video below, and if you’re in the Atlanta area, be sure to check out the meetup group!  Here’s the presentation description:

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

… and here’s the actual presentation video:

If you’re reading this, and wondering what PhoneGap is:

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

You should definitely check it out, and enjoy!

PhoneGap & Hardware Session Video now Available

The recording for my session “PhoneGap and Hardware” from PhoneGap Day back in July is now available! Be sure to check it out. There were apparently some issues with the audio, but you can still hear everything.

I’d like to express a huge Thank You to everyone who attended, and to everyone who watches this video!

Below are the sample projects I showed in the presentation, including source code. However, keep in mind that all of these examples were written before PhoneGap 3.0. The native plugin syntax, and inclusion methods have changed.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at:

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links

Status Tap/Scroll To Top in PhoneGap Apps on iOS

One criticism of PhoneGap apps that I sometimes hear is that they often don’t have “standard” features from the native operating system.  Little things, like iOS’s ability to scroll a container back to the top, just by tapping on the operating system’s status bar. These types of features are not hard to add to a PhoneGap application, at all. This is more of an “attention to detail” issue, not something that the platform can’t do.

Since this isn’t a feature that is applicable on all platforms, and it can vary per PhoneGap app implementation, it is not part of the core PhoneGap/Cordova download.  However, this can be very easily added via a native plugin.  Native plugins enable you to access native code, or augment the capabilities of PhoneGap for a particular platform.

Here’s proof… I just added the “scroll to top” capability to my Halloween PhoneGap app.

If you download the app from the app store today, you won’t see this yet because I literally *just* submitted it to Apple.

So how did I do this?

It wasn’t hard. The first thing to do is check and see if there was an existing native plugin that has already been created by someone in the PhoneGap/Cordova community.  It turns out, Greg pointed out one that already existed.  Since this plugin was built targeting an older version of PhoneGap, and my project was built using PhoneGap 3.0, I had a few minor updates.  Though, I was able to get everything all set up in a very short period of time.

Here’s what I did:

  1. I forked the existing plugin.
  2. Added plugin.xml metadata so the plugin can be included via PhoneGap & Cordova CLI tools.
  3. Added logic in the JavaScript so that it auto-initializes – you no longer have to manually initialize the plugin.
  4. Moved the native Objective-C initialization logic into a background thread.

Now that I’ve done this, and pushed it to github, you can include it into your own PhoneGap projects with a single command using the PhoneGap CLI:

phonegap local plugin add

Then, in your PhoneGap application, you just have to add an event listener for the “statusTap” event, which is triggered when the user taps on the operating system’s status bar.  It is literally this simple:

window.addEventListener("statusTap", function() {
  alert("status tap");

This just shows an alert that the status bar was tapped. If you want to animate specific containers, you have to do this manually yourself via JavaScript. Again, that isn’t hard to do. Here’s an excerpt that I used from the Halloween app, using jQuery syntax:

window.addEventListener("statusTap", function() {
    var target = $("#scroller");

    //disable touch scroll to kill existing inertial movement
        '-webkit-overflow-scrolling' : 'auto',
        'overflow-y' : 'hidden'

    target.animate({ scrollTop: 0}, 300, "swing", function(){

        //re-enable touch scrolling
            '-webkit-overflow-scrolling' : 'touch',
            'overflow-y' : 'scroll'

This disables touch scrolling to kill any inertial scrolling in progress, animates the scroll to top, then re-enables touch scrolling once the animation is complete.

That’s it…  Go check out the code, fork it, or use it in your own project: