Search

Where mobile meets JBoss

Announcement:Video Posted: Kick Start Your HTML5 Mobile Application On JBoss AS7

Plain Old HTML5
Mobile Web and JSF
Server Side

Mobile Web

Plain Old HTML5 (POH5)
RichFaces and JavaServer Faces

Hybrid & Native

 

Server Side Resources

OpenShift PaaS

 

Aerogear News

From Cloud to Mobile and Back Again with AeroGear

Monday, I had the opportunity to speak at OpenCloudConf in Sunnyvale California. I spoke about the new AeroGear project at Red Hat, of which I am a team member, and how we are developing mobile web apps and hybrid apps for JBoss AS7 and how the cloud, in specific OpenShift, play a role in that effort. This post is a brief summary of that talk for those who couldn’t make it to OpenCloudConf, those that were there but may have gone to another workshop at the same time or those that are just interested in mobile development and OpenShift.

In my talk, I gave a quick intro about the AeroGear project. Basically, AeroGear is all about making mobile development as quick and easy as possible on JBoss through community, education and innovation by creating examples and tutorials for people to use and getting feedback from users on what would make mobile development on JBoss easier for them. After that, I did a quick run-through on the tools and technologies we are currently using, a few of which include JBoss AS7, JBoss Tools, RestEasy, jQuery/jQuery Mobile and Apache Cordova. That was pretty much the extent of my slides because I wanted to dive straight into an example application and look at some of the code and techniques we use to mix mobile and cloud technologies.

The first example I did was to quickly run through the AeroGear kitchensink quickstart. Many of the JBoss projects have what we call quickstarts which are a way to quickly get up and running with the particular technology that project is using, building and supporting. Using the steps described in our Get Started with HTML5 Mobile Web Development with JBoss wiki article, I was able to show attendees how to generate a new project in JBoss Tools from our Maven archetype, start up JBoss AS7 locally on their computer and then deploy that generated project to the server and see it up and running in just a few minutes. We then walked through some of the cool features of that web app including its dual desktop/mobile features and how we use some responsive design techniques and jQuery Mobile to make that possible.

From there, we walked through how to deploy this project to OpenShift. For those who don’t know, OpenShift is Red Hat’s free, auto-scaling Platform as a Service (PaaS) for applications. As an application platform in the cloud, OpenShift manages the stack so you can focus on your code. With OpenShift, we can easily deploy our project to the cloud and have it available to the world in just minutes. And with JBoss Tools, it’s even easier because the ability to create and deploy a project to OpenShift is done in just a few clicks. You can get more information about that process in our wiki article titled Converting an AeroGear POH5 Web App to a Hybrid App with Apache Cordova.

The final example was more mobile focused. My last blog post, A Trip Through Cordova, talked about how I took our quickstart and converted it to a hybrid application using Apache Cordova. In that app, I added a very simple bit of code to display the network connection status of the device just to show that we actually had access to native device APIs. What I wanted to do for this workshop was to take that a step further and do a little bit deeper device integration and somehow tie that back to the cloud. What I decided to do was to integrate the device contacts with the member list that was being displayed and updated in the quickstart. I provided both the ability to add a member from the list to the devices contacts, as well as, populate the member registration form with information from a contact in their devices list of contacts. And because the hybrid app still uses the OpenShift hosted version for its data store, anyone who installed the app or used the web based app would have their member lists always stay in sync.

Overall, attendees seemed to enjoy the presentation and hopefully learned a little bit about how to go mobile with JBoss and OpenShift. The few slides I used for this presentation are available on my website and all of the code for the examples I presented are available at the following links:

One final important note. The OpenShift team announced the release of OpenShift Origin, the source behind OpenShift. This is really exciting and gives you the chance to see how OpenShift works and even implement your own PaaS if you want so definitely check it out!

AeroGear 1.0.0.M3 Released! Welcome To Hybrid

We've just released the next milestone of AeroGear, 1.0.0.M3b. In this release we've created a hybrid mobile application using Apache Cordova/PhoneGap, started a Ruby/TorqueBox example, further refined the core POH5 quickstart/archetype, and started work on security, and a light weight MVC for integration.

The getting started wiki is fully updated, and we've also added a repository and wiki page to kickstart your Cordova application with AeroGear. The great thing about Plain Old HTML5 (POH5) and Cordova is that nearly all of the web based functionality is the same, so our Deep Dive wiki gives you all the details you need to build your own.

Notable Updates

Whats Next

With M3 we've started development into new mobile technologies, and functionality. For M4 we'll be completing the TorqueBox example, updating the Cordova application, working on a new shopping cart example, and focusing on getting an alpha version of the security/mvc work in place.

The M4 release will likely be a shorter release for various reasons, so we'll get what we can in for it, and plan to have as much as possible ready by the time JUDCon and JBoss World comes around in June!

A few of us will speaking at JBoss World, specifically myself, and Doug Campos a.k.a. Qmx. We'll be discussing AeroGear and much of the work and features above, plus some extras! Also as part of the Mobile/HTML5 BOF several JBoss core engineers and experts will also be discussing the future of mobile development both at Red Hat, and the larger enterprise ecosystem, so join us there! If you want the latest, and I'm sure you do, register for JUDCon Boston, and/or JBoss World 2012!

Community Role Call

Aerogear is a new open source project, and like any other new project we would love developers to stop by, check us out, give us some feedback, and join our ranks if you're interested! If you've got mobile or HTML5 requirements and you're wondering how to move forward post to our user forums, or stop by #aerogear @ irc.freenode.net.

We're always looking for new team members, so if you've got server/client side skills, mobile, HTML5, or native/hybrid app experience, and a great attitude let us know! You can also just jump right in by checking out our Contributing to AeroGear page.

[AeroGear Project] [GitHub] [Twitter] [User Forums] [Dev Mailing List]

backing mobile web apps with java?

My latest task at AeroGear team was to do some research on how could we improve the Java server-side support for mobile web apps, but how different is a mobile web app from a normal web app?

http://www.flickr.com/photos/adwriter/330289325/sizes/s/in/photostream/

Knowing that it would be impossible to cover all the scenarios, I picked one and started digging.

single-page application + rest

Let’s picture this kind of application:

  • a single HTML page that loads all the static resources (JavaScript libraries, CSS, fonts, images)
  • the main application is written in JavaScript, using frameworks like jQuery, jQuery Mobile, backbone.js, ember.js, etc…
  • tons of REST endpoints

Note that you want to have just a little bit of server-side templating/rendering for this single page, at least to have a pretty URI (instead of linking to the .html file directly).

We cannot afford to talk about web stuff without taking a look at stuff made for the Ruby language, so let’s get inspiration there!

Ruby

My gut reaction says that this is a perfect case for using Sinatra, a very terse ruby framework:

sinatra

The main page => myapp.rb

require 'rubygems'
require 'haml'
require 'sinatra'

get '/home' do
    haml :home #will render views/index.haml
end

The template => views/index.haml

!!! 5
%html
    %head
        %title Home
    %body
        %h1 Hello World

If you don’t know haml, is a markup for generating HTML with a terse syntax (I personally don’t like it that much, but it helps on saving keystrokes for a blog post).

Small, eh? What about seeing how could we do the same with Rails?

Ruby on Rails

On Rails, we have centralized routing, so we would have an entry on the routes file => config/routes.rb

match '/home' => 'home#index'

This route will ensure that when we access /home the framework will call the index method on the HomeController class. Yay to conventions! => /app/controllers/home_controller.rb

class HomeController < ApplicationController
    def index
    end
end

Again conventions making things just work, this will call /app/views/home/index.html.haml (if you have haml support enabled, naturally)

Before someone starts complaining that this is cool but not Java, let me remind you that this works perfectly on the JVM thanks to JRuby. You just need to choose a server like TorqueBox and you’re all set.

How can we have something like this, but for java?

Java

Since the Java language gained metadata support through annotations, lots of developers started (ab)using it for a myriad of tasks, in special for declarative configuration.

As expected, almost everything has its pros and cons, and this is no different here. Several web frameworks, like Struts, Spring MVC, VRaptor used annotations to setup their routes instead of having extensive XML files. This is very good for the majority of cases, but can hurt when you have many different routes (try to imagine an application with 200+ endpoints).

What if we went back to having centralized routing again?

As I was digging more the code of some Java MVC frameworks, I started to see a pattern, where they usually grow to supply their userbase needs, and start being a little heavyweight. I really wanted something minimalist for AeroGear server-side support, so I started gathering ideas together with our team, and laid out some basic prerequisites to begin with.

  • very fast bootstrap time
  • centralized routing
  • POJO-based controllers (nothing new here)
  • immutable parameter beans support
  • first-class CDI support
  • pluggable view resolving

Note that all the cited frameworks do an amazing job; here we are making architectural tradeoffs to achieve some specific goals.

This research led to this PoC

disclaimer: as this is a PoC, nothing is written on the stone - everything is subject to change, and the code is nowhere production ready! this is just a bunch of ideas!

very fast bootstrap time

For this PoC, I avoided using annotation metadata, to reduce the boot times by avoiding classpath scanning. It can prove itself a premature optimization, but I’m happy with the results for now.

centralized routing

We know that the Java language is verbose by nature, but at the same time, it has superb IDE support, so the initial approach for configuring routes is to use programmatic routes, with help of a nice internal DSL:

public class Routes extends AbstractRoutingModule {

    @Override
    public void configuration() {
        route()
             .from("/home")
             .on(GET)
             .to(Home.class).index();
    } 
}

Note that this code is autocompletion aware and refactor-friendly!

pojo-based controllers

The Home controller is a POJO in all its glory:

public class Home {
    public void index() {
    }
}

first-class CDI support

Having full CDI support means that you can inject other objects in your controllers, as usual:

public class Products {
    @Inject
    public Account(ProductRepository repository) {
        ...
    }
}

immutable parameter beans support

Making immutable objects when possible is a good thing:

public class Car {
    private String color;
    private String brand;

    public Car(String color, String brand) {
        this.color = color;
        this.brand = brand;
    }

    public String getColor() {
        return color;
    }

    public String getBrand() {
        return brand;
    }
}

You can use immutable beans straight away as controller parameters, thanks to Iogi:

public class Store {
    public Car save(Car car) {
        return car;
    }
}

This can be populated by putting a route to it (preferrably via POST, of course):

route()
   .from("/cars")
   .on(POST)
   .to(Store.class).save(param(Car.class));

And you can use a simple html form for it, by just following the convention:

<input type="text" name="car.color"/>
<input type="text" name="car.brand"/>

The car object will be automatically populated with the provided values - note that it supports deep linking, so this would work fine too:

<input type="text" name="car.brand.owner"/>

All the intermediate objects are created automatically.

pluggable view resolver

When you access /home, the page /WEB-INF/pages/Home/index.jsp will be rendered by default (by following the convention of /WEB-INF/pages/Controller Class Name/method name.default extension)

Currently only JSP files are supported but I’m working on providing haml support too through the aerogear-haml.

You can find the PoC sources here.

Thoughts?

A Trip through Cordova

Well, not really. I wish I had gone to Spain but for now, I am talking about the project formerly known as PhoneGap which has been renamed Apache Cordova. The Apache Software Foundation has taken PhoneGap under its wing as a project in incubation and has renamed it Apache Cordova. I have wanted to do something with Cordova for a while now and working on the AeroGear project gave me that opportunity. iPhone with Network Connection MessageWhat we wanted to do was take our existing Plain Old HTML5 (POH5) quickstart app and see just  how easy (or hard) it would be to convert it to a Hybrid (web app with access to native API’s) application, using Cordova. It turns out, it was really simple! For a full, step-by-step procedure for accomplishing this goal, check out my article about it on the AeroGear Wiki.

The result of this experiment is a simple message stating the type of network connection the device is currently using. This doesn’t seem all that useful so why would I do this? Well, right now, it’s just a proof of concept. I wanted to be able to show that a properly built web app could easily be converted to a hybrid app with Cordova. But think of the possibilities. Cordova gives us access to the native API’s of the device you’re on. This simple list of members could easily be modified to access the device’s camera and attach a photo of the member being added, the devices contacts could be used to either submit new members or the list of members could be added as contacts, there are even device storage options that can be used for offline implementations and member list syncing.

This is a very exciting time for us on the AeroGear team. There are many big things on the horizon and much more in terms of Cordova and native apps. Keep an eye on this blog and I will keep you posted on all of the awesome things we are building. If you have any questions or run into issues, feel free to shout at me or any member of the AeroGear team on twitter (@AeroGears), IRC (#aerogear on Freenode) or on the user forum.

AeroGear 1.0.0.M2 Released! More Mobile Goodness

The AeroGear project has just released 1.0.0.M2c as our first followup since launch! This release was focused on improving the archetype and quickstart mobile/html5 examples. They got more than just a new look and feel though. We added better device detection, improved our responsive design, integrated with JBoss Tools, JBoss AS 7.1, and more...

The getting started wiki has been fully updated to show you how to build your own mobile/HTML5 based application. This means built, tested, and deployed to JBoss AS 7.1 in just a matter of minutes. Giving you a great base to build your own application from. Then our deep dive wiki gives you all the details you need to need for our HTML5, CSS3, jQuery Mobile, JAX-RS endpoints and more.

Notable Updates

Here are some of the notable updates to our core example and archetype:

Whats Next

We're still just getting started, and our M3 release is going to dig into more advanced areas. We'll be looking at hybrid application support, application based security for clients and endpoints, and more. We'll also be creating our own advanced example set to showcase different technologies and approaches for mobile development with JBoss.

Stay tuned for 1.0.0.M3 in the next 6-8 weeks, and remember this is open source - so if you've got an itch and an idea stop by our forums, or our IRC channel to share! If you are interested in a more permanent situation - we're hiring!!! We're working on all aspects of mobile development, so if you want to play with some of the hottest technologies on the planet - contact me!

Community Call To Action

Just as a reminder we’ve got team meetings on IRC at #aerogear @ irc.freenode.net, user, and developer forums, all of our code is up on github for sharing, and we’re always looking for motivated developers to step up and join the team!

Success comes with a strong community, and everyone getting involved however they can! Bring your questions, and opinions, and let's hear from you!!

[AeroGear Project] [GitHub] [Twitter] [User Forums] [Dev Forums]

View more aerogear news
         

5 Minutes to Mobile

Follow Aerogear on Twitter

Get Some Cool Stuff

Swag | Desktop wallpaper

Supported In:


 

Sponsored by

About | Contact Us | Jobs | Help