Pressing Pause while Compile, Dammit Ramps Up

I know that my blogging here has been sporadic. And I'm not alone: a number of my colleagues were in the same boat. So Joe Rinehart, Nic Tunney, Marc Esher, Scott Stroz, Todd Sharp and myself have decided to pool our resources. We've started a group blog called Compile, Dammit.

This is an experiment, but so far it's going extremely well. Having multiple people working on the same blog means a lot more posts and a wider variety of perspectives. I think this is a very interesting idea that I haven't really seen tried before.

The focus over on Compile, Dammit will be in two main areas: server development (Groovy, Grails, Spring, etc.) and client development (RIAs, ExtJS, JavaScript, CoffeeScript, jQuery, etc.). This isn't a hard-and-fast rule, and we'll likely see content on a whole range of topics. But most of the content will probably fall under those two umbrellas.

So, I'll probably be pressing pause on this blog for a bit while I contribute to Compile, Dammit. If you're interested in topics like this, you should definitely add our new group blog to your reading list!

Comments Comments (0) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 5850 Views

CoffeeScript Version of the ExtJS Car Store

As I mentioned in my previous post on using DeftJS, I've also adopted CoffeeScript. I've pushed a CoffeeScript version of the Car Store sample application to GitHub if you'd like to look through the source code.

Since the application looks exactly the same, there's no point in uploading a second running version. The main difference is the fact that the code is written in CoffeeScript and then compiled to JavaScript.

[More]

Comments Comments (0) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 5265 Views

Getting Started with CoffeeScript

I've found CoffeeScript to be a great help when writing JavaScript. Since most of my future posts on Ext JS will probably be in CoffeeScript, I thought I'd explain the basics of how I use it.

The easiest way to start is to download and install Node.js. Then, install CoffeeScript by opening a command line and running:

npm install -g coffee-script
		

That's all there is to the installation. To use CoffeeScript, you can perform a manual build at the command line to generate the equivalent JavaScript. I won't even bother showing this, because that sort of manual process is definitely something I don't want to do. Happily, CoffeeScript includes a simple build system using a file called Cakefile. Here is a starter version of this file:

fs = require 'fs'

{print} = require 'util'
{spawn} = require 'child_process'

build = (callback) ->
  coffee = spawn 'coffee.cmd', ['-c', '-o', 'app', 'coffee']
  coffee.stderr.on 'data', (data) ->
    process.stderr.write data.toString()
  coffee.stdout.on 'data', (data) ->
    print data.toString()
  coffee.on 'exit', (code) ->
    callback?() if code is 0

task 'build', 'Build /app from /coffee', ->
  build()
		

Running cake build at the command line will recursively find any .coffee files in the folder /coffee and generate JavaScript in the folder /app. Obviously, you're free to change the folder names and paths as you need to.

So that's better, but still not ideal. I don't want to have to manually run cake build over and over. We can take things further by adding a watch command to the Cakefile:

fs = require 'fs'

{print} = require 'util'
{spawn} = require 'child_process'

build = (callback) ->
  coffee = spawn 'coffee.cmd', ['-c', '-o', 'app', 'coffee']
  coffee.stderr.on 'data', (data) ->
    process.stderr.write data.toString()
  coffee.stdout.on 'data', (data) ->
    print data.toString()
  coffee.on 'exit', (code) ->
    callback?() if code is 0

task 'build', 'Build /app from /coffee', ->
  build()
  
task 'watch', 'Watch /coffee for changes', ->
  console.log "Starting CoffeeScript compiler (watching for changes in /coffee folder)..."
  coffee = spawn 'coffee.cmd', ['-w', '-c', '-o', 'app', 'coffee']
  coffee.stderr.on 'data', (data) ->
    process.stderr.write data.toString()
  coffee.stdout.on 'data', (data) ->
    print data.toString()
		

Now, if we run cake watch, a directory watcher is created which will compile to JavaScript any time one of the .coffee files is changed! So you can just run this command, then mostly forget about it and get on with your work.

CoffeeScript is a very simple, straightforward language. I was off and running with it in less than a day. The CoffeeScript site has good documentation, and you can find additional info in the free online version of the Little Book on CoffeeScript.

Comments Comments (2) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 3557 Views

Exploring ExtJS with DeftJS

It's been quiet here on Ye Olde Blogg lately. I've spent the last few months trying out various HTML component libraries and JavaScript frameworks, and have finally selected what I think is the most promising combination: ExtJS with DeftJS.

Anyone reading this is probably familiar with ExtJS, so I won't bore you with details on it. Suffice to say that its UI library rivals what is available in Flex, and indeed is better in many ways. (Data grids and trees, anyone?)

The main thing that initially bothered me about ExtJS was its MVC implementation. In my opinion it has a several flaws, one being the service locator approach. Another is that controllers use selectors that are relative to the application container to reference views, which isn't very flexible.

So I was pleased to see John Yanarella's contribution to the Sencha blog unveiling DeftJS. This is an extension to ExtJS which adds an inversion of control container and an improved controller tier through the use of ViewControllers.

I decided to try creating a DeftJS version of the car store example application that Sencha outlines in the documentation. What follows is a quick overview of the results.

Configuring the IoC portion of DeftJS is straightforward. Here, I'm specifying the two classes I want to add to the IoC container:

Ext.onReady( function () {
    Deft.Injector.configure({
        carChartJson: 'carStore.store.CarChartJson',
        carDataJson: 'carStore.store.CarDataJson'
    });
});
		

Next, I inject these into my view, and provide the ViewController class that I want to manage the view. This allows DeftJS to create the associated ViewController at the same time the view is created, and to destroy it when the view is destroyed.

Ext.define( 'carStore.view.CarListings', {
    extend: 'Ext.panel.Panel',
    mixins: [ 'Deft.mixin.Controllable', 'Deft.mixin.Injectable' ],
    inject: [ 'carChartJson', 'carDataJson' ],
    controller: 'carStore.controller.MyViewController',
...
		

Finally, my simple ViewController looks like this:

Ext.define( 'carStore.controller.MyViewController', {
    extend: 'Deft.mvc.ViewController',
    mixins: [ 'Deft.mixin.Injectable' ],
    inject: [ 'carChartJson', 'carDataJson' ],

    control: {
        carGrid: {
            selectionchange: 'onCarGridSelectionChange'
        },
        carDetail: true,
        carChartPanel: true
    },

    config: {
        carChartJson: null,
        carDataJson: null
    },

    onCarGridSelectionChange: function( selectionModel, selections ) {
        var carDataModel = selections[0];
        this.getCarDetail().update( carDataModel.getData() );
        this.getCarChartJson().loadData( carDataModel.getData().quality );
    }

});
		

I'm specifying the ID values (carGrid, carDetail, and carChartPanel) of the view elements I want to obtain references to. If necessary, a component query selector can also be used here. Note that unlike a standard ExtJS controller, these are relative to the view being managed rather than relative to the root application container. However, just like an ExtJS controller I can attach event listeners to the view instances. In this case, I'm handling the grid's selectionchange event to update the detail and chart views for their selected car. Essentially, this is an implementation of the Passive View design pattern.

That about covers the more interesting bits of this application. Since it's based on a very simple example, the rest of the code is pretty standard ExtJS. I've uploaded a running version of the app, and have pushed the source to GitHub for anyone who wants a deeper look.

DeftJS seems like a great extension to ExtJS. Not only that, but looking at the source also re-kindled my interest in Jasmine and CoffeeScript. The Jasmine specs for DeftJS are quite illuminating from a learning perspective, and the whole DeftJS framework is actually authored in CoffeeScript before being compiled out to JavaScript. I'll take a deeper look at both of these in upcoming blog entries.

Comments Comments (8) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 10603 Views

Thoughts on Flex and HTML5

It has now been a little over a week since Adobe revealed its plans for the mobile Flash player and the Flex SDK. Now that the dust has started to settle and some additional information has been made available, I wanted to give my candid impression of what these announcements mean.

I'll begin by stating the obvious: Adobe did a very poor job of coordinating and delivering these announcements. Anything I say at this point will simply be beating a dead horse. This was a PR disaster and one can only hope they learn something (ideally, many somethings) from sifting through the wreckage. I won't dwell any further on this since we have no control over what happened and I'm interested in looking at what these announcements mean going forward.

I suspect that the news that Adobe was stopping work on the mobile Flash player didn't actually surprise very many people. Further, I doubt many people actually care much. Yes, it's nice to be able to view Flash content on my Android tablet. And yes, its easy to forget that the existing 11.1 player will continue to work for a long time and allow people to keep viewing the vast majority of Flash content. But no one was building browser-based mobile Flash sites. Why? Because you still had to create a non-Flash version of it if you wanted to target all mobile devices. Once the sting of all the "Steve Jobs Won" gloating wears off, I believe most people will see the wisdom of this decision. Some people appear to have a problem with this choice, but no one I know really cared at all about this part of Adobe's recent announcements.

So now we move on to the other big news: Adobe announcing that the Flex SDK would become an Apache project and would go forward under non-Adobe governance. This took a lot of people by surprise, to put it mildly.

First off, let me say that I don't have an issue with the idea of Flex going fully open-source. Yes, Flex was already "open-source", but we all know it really wasn't. You could view the code, but Adobe still exerted complete control over what changes were made. Anyone who ever tried to submit a patch or improvement can attest to this. Those restrictions are now gone. I firmly believe that if this announcement had been made at MAX, rather than in the middle of this PR breakdown, the cheering from the audience would have brought the roof down.

I know a number of the people on the Spoon project, many of whom will probably be part of the group which will govern the ongoing work on the Flex SDK. They're all very bright people and I have little doubt that the SDK will actually see some nice benefits from this move. So from a purely technical standpoint, I think this can and probably will be a good thing.

However, regardless of what you think about the SDK move, another portion of Adobe's announcement overshadowed even this news. In a post that will probably live in infamy, some of the Flex management stated "In the long-term, we believe HTML5 will be the best technology for enterprise application development."

How Adobe failed to predict the resulting uproar I have no idea. But apparently they didn't. As a result, we saw an explosion of questions and concerns that essentially boiled down to: Is Adobe saying Flex is dead?

I'll admit I wondered this myself. Given this statement, what was I supposed to tell the clients to whom I've evangalized Flex? Is my investment in Flex now ashes? I was angry and confused. Then I tried to detach myself from my emotional reaction and consider the situation objectively. I want to share a few of my thoughts and conclusions about this.

First, one has to consider the harsh reality that Adobe never really figured out how to make any money on Flex. Their only real revenue came from Flash Builder, and it seems highly unlikely to me that sales of FB offset the money they've spent on Flex. And even that revenue is further reduced by the presence of competing tools like FlashDevelop and IntelliJ IDEA. Considered in this light, Adobe's decision to reduce the amount of resources it dedicates to Flex does make some sense, even if we don't necessarily like it. Offloading part of that cost onto the community is one way they can try to make those numbers even out.

Next, I'm not sure about everyone else, but I for one always believed that eventually we'd be able to build Flex-like apps in HTML. Some of this can be done already, but it is disjointed, using a mishmash of libraries, and painful. Building RIAs in JavaScript is agonizing compared to Flex and AS3. But that's slowly changing as the tools get better and the libraries become more refined and standardized. My guess is that in two or three years we'll start seeing real parity with Flex on both features and tooling. I knew this before Adobe's announcement, so does it really change much? Or did the announcement, as poorly as it was delivered, serve as a stark reminder that Flex is in some ways a bridge between now and this eventual HTML-based future?

I think this may be where some of the pain is coming from. No one wants to be told that the platform they're heavily invested in is probably going to be supplanted in the coming years. But can anyone really look at the current situation and draw another conclusion? Adobe seems to have two options here: keep pouring resources into Flex and delay the switchover a bit, or start changing direction and begin the task of improving HTML tooling from a RIA perspective. It's clear which way they've chosen to go.

So where does that leave us? Like many folks, I poked around the web last week just to get an idea of the current state of HTML RIA development. It wasn't pretty. I found dozens of libraries, frameworks, UI components, tools, and workarounds to mimic proper OO features in JavaScript. To put it bluntly, it's total chaos.

We're a long way from being able to drop Flex and start building enterprise RIAs in HTML. Which is fine with me. The projects I'm currently involved in are multi-year efforts built with Flex, and these aren't going away. I'll be building and maintaining apps with Flex for quite a while.

On the other hand, the writing seems to be on the wall. This isn't going to last forever. Developers who have been around the block a few times know it is always a bad idea to put all of your eggs in one basket. So I'll be keeping my eye on the HTML RIA space, trying things out as that platform coalesces. GWT looks interesting, especially paired with Groovy and SmartGWT. So does brunch.io. Trying out new technologies is one of the things I love about programming, and that's certainly not about to stop.

Will this change on the horizon amount to a career and knowledge "reset"? Is everything we've worked so hard to learn going to be thrown out the window? From my point of view, absolutely not. Looking around at the HTML/JS world, I see a lot of people trying to solve problems that we've already gone through. Solid OO design? Rich client models? Real-time messaging? Persistent client state? Separation of UI from client-side logic? Large-scale event-driven applications? Architecting and managing huge RIA codebases?

Sound familiar? They should, because they're probably problems you've already dealt with a number of times. The programming language might change, and the UI component APIs may shift, but these fundamental problems aren't going anywhere. And I think experienced Flex developers are going to be very well suited to helping businesses and clients solve those problems, both now and in the future. Even if the platform eventually shifts to HTML5. As they say, the only constant is change. And honestly, life would be pretty boring any other way.

Comments Comments (5) | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs | 7467 Views

More Entries