Like you, I have a wide range of development experience. In the past 20 years, I’ve been a huge fan of Java, C#, Flex (Actionscript), ColdFusion, F#, Ruby and Python. In fact, a few years ago in my last job, myself and some colleagues spent a significant amount of time and effort convincing everyone to migrate to Flex-based applications (they have since decided to migrate yet again to .NET). At the time, it was the right move.

Now I would never suggest such a migration

Feel free to disagree with the following opinion, but from what I’ve been seeing over the past couple of years is…

JavaScript is going to be the virtual machine that drives the next 10 years of software evolution.

Not all software, mind you. I’m talking about the revolution that’s going on in mobile, cross-platform, cloud-based computing and development.

Now, what exactly do I mean by that? JavaScript itself is not a virtual machine, it’s simply a programming syntax, right? Well, that’s true, but remember that the companies writing JavaScript engines are making virtual machines – such as Google’s V8 – that parse and execute JavaScript… and they’re fast. In fact, they are becoming so fast, that JavaScript is slowly, but surely, becoming a ubiquitous language that not only builds the logic and validations of an application, but is now building the actual user interface, and the brains behind it (see server side JavaScript).

We’ll get into that later, but I want to start off with a statement to all the legion .NET, Java, Actionscript, Ruby, Python, {insert language here} developers who look with disdain, or even confusion at JavaScript. You’re missing it. You’re missing what’s going on around you, and for anyone who’s been in software for even a short amount of time, you learn that you adapt or you risk becoming marginalized.

Let’s start off with the trends that I’ve been seeing, and also some nice links that really show off the power of these JavaScript virtual machines. Some are obviously impressive, some are subtly so, but all of them give a taste of what’s coming.

Running An Operating System In The Browser

Start off by checking out Fabrice Bellard’s PC emulator with the Linux 2.6.20 kernel on it. That’s right, an operating system running inside a browser.

Imagining the possibilities of utilizing this kind of tool is exciting. Are you an android developer? Imagine writing your code and then being able to emulate the browser-based version of your program and the mobile version in the browser – side by side.

Imagine having a RAM based file system running in the background behind your web application, and using Web Storage to make the environment and experience different for each user – while never having to communicate with a central server.

How about running a dynamic P2P server inside your browser using WebSockets?

All written with JavaScript. Impossible? We’ll see.

One Language To Rule Them All

Yes, the LOTR references will continue to pile up as this article goes on, just accept it!

Appcelerator Titanium

Some months ago (oh about 6) I stumbled across this tool called Titanium. The only reason that I learned of its existence is because the developers of my favorite tool – Aptana IDE – were acquired by the company Appcelerator. I blithely browsed their web site that day thinking they were just another software development company. However, by the time I was done reading their technology road map, my brain had changed. A light had turned on that hasn’t been shut off since.

JavaScript can be used to design entire applications, and then be compiled into almost every operating system using the standard SDKs! How is this possible? So if I want to write an application that can be deployed on the desktop (Windows, OSX, or Linux) and also be deployed to mobile devices as native applications (Android, iOS, Blackberry), I only need one source code library?

The world is changing, indeed.

Node

What can I say about Node.js that hasn’t been said already? Well, for the uninitiated, Node.js is a program written in C++ that allows you to author server-side services in JavaScript. It is entirely event-driven, on a single thread, and is designed to be a non-blocking I/O framework.

I will not go into any details on it here, but for those who have investigated it, I believe it’s the tip of the iceberg, and for those who have not, well, then you need to spend a couple hours this weekend going down the rabbit hole.

Node.js still has a long way to go (Windows support *cough*), but since its introduction to the world in November of 2009, there are now hundreds of modules written for it that will cover most of your interests and needs.

Most impressive so far is a module called Now.js. It allows you to have real-time communication between your server and your clients with one simple JavaScript file. If any of you have ever tried to implement message queues in the .NET or Java environments, you know how many hoops you have to jump through, how it affects performance and your system architecture. This module is so easy and painless to implement, it almost made me laugh when I first saw it work.

If you’re interested, here’s the original presentation given by Ryan Dahl at the JSConf in 2009.

Code Complete

Given these two tools, you can now write your secure, server logic and the entire customer facing application in one language and have it interpreted to any platform. That’s exciting!

Dumbing Down To JavaScript

I’m sure that’s how many software developers would term the desire to write a program in Java or C# and then run it through a compiler to generate JavaScript! Gasp! How plebian… how absurd!

Yet these companies (little ones named Google and Microsoft, respectively) have written these compilers because there’s a need. First, there’s the Google Web Toolkit for Java and, secondly, there’s Script# for the .NET folks.

Google

I have to give a lot of credit to this evolution to Google. Their brilliant engineers have shown us time after time after time that almost anything you think can’t be done with JavaScript, they have done it. Perfect example. Someone (with an apropos name of Putrid Polecat) commented on Ars Technica story about Windows 8 (see link below) with the following uneducated comment.

Serious applications simply cannot be written in HTML 5 and JavaScript. Continued support for C#/c++/Java must, and therefore will, continue. Can you write adobe illustrator in html5? Blender? AutoCAD? A virtual machine emulator? Device drivers? A compiler?

Cmon guys.

Let’s see…

A virtual machine emulator? Well we covered that.

A compiler? They’re working on it with getToken(). Also, I suppose you could just write your own with JS/CC.

AutoCAD? This one’s probably right with JavaScript in its current state. Its floating point calculations might not be able to support the precision needed by a CAD program. There’s hope for the future, though.

Adobe Illustrator? There’s plenty of online image editors available, but nothing yet as comprehensive as Illustrator. However, with the HTML5 Canvas, I’m betting that it’s coming soon.

Speaking of Google, how about a word processor, or spreadsheet application, or database tool in the browser with JavaScript. Google Docs.

However, I agree with his core point about there always being a need for compiled, strongly typed languages. I just want people to understand that JavaScript is as powerful as any other language, and used properly, can achieve mind-blowing results.

It is not the Gollum of programming languages, but as these tools show, it is the Gandalf. The one language that can somehow bring all the pieces together in order to develop and distribute applications as quickly and as powerfully as possible.

The Big Redmond Machine

Windows 8 APIs are going to be HTML5 and JavaScript? Well, I don’t believe that for a second, and the article even ends saying that there’s more to it and Microsoft will give us more details as time goes by. However, given that a monster, a juggernaut, with the development and marketing power of Microsoft comes out and says that it’s banking on the latest round of W3C specs for HTML, CSS, WebSockets, Web Storage and JavaScript speaks louder than most everything else.

I think this is a great move on their part. Having C#, C++ developers working hand in hand with the JavaScript developers to build the communication and business layer that will feed the presentation layer is probably how it will all end up (viz Appcelerator above). But that’s just a guess.

** Update (09/15/2011) Here’s a great article that describes Metro Plugins (or, more specifically, the lack thereof) in more detail, and some basic info on the Metro style browser that will be in Windows 8 and why JavaScript and HTML are the basis of that experience.

Right Under Our Noses The Whole Time

Raise your hand if you remember the hoopla in the late 90′s about Java being the write once, run anywhere platform that would liberate us all!! Go on, raise your hand, no one will notice. Ok, we all remember, and it failed.

Now, raise your hand again if you remember Adobe, and then Microsoft, saying that compiled, vector-based browser plugins are going to allow us to write once, and run anywhere, and it will liberate us all!! Ok, you don’t need to raise your hand this time, but we all remember (it was just a handful of years ago). It also failed.

Is it possible that, like the gorgeous girl in the movie that no one noticed because she wore glasses and had her hair in a pony tail, the answer was right in front of us and no one saw it? Perhaps Google was the catalyst needed, like the movie bet where the jock dares to turn the nerdy girl into the prom queen, to let us see the true beauty and power of this little toy language written by Brendant Eich – who just so happens to be a native Yinzer (look it up) – way back in 1995.

The most beautiful thing about it is that JavaScript will be the glue that can tie all of the tools together. You can utilize Java programs and C# assemblies from your Node server, integrate a Flash movie or communicate with a Silverlight application in your UI, and then, just for fun, execute a command on your local, browser-based operating system.

The event is on Thursday, June 9, 2011 and will run from 7pm – 9pm in the first floor event meeting hall.

Here is what you can expect to learn at the Meetup:

An Appcelerator Senior Systems Engineer will be there and…

• Provide a high-level overview of the Titanium Architecture
• Run through the major APIs for both mobile apps, and mobile web application development
• Provide lots of demos on creating mobile apps with Titanium
• Answer your questions

Starting Resources

All you need to play around with CSS3 goodies is a browser that supports them. Since I don’t want to be constantly updating this article, I’ll provide a link to a site that has a nice graph showing browser support. My recommendation as of 04/25/2011 is Google Chrome. It has the broadest support so far.

Ok, so you’ve got that downloaded and installed, right? Cool. Now, create two files accessible to your web server named CSS3.html and CSS3.css. Open CSS3.html and insert the following markup.

<html>
   <head>
      <title>CSS3 Basics</title>
      <link href="css3.css" rel="stylesheet" type="text/css">
   </head>

   <body>
      <div id="toolbar"></div>
      <div id="notification">Show Notification</div>
   </body>
</html>

Ok, let’s start having some fun with it. Open up CSS3.css and add in the following styles to give our elements some basic definitions that we’ll enhance later.

#toolbar {
    width: 85%;
    margin: 0 0 50px 50px;
    border: 2px solid #ccc;
    background: #efefef;
    height: 50px;
}

#notification {
    position: relative;
    top: -90px;
    left: 75px;
    border: 1px solid #000;
    width: 150px;
    background-color: #cecece;
}

So I’ve give each element a border and moved the notification div inside the toolbar div with relative positioning. Basic stuff.

Rounded Borders

Now let’s use the new border-radius property which can give your divs a rounded border to give them a button-like appearance. For now, at least, you have to provide the -moz, -webkit, and -o prefixes to ensure that it works correctly in Mozilla, Webkit and Opera browsers.

#toolbar {
    width: 85%;
    margin: 0 0 50px 50px;
    border: 2px solid #ccc;
    background: #efefef;
    height: 50px;
}

#notification {
    position: relative;
    top: -90px;
    left: 75px;
    border: 1px solid #000;
    width: 150px;
    background: #cecece;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}

Transitions

Now let’s see some transitions at work. Transitions allow you specify how a transformation will take place. For example, you can change the background color on an element when the user hovers her mouse over it. Until CSS3, this transition was instantaneous. Now you have options. Let’s see an example.

I’m going to change the width of the my notification element and its background color on hover. In addition, I’ll specify, using the transition property, how long it will take to perform the transition.

#toolbar {
    width: 85%;
    margin: 0 0 50px 50px;
    border: 2px solid #ccc;
    background: #efefef;
    height: 50px;
}

#notification {
    position: relative;
    top: -90px;
    left: 75px;
    border: 1px solid #000;
    width: 150px;
    background: #cecece;
    border-radius: 5px;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;

    -webkit-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in;
    -moz-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in;
    -o-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in;
}

#notification:hover {
    width: 175px;
    background-color: #b8860b;
}

Drop Shadows

You can add drop shadows to any element using the box-shadow property. I’ll add one to both the toolbar and the notification button.

#toolbar {
   -webkit-box-shadow: 5px 5px 7px #333;
   -moz-box-shadow: 5px 5px 7px #333;
   -o-box-shadow: 5px 5px 7px #333;
}

#notification {
   -webkit-box-shadow: 2px 2px 3px #333;
   -moz-box-shadow: 2px 2px 3px #333;
   -o-box-shadow: 2px 2px 3px #333;
}

Transformations

There are now many kinds of ways to transform the appearance of an element. These properties are skew, rotate, scale, translate, and matrix. I’m going to skew the toolbar by 40 degrees horizontally, and skew the button by 20 degrees horizontally. Then I’ll specify that the skew on the button should happen on hover and take 1 second to complete.

#toolbar {
   -webkit-transform: skew(-40deg,0deg);
   -moz-transform: skew(-40deg,0deg);
   -o-transform: skew(-40deg,0deg);
}

#notification {
    -webkit-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in,
       -webkit-transform 0.5s ease-in;

    -moz-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in,
       -webkit-transform 0.5s ease-in;

    -o-transition:
       background-color 0.5s ease-in-out,
       width 0.5s ease-in,
       -webkit-transform 0.5s ease-in;
}

#notification:hover {
   -webkit-transform: skew(-20deg,0deg);
   -moz-transform: skew(-20deg,0deg);
   -o-transform: skew(-20deg,0deg);
}

Animations

This section will only work right now if you are viewing this via a webkit browser (e.g. Chrome). You can specify animation “classes” that will tell the browser to convert the state of an element from X to Y. For example, you could spin the element in a circle by setting the rotate property. Let’s see it in action.

I’m going to create a keyframes class named spin that will tell the browser to rotate the element from 0 degrees to 360 degrees when the user hovers over the button. I also specify that it will take 5 seconds to complete the spin.

@-webkit-keyframes spin {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
    }
}

#notification:hover {
    -webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 5s;
}

My integration of ExtJS, ajaxCFC and ColdFusion continues.

Note: This is for version 3.3.1. I’ve also been happily playing around with version 4, but until it’s officially released, I must continue building with 3.3.1.

Anyway, here’s what I was trying to solve. When I want to allow users to serach for items from a ComboBox, I configure a store, and inside the store, I configure an Ext.data.HttpProxy to hit a separate ColdFusion page that performs a query and returns the results.

Standard HttpProxy Method

var WidgetStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'liveQueries/widgets.cfm'
    }),
    reader: new Ext.data.JsonReader({
        root: 'data',
        totalProperty:'totalRecords'
    }, Widget)
});

ColdFusion ‘Live’ Query

<cfsetting enablecfoutputonly="true">

<cfparam name="query" default="">

<cfquery name="chargeCodes" datasource="#getDatasource().getName()#">
SELECT UNIQUE widget_seq_no, identifier, descr
FROM 	widgets
WHERE 	(REGEXP_LIKE(identifier,<cfqueryparam cfsqltype="cf_sql_varchar" value="^#query#">,'i')
   OR REGEXP_LIKE(descr,<cfqueryparam cfsqltype="cf_sql_varchar" value="^#query#">,'i'))
   AND widget_type_cd='SNAPPYDS'
ORDER BY identifier asc
</cfquery>

<cfscript>
jsonBean = createobject("component","ajaxCFC.JSON");
jsonEncodedCriteria = jsonBean.encode(data=chargeCodes, queryFormat="array");
writeOutput(jsonEncodedCriteria);
</coldfusion>

<cfsetting enablecfoutputonly="false">

I hate this, because I already am using my Ext.AjaxCFC class to query my ColdSpring beans asynchronously, so why do I have to set up these standalone ColdFusion pages to performs queries that should be executed in the component?

I decided to take matters into my own hands, and I have to give the ExtJS team props again, because it was easy to accomplish by extending the Ext.data.MemoryProxy class. As you can see, all I need to do is override the doRequest() method to execute Ext.AjaxCFC.request() with the data passed in during initialization.

Ext.ux.data.AjaxCFCProxy.js

Ext.ns('Ext.ux.data');

Ext.ux.data.AjaxCFCProxy = Ext.extend(Ext.data.MemoryProxy, {
   constructor : function(data){
      Ext.ux.data.AjaxCFCProxy.superclass.constructor.call(this);
      this.data = data;
   },
   doRequest : function(action, rs, params, reader, callback, scope, arg){
      this.data.data.query = params.query;
      Ext.AjaxCFC.request({
         bean : this.data.bean,
         method : this.data.method,
         data : this.data.data,
         success: function(rs) {
            var result = reader.readRecords(rs);
            callback.call(scope, result, arg, true);
         },
         error: function(results) {
            Ext.MessageBox.alert('Load Failed', 'Unable to load requested data');
         }
      });
   }
});

New and Improved Combobox for Searching

WidgetSearch = new Ext.form.ComboBox({
    minChars:           2,
    loadingText:        '',
    itemSelector:       'div.search-item',
    triggerClass:       'x-form-search-trigger',
    emptyText:          '',
    width:              300,
    listWidth:          0,
    store: new Ext.data.Store({
        // I've extended the base Ext.data.MemoryProxy()
        // class to use the AjaxCFC object for searching
        // instead of having to use a liveQuery. Much cleaner.
        proxy: new Ext.ux.data.AjaxCFCProxy({
            bean    : 'Widget',
            method  : 'search',
            data    : { source_table : 'WIDGET' }
        }),

Now that I’m a heavy user of the Sencha ExtJS framework, I thought it would be useful to port the jQuery.ajaxCFC.js file over to an Ext.AjaxCFC.js file that extended the native Ext.data.Connection class and utilized the Ext.Ajax object.

Took me about half the day, but I finally got a working Ext.AjaxCFC.request() method that uses the same syntax as the $.AjaxCFC() method. For those familiar with the inner workings and code of the jQuery AjaxCFC class, this will look very familiar.

So now I can make AJAX calls using native ExtJS classes, access ColdSpring beans in my application’s bean factory, or connect directly to any CFC

Ext.AjaxCFC.js

Ext.AjaxCFCConnection = Ext.extend(Ext.data.Connection, {
   data        : null,
   queryFormat : 'array',
   factory     : (typeof(__ajaxConfig) == 'undefined') ? null : __ajaxConfig.beanFactory,
   timeout     : (typeof(__ajaxConfig) == 'undefined') ? 30000 : __ajaxConfig.defaultTimeout,
   url         : __ajaxConfig.url,
   bean        : null,

   request : function(arguments) {
      var params = (typeof(arguments.data) == 'undefined') ? {} : arguments.data;
      arguments.params = {};
      arguments.params['C0-ID']         = (Math.floor(Math.random() * 10001) + "_" + new Date().getTime()).toString(),
      arguments.params['method']        = 'init';
      arguments.params['component']     = arguments.component;
      arguments.params['bean']          = (typeof(arguments.bean) == 'undefined') ? this.bean : arguments.bean;
      arguments.params['factory']       = this.factory;
      arguments.params['C0-METHODNAME'] = arguments.method;
      arguments.params['queryFormat']   = (typeof(arguments.queryFormat) == 'undefined') ? this.queryFormat : arguments.queryFormat;
      arguments.params['C0-PARAM0']     = params;

      arguments.url = this.url + '?method=' + arguments.params['method'];
      arguments.method = 'POST';
      arguments.failure = arguments.error;
      arguments.timeout = this.timeout;

      var ____success = arguments.success;

      arguments.success = function(data) {
         data = data.responseText.replace(/^\s*|\s*$/g, '');

         if (data.substring(0,9) == '__json__:') {
            data = Ext.util.JSON.decode(data.slice(9));
         }
         ____success(data, this);
      };

      if ( params ) {
         if (typeof params != 'string') {
            arguments.params['C0-PARAM0'] = Ext.util.JSON.encode(params);
         }
      }

      Ext.Ajax.request(arguments);
   }
});

Ext.AjaxCFC = new Ext.AjaxCFCConnection();

Usage

// Include Ext.AjaxCFC code
<script type="text/javascript" src="js/Ext.AjaxCFC.js"></script>

// Default configuration properties for the ajaxCFC library
__ajaxConfig = {
   'url':'/myApp/ajaxCFC/ajax.cfc',
   'defaultTimeout':30000,
   'beanFactory':'application.beanFactory'
};

// AjaxCFC call using Ext.data.Connection class
Ext.AjaxCFC.request({
   bean: 'AColdSpringBean',
   method: 'aMethod',
   data: {
      'id': 416198,
      'first_name': 'Steve',
      'last_name': 'Brownlee'
   },
   success: function(details, s){
      DataStore.loadData(details);
   },
   error: function(results){
      Ext.MessageBox.alert('Search Failed', 'An unexpected error occurred. Please try again.');
   }
});

First, and foremost, I have to say [BINDABLE] FTW!! That one thing alone sums up the rest of my ramblings below, and you can probably skip the rest of this article if you wish after you read the next opinion.

The cultures of Adobe and Microsoft are best reflected in how you accomplish any development feat – Adobe did its best to make sure the “little stuff” is handled behind the scenes so that development can be done as quickly as possible, while Microsoft assumes absolutely nothing and requires you to write dozens of lines of code to achieve even the simplest of development goals.

Microsoft World

If you want absolute, iron-gripped control over every single feature of your application, and want to hand-craft almost every piece of customization or abstraction that is needed, then the Microsoft stack is definitely for you – the uber geek, the one who takes tremendous pride in his mastery of every aspect of his application.

Unfortunately, WPF still has a little ways to go to catch up with the power and features of Flex. Of course, WPF is for desktop apps and runs as a native assembly, and doesn’t need a third party installation that is, admittedly, more bloated and use a bit more memory.

Adobe World

If you want to focus on functionality, and get products/updates released as quickly as possible, and could care less what magic goes on when you bind a Collection to a DataGrid, then the Adobe stack is for you – the quasi geek, the one who needs to do the design, the architecting, the development and the support, and doesn’t have time to spend hours hand-crafting simple tasks that the software should obviously be doing for you.

However, I think the folks at Adobe heaved a huge sigh of relief when Microsoft announced that Silverlight’s focus will now be for mobile development only. Given time, Silverlight would have been a superior product to Flex (on Windows).

My World

For me, I much prefer the Adobe ideology. Perhaps it’s the Star Trek geek in me. My philosophy when it comes to development stems from years of watching Star Trek: The Next Generation.  Does that make me an uber geek anyways?  Perhaps.

When critical software and systems needed to be modified on the Enterprise, did you see Jordi sit down at a computer terminal, bring up a development environment and figure out how to expose the correct property change event, make sure it implemented the correct interface, open another file to map the property to the system, and then open another file to make sure it looked right (all in a proprietary language that NO ONE ELSE uses)?

No. By the 25th century, they finally get it. Superior engineers – whether they work on software, or warp engines – want the basic tasks done for them if possible.  It saves time, and makes work a lot more fun. If I can add a new column to a dataset and have it displayed in my interface in 1 minute, then I’m all for it.

Sure, there are still people in the world who would rather take the 30 minutes to do it “right” by writing every single line of code needed to perform the task.

Sorry, not me.  I got shit to do.

It got me thinking about how many different ways do I write a function in one day. Let’s see…

-=  Java and C#  =-
public <type> myFunction([args])...

-=  Javascript  =-
function myFunction([args])...

-=  ColdFusion  =-
public <type> function myFunction([args])...

-=  Flex  =-
public function myFunction([args]):<type>

No wonder I confused from time to time.

I cut a lot of corners in that project in order to get it out in time, but there was only one hack that has haunted me since I reluctantly pushed it into production: I returned a large HTML string from an AJAX call and inserted it directly into the DOM.

It was far easier, at the time, to simply loop through the highly complex query structures in my class and build the HTML structure there rather than build a JSON string and use a JavaScript parsing class to build the HTML on the browser.

Well, in a little twist of fate, there was an update scheduled for this application; and this time I had some extra time as the release date got pushed back a couple of weeks. Using that to my advantage, I finally was able to fine-tune that entire mechanism, including:

All in all, this particular section of the application now executes about 70% faster, is less resource intensive on the database, and is easier to use.

It’s a big monkey off my back. Not to mention that I always enjoy going back to code from previous projects and seeing how I can improve upon it since I’m always learning new tricks.

I decided to tinker around with the drag & drop capabilities of ExtJS and originally had the user click a button, which created a window, into which the user could drag an item from each data set and create the mapping. It worked very well and was a much better interaction than the previous version.

I showed it to a colleague, and he actually thought of a way to make it better. Why not simply allow the user to click and drag an item from one grid to the item on the other grid to which she wanted to map it? Even better. However, when I started to think about the code I would need, I couldn’t think of how to determine which item in the “drop” data grid was the actual target.

Let’s say you have automobiles in one grid, and colors in another. You could let the user drag a color from the second grid onto a specific model of vehicle on the first, but the trick is determining onto which model the user dropped the color.

If I was able to detect the model, I could then show a new window with the requested mapping so that the user could verify her choice.

After some digging around, I discovered that the Grid object’s view has a findRowIndex() method which accepts an Element as an argument. Since the notifyDrop event provides the e.target() property, that was all I needed. I could get the row index, and then retrieve the corresponding item from the data store.

// Determine the row on which the color was dropped
targetRow = TargetGrid.getView().findRowIndex(e.target);
targetDataItem = TargetGrid.store.data.items[targetRow];

You can check out the sample code that shows how to determine the target grid element on my Drag & Drop Target Detection example page.

This is a complementary article to Antipimp’s “I could care less what they say.”. Read that first if you have a moment, then come back here and finish up.  Take your time, it’s worth it. 

.

.

Now, let’s talk about the other side of the fence.

Once you get the awesome job that Asshat Antipimp lined up for you, trust me when I say that no one gives a flip how many lines of code you wrote, or what awesome application framework you used. They care that you solved their problem and that it won’t break in a month.

Software folks are notorious for their.

• Oddball personalities
• A penchant for useless, esoteric knowledge of science fiction and fantasy literature
• Ability to completely disregard all social convention
• Expediency in stinking up a room
• Many other curious behaviors..

My least favorite trait of many of my colleagues is their mistaken belief that other people give a shit about the technology. Well, actually, they do, but only when it doesn’t work. Things can be sunshine and roses and kisses and hugs for years, but trust me, when you write an application that doesn’t work, then be prepared to kiss your technology goodbye – or end up on the street.

The 99% of the world that doesn’t know how to write a ternary operation sees software as a means to an end, and that’s it folks. Writing software is “magic” to them and I hate to see application developers exploit that fact.

They aren’t amazed by your ability to use an ORM package.

They don’t care that you squeezed a few more cool aspects into your IoC architecture.

Then even don’t care that you’ve taken the painstaking effort to apply industry-standard usability practices to make it easier for them to work with it.

They. just. want. it. to. work.

Therefore, if you find yourself taking 20 minutes to explain to the eyes-glazed-over, bored-beyond-tears business folks how awesome you are, then it’s time to shut the hell up, sit down, and let them bicker about the fact that you used the wrong shade of blue in the application header.

Your job is to solve problems and make the lives of other easier. They don’t understand what you do, and no matter how long you try to explain it to them, they’ll still only care about having a picture of their dog on their web site.