Using automatic build tools for dependency management is best practice in Java world and usage of tools such as Maven has been proven by the years.
But can we utilize existing Maven knowledge of Java dependencies management for JavaScript projects. Luckily, some Java and JVM frameworks (like Grails or Play2) provided their own way of dealing with static resources.
But in most common situations, you don’t have lots of options for deploying your application:
keep framework artifacts inside war (minified or not). Not very convenient option if you have lot of small assets in like in Ext JS.
use library from CDN (common purposes, like Google or Yandex, or vendor-provided, like Sencha’s Ext JS CDN). Also not very convenient b/s you need to have persistent internet connection during development process.
use webJars
Wait, but what is webJars? A couple weeks ago James Ward announced a webJars project to help manage JavaScript dependencies into Java projects. He created maven repository and included few popular libraries (jQuery, Backbone.js, Twitter Bootstrap).
Also he created sample spring mvc application to demonstrate how to use this webjars in real project.
If you can’t find library what you using in repository you can submit new webjar request via Github Issue Tracker.
Today I submitted request for adding Ext JS webjar. Also I provided use case and POC based on James’s spring app demo. You can find that Ext JS webJar usage with spring web app in extjs branch of repository.
The idea behind the scenes if pretty obvious – Spring MVC maps the requests from a given URL to files in the classpath (inside jar). Simple, isn’t it?
Besides, some IDE’s (like Intellij IDEA) can recognize js libraries even inside jar file. But again, for development purposes you can still have copy of framework inside of your project workspace. At this point, you must exclude from ready for deployment artifacts somehow, e.g. using build script. Also, one of benefits of webJars approach – you can maintain different sets of artifacts – debug, release, minified and etc – using maven dependency scope.
Please go to the mentioned github projects, fork it, play around, and share your thought in comments below, and let me know what you think about it!.
If you’re looking for a JavaScript and Ext JS training, please visit our Web site for up-to-date information about the scheduled classes. By the way, two days Ext JS workshop is coming up
Intellij Idea is an excellent IDE popular among Java developers, and you can use it for JavaScript development too. These days most people use JavaScript-based frameworks, and I like Ext JS framework by Sencha. Last year JetBrains did a huge effort to promote their IDE as a real swiss knife for developer with support wast majority of modern technologies. Today I’ve decided to record a small screencast about configuring Intellij Idea for development web applications with Ext JS framework. You’ll also see how to use the autocompletion with EXT JS classes and keep the Ext JS documentation at your fingertips.
Clear Data Builder for Ext JS (CDBExt) is an open source tool that automatically builds Ext JS/Java EE CRUD applications given one or more annotated Java interfaces. The generated JavaScript and Java code enforce best Ext JS and Java EE practices and is deployed on the development version of the Tomcat ready to run. A tiny library of Ext JS components accompanying CDBExt – Clear components – enables transactional data sync with the application server, including deeply nested hierarchical data transaction, features not supported in native Ext JS 4.
This short video opens a series of demos that will describe various modes of generating CRUD applications with the JavaScript clients enriched by the Ext JS framework from Sencha. At the time of this writing, CDBExt is in public beta and your suggestions are welcome. Please post your suggestions and findings at the Clear Data Builder’s forum at Sourceforge. You can also send us your feedback by filling out this form at our company’s site.
To add the CDBExt pluging to Exlipse for Java EE IDE, please select the menu Help | Install New Software, then press the button Add and enter the CDBExt in the Name field and http://www.cleartoolkit.com/downloads/plugins/extjs/cleardatabuilder/4.0/site.xml as Location.
In the next video we’ll show you how to quickly create a Web application using the Ext JS framework as a client and MyBatis framework for the data persistence. If you are not familiar with the HTML5 framework Ext JS, consider attending our 2-day workshop on the subject.
In May, I’m flying to Kiev, Ukraine to participate in a Java conference there and this won’t be the only conference I’ll be going to this year. For software developers the ability to attend a major professional conference is a valuable perk given by their employers. OK, all expenses are approved and your air flight and hotel in Kiev, Paris, San Francisco, or New York City are booked. It’s time to ask yourself, “Why you wanted to go to this conference to begin with?”
Changing daily routines can be a good reason in an of itself. But the main purpose is to sharpen your skills and meet new people, right? So what you shouldn’t bring with you to the conference?
1. Leave your laptop computer in the hotel room. Don’t bring it to the conference venue unless you’re giving a presentation on this day. Computer is a major distraction in any conference. You’ll be spending a large portion of the day finding a wi-fi hot spot that will give you at least 56Kbps connection. Internet connections are notoriously bad on any conferences, and this will make you irritated and upset.
Look at all these people sitting on the floor by the electric outlets. Their computers need juice. For what? For checking Facebook, tweeting, and browsing your work emails? Do this experiment for me. When you see such a floor person in a classroom, sit down next to him and ask in a low voice, “Excuse me, do you know what is this presentation about?” In the best case scenario, it’ll take him some time to remember what he’s “learning” in this session.
You may argue, “I’m using my computer to take notes.” Really? What’s wrong with a simple yellow paper notepad? It’s light to carry and doesn’t need power. Do you really take such detailed notes that the power of word processors is required? I saw a person once who even used some mind mapping software for taking notes. Looks impressive, but I’m not sure if I wanted to check in the code to the same repository with such an over-organized person.
Better bring a small camera with you and take a quick shot of the presentation slides you like. And no, it doesn’t have to be Nikon D90 – point and shoot will do.
2. Leave your smartphone (a.k.a. sacred cow) in the hotel room too. “But what if someone will need to call me?” Cut them lose. You’re not available. You are attending a conference, don’t they know? The world won’t stop without you. “But I could use my smartphone for taking pictures instead of bringing the camera, right?” No, No, and No. While carrying a camera will force you to pay more attention to what’s going on around you, the smartphone will do the opposite.
3. Don’t let your spouse fly with you to SF, NYC, or wherever the conference takes place. “Honey, if I’ll go with you, we can save on the hotel and your airfare is paid by the employer too!” And I say “No, no, no!” You got to be partying with other geeks like you. Having your spouse nearby is a major destruction for networking with your peers. Having a spouse at a conference is even worse than carrying a smartphone on you. Don’t try to kill two birds with one stone. Take her to a romantic vacation after the conference. Let her arrive to this city on the day after the conference is over.
4. Don’t bring your tux. In IT conferences, to be considered a geek, you have to dress as casual as possible (the clothes must be clean though). Exposing your body covered with tattoos and piercing is the easiest way to be perceived as a guru especially, if this conference includes the creative people like Flash gamers and Web designers.
5. And most importantly, don’t bring your ego with you. Who cares if you’ve published a book for dummies, three articles, and the plate on your office reads “Senior VP”? Here you are just one of many people who devoted their lives to IT – enjoy the moment!
If you are planning to do build a career as a software developer, you have to be prepared to get trained and re-trained every couple of years. But how? If you’re lucky, your employer will send you to classes, otherwise you have to spend substantial amount of time self-studying. Back in the nineties I was hungry for the courseware. Going through these thick manuals on hot technologies was the shortest way to master them.
Beside software developers, university professors and contract instructors are also looking for the courseware that would help them to teach the class without major surprises and failures in front of the students. No matter who you are, I’d like to offer you some extra materials that’ll help you in learning or teaching programming in Java and Java EE.
Then, I started eating my own dog food and taught a number of online Java training classes using this book as a textbook. While doing this I created presentation slides and used them in classes. These slides included new information and tons of links to additional studying materials. Today, I finished uploading the slides, and they are publicly available under the Wiki section on the site with solutions.
Enjoy your Java!
Yakov Fain
P.S. Currently I’m preparing the courseware for my upcoming one-day master class “JavaScript for Java Developers“. My colleague Victor is working on the materials for a fast track workshop on using the JavaScript-based framework called Ext JS. Any of these training classes can be delivered onsite at your organization.
JavaScript supports private methods. You do not mark them private as in Java: you create them as private and this was described nicely by Douglas Crockford more than 10 years ago. If you ignore the mechanism of private JavaScript methods you raise chances that methods of your objects will be accidentally overridden.
In this blog I’ll just remind you about this issue using the examples with Ext JS framework. My main message is this: carefully select a name for your method because if it’s already used in the objects you’re inheriting from you may get a surprise caused by the fact that not all properties or methods of Ext JS objects are documented. For experimental purposes I’ve created an Ext JS Button object and counted its methods and properties during the runtime. I did it this way:
The number of actual runtime properties is 84.
The number of documented properties is 12.
The number of documented configs is 88.
The number of actual runtime methods is 250.
The number of documented methods is 124.
The number of template methods is 20 (they are not included in the Button’s online documentation, even though there is a vague mentioning about them in the component hierarchy Web page).
As you can see 106 methods (250 – 124 – 20) can be considered of unknown data access level, but they are still sitting inside the component silently waiting for conflicts if you’ll extend the Button and will use one of this hidden names.
There are different ways to deal with this. First, always name methods in a unique way – use a meaningful name or some prefix. Second, use Javascript Module Pattern to define ExtJS config object.
In the first example the methods started with “private” could potentially override the methods with the same name if declared in Ext.button.Button. They are also public and are subject to accidental overriding in the subclasses of MyButton.
Ext.define(“MyButton”,{extends: “Ext.button.Button”,
text:'Click me',
statics:{
privateStaticMethod:function(){
console.log(‘static method’);}},
privateMethod:function(){
console.log(this.getText());},// will be called when the button was clicked
handler:function(){this.self.privateStaticMethod();this.privateMethod();}});
A proposed private method implementation is shown below. It’ll prevent from accidental overriding. Instead of passing the object to the constructor of my button I pass anonymous function and call it immediately (see the last pair of parens in the code below), which includes my methods inside.
Ext.define(‘MyButton’,(function(){function privateStaticMethod(){
console.log(‘static method’);}function privateMethod(me){
console.log(me.getText());};function privateMethod2(){
console.log(this.getText());}return{extends: ‘Ext.button.Button’,
text:'Click me',// will be called when the button was clicked
handler:function(){
privateStaticMethod();
privateMethod(this);
privateMethod2.apply(this);}};})());
For developers who are used to statically typed languages with the classical inheritance this turn can raise eyebrows – welcome to the World of Javascript. It’s worth mentioning that the “privateMethod” and “privateMethod2” have different invocation syntax as first one uses the explicit parameter “me” for referencing the object instance while the other one uses scoped “this” to refer to the object instance.
Although sometimes the Module Pattern is considered dangerous and can create problems if a class is poorly designed, in such cases you can put these methods into a separate namespace “privates”.
Ext.define('MyButton',{extends: ‘Ext.button.Button’,
text:'Click me',
privates:{
privateStaticMethod:function(){
console.log('static method');},
privateMethod:function(me){
console.log(me.getText());},
privateMethod2:function(){
console.log(this.getText());}},
handler:function(){// invoking the methods from the privates namespacethis.privates.privateStaticMethod();this.privates.privateMethod(this);this.privates.privateMethod2.apply(this);}});
The private methods calls require some extra coding, but they’ll simplify unit testing of your code. The privates namespace is accessible and you can write test classes that will invoke them as opposed to the Module Pattern approach, where these methods would be not accessible.
On the side note, the private methods are included in the ECMAScript 6 “Harmony” proposal. I’m looking forward to ES6.
To learn more about the proper way of architecting enterprise applications attend our 2 day Ext Js workshop in June in New York City. Enter AlexO as a promo code to get $100 off the price.
Ext JS is a powerful HTML5 framework that allows you to get things done in a robust and maintainable way. It does a great job fulfilling your needs for the client-side development on the web. However, you may sometimes come across non-trivial use-cases, for example, fixing issues within the framework itself. There is no such thing as a perfect framework. Bug happens, but what I like about Ext JS is that if you’ll run into a bug, you don’t need to wait for the framework creators to schedule, create, test, and release a fix. You can do it yourself, and in this blog I’ll talk about an important overriding mechanism that exists in Ext JS.
To override a class method in object-oriented languages like Java, you start with declaring a subclass of another class. The flexibility of the prototype-based languages like JavaScript allows you to override the method of the existing classes. Ext JS goes one step further by adding a convenient mechanism of overrides known as Ext.override and starting from Ext JS 4 with the configuration property overrides.
A Short Recap of Ext JS Overrides
Let’s consider the following real-life example. While debugging I find it handy to write the log records to know when my controllers are initialized. Instead of adding console.log() into the constructor or init of each controller I use overrides. Here is how I prescribe Ext JS to override the behavior of the standard Controller class using new Ext JS 4 overriding mechanism -Ext.Class.override configuration:
Both versions have the same effect – they override the init method. (As any prototype-based overriding they affect even existing instances of the classes, although in case of init() method this is not relevant.) I recommend you use the first technique as it’s more compact, readable, and most importantly – safe, since override:'Ext.app.Controller' ensures that Ext.app.Controller class is loaded by the time the override is executed.
In the classical object model you must inherit a class to override its methods, so these overrides might look weird at first glance. The internal implementation is dead simple – the function declaration gets replaced. The existing declaration is preserved in an internal variable, and you get access to it via this.callOverriden().
Managing Overrides In Your Project
As your project grows there are more and more overrides to manage and deploy in production. Prior to the introduction of Ext.Loader it was popular to combine all overrides into a single file, say overrides.js that you would reference in the index.html right after ext.js. However, this approach had several drawbacks:
It’s hard to navigate between the overrides located in the single file
The <script> tag doesn’t guarantee the order of scripts loading. So, you can face the problem when your application is loaded and started, and only after that your overrides will come into play.
A better approach is to explicitly load your overrides by Ext.Loader. This allows to keep them in the nice folder structure and to control the order of execution. I like my overrides to mirror the folder structure of the patched Ext JS sources. For instance, an override of Ext.app.Controller will be in the App.patch.app.Controller, while an override of Ext.data.Model will be in the App.patch.data.Model etc.
Let’s continue with overriding the Controller. Here is the modified version:
Assuming that App.controller.Main is my application specific controller, below is the application that pre-loads the patch. All I need to force the patch pre-load is requires: ['App.patch.app.Controller']. The patch will be loaded before application is instantiated, therefore before any controller, view, or store is created:
Whether you are extending ExtJS or fixing the bugs, you should revise your overrides with each new Ext JS release. To reflect the version of Ext JS that your overrides are relevant for, I suggest embedding the name of the version into the name of the “root” patch and maintaining different ones, per ExtJS version:
To learn more about the proper way of architecting enterprise applications attend our 2 day Ext JS workshop in June in New York City. Enter Anton as a promo code to get $100 off the price.
OK, our company, Farata Systems has created this nice application using Adobe AIR, and our customers are happy. It’s not a simple CRUD though. We’ve implemented some cool stuff replacing tons of paper forms with PDF documents processing. PDF documents are being scanned, the OCR software processes them to automatically figure out what type of document is it to properly save it in a database. Customers’ checks are scanned, digital signatures are flying, reports are being created… All is integrated into one Adobe AIR application. No external Acrobat Reader, no nothing. I’m not saying that it’s not doing some traditional grid/form processing, but there is something to be proud of.
Yesterday, one perspective customer asked me if we have an HTML5 version of this application. I said, “We can create one for you”. The next moment I realized that I lied and added, “I mean, most of it can be turned into HTML/JavaScript, but some heavy duty stuff we’re doing now would be too expensive to re-create in HTML/JavaScript”.
I didn’t start questioning why they even wanted to do a pure HTML5 version. I know what the answer would be: “Everybody goes HTML5, we want it too, and we want it now”. You can’t piss against the wind. You shouldn’t attack windmills unless your name is Don Quixote.
In my 25+ years in IT I always stuck to one rule – give your customers an honest technical opinion, but if they decide to overrule it for whatever reason, do what they want. This strategy allows me sleep well at night knowing that I didn’t lie. I also know that I would have won more project bids if I wouldn’t stick to this rule.
After thinking of this yesterday’s conversation I felt like deja vu – it was happening in the past and will be happening all over again. I’ll be saying to our perspective customers something like this, “We can do it in HTML5/JavaScript, but it’s going to be a lot more expensive than if we’d in Adobe AIR”. But the next day a salesman from another consulting firm will meet with the same perspective client and, without thinking twice, will answer, “Yes sir, we can do it in HTML5 at the same or even lower cost. Promise.”. After that the salesman will give a strong handshake looking straight in the eye of a customer for about three seconds. They’ll win the bid… Said I loved you, but I lied.
Only six months later it’ll become obvious to everybody that the entire project budget is drained, because of “some unforeseeable technical difficulties”, and they’d need to substantially increase the budjet of this project. But hey, they’ll figure out something. And what do I get? I didn’t lose self respect and sleep well at night, which are not a bad things too, don’t you think?
We are close to the beta release of the DTO2ExtJS code generator that automatically converts a Java DTO into Ext JS model. This will be of great help to fellow enterprise developers who use Ext.Direct to remote from Ext JS applications to Java classes in the servlet container. We use DirectJNgine. When Sencha releases an Ext JS implementation of AMF, models generated by our DTO2ExtJS will be used to remote to BlazeDS.
Let’s say you’ve created a Java DTO that looks like this:
package clear.dto;
import com.farata.dto2extjs.annotations.*;
@JSClass
public class UserDTO {
public String id;
@JSIgnore
public Double salary;
private Date dob;
public Date getDob() {
return dob;
}
public void setDob(Date value) {
dob = value;
}
@JSOneToMany(
foreignKey="userId",
storeConfig="{"+
"paramOrder:['0'],"+
"api: {"+
"create : Clear.action.TicketAction.getTickets_insertItems,"+
"read : Clear.action.TicketAction.getTickets,"+
"update : Clear.action.TicketAction.getTickets_updateItems,"+
"destroy : Clear.action.TicketAction.getTickets_deleteItems"+
"}"+
"}")
public List<TicketDTO> tickets;
}
DTO2ExtJS will generate the corresponding Ext JS code:
As you can see, we keep using the generation gap pattern (the parent class gets regenerates, but the subclass doesn’t) to safely modify the extension and let us keep regenerating the bottom file of the pair, which we do every time the Java file is modified. If your Java class inherits from another one – make sure you annotate the parent as @JSClass and DTO2ExtJs generates models for both, or tell DTO2ExtJs to ignore the parent class entirely, and it’ll obey.
You will be able to fully control the output location and naming of the generated models via APT parameters.
DTO2ExtJS is an annotation processor for Java Annotation Processor Tool and you can use it from the command line and as Eclipse plugin. In the latter case you place com.farata.dto2extjs.asap_4.6.0.jar in eclipse/plugins folder and com.farata.dto2extjs.annotations.jar in the WebContent/lib of your Eclipse Dynamic Web Project. You can find the current version of the jars at http://www.cleartoolkit.com/downloads/plugins/extjs/dto2extjs
We’ll demo the automatic Ext JS code generation at the end of our 2 day Ext JS workshop in June in New York CIty. Enter Victor as a promo code to get $100 off the price.
The chances are that during your JavaScript development with the Ext JS framework you’ll use the object notation for declarative UI creation. It’s easy, simple, quick but has a little gotcha, especially if you came to Ext JS framework from a strict object-oriented environment. For example, consider a custom component that contains a button:
So far so good. The handler function is invoked when the user clicks the button. But what if we want to add our component’s context to that handler. Here’s the first solution that came into my mind:
But it doesn’t work as this pointer can be tricky in JavaScript: there is no instance of MyComponent created yet and “this.onButton” points not where you might think it does.
From my experience with jQuery framework I recalled the “unobtrusive Javascript” technique in part of separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation, so I decided to bind the event listener after the rendering is complete. To get a hold of the button inside the container (after it’s been created) I’ve added the itemId:
While for jQuery developers the above code looks good, for Flex developers it looks ugly. The UI definition and event binding are in different places. To make them happy I looked at the component lifecycle and tried to find the place there I can set items and have this pointing to the freshly created component.
Here’s what’s happening in the initialization phase of the Ext JS component:
1. The component configuration code is applied.
2. The base Component events are registered
3. The ComponentMgr gets registered
4. The initComponent is executed
5. The plug-ins (if any) are initialized
6. The State is initialized
7. The Ext JS Component is rendered.
The most interesting for me was the initComponent as it’s responsible for the creation of child components. So you can set the items right before the component is created:
Voila! This is almost perfect. To provide the component scope in the event handler we override one method and add one additional invocation to the callParent function.
I am wondering why ExtJS doesn’t have documented elegant solution for this use case yet? In the config object “items” can hold single object or array of objects but it also could contain a function returning object or objects array having “this” scoped to container itself.
To learn more about the proper way of architecting enterprise applications attend our 2 day Ext JS workshop in June in New York City. Enter AlexO as a promo code to get $100 off the price.
Today Adobe released another document that brought tears into my eyes. Why they think that people are dumb? Why not just say, “We couldn’t figure out how to monetize Flex and we’re getting rid of the ballast”? Adobe is a public company, and, beside developers they have investors and their stock went more than 10% up since last (infamous) November. They’ve chosen investors over developers. This is understandable, but why keep lying to developers?
Today’s doc contains lots of words, but the most important section is this:
Adobe runtime support of Flex
Flash Player 11.2 and Adobe AIR 3.2, which are anticipated to ship in the first quarter of 2012, will be tested
with applications built using Adobe Flex 4.6. Adobe will test future releases of Flash Player and AIR against the
Adobe Flex 4.6 SDK and maintain backwards compatibility for five years.
While Adobe will ensure that the Adobe Flex SDK 4.6 and prior will be supported in future versions of Flash
Player and AIR, it will be the responsibility of the Apache Flex Project to test future versions of the Apache Flex
SDK against released Adobe runtimes to ensure compatibility and proper functioning.
In the past, features were added to Flash Player and AIR specifically to support the needs of Flex applications.
Going forward, features will be added to the runtimes to support Adobe’s vision for the Flash Platform. The
Apache Flex Project may choose to take advantage of those features; however, new features will not be added
to the runtimes specifically to support the Apache project’s efforts.
Let me re-write it in plain English:”We’ll release the new version of Flash Player, and we ‘ll test our past versions of Flex against it. We love (kinda) Apache Flex, but we don’t give a shit about what these guys will come up with. Flash Player is OUR runtime, and you’d better make sure that your smart-ass next generation Flex works with it, or else… In the past, every release of Flash Player would accommodate for the new features of Flex. From now on, ” We are not adding new features to Flash Player to support whatever you come up with”. Or as we say it in New York City, “Fuggeddaboudid.”
Keep reading Adobe’s doc. Their version states, “Flash Catalyst CS5.5 is the last release of Flash® Catalyst®“. BTW, why do they even add these ® signs to Catalyst? Anyone wants to reuse this lousy brand? OK, maybe. Let me translate it into simplified Chinese: “It was stupid in the first place to work on such a tool, and we wasted two years of our Flex team re-writing the FLex Halo components into Spark architecture just to accomodate the need of this still born baby – Flash Catalyst” .
Keep reading – it’ll get even funnier: “Development of Flash Builder continues. Adobe plans to maintain support for Flex projects in updates to Flash Builder 4.x, including additional work to ensure Apache Flex based SDKs can work within Flash Builder“. This is what it means in Bengali language, “During six years we tried hard, but couldn’t create a stable and performant version of Flash Builder for our own Flex SDK. For some weird reason, Flex developers would spend half of their time waiting for Flash Builder’s workspace to finish rebuilding itself. Design mode never really worked for Spark components. We are off the hook now, yay! Noone would even expect us to fix this for some Apache product. Just use IntelliJ Idea, will you? ”
The only product that was not mentioned in this doc was LiveCycle Data Services. What’s the fate of this highly overpriced monster? Is it dead in the water? I don’t really care about this one. During the last six years I ran into one client who bought its licenses. On multiple ocasions I was trying to convey to Adobe that they should lower LCDS price, but they didn’t give a damn.
Adobe has inspired these T-shirts. Still, it’s sad. I’m going to miss Adobe Max conferences. They knew how to put up great events, really.
One of the most appealing features of Ext JS 4 is the fact that it has all you need to develop your application using the MVC architecture. You don’t need to add any third party MVC framework to your Ext JS application. In your controllers, that you attach to the application, you simply declare the class names for your store and a view. In return, Ext JS generates the controller’s getter methods to access the store and view instances and also allows controllers to intercept events that may happen anywhere inside the views. You are not forced to use MVC, but since it is convenient and does not cost much. I just finished preparing a 100% MVC sample for the upcoming release of the Ext JS version of our Clear Data Builder code generator.
Convention over configuration is the only price you pay for implementing MVC in your application. Just follow the strict folder names – controller, view, store, model. It’s not too expensive, is it? In fact, I like it.
That said, dare you to name a store class as MyApp.store.CustomerStore Ext leaves you one on one with eyebrow-raising controller code like this.getCustomerStoreStore(). In other words, Ext is appending the Store suffix for stores, Model for models and so on, softly suggesting that you should stay away from using your own suffixes.
Now, if you are anything like me, you get an instant acid reflux at multiple classes with the same core name like MyApp.model.x.y.z.Customer, MyApp.store.x.y.z.Customer, and, perhaps, MyApp.controller.x.y.z.Customer and others, especially when you jump between them in one editor. Do not worry – all you need to treat the “condition” is to override the createGetters method of the Ext.app.Controllerbefore your application starts, for instance – this way:
//app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.require(
['Ext.app.Controller'],
function () {
Ext.app.Controller.override({
createGetters: function(type, refs) {
type = Ext.String.capitalize(type);
Ext.Array.each(refs, function(ref) {
var fn = 'get',
parts = ref.split('.'),
pos;
// Handle namespaced class names. E.g. feed.Add becomes getFeedAddView etc.
Ext.Array.each(parts, function(part) {
fn += Ext.String.capitalize(part);
});
// --- Prevent StoreStore-like suffixes ---
pos = fn.length - type.length;
if (pos<=0 || fn.substring(pos)!==type) {
fn += type;
}
if (!this[fn]) {
this[fn] = Ext.Function.pass(this['get' + type], [ref], this);
}
// Execute it right away
this[fn](ref);
},this);
}
});
// --- Start your application when done
Ext.application({
name: 'MyApp',
controllers: [
'MainController'
],
autoCreateViewport:true
});
}
);
To learn more about the proper way of architecting enterprise applications attend our 2 day Flex-to-ExtJs workshop on April 19-20, 2012. Enter Victor as a promo code to get $100 off the price.
Claude Gauthier from Sencha showed us today an elegant way of using convert() method of Ext.data.Model to emulate computed fields.
And since Farata is working on the automation of the creation of the CRUD application with JS clients (the Beta version of CDBJs will be released later this month) this was very appreciated. Ability to use smart Data Transfer Object is crucial. Java and AS3 DTO allow creation of computed fields and we were looking for a similar feature in the ExtJS framework.
In the example below, fullName is a concatenation of lastName and firstName:
The only issue here is that, until you perform model.set('fullName', anyValue) ( or least model.set('fullName')) the value of fullName field might be out of sync, as shown below:
var user = Ext.create('Sample.model.User', { firstName:'Claude', lastName:'Gauthier'});
console.log(user.fullName); // Gauthier, Claude
user.set('firstName', 'Victor');
console.log(user.fullName); // Gauthier, Claude!
user.set('fullName');
console.log(user.fullName); // Gauthier, Victor
Can we enforce the user.set(‘fullName’) inside the model definition?
Yes, we can. To do that, add the following member function to the model:
Effectively you override the set() of the Ext.data.Model forcing it to recalculate the value of the fullName every time when either firstName or lastName get changed.
And, if the model is joined to a Store, by virtue of this enforced set() the Store will get notified as well.
This article is a transcript from a recorded conversation I had with Anatole Tartakovsky and Victor Rasputnis – my business partners at Farata Systems. This conversation took place on the mountain after the day of skiing.
Yakov. There are many ways of creating Web applications and creating them for the enterprises is not the same as developing a Web site for a pizzeria in your neighborhood. During the last five years we’ve been using mainly Adobe Flex for development of the front end of Web applications. Flex applications work in a well known and predictable run-time environment called Flash Player. The code is compiled and you have convenient tools for development.
Flex is undergoing “Under New Management” transformations these days. Even though Flex remains the best framework for development of Web applications, you can feel the pressure of HTML5. But using just HTML5 is not enough for development of Web applications – you’ll need the same old Dynamic HTML – HTML, JavaScript, CSS, and XMLHttpRequest object.
Anatole, we did it in the past and it seems that we’re entering the same waters again. Is it still the same river 7-8 years after?
Anatole. DHTML has been introduced in the Internet Explorer 5, and several years later it was renamed to AJAX.
Y. Back in 1999 Microsoft created XMLHttpRequest object to allow their Web version of the mail client Outlook to update the browser’s window without the need to refresh the entire page. Is this right?
A. Partially. IE5 also had the XSL transformation tool for HTML generation and sopported development of custom plugins. The market share of IE5 was about 90%, but in enterprises it was literally the only approved browser.
Victor. At the same time, IE5 supported the model of HTML components called HTC. It allowed you to create htc files containing your own custom components with properties and methods, which were visible in the Web browser’s DOM with all these properties.
A. In fact, this was a more progressive model than what’s offered by today’s frameworks supporting HTML5, because you could use a markup language combined with JavaScript to support your components. This model was similar to what Flex offers. Today, we see some kind of a plugin environment (a lowest denominator between the Web browsers) that allows using various frameworks. The situation is this field didn’t get any better.
On the positive side, the Web browsers have changed and performance of JavaScript improved substantially. The browsers support 6-8-12 connections per domain (as opposed to 2 five years ago), which gave a performance boost to AJAX applications.
Y. But let’s get practical. Say, I’m an enterprise IT manager with a limited budget and a 5-men team that has to develop a Web application. If I’d be using a predictable VM-based environment like Flex or Java with good tooling (IDE, compilers, debuggers, profilers) my job would be easier. But with JavaScript, the situation is different. First, the development cycle with JavaScript is longer (read more costly).
Second, not only I need to find skilled AJAX developers, but they’d need to know a bunch of modern JavaScript frameworks. Third, compilers are not catching programmers errors so I’ll need to allocate more time for testing. Victor, what’s your take on this?
V. If you ask me what has changed the most – it’s perception. In the beginning of this century we worked in the DHTML environment. Only a small number of developers was involved with this “suspicious” development. Enterprise architects had hard time adopting this pre-AJAX model and often asked the same question, “This is not J2EE, right?” We’d answer, “No, it’s not”. Then it was clear to the architects that it’s some amateurish offering that could be ignored.
During the last six years, development with Flex slowly became an approved enterprise technology – it’s compiled and controlled environment with good performance, testing tools, and internationalization support. Then, Adobe turned its back on Flex.
Y. And the way they did it could be included in the Bad PR section in textbooks. Instead of starting Adobe MAX conference in October of 2011 with a proud announcement that Adobe is donating Flex to Apache Foundation, which would get a standing ovation, they waited a month and made the same announcement right after declaring that they wouldn’t support Flash Player (Flex runtime) on the mobile devices. This sounded as if they wanted to kill Flex. But we know that Flex is alive!
V. Yes, it’s alive. Technically it remains the best environment for development of Web application, but politically it became the product of the past.
Y. And now many enterprise architects will say, “We told you to stay with JavaScript 5 years ago…” But I’d like to get your opinion about the cost of development using Flex vs. JavaScript. What’s more expensive?
V. It depends on the type of the person who’ll be managing this project. Is it a corporate or a startup manager? A corporate manager is a temporary person. He works 6-12 months and the either gets transferred to another position or leaves the company. He’s not really interested in the end result. He can stay within the budget during specific period of time, but the project may fail in the long run.
The hourly rates of JavaScript developers are smaller than of those who know Flex. And development with Flex is easier, the results usually look better comparing to today’s JavaScript-based applications. Development with Flex may be more costly initially, producing better results, which is not that important to the corporate managers.
Y. Yes, the main goal of the corporate managers is to climb up the corporate ladder and earn good bonuses and pensions rather than creating advanced applications.
V. They don’t always climb up the ladder. Sometimes they move sideways to another firm, where the same position brings more money or other career opportunities. That’s why the success of a specific project may have a lower priority to these managers.
Y. So what’s more expensive – Flex or JavaScript projects?
V. As you know, we develop in Flex all internal projects at Farata Systems. But if the clients are ready to open their wallets for JavaScript development, we gladly help them.
A. If you want to develop two identical projects in Flex and HTML5, there is a high probability that the HTML5 project will be more expensive. But I doubt that anyone will even try to reach the Flex-level quality in an HTML5 project. Any HTML5 enterprise project will have lower requirements in the first place. From the very beginning parameters like reliability, ability to adapt to different the screen sizes and densities will be simplified. Instead of implementing these features, the functional specification will include testing under seven browsers, and developers will spend most of their time in the debugger.
You’ll save on the compilation time but will spend more time testing during the runtime. The final deliverable of an HTML5 project may have as low as half of the functionality comparing to the same project developed in Flex. But you’ll gain a little better Web adaptability, easier implementation of full text search and mashups. The integration with other technologies will also become easier with HTML/JavaScript. You have to decide if all these advantages are important to your application. If they are – choose HTML5.
But often the HTML part this is just a tip of the iceberg. The base functionality is usually developed in Java or .Net, and back-office applications should be using Flex for UI anyway.
Y. All these people marching undwr the HTML5 flags will gladly start new JavaScript projects because it’s available everywhere, it’s free, the frameworks are open sourced and don’t belong to these filthy rich corporations like Adobe. In the past, it was cool to hate Microsoft, and in early 2012 is cool to hate Adobe. Do anything you can, cut any corners, lose functionality but don’t start a new project using Flex. This way we’ll belong to the mainstream – we’ll develop in JavaScript.
A. Yes, but JavaScript will enforce its limitations on any serious and complex enterprise project. You can develop a number of fairly independent windows, but creating a well debugged application (not a site) in HTML won’t be easy.
Now let’s return to the premise that performance of the browsers is substantially improved. Since JavaScript frameworks have to support various browsers from the same code base the size of their code increases, which lowers the performance and overall user experience if you compare similar Flex and JavaScript applications. I recommend establishing well defined boundaries between front and back office applications. You don’t worry that much about the productivity of the external end users. But if we talk about the internal enterprise users (back office), each of them is a salaried employee and they’d better be productive.
We spent more than six years in DHTML. We wrote our own framework and implemented DHTML enterprise applications for the Fortune 100 companies. We know all the loopholes in these environments and which ones still remain unpatched. As of today, you can’t compare Flex and DHTML. But there are some narrow fields, where you must complement Flex applications with DHTML.
Most enterprise applications have front end, back end, and back office (support, error fixes, et al.). The front end tier can consist of DHTML and Flex parts because today it’s hard to develop front and back office application in the same environment.
Y. Let’s talk about the situation on the market of JavaScript frameworks. There were about 200 such frameworks five years ago. In 2012 the situation is a little bit different – we’re talking about dozens of JavaScript frameworks. But still, there is no one framework that could cover all the needs of your Web application. Victor, what’s your take on this?
V. After Adobe has shaken the Flex world, I was shocked for a while. But then I realized that any good tool or environment should be replaced with the newer one some day. After spending some time researching the modern market of JavaScript frameworks I noticed that there are two main categories of frameworks:
a) Those that allow you to take an existing Web site and, by a magic wand, add new attributes to all
or other tags so they would start shining, blinking, or do some other fun stuff. Such frameworks don’t promote component-based development. They may not include navigation components, grids, trees, which are pretty typical for any UI of the corporate tasks or back office as Anatole called them.
b) The frameworks that are similar to Flex in that they offer high-level components, which may be based on
tags, and even allow you to dig deep inside such components whenever you need to know the internals of Flash Player while coding in Flex. But overall, such components are meant to solve different problems – highlighting and CSS are less important here. Mainly these components process some events, offer support of the Model-View-Controller and so on.
After further analysis I’ve learned that the framework Ext JS by Sencha is close to what Flex offers, but without compilation, data binding, and with less control.
I often use an example of a cat running over the keyboard of my laptop while a JavaScript file was opened in a text editor. Even if I didn’t notice this, I could successfully check in this file into a code repository, but it may not work afterward. Un-compiled environment is a dangerous place to be.
Y. Would your example work the same way for developers who have dogs?
V. Yes, but the number of errors will increase.
Y. Currently, the legions of developers are moving in the direction of JQuery framework. But we are moving perpendicularly. As you stated earlier, JQuery is good for improving an existing JavaScript site. With Ext JS you start with designing your application’s UI as close as possible to object-oriented principles. Ext JS has rich set of UI components, loader, offers an event model – it’s a different and better approach, right Anatole?
A. Today I lead projects that use both frameworks. JQuery is a light framework (code wise) and it can be used to program about 80% of a Web site. You should use it for the look and feel support, which is what it’s meant for. But you can’t use it for building your application component model. The component model of Ext JS is applicable in about 20% of a Web site, which includes an application piece rather than just being a set of Web pages. Typically it’s a serious view navigator or a wizard to implement a serious business process or a workflow that includes a client’s part.
Y. Data grid, of course…
A. Yes, high-level components and a workflow because often the user needs to perform several steps to complete a business process. And these 20% of an application will require 80% of the project time of complex development. So you won’t need to choose between these two frameworks. My main problem with AJAX projects is not how to pick THE best framework for development, but finding the right software developers. It’s hard to find people who don’t have cats around and can concentrate.
V. Absolutely, an extreme concentration and attention is a must.
Y. Or you can use one more framework that will take care of testing.
V. Absolutely everything must be thoroughly tested over and over again. Refactoring in JavaScript is a nightmare.
A. A software developer has to remember everything – all unfinished pieces of code. Many things that we take for granted in a compiled language are simply not supported in JavaScript.
It’s worth mentioning another type of frameworks that use Java for development with further generation of JavaScript, which is a controversial idea, because after writing the code you’ll need to debug it. This is when you’ll meet JavaScript, which is a foreign language for you.
Y. I guess, you mean GWT. There is one more reason of why this is a stillborn idea. The ideology and psychology of programming in JavaScript and Java are different. Five years ago I’ve written an article demonstrating how Cobol, Java, and Lisp programmers solve the same task differently. I guess, it’s time to add a JavaScript version to this example.
A. A person who writes in Java/GWT has to know how to read and interpret the JavaScript code in the debugger. Besides, GWT hides a large portion of JavaScript functionality.
Y. Plus Java doesn’t support dynamic programming…
A. Not too many people use dynamic programming, but it would be nice to change the language. Twenty years ago there were mixed languages that would allow using the dot notation to request some code fragments to call dynamically and some statically. We had a choice to either compile an operator or interpret it during the runtime. It was up to the developer. I won’t have peace of mind until JavaScript will support this.
V. Anatole, how many years should pass till people will accept the notion of compiled language running inside the browser (JavaScript, ActionScript, et al) along with an interpreted language? A. These questions were raised many years ago – remember the languages like curl? These languages were in R&D…
V. But they never became standardized for the use in Web browsers.
A. Exactly! Apple didn’t let Flash Player in their popular devices, and this became a huge obstacle for the evolution of Flex. The same thing may happen if some vendor decides to not allow any other language or environment in their devices killing these new ideas. For example, Google came up with a new language called Dart, but Microsoft says, “No, we’ll be improving JavaScript.”
Y. JavaScript frameworks promise to hide from you all incompatibilities and take care of the cases when a vendor won’t let some features in their environment.
A. I don’t think anyone will be able to translate the world literature into the language of the tribe Tumba-Yumba with very limited expressiveness. There are reasons why some languages are better then other for different tasks or application sizes. JavaScript is a very basic language.
V. But if you take Ext JS, their documentation suggests to use ext.create instead of the operator new. Technically they are extending or replacing the constructs of the JavaScript itself extending the alphabet. Any framework architect who wants to create a controlled environment will run into a JavaScript wall.
A. Partially this is correct. If you want to create a real dynamic or static language with the error checking and runtime compilation, you’ll have to substitute their constructors with the strongly-type ones that can throw exceptions.
C++ supports operator overloading and people used this feature for some time. But it didn’t last long – they realized that it’s hard to read and understand their own code. If a language allows you to write a code fragment that’s hard to understand – it’s better to remove this code.
V. I’d like to add to the subject of comparison of the JavaScript and ActionScript… I feel uncomfortable thinking that someone else will read, support, and refactor my JavaScript code. Actually, I’m not comfortable refactoring my own JavaScript code a couple of months later. In a non-compiled environment it’s tough. I don’t remember what’s the type of the parameter that’s given to the particular function.
In the compiled environment I’d always known each type and if an object still had certain properties or they were removed. But there is nothing like this in interpreted environment.
A. You can research the code, open each base class and check the references and find out what the properties are – the language will help you with this. I liked dynamic languages when I was 26 years old. A development manager will also have to hire young and very enthusiastic but inexperienced developers.
V. Today’s labor market consists of such people – inexpensive, enthusiastic, and inexperienced.
A. On AJAX projects such a developer will spend the first two months studying, on the third month he’ll start working, and in six months he quits for a simple reason – development is hard and the project arrived to a dead end. When the code base of such project reaches critical mass, the development process gets stuck.
V. The developer will quit not necessarily because the project got stuck. This developer will get more rewarding offers on the job market.
A. In other words, the project stops in 5-6 months – it becomes unmanageable because of its size. That’s why I’d like to stress that there is big difference between AJAX projects and those that are being developed in a compiled environment like ActionScript.
Y. I’d like to return to the question of JavaScript frameworks and browser compatibility. I like the analogy with TV sets. Even if I have the latest and greatest 3D LCD HD TV set and you have a 30-year old black and white television, we both can watch the same movie even though the quality of the picture will be different. In modern terms, you can say “The user experience will be different.”
Now let’s talk about the browsers. You use the latest Google Chrome, but I’m a corporate user who must use IE 6. Is it possible to ensure that the same JavaScript application works in both browsers?
V. The core part of frameworks try to address browser compatibility. They try to ensure that the page works as good as possible in every browser within its limit. But the script will work.
A. I don’t agree. In my opinion you can achieve browser compatibility not on the framework level, but by testing and adjustment of your application in different browsers. The statement that it’ll work somehow is an exaggeration. The chances are that you’ll have to fix the framework.
V. True. I already started making some changes in the framework even without developing overly complicated code. Maintaining compatibility is a huge challenge for any vendor that supports a framework. I remember our XMLSP framework that we created in the beginning of this century. We had a client form Great Britain who said, “This product is bigger than your company”. If I’m not mistaken, there were five of us who worked on XMLSP.
I’m sure, Sencha has more developers who work on Ext JS, but the framework is a lot bigger than we had. Most likely the code base and the task they are trying to achieve are comparable to Adobe Flex. No wonder that any such framework will always need some fixes and improvements.
I have no hard feelings when I make fixes in someone’s framework. I understand that these guys simply didn’t have time to fix everything. You need to form an attitude that a JavaScript framework is similar to a good Legos set that will require your creativity too. Don’t get angry. Cure the framework. Spend some time working on the framework, and then work on your application code. At least this is how I see the current state.
A. To rephrase what Victor said, either work with the simplest framework components that don’t give you compatibility problems or get ready to roll up your sleeves, learn what’s under the framework’s hood and staff your project with not not only application developers, but with systems engineers too who will spend half of their time on customizing the framework.
V. At this point the framework becomes your product too. I wouldn’t agree that half of the time should be spent on customization of the framework. It all depends on the long term plans. If you bet on a particular framework and plan to use it for years, than invest into its improvements But if this framework just had to address the needs of one project, just apply some patches and move on. In most projects patching a framework will suffice.
Y. To summarize, JavaScript developers will need to solve the same task as Java, JavaFX, Silverlight, or Flex developers face:
– Reliability of communications. What if the data never arrive from/to the server? Is it possible to recover the lost data? Where they got lost? Can we re-send the lost data? What to do with duplicates?
- Modularization of your application. If a user never clicked on a certain menu item on the main screen, don’t even load the code that should process this menu.
- How quickly the main window of your application is loaded to the user’s computer? How heavy is the framework’s code base?
- Where to store the application state – on the server or on the client?
- Does the framework offer a rich library of components?
- Does the framework support creation of loosely coupled application components? Is the event model well designed?
- Does the framework of your choice cover most of the needs of your application or you’ll need to use several frameworks?
- Is well written documentation available?
- Is there an active community that can help you with technical questions?
I can keep adding items to this laundry list. So if the words HTML5 easily get you excited, calm down. It’s not just about adding a tag video to a Web page. It’s a hard work with JavaScript. It seems that our company will have a lot of interesting and challenging projects in the foreseeable future, and we don’t complain.
During the last month my colleagues and I were immersing into the world of modern JavaScript frameworks. We didn’t start from scratch though. My business partners spent the first 5 years of this century porting PowerBuilder, a used-to-be-popular client server tool, to a JavaScript framework. That product was called XMLSP and you can still find its 5-year old version online. The word AJAX was not even invented back then. In 2006, a killer UI framework Adobe Flex 2 was released and we started using it. It was clearly better than any AJAX offering, and I was not shy in publishing blogs and articles explaining its superiority to any AJAX solution available at the time.
Flex remains a great solution for developing UI for the enterprise Web applications, and our company,Farata Systems, is committed to support any client who decides to hire us for any Flex/AIR Web/Desktop/Mobile project. But the world of software and hardware is hugely different in 2012 comparing to 2006. And we are stepping into the same JavaScript river once again.
Well, it’s not exactly the same river. It was renamed. The authorities replaced the old road sign AJAX with HTML5, but let’s not get fooled. It was DHTML ten years ago, and it remains DHTML now: HTML, JavaScript, XMLHttpReuest object, and CSS. But the modern Web browsers employ faster JavaScript engines, CSS is a lot more flexible, smart phones come with dual core CPUs, the speed of WAN is faster too (ok, just a little bit).
More and more enterprises are adopting HTML5/JavaScript, but software architects and developers are still looking for the features available only in the VM-based clients. Will an XYZ JavaScript framework manage client state, support atomic transactions and provide server-side push? Will it offer declarative UI programming, flexible layouts, rich component library, good event model? How many extra kilobytes has to go over the wire to the client if you use this framework? Will the XYZ step up to MVC, modularity, and reliable communications? What are the requirements for the developers’ skills? Is the learning curve steep?
Sounds familiar, isn’t it? We had to solve these issues in the past, and we’ll do it again. Promise. After spending some time trying to pick THE JavaScript framework that can address all these demands of serious Web applications, I can report that you won’t be able to find THE framework. But the good news is that by combining more than one framework you’ll be able to create a well performing and reliable Web application.
Based on on the research conducted in the underground labs of Farata Systems, I can report that our JavaScript framework of choice is Ext JS by Sencha. This framework can serve as a solid foundation for any serious JavaScript development. We’ll also use a couple of more lighter frameworks on as needed basis.
I’m also happy to report that we’ve created an alpha version of our Clear Data Builder (CDB) tool that will offer automatic code generation for JavaScript/Java CRUD applications with transactional support and other goodies that will substantially increase the productivity of JavaScript developers. CDB won’t be an alternative, but rather a compliment to any JavaScript framework.
In a couple of months we’ll publish the first demo that will show an automated generation of a CRUD application using use Ext JS, CDB, MyBatis, and Java. Why MyBatis? Because we like writing SQL, but the demo that uses Hibernate will come shortly after. We already started a new consulting project to prove that we can eat our own dog food, and this food has a good taste.
Adobe has submitted a proposal to accept their Cindyflexingrella to a very reputable orphanage: Apache Software Foundation. Overall, this can be a great news for the Flex community, which as opposed to Adobe, can afford to allocate enough of strong software engineers to make this framework flourish.
There were lots of applications for becoming initial committer to this new Apache Flex project. Only 25 of them made the list, and I’m happy to report that Farata’s own Anatole Tartakovsky has been accepted to this list. Just to make sure you understand Anatole’s caliber, I can tell you that five years ago he sifted through 16 thousand lines of code of Flex most complex component – DataGrid – and turned it into a more elegant object by removing about a half of its code. Back than, we had no easy way to make this component a part of Flex SDK.
The list of committers includes a number of people knowing really well what Flex has under its skin: Alex Harui, Michael Labriola, Peter Elst, to name a few. So the brain power is in place. But there are two sections in this proposal that bother me:
Known risks.
Moving from a corporate-led project to the Apache model of collaboration is a challenge, and Adobe is committed to help making the transition as smooth as possible, by delegating employees to work on the new project. We would like to see more free collaboration from the community but with the same principles that has kept Flex with the high-quality design and ease-of-use it has maintained under Adobe’s governing hand.
If I’d read this paragraph two months ago, it would sound great to me. Not anymore. It includes the words “Adobe is committed to…”. Sorry, can’t trust to any commitments made by this company that published an that infamous blog on a day that should be remembered as 11/9.
The second section that can kill this project is titled “External Dependencies”, but should be renamed into “Strings Attached”:
Some parts of Flex development rely on third-party libraries. The complete list is still being determined but some are:
• Adobe AIR SDK
• Adobe Flash Player SDK
• Adobe Text Layout Framework (TLF)
• Adobe Open Source Media Framework (OSMF)
• Adobe Font Engine (AFE)
Flash Player is a VM. Flex framework is pretty much useless if a VM won’t support it. Even if the next version of Apache Flex will include some killer features, how good it is if Flash Player won’t support them? It’s hard to believe that Adobe will plan future releases of Flash Player based on the needs of Apache Flex. I don’t like the phrase “We have made it clear to our community that going forward, the community, rather than Adobe, will determine the future of Flex.” Dear Adobe, we can’t determine the future unless you open source Flash Player. Open source might have an alternative though – not to use Flash Player as a runtime. Flex compiler makes a couple of passes producing first the ABC code (ActionScript Byte Code), and only then the byte code for Flash Player to run. If an open source community will come up with a compiler to turn ABC code into another run-time engine, Flash Player won’t be needed (this is how Adobe AIR apps get deployed in iOS now). But what other runtime?
The other big ticket item is Adobe AIR SDK. This is an great SDK for cross-platform desktop and mobile software development. AIR relies heavily on Flex SDK, and keeping in sink future releases of Apache Flex and Adobe AIR is not a trivial task.
What about the tooling? Flash Builder is always lagging behind, but Flex developers are using it. The proposal reads, “The existing Flash Builder trademark will be used as a commercial entity.” I’d rather see Flash Builder at Apache, but this is not a show stopper. JetBrains IntelliJ IDEA is a better IDE than Flash Builder and, hopefully, they’ll become a tool of choice for Apache Flex developers.
To summarize, I’m glad that Flex framework is given to the public, but the sky is not as bright as I’d wish it to be.
To make this post somewhat technical, I’m including a code fragment that Flex developers will understand.
While Flex framework supports working with focus, you need to help it a little bit in some scenarios. For example, if your application starts with a Login view it would be nice if the cursor would be automatically placed in the user ID field so the user can immediately start typing. Calling the function setFocus() on the TextInput will show a blinking cursor, but the this field doesn’t respond to the keyboard until the user clicks inside the TextInput.
This has to do with fact that the SWF embedded in the HTML Wrapper doesn’t have the focus yet. So you need to ask the wrapper to give the focus to your SWF.
As soon as you leave Flash Player, you run into Web browser compatibility issues. The code above works fine with IE, Firefox and Opera. In order to make it work with Chrome you must define wmode=”opaque” to SWFObject parameters (in HTML template).
It doesn’t work with Safari as of yet, and I’ll update this post as soon as I find the solution.
This morning ZD Net published an article stating the Adobe will cease development of Flash Player on Mobile in favor of packaging mobile applications in Adobe AIR.
The Flash Player haters quickly picked up this news and to draw attention to their blogs/tabloids started to cash on Steve Job’s name stating that he won the battle with Adobe since Steve was the one who didn’t let Flash Player on iOS.
As of now, I don’t know if these rumors are valid, but even if they are, this ain’t breaking news. Let me explain why in three simple sentences.
1. Adobe AIR includes Flash Player
2. Adobe AIR remains the main and the only means (at the time of this writing) for development of cross-platform mobile applications
3. Adobe AIR 3 Captive Runtime is a way of packaging the runtime inside the mobile application.
In other words, a mobile application developed in Adobe AIR and deployed in Android or iOS has inside the entire AIR runtime (this increases the size of the app only by 6-8MB) and won’t require neither iOS nor Android to ship the proper version of the runtime separately.
Once again, your mobile application has AIR inside, which, in turn, has Flash player under the hood. Machinarium is a good example of a console-quality game for iPad written in Adobe AIR.
The only question remains what will happen with Web pages that includes the videos requiring Flash Player. Most likely Web browsers will use HTML5-based video players. But let’s not confuse mobile applications and Web sites.
Anyway, no need to mourn. Have a wonderful day!
Update. The morning after
Next morning, Danny Winokur, Adobe’s VP and General Manager published a blog confirming the information from Adoleaks. This caused a storm of posts in the blogosphere, which predominantly blamed Adobe for betrayal. Peter Elst, an independent Flash developer even started gathering signatures to have Adobe CEO realize that he’s a bad guy and step down.
Our company, Farata Systems, has been working with Adobe’s product that were relying on Flash Player for more than five years, and we managed to build great relations with lots of corporate customers who used our services in building Flash-based rich Internet applications. After the announcement we started getting questions – was Flex the right choice? Can we reuse our investments in Flex in the mobile space? Should we abandon Flex and switched to HTML5 and JavaScript?
Adobe have caused serious damage to their image by having Mr. Winokur writing this infamous blog. I’m sure the top management of the company has approved it so Danny Winokur bears only a partial responsibility for this. My question is why Adobe decided to use one person’s blog for spreading this rather important news instead of publishing press release prepared with collaboration with their PR agency? Were their top executives ashamed to state it in a manly fashion? Professionally prepared press release could have include the proper wording along with the quotes of industry analysts who would offer their interpretation of the news. Have anyone seen an official PR on this subject? I didn’t.
I guess, after Adobe’s executives realized the size of the damage caused by that unfortunate blog (I hope Mr. Winokur is still employed with the firm), they asked other managers and technical evangelists to save the situation. Have a read:
1. Your Questions About Flex by Andrew Shorten & Deepa Subramaniam. Nice try, but these guys failed to deliver the main message: Adobe AIR 3 is a solid replacement of Flash Player for the mobile.
2. Adobe’s technical evangelist Lee Brimelow has mentioned AIR, but has deliver another wrong message, “No longer having to support the mobile browser version of Flash frees up valuable resources that we can redirect to these more important areas.” This is yet another mistake. Does Abobe put their customers first, or the most important goal is to do a reorg after laying off 750 people?
3. Mike Chambers, the lead product manager, speaks about AIR, but this message can be understood only by techies, and not corporate clients who were sitting on the fence trying to decide if they should develop with Flash or go with HTML 5. And we are talking about the corporate world that brings a huge portion of Adobe’s revenues.
Why people didn’t realize that Steve Jobs was heavily promoting writing pixel-perfect applications for iOS-powered devices, not Web pages? Adobe AIR 3 fits this bill. And as I wrote earlier, replacing engines in the browser-embedded Flash videos with HTML-5 one is not a major undertaking. So what the mobile world as the result of this misinterpreted Adobe’s announcement? Nothing. MXML, ActionScript, Flex framework, and AIR 3 remain the tools of choice for cross-platform mobile applications.
When HTML5 can be considered as a main choice for development of applications for both mobile and desktop platforms? It may happen several years from now. It’s great that Adobe is working into this direction, but they should have done it in parallel, not by stopping development of Flash Player without offering HTML5 alternative.
Anyway, the damage is done. Adobe spent years to become a recognized tool maker for the enterprise developers. Five years ago they were known as a company that created Photoshop. They managed to change this image. I really hope that they will find a way to remain on this market.
Here’s my message to Flex, Flash, and AIR developers:
“All IT shops that have invested in learning Flex or ActionScript for developing their desktop-based Rich Internet Applications will use these skills in development of the mobile applications in Adobe AIR. There is no need to jump the ship”
Update 2. After publishing this update I’ve learned that Oliver Goldman, a tech lead from the AIR team has been moved to the team that develops creative cloud. It’s time for Adobe to give away AIR to open source too.
Update 3. Two weeks after the infamous blog of Danny Winokur was published, Adobe made a statement explaining its upcoming strategic transformations.
Clear DataServices (ClearDS) is a free productivity tool that compliments Adobe AIR Native Extensions(ANE) for Android devices. It allows to embed BlazeDS into the AIR-based Android application.
Why ClearDS?
ClearDS has been designed for two purposes. Similar to ANE, it allows to code part of your application in Java with full access to Android SDK. In addition, we can turn an Android device into a server, broadening possibilities for application architectures.
Prior to ANE, simple features like Android Toast and Status Bar notifications as well as advanced ones like Text-to-Speech or Speech Recognition were out of reach for ActionScript coders. ClearDS allows you to embed the Android code into a Java class hosted by a servlet container with BlazeDS and remote to that class with standard and familiar <s:RemoteObject>. There is no dependency on AIR version and you can natively debug the Java portion of your application using Android Eclipse plugin.
By the same token embedding of BlazeDS into APK turns your application into a server. Now any computer on the same LAN or VPN can remote to your mobile device. Imagine a scenario where your mobile phone is used as a signature pad where you sign to complete an insurance application or a financial transaction. Here are some other use cases for your mobile phone:
- bar code reader
- better camera for your notebook,
- voice data/entry gadget that renders alphanumeric keyboard useless, eliminating costly clerical mistakes.
How Does It Work?
We fine tuned BlazeDS to be compatible with a set of core Java classes used by Android. To enable HTTP traffic between the SWF and Java portions of your APK we employed Winstone Servlet Container. Since Android APK generated by the Flash Builder generates a single-activity application, we extended this (activity) class. This allowed us to start the ClearDSService when the activity gets created. The service, in turn, starts the Winstone Servlet container. This allows your SWF-based ActionScript code to remote to your Java code within the boundaries of the same APK.
To make the developers’ life easy, we created the ClearDS Eclipse plugin.When you create a new ClearDS project you effectively create two projects: a Flash Mobile project and Android Java mobile project. These projects are related: the additional builder script of the Flash project contributes the SWF as an asset to the Android project. Then you just deploy your Android project the same was as the users of Android Eclipse plugin do. You develop MXML/ActionScript code in Eclipse’s Flash project, and accordingly, the Java code in the Android project.
Is ClearDS a Right Approach for You?
Adobe’s AIR Native Extension is a door opener to the world of native APIs of mobile devices. If you find an ANE with the functionality you need – just use it. Unfortunately, there is no way to debug mobile ANE. On the other hand, if you choose the ClearDS route, you will be able to debug the Java code using standard Android ADT Eclipse plugin.
So, as long as you feel comfortable writing Flex and Java code, download the ClearDS plugin and use it right away.
You can also watch this 10-minute screencast of ClearDS plugin in action here.
We also started added the ClearDS-related content to the wiki page of Clear Toolkit located at this URL. You may also subscribe for our new video channel at Youtube.
On August 12, I participated Farata’s symposium for Enterprise developers for the second time. But unlike the first time, I was on the other side of the barricades. I presented my research in the field of functional testing of Flex-based RIAs. Since my previous preso at NJFlex user group, I figured out how to include automatic functional testing in enterprise application development life cycle.
In these presentations, I demonstrated what a Flex developer needs to know to prepare his or her application or even a single component to painless UAT or QA testing. Using the tool FlexMonkey form GorillaLogic I demonstrated the basic concepts of interaction with Flex Automation API and components instrumentation. And for dessert, I showed how to automatically run functional and unit tests on each code commit to the version control system. The screenshot above is an illustration of what I was talking about – instrumentation of components, introduction to FlexMonkey – an open source Flex-enabled testing tool, and Jenkins – one of the best open source continuous integration servers. The entire enterprise RIA development cycle was sampled.
Stop! Why am I trying to write the transcript of my preso?
If you missed the event, you still can download my presentation slides from here. Find the sample source code here. And ask your testing-related (or not) questions in the comments to this post.
I don’t like most of the Flex MVC frameworks cause they force me to write more code. I do like frameworks and tools that let me write less code. But there is no free lunch and, at some point, even productive frameworks, tools, and libraries reach critical mass and the finger pointing game begins.
Today, I’ve been working on an application that was supposed to display a list of orders form a relational DBMS. Not a rocket science. But let’s go over the languages, libraries, tools, and frameworks I had to use for this.
First, I wrote a 20-lines SQL Union statement and tested it in Oracle’s SQL Developer. Then I generated 80% of the code and wrote the other 20% manually. Here’s what I was using:
1. Eclipse IDE for Java EE Developers (Eclipse Foundation), which comes with the WTP plugin
2. CRUD code generator Clear Data Builder (Farata Systems). It generated the initial application written in Java, ActionScript, MXML. It also generated ANT build script
3. Configured Apache Tomcat (Apache Foundation) to run from inside Eclipse – this is where my rich Internet application is deployed.
4. Added to the project the libraries of MyBatis (Clinton Begin and Apache Foundation). This is a light-weight data mapping framework. You map manually written SQL to a Java DTO, which eliminates the need to write JDBC.
5. Spring Framework (Spring Source) was used to simplify wiring of MyBatis into my Java applications.
6. BlazeDS framework (Adobe) is being used for efficient serialization of the server-side Java into client-side ActionScript objects and back via AMF protocol. This exchange happens between the peer ActionScript/Java DTOs.
7. The ActionScript DTOs where automatically generated based on their Java peers by the DTO2FX tool (Farata Systems)
8. Most of the Java code was generated, but I had to write small fragments to be called for data manipulations via SQL/MyBatis
9. The latter would engage the Oracle driver and DBMS (Oracle)
Everything’s ready. Start the server, run the Flex app, and…instead of data I’m getting this error “org.springframework.jdbc.UncategorizedSQLException : Error setting null parameter. Most JDBC drivers require that the JdbcType must be specified for all nullable parameters. Cause: java.sql.SQLException: Invalid column type“.
This error message is misleading. I do insert parameters to the SQL Select, but they are not nulls. I don’t insert anything into the database. The worst part is that there is nothing left to debug. Everything up to the last SQL-annotated Java method declaration works fine. But you can’t debug a method signature, can you? Who is to blame? Oracle driver? Or should I get the source code of MyBatis trying to find the line of the code that blows up?
Enough for today. Going home. I don’t know what’s causing this issue, but I I’ll find the solution. The only question is how much time I’m going to spend on it. Do all these productivity frameworks and tools really save time in the long run? Would I be better off writing JDBC code manually? AS a matter of fact I like MyBatis a lot better than Hibernate, but still…Where are the time savings?
I received an email from an experienced Flex/Java developer stating that he likes some of our open source components, but questions the need of automated code generation. His main argument was that they already have a pretty large code base in Java with their own inheritance model and introducing code generators wouldn’t be an easy thing to do. I started typing the answer to that email, but then decided to make a blog out of it.
Those who don’t know our open source Clear Toolkit and its code generator Clear Data Builder (CDB) may refer to its Wiki page. To make it short, it generated CRUD application with fully functional communication between the Flex and Java layers.
Developers in a green field situation can generate the entire project with CDB and use it as a foundation for all development activities. But this time I want to make a statement, that even if you already have an existing Java persistence layer, you still can use the generated Assembler/DAO Java classes and Java/AS3 DTOs. We generate the code for Java service classes supporting automatic data synchronization between our Flex DataCollection and Java service classes.
The DataCollection automatically keeps track of all UI modifications made by the user via ChangeObjects. This piece alone is pretty valuable time saver.
We don’t dictate how you are going to implement the server-side business logic and persistence mechanism. You have EJBs extended from other classes? Fine. It’s none of our business. You want to use JPA based on Hibernate or EclipseLink? It’s up to you. Prefer Java Spring Framework? Select one checkbox in our Eclipse plugin. Want to code most of the Flex UI manually? No problem. But when the user will hit the button Save, call MyDataCollection.sync() and for retrieval – fill(). We are not intrusive.
I personally, don’t like Hibernate and prefer lighter MyBatis data mapping framework. Please go over the step 3 of our Flex/MyBatis tutorial at the Wiki site. On the Java side you write the following:
- Java DTO
- the Java Mapper, a MyBatis thingy that maps DTOs to SQL statements (we use Spring Dependency Injection)
- Java service class
Want to replace calls to the MyBatis layer in the step 3.4 with the calls to your pre-existing session EJBs? Easy. Want to write JDBC for persistence? It’s your call – instead of a Mapper class, invoke your manually written JDBC code in the step 3.4.
Now let’s take a look at the step 4 of the tutorial that deals with the Flex front end. CDB generates for you the entire under-the-hood communication between Flex and Java. No need to create RemoteObject, just call the method fill() that will find your service Java class and will get the data. For persistence, just call the method sync(). Keep in mind that we are talking about BlazeDS, not LCDS.
We also support nested data collections for master-detail scenarios (steps 7 and 8 of the tutorial) and data sync between multiple clients. We eat our own dog food. We’ve used this process in multiple real-world projects of various complexity. It works for us. It’ll work for you too.
Yesterday I was giving a talk and the demo at Farata’s Fourth Annual Symposium on Software Development. The title of this presentation was “Using Mobile Technologies in the Brave New World of Computing”.
It was a mix of the presentation slides an a live demo of an enterprise application SureLC (an automation of insurance agents’ routines) running on a desktop, Motorola Xoom, and Apple’s iPad shown on the photo above. During the first part of this presentation I was giving a brief overview of today’s mobile landscape and highlighted some issues that any enterprise development shop moving to mobile should consider.
The quality of this audio (61Mb) recording is not perfect, but I hope you may find some of the content useful.
The slides of this presentation can be downloaded here.
There is this long discussion on Google + stating that the Flash Community Needs a complete reboot. It’s not possible to read all the comments posted there, so I’ll just answer a couple of statements from the original post. I don’t believe that the statement “The Flash community needs a complete reboot” is the right prescription. I’d rather say “The Flash community needs to go out of the closet”. Five years ago it was a relatively small group of people who developed games and banners and knew each other. Over the last five years Adobe did a good job in expanding into the enterprise developers’ market. This turned Flash Player from a small player into an important part of many mission-critical applications.
Having said that, the Flash community should get used to the fact that the toolbox of the today’s Flash/Flex/AIR developer has to include a bunch of languages and tool other than ActionScript.
In our company (Farata Systems) we’ve been actively using Flex/Java during the last 5 years. Now we are shifting more to the AIR/Java/Mobile combination. I personally do a lot more Java during the last year than Flash. So does it mean that the world around me is changing? No, I just happened to have a client that’s heavily into Java.
Regarding Adobe and their MAX conference. I like this company and this conference – I have free passes to MAX and JavaOne that take place during the same week, and decided to go to MAX. But I realize that MAX – this is a commercial event where Adobe wants to share their plans with the world and show off their latest achievements. It seems that they have really small number of speaking slots for non-Adobe employees, and these slots mainly go to their sponsors.
I realized it some time ago, and don’t bother sending them speaking proposals – ain’t going to pay for the privilege to speak at MAX. But speaking of Adobe supporting the community… I’d assume that Adobe could invite someone from our company to speak at Adobe MAX after we published two advanced bestselling books on their technologies and actively promoting (for free) Flash Platform in the enterprise world? They do invite us to participate in the Flash Platform expert group, and we gladly share our thoughts wishing this platform to succeed, but, I guess, we should do it quietly, behind closed doors without getting any accidental PR.
From the business perspective, I don’t see Adobe helping our company. No biggies – they create good software and we use it to generate profit. It’s a fair game. We create our own conferences, and speak at the smaller technical events. Are we planning to move away from Adobe Platform and tools? Not in the foreseeable future. Till when are we going to stick to Adobe’s tool set? Till someone else offers more productive platform and tooling for development of the enterprise applications with the UI that works cross-platform under Window, MAC OS, iOS, and Android.
I’ve submitted a speaking proposal to the 360Flex unconference in LA, where I’m planning to talk about…Java in a fun and simple way. Does this mean that I’m going away from Flash platform? Not at all. But I do like Java and hope there are people in the Flash community willing to learn this super-powerful Java platform that works nicely together with Flash/Flex/AIR.
This Friday I’m making presenting at Farata Symposium on mobile development. Initially I was planning on just extending the same presentation I was doing in Denver @ 360Flex – showing the mobile version of a sales automation application and then presenting guidelines the developers can follow to build new mobile applications.
Yesterday, I tested my presentation with a small audience of senior enterprise developers to see if I address the real needs of enterprises. After all, my demo was based on experience with startups and their perceptions on what is important might be slightly different.
It seems that the current IT thinking on migration path is heavily based on gradual replacement of the pieces of the puzzle (a complex enterprise application) on as needed basis. Running existing applications via remoting technologies like Citrix is also not feasible. This piece meal approach to technology shift would be difficult to implement and would lead to bad user experience on mobile and portables. It would cause multiple versions of UI being developed and maintained at significant extra cost by independent teams. Scope of applications would be reduced to accommodate only certain target audiences with very little reuse among platforms. In short, such approach will result in the same fiasco as with Java “run everywhere” approach multiplied by number of form factors and platforms.
After this test run I decided to drastically shift the focus of the presentation. We will start with the broad overview of the changes that are already happening or can be expected within the next 6-9 months. I will cover the challenges that different form factors and platforms introduce to a typical enterprise UI. I’ll will go through each artifact of the application design: Themes, Skins, Layouts, Controls to explain the role and options they present in solving the overall puzzle.
Next we will discuss the personal cloud that is being built with all the new always connected devices: from phones to TVs. Finally I will present out-of-the-box solutions that developers can use to address all the challenges.
In short, I will show how to avoid the painful process of migrating to the new platform by caring too much luggage, and how easy it is to build unified modern interface. I’m sure, this will save you, the mobile developer, much more then a day you’ll spend attending this event. If you are in New York City, consider attending this event and be a part of our informal technical discussion.
During the last two months I’ve interviewed a number of senior Java developers for a position at the financial firm. Vast majority of them have 10+years experience working with Java on real-world financial applications. They have lots of interesting projects on their resumes, know how to present themselves, are self-confident, and claim the expert level of Java knowledge.
But it seems that most of them assume that just spending years working on Java projects is enough for considering themselves Java experts. The fact that you’ve been using Hibernate, Spring, JMS, and some caching framework doesn’t make you a Java expert. Over the years you might have improved your understanding of the architecture of Java EE applications, but this doesn’t not make you a Java expert.
Back in 2004, Java 1.5 has been released. Besides generics and annotations it introduced the library of classes supporting concurrency. I don’t care if you know generics, but this library is golden, especially for Java developers who are applying for working on financial applications. Many of these Java veterans never bothered looking into the latest Java features for years. And if I’m asking any concurrency-related question, a typical answer is “Oh yes, I remember there were some new classes that can do this.” Some new classes? Come on, they were in Java since September of 2004!
If a job applicant believes that the only two ways to create a Java thread are extending a Thread or implementing Runnable, he’s not a senior Java developer regardless of how many years he spent working on Java projects. This tells me that this person doesn’t care about Java and is not interested in keeping his technical skills current.
This is one of these “less is more” situations. People who have learned Java after 2004 are more likely to know it better. My message to Java veterans is simple, “If you want to compete with young kids, spend some time learning Java programming. Become competitive as you were ten years ago. Otherwise your only option is to complain about the outsourcing that may take away your job any day.”
I’ll be giving a 2-hour crash course on Java next week during our Fourth Symposium on Software Development in New York City. Come over. Let’s enjoy Java programming together!
This was an interesting bug… I was working on a Web application, where Adobe Flex client was sending an instance of an ActionScript WrapperObject to the Java server, which was supposed to invoke some JBDC code to run an SQL Insert statement saving the data from the Java version of WrapperObject in the database. I wrote all the pieces of Flex, Java, and SQL and started Tomcat in Eclipse IDE.
The Web browser displayed my window, I filled out the form populating the ActionScript WrapperObject and pressed the button Save. Nothing happened. No errors and no data inserted in the database.
Well, need to start debugging…Let’s see what could have gotten wrong:
1. I didn’t properly populate the ActionScript WrapperObject
2. I didn’t properly configure the Java class/method so the front end didn’t even call it.
3. I didn’t code the database portion properly.
But why there is no errors? Starting the Flex part in the debug mode quickly revealed that the WrapperObject was properly populated and the asynchronous request to the Java server has been sent.
Great. The next question is, “Have I called the proper endpoint (the destination) on the Java side and if the correct method has been really invoked?” Started an HTTP/AMF sniffer, which confirmed that I was calling a method on the endpoint mapped to the class Customer shown below. On the Java side, the class hierarchy looked as follows:
class _Customer {
…
publicboolean saveData( WrapperObject wrapper){// an empty method }}class Customer extends _Customer{publicboolean saveData (WrapperObject wrapper){// the code saving data in DBMS was here}}
Without leaving Eclipse IDE, restarted Tomcat in the debug mode and put a breakpoint in the caller of Java’s saveData. Interesting… The debugger brought me inside the empty method of _Customer.saveData. Do you see any spelling errors in the method signatures? Me neither. This was about time to use a Java annotation @Override, which I was always underestimating. Changed the class Customer to look like this:
class Customer extends _Customer{
@Override
publicboolean saveData (WrapperObject wrapper){// the code saving data in DBMS was here}}
Sure enough, the Java compiler immediately told me that the method saveData has to override the one from the superclass. But I did override it, didn’t I?
The problem was that my project has two different versions of the class WrapperObject located in different packages! The superclass was using the WrapperObject from one package, but the subclass from another! This little annotation caught what my eyes didn’t see. Fixed the import statement in the subclass to properly override the method saveData, re-ran the program and got… an SQL error stating that I have an extra comma somewhere in my Insert statement. But this one is a piece of cake! I was so happy.
Thank you Java @Override – you made my day!From now on I’ll be using this example in all my Java classes.
Flash Player does a very good job in rendering of small to medium data collections. But some enterprise applications need to offer the users to manipulate with tens of thousands of records. One of the projects of recent efforts of Farata Systems is extending standard Adobe Flex collections to make them faster. We call them “lazy collections” because they bring the data to the client in a lazy fashion – only when the user requests them. This approach allows creating responsive UI that renders large sets of data without causing delays on the UI.
In Flash Player based RIA, non-responsiveness in data manipulations is usually caused by one of the following:
1. Slow retrieval of the data set from the storage (e.g. slow response from DBMS).
2. Limited network bandwidth or use of inefficient network protocols
3. Poor data rendering to the UI components (UI freezes)
In this blog I’ll be talking about the poor data rendering. Typically, we create RIA where Adobe Flex communicates with the server-side Java using the AMF protocol (Java to ActionScript serialization via BlazeDS). AMF is an efficient HTTP-based protocol for transferring strongly-typed data (Java Data Transfer Objects). But on the UI side you may start experiencing slowness even on medium-size data grids displaying 500 rows by 50 columns. Add to such grid poorly written item renderers (with nested containers) and Flash Player quickly becomes a bad guy.
It’s hard to find a Flex enterprise application that doesn’t use DataGrid, and it has to offer responsive UI and smooth scrolling of the data collections that serve as a Model in the MVC-based environment. When BlazeDS deserilizes large amounts of Java bytes into ActionScript objects, the users may experience a freezing effect, when the UI is not responding to any user’s actions until the serialization is over. The reason being that Flash Player performs this deserialization in the same thread as UI rendering.
When the size of a data collection becomes large (e.g. 30 thousand of ActionScript objects), it’s better to find a way of not bringing all the data at once to Flash Player. This is the main idea of our lazy collections. It’s about combining smart data pagination and scrolling.
You don’t want to load the entire data set into the Java server’s memory to avoid crashing it. While preparing the screencast that demonstrates advantages of our lazy collections vs. the standard ActionScript ArrayCollection, I had to increase the amount of heap memory on my Tomcat server to prevent Java’s OutOfMemory exceptions – and I was the only user sending data requests to the server! What is a hundred users will cause the server load into memory datasets of a 100Mb each? You need to provide at least 10Gb of memory on the server.
We decided to create data collections that use pagination on the server in conjunction with the smarter collections on the Flex client. We have created beta versions of collections supporting both Halo and Spark Flex components. Even though we are extending standard Flex collections, the processing of the asynchronously arriving data is different in Halo and Spark. Halo’s components are heavier, but smarter when it comes to asynchronous data retrieval. The standard Flex framework (without LCDS support) doesn’t offer any support of lazy loaded collections, and we had to follow our usual path – adding the missing features to BlazeDS. These are our main collections:
LazyIndexedList – a subclass of ActionScript ArrayList that loads the data objects on demand. For example, the initial data set may contain only a hundred out of fifty thousand objects. If the user scrolls the data in the data grid component and hits the last object of this first hundred, the LazyIndexedList will automatically request the next hundred from the server.
HugeIndexedList adds the ability to unload unused data from memory. This class monitors the current scrolling position to avoid unloading the data being viewed.
There is some work in progress to complete the functionality required by the Spark’s AsyncListView collection. In the future, these classes will be included in our Clear Toolkit set of components. Meanwhile, you can watch this 9-minute video to see these collections in action.
This post is a sequence to our announcement that we taught Adobe AIR to talk to native Android API by placing BlazeDS inside Android. Initially, we embedded BlazeDS into AIR-Android APK (watch this video) to use Google voice recognition for the data entry. The plan was to be able to invoke the following Java code from BlazeDS :
[quickcode:noclick] Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
intent.putExtra(RecognizerIntent.EXTRA_PROMPT, prompt); // We wanted to use Text-to-Speech as well
startActivityForResult(intent, 12345);
[/quickcode]
The first challenge was that features like voice recognition, Toast (Android popups) and other dialog functions, are supposed to be run in UI thread vs. a worker thread of the BlazeDS. In particular, startActivityForResult() is a method of Activity class. This was an easy to solve problem, because we could place this code in our own activity and start this activity via Intent.
The real challenge was that the voice recognition software does not return anything until the computer-human interaction is complete. In other words, the Java piece to remote is asynchronous - you start the Recognizer activity by invoking the function startActivityForResult() and, sometime later, get notification via an async callback when the results are ready:
The low-hanging solution to this asynchronicity was to push the results from BlazeDS to a messaging destination that would be listened to by an AIR application:
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
switch (requestCode) {
case REQUEST_CODE_RECOGNIZE_SPEECH:
if (resultCode == RESULT_OK) {
ArrayList recognizedPhrases = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
// Now we are ready to pass results back to Air code.
MessageBroker msgBroker = MessageBroker.getMessageBroker(null);
AsyncMessage msg = new AsyncMessage();
msg.setDestination("voiceRecognitionResult");
msg.setClientId(UUIDUtils.createUUID(true));
msg.setMessageId(UUIDUtils.createUUID(true));
msg.setTimestamp(System.currentTimeMillis());
msg.setBody(recognizedPhrases);
msgBroker.routeMessageToService(msg, null);
}
break;
}
super.onActivityResult(requestCode, resultCode, data);
}
This worked, but made the AIR code ugly: we had a RemoteObject with a non-functional result handler plus the messaging destination and a Consumer, which clearly would be replicated for each call of that sort.
LongCalling to the Rescue
And then we realized that this was a déjà vu. We had been there when a stored procedure in one financial application would not return for 3 minutes. We helped that customer without breaking the remoting model. We used the “long calling” instead.
Long calling is Farata’s term to label the customization of a Java adapter and RemoteObject that allows us to quickly receive a dummy return of the original long remote call and reincarnate the mx.rpc.ResultEvent when the real data is ready. By using a customized RemoteObject the application code becomes agnostic to the fact that remoting operation has “two legs”. The only requirement that we add is that the name of such remoting method has to end with “AndWait” as in recognizeVoiceAndWait(). This signals to the ActionScript side that this invocation is a “long calling” and this knowledge is carried forward to the custom Java adapter.
On the Java side, we implemented a PlatformServices object with several methods, most importantly, startActivityAndWait() and complete(). Here is how we start our own SpeechRecognitionActivity. Notice that the first parameter of the runActivityAndWait() is an intent to start an activity, while the second one is a class of the expected result:
public List recognizeVoiceAndWait(final String prompt) {
final Intent intent = new Intent(PlatformServices.context(), SpeechRecognitionActivity.class);
intent.putExtra(RecognizerIntent.EXTRA_PROMPT, prompt);
return PlatformServices.runActivityAndWait(intent, STRING_LIST);
}
final private static Class> STRING_LIST = null;
The SpeechRecognitionActivity() will start the Recognizer activity precisely like we did in the earlier code snippets. Meanwhile the worker thread that started it will be blocked. It will remain in the blocked state until the onActivityResult() callback from inside the SpeechRecognitionActivity issues the complete() passing exactly the same intent as was used during runActivityAndWait() – this intent is preserved in the onStart() of the SpeechRecognitionAcitivity:
@Override
public void onActivityResult(final int requestCode, final int resultCode, final Intent request) {
if (requestCode == REQUEST_CODE_RECOGNIZE_SPEECH) {
final List result;
if (resultCode == RESULT_OK) {
result = request.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
} else {
result = null;
}
complete(originalIntent, result); // We preserved originalIntent during onStart() of the activity
finish();
}
super.onActivityResult(requestCode, resultCode, request);
}
That’s it. The only limitation is that due to the blocking mechanism of runActivityAndWait() only one at a time call can be executed. Accordingly, the AIR application should avoid sending several “AndWait” requests in one AMF batch.
LongCalling in Action
And, of course, the AIR’s code won’t care about runActivityAndWait and complete() pairs at all. For all it knows, there will be regular remoting calls, albeit ending with “AndWait”:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:c="library://ns.cleartoolkit.com/flex/clear"
title="Voice Recognition"
>
<fx:Declarations>
<c:RemoteObject id="service" destination="AndroidJavaDestination"/>
</fx:Declarations>
<fx:Script><![CDATA[
import mx.collections.IList;
import mx.rpc.AsyncToken;
import mx.rpc.Responder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable] private var recognizedPhrases:IList;
protected function onTextInputFocusIn(event:FocusEvent):void {
var target:TextInput = event.currentTarget as TextInput;
promptAndListen(target.toolTip || target.id, target);
}
private function promptAndListen(prompt:String, target:Object):AsyncToken {
recognizedPhrazes = null;
var token:AsyncToken = service.recognizeVoiceAndWait(prompt);
token.addResponder(
new mx.rpc.Responder(
onRecognizeVoiceResult, onRecognizeVoiceFault
)
);
token.target = target;
return token;
}
private function onRecognizeVoiceResult(event:ResultEvent):void {
recognizedPhrases = event.result as IList;
var textInput:TextInput = event.token.target as TextInput;
var bestMatch:String ;
.... Find the best match from recognizedPhrases
textInput.text = bestMatch;
}
]]></fx:Script>
. . .
<s:Form width="100%">
<s:FormItem label="Name:">
<s:TextInput focusIn="onTextInputFocusIn(event)"
toolTip="Employee name"/>
</s:FormItem>
<s:FormItem label="Phone:">
<s:TextInput focusIn="onTextInputFocusIn(event)"
toolTip="Phone number"/>
</s:FormItem>
. . .
</s:Form>
</s:View>
If you are interested to see this solution in action, I’ll be showing it in August during our fourth annual symposium on enterprise software.
The long weekend of non-stop rainy weather presented rare opportunity of organizing the thoughts on the new developments in the industry and prepare to my presentations at the upcoming Fourth Farata Symposium ahead of time. Over the course of two days the consolidated theme emerged – these projects I’ll demo at the symposium are going to be about Prosumer eXperience (PX).
Every element of the software I will be showing has to be upgraded from the plain vanilla Flex/BlazeDS/AIR functionality to adjust and match the target audience. The efforts included creation of a brand new sets of controls, mobile devices integration, modifications in communication protocols, PDF/files integration. Everything needs to be consumer-oriented – with touch interface, simple navigation, integration with voice / phone/location services, contacts, etc. And at the same time it should allow repetitive use by an experienced user in the speed of the back-end systems so UI should not stay in a way of productivity. The conventional approach to the user experience fails. Finally, the same application has to be available on all platforms – PCs, Macs, tablets, TVs – to be really accessible by consumers. Its a long journey, and we are not even a half way there.
Let me define this “pro” in the term prosumer. The term was coined by futurologist Alvin Toffler in 1980,it’s not commonly used today. Loosely, Toffler’s “proactive consumer” prosumers were consumers who were predicted to each become active to help personally improve or design the goods and services of the marketplace, transforming it and their roles as consumers. Basically it is another term of user driven approach, with user feedback as a main driver for new features/streamlined workflow. Simplicity is the king, and the current level of service desk/community driven software makes the whole process both simple and pragmatic.
The most common usage of the term describes the prosumers as enthusiasts who buy products that fall between professional and consumer grade standards in quality, complexity, or functionality. One of my applications (it’s for insurance salesmen) is specifically targeting 250K-1M people that are in that category. I was amazed to find out how many people in banks, investment companies, etc. fall in this category of users.
Finally, the “producing consumer” prosumer creates goods for their own use and also possibly to sell. Wikipedia states it is uncommon usage. I respectfully disagree. At this stage, we all are producing consumers of Google, Amazon and other services. It would be stupid not to capitalize on users experience in our client’s domain field. My post graduate work was on expert systems. I will be showing how AI built upon rule-based expert system for financial services are affected by facts – statistics and field feedback – to produce the results that actually work.
PX is an upgraded, almost a back-office grade software short of administrative and final approval functions allowing users to achieve more of what they want without training with access to a decision making process of the best in business and with amazingly simple interface. As you decide to go down the rabbit hole, more information used to make decision is exposed allowing you either take different turns or ejecting you into different hole. Think of it as a continuous search based process with context that becomes your product – a kind of a shopping cart. Think of the process of buying a new computer when you start with buying a laptop and end up with a server and tablet or vice versa – it’s based on what you really need.
Prosumers are building their world of information, and these networks (unlike the social ones) can become extremely wide-spread and very sophisticated. While Google+ is aiming @ consolidating facebook, tweeter, meetup and linkedin in a better connected net, its search services or verticals are working across all the users, providing much greater value. Capturing the information and applying similar approach becomes the fashion of the day and a foundation of the new business models.
During the last 15 years I’ve presented at dozens of conferences and taught hundreds of training classes on various programming subjects. I’ve been attending or watching lots and lots of different technical presentations. In this article I’ll give you my opinion of bad and good practices of speakers and presenters.
1. Show of Hands. This is popular but bad habit. Have you ever been to a presentation that starts with 3,4,5 questions like “Raise your hand if you are using so and so software for less than 1 year”. “”Now, between 1 and 3 years?” “Let me see a show of hands: who used this framework in a real project?” And on and on and on. Why wasting time of the audience on this BS? You’ve got only 45 minutes to make your point. Just get straight to the meat of your talk. People in the audience are not idiots. They’ve read the description of your talk in the conference brochure, and decided that your talk has some value. They are sitting here for a reason. What if the show of hands reveals that 70% are mid-level developers and 30% are beginners? Will you ignore the interests of these 30% and cover the subject addressing only more experience crowd? This is dead wrong. This is a conference and not a private tutoring gig, where you can cater to the needs of the single person. Include in the description of your talk the expected skill level of your audience and present.
2. Masturbation. The goal of your presentation is not to enjoy yourself and please your ego. People should get some satisfaction too. They came here to learn from you not because you’re God, but because you had a chance to research this particular subject better. Showing your expertise is fine, but give people something they can use in their daily routines.
3. Timing. People prepare slides without bothering if they’ll have enough time to go through all of them during the available time slot. Recently I asked someone to give a 45-minute talk and send me his slides in advance. When he sent me a 30-slide deck, it was clear that he won’t make it in 45 minutes. I use a simple rule – you need two minutes per slide (I’m not talking about Steve Jobs type of slides containg just one word iPhone or iPad). Time your preso or you’ll end up with “How are we doing on time? Only 5 minutes left? OK, I’ll wrap up real fast. Anyone can grab me in the corridor. ” Yeah, right!
4. Visuals. Some presenters believe it’s cool to bash powerpoints and start their presos with statements like “This is a one slide show. I won’t waste your time flipping slides – we’ll get straight to coding!” The crowd roars in joy – finally, the real geek is on stage. No fluff! The presentation went fine, the star is gone, and what are you left with? Nothing. Yes, he proved that he could do it. Now what? Can you repeat it at home without any visual materials supporting this talk? Most likely not. Prepare your slides and upload them to YOUR server BEFORE your talk regardless if the conference organizers promise to publish them after the event. Include the link to your slide deck on the first or last slide. And please, use the largest font size you can so people on the back can read it.
5. The 2-Minute Rule. This pertains to a classroom situation, when one student can’t complete the exercise because he ignored some required configuration steps. You were trying to help him… 5, 7, 10 minutes passed, but it didn’t work anyway. Other students start browsing Internet or check their emails. Last week I was running a training class where students were supposed bring their laptops with installed Eclipse 3.6 for Java EE developers and Apache Tomcat 7. But some students decided to do better. They’ve upgraded to Eclipse 3.7 that came out one day before the class. One guy had Eclipse for PHP developers. One person had Tomcat 5.5 installed 3 years ago. They started to have all sorts of errors. In cases like this, if I can’t fix the issue within 2 minutes, I ask the students to re-install the software as per instructions. You can’t steal time from other students just because some early adopters ignored your instructions. Even if this issue is not caused by the student’s wrong doings, move on with the class. Make an early break and help this person, but not at the expense of other people.
6. Ignore the Bosses. In the beginning of a hands-on class, I always ask about the students’ expectations. Yes, 9 out of ten are software developers, and here’s their boss. No he’s not coding, but wanted to join the class to get a better understanding of what tool his people are using. Teach your class as if this big shot is not even there. This is a class for programmers, so keep it this way. Offer the boss-student a 30-minute one-on-one session to give a 30000-feet view of the software, but don’t waste developers’ time just to give the boss a chance to catch up with a group.
7. Frequent Feedback. In hands-on trainings, ask the students every 20 minutes, “Anyone needs help?” Some people are afraid to ask and prefer to struggle with issues alone, while you could have resolved them in a second.
I hope this quick writeup will help you preparing your next presentation. My next presentation is scheduled in New Your City at our annual symposium on software development. Come over and see if I follow these rules myself. If not, grab me in the corridor…
Adobe AIR is the most productive tool for developing the UI for Android. But as of today, AIR can’t access native Android API. By the end of this year Adobe plans to offer some integration/bridge to the native Android applications, but it’s not clear how it’s going to be implemented.
Traditionally, Farata Systems is trying to get into emerging and promising technologies as soon as possible and the first results are already achieved. We taught AIR to talk to the native Android API. I mean it. You’ll see a demo, where a user talks to an AIR application, which communicate with the native Android voice API, which recognizes his commands and fills out the AIR UI form.
Without going into much details, we are using a different from Adobe approach – we put their BlaseDS server right inside the Android device. This opens endless opportunities, and we are trying to find the best use for this solution that goes under the working name “Server in your pocket”.
My colleague Victor works full time on integrating AIR and Android. He has recorded a short video that features him talking to the AIR application on the Xoom tablet, which communicates to the native Android voice recognition API and fills out the AIR form. Everything is happening inside the Xoom tablet. This addition to our Clear Toolkit has a working name Clear APK. See it for yourself.
We’ll present this demo live in August during our fourth annual symposium on enterprise software.
If you are developing a distribute application, you can’t get by with any single technology. You’re using at least one programming language and one or more frameworks. I work in the world that requires Adobe Flex and Java EE knowledge.
To develop a front end I use, at a minimum, HTML, MXML, ActionScript, and Flex framework (add Eclipse with WTP and Flash Builder). The server side’s consists of a Java Servlet Container with installed BlazeDS Web application (throw in some XML configuration files) that talks to the business tier of your application, which ideally, has just Plain Old Java Obects (yeah, right!) that embed SQL queries talking to a DBMS using some JDBC driver. Almost forgotten about the ANT build tool.
Have I mentioned that this dozen of different pieces of software is a bare minimum? The client-server technology of early 90th with its 3-piece set (e.g. VB-SQL-Oracle) sounds like a toy these days.
Each of these pieces of software (a.k.a. moving part) can, potentially, give you some problems. That’s why I’m and always was against bringing into the architecture any additional tools or framework that require developers writing more code and make this card house more shaky and the finger-pointing game more likely.
That’s why I don’t like any Flex MVC framework that requires you to write extra code. That’s why I don’t like Object-Relational Mapping frameworks like Hibernate.
That’s why I don’t like Java Persistence API with its 500-page spec that, supposed to “make your life easier” comparing to elegant SQL.
To make the long story short, whenever I can, I use our own open source code generator Clear Data Builder that generates the basic CRUD application from requiring very little of manual coding. As for the communication with the database, there is a light-weight (no, really!) SQL mapping framework called MyBatis (formerly iBatis). It’s not an 800-pound gorilla Hibernate, but requires you to supply your own SQL as Java annotations and map it to Java DTOs. It’s a nice and easy process (see this tutorial).
My yesterday’s morning started as usual – CDB obediently generated CRUD, and started the program that was supposed to execute my SQL query and bring the data first the Java and then to Flex UI. MyBatis conveniently displays in Eclipse console the SQL it executes and the returned result set. Here’s my SQL, but there is no data ands no errors. Trying the same SQL in Oracle SQL Developer – the data’s there. The cleaning of the project didn’t help. Log files show no errors. Who would you blame next? MyBatis doesn’t generate any code – it just executes my SQL. I started to think of jdbc driver. When to Google – no one blames this Oracle JDBC driver in no reporting errors.
Here comes the BlazeDS little dirty secret. Its folder WEB-INF/classes has a little used by the Apache Commons Logging configuration file commons-logging.properties :
Here it is: # suppress logging for 3rd-party libraries using commons-logging
# Flex logging is not configured here. It is configured through in the logging section of flex-config.xml
org.apache.commons.logging.LogFactory=org.apache.commons.logging.impl.LogFactoryImpl
org.apache.commons.logging.Log=org.apache.commons.logging.impl.NoOpLog
This last option (NoOpLogs) means suppress errors! I was mad. I could understands if my fellow developer from the BlaseDS team wanted to minimize the output and temporarily change set this option. But the comment in the file explicitely states that the was done intentionally to “suppress logging for 3rd-party libraries”! Changing NoOpLog to Log4JLogger fixed the situation, and I started seeing a lot of output on the console. Sure enough, there was a run-time error returned by the Oracle driver that explain the problem…two hours later.
Hopefully, revealing this BlazeDS little dirty secret will same someone a little grief. But I’m still wondering, “Why the NoOpLog proudly made it into BlazeDS?”
For more little secrets, attend our 4th Annual Symposium in New York City in August.
The Summer of 2011 is almost here, and Farata Systems has started working on the agenda of our fourth (!) annual symposium. But if the first, second, and third events were covering various aspects of enterprise development with Adobe Flex, this time we’ll cater to the wider audience and will rename it to Fourth Annual Symposium on Enterprise Software. The reason being that we are using so many different technologies in our daily work, that it’s just wrong to present ourselves as a Flex development shop.
Every year we start with putting together a list of suggested topics that Farata’s engineers want to present on. Here’s what we have so far (it’s subject to change):
Yakov Fain wants to deliver the following two presentations:
1. Networking WebSockets – the most interesting offering of HTML5
2. Hands-on Java EE 6 – the no-slides demo of programming Java with the current server-side technologies
Victor Rasputnis is heavily into Android these days and may talk about:
1. Squeezing Adobe AIR, BlazeDS, and Java inside Android
2. Something introductory about productive way of development for Android
Anatole Tartakovsky is obsessed with tablet devices and might talk about this : 1. Case Study: A salesman with Adobe AIR and a Tablet
2. Maintaining a single code base for Android and iOS applications
Possibly, yet another Viktor from Farata will talk about the automation of the functional testing of UI in Flex applications.
Now comes a one million dollar question. Who is this seminar for? This is a one-track/one-day event. In the past three years this event was aimed at Enterprise Flex developers. But what’s the profile of \an attendee who would want to hear all of the above? I’d call such a person a Current Enterprise Software Professional. This can be an enterprise architect or a developer from a startup. These days no one can survive by committing to any single programming platform. To become current, a technology stack of a seasoned professional must include more and more tools each year.
As usual, we’ll keep the price for this event anywhere between $100 and $150 just to ensure that random people won’t be in the room, but those who care can afford it. This amount will cover our expenses on renting a meeting place, serving lunch, and paying for the beer after the formal part is over.
The registration page will be up next week, and the event will take place in early August at the same venue in New York City. Meanwhile, we’d appreciate your suggestions regarding the content/organization of this event.
In the previous post I mentioned that Farata developed View-based application running from exactly the same code in the desktop, web and mobile. Does it mean that we take portability above all? Not at all. We are simply pragmatic. And from the same point of view let me disagree with the portability when it stay in the way of the functionality.
Here my background story for that. Back in 90s, when PowerBuilder and VisualBasic ruled application development, not a single VB or PB application was “pure” one (ie written only in that language/VM) – they all utilized native C code packaged as DLLs or VBX. Today, AIR provides great UI engine, but all universe of capabilities – quality camera, audio, telephony, notifications, great 3rd party native libraries are out of reach. If I do not use them for the sake of portability – I will loose to applications written for particular platform. During my demo I saw peopled wowed when AIR boundaries disappeared and Android based voice recognition did data entry for the Desktop application. Yes, I know that this will force me to pack the iOS version with the different extensions (when iOS support for Flex comes along in June). I am also waiting on C extensibility toolkit from RIM in May.
So, how does Adobe position itself in reference to integration with the native tools? Air application can be “invoked” from the native Android code, but not the other way around. The only integration approach is mentioned by James Ward, but it is not a part of the RC for Flex 4.5. The availability of Extensibility Toolkit based on that approach promissed, but no date was given. I think support of integration is a matter of survival. The same goes for “remoting” within personal network boundaries? Not supported either. I think it is another gap that Adobe has to fill.
I am flying back home and want to share some thoughts on what has been happening in the last 4 days here in Denver. Obviously, you know about all announcements related to Flex 4.5. The sessions were very well prepared and extremely useful for majority of the developers. A lot of information was provided in more informal sessions. The community was as excited and enthusiastic as ever. And yet I am leaving with a feeling that Adobe’s marketing message is missing the point.
The main message of the conference was: now you can develop great applications for mobile – and with minor tweaks it will work on all MOBILE devices from phones to tablets. I disagree with this message. Concentrating on mobile at the expense of the desktop is a big mistake. Let me explain.
Our company – Farata Systems – have been working on Flex for mobile technologies for about 16 month now – on IoS and Android. At the conference I presented the View-based application for insurance agents that was written with mobile toolkit. Despite the fact that it was written with mobile toolkit, our application does run in browser, desktop and tablet – all from the same source. We run a small fraction of the app on the phone as well, mostly as a remote assistant to the main application. Here we do high-tech tricks like letting the customer to sign with his finger (or a felt pen), swipe his credit card, speed up data entry via voice recognition etc.
Unfortunately, one can not develop desktop View-based applications out of the box. We had to substantially tweak the components and skins. And I think this shortcoming will hurt success of the Flex, if it is not addressed by Adobe for the benefits of all developers.
Here is why I think it is crucial. There are about 100K Honeycomb devices sold. By the time Flex will catch up with IoS – June – the number of sold iPads maybe will reach 3-4 Millions . My estimate is that less then 20% of the users (in case of our application the clientele are independent insurance agents) would have necessary hardware. However, all 100% have access to web on laptops and netbooks, and 80%+ are allowed to run desktop AIR. We, at Farata, can not justify development of multiple versions of the software for desktop(Air), web (Flex Hero) and mobile (Flex Hero Mobile) – and I can not imagine many other companies doing so! Aside of development issues, I can not imagine training and supporting 3 different user experiences (with obviously different UIs).
Not only Adobe has to fill the gap. Developers should adjust as well: as conventional OS-es are becoming gestures based (please see preview of Apples Lion coming this summer) – and very much like tablet ones, developers should not design and develop multiple experiences either. I mean they should abandon legacy UI metaphor and deliver seamless experience across platforms.
I’ve recorded our chat with my colleague Anatole Tartakovsky who leads the mobile development at Farata Systems. We were discussing approach for migrating existing legacy enterprise RIA to these shiny iPads, Xooms and the likes. You can listen to this podcast on any MP3 player, or simply press the icon POD at my NO BS IT podcast terminal to start playing on the device you’re using now.
If you are attending the 360 Flex Conference in Denver, attend Anatole’s presentation on this subject.
Flex comes with a uses well-designed and extensible event model that’s based on the standard Flash Player’s events. On the other hand, there is an open source alternative solution created by Robert Penner, a well-respected software developer. The replacement is called AS3 Signals. Below are some quick notes comparing standard Flex events with AS3 Signals. I’d appreciate if the readers could add more pros and cons to this laundry list for the benefits of the Flex/Flash community.
• There is no need to instantiate each signal, whereas creation of new instances is required with Flex events (the DynamicEvent is an exception, see the following blog for a sample use).
• AS3 Signals are more strongly typed than events, which seems to be appealing to software developers with Java background, but signals still would not indicate data-type errors during the compile time – they’d produce an error during the runtime only, which is not a big advantage.
• Using AS3 signals makes sense in the applications where lots of events are being dispatched in the background, e.g. a real-time trading application or a game with heavy use of animations.
• AS3 signals have less overhead than events, for example, not every application needs the support of events during the event capture stage, and such a standard feature as event bubbling? Custom Flex events must extend the class EventDispatcher, but with signals you can use composition vs. inheritance.
• AS3 signals support adding a signal listener for one time processing. The function addOnce() will trigger the event once and there is no need to remove listeners as there may be with Flex events.
• With signals you can dispatch many arguments of different data types. This sounds like an advantage, but with signals changing the API in related classes can mean changes in the signal processing code, which is not the case with events that are dispatched with a payload in a form of a DTO.
• While Flash Player events are the part of the Flex framework, AS3 Signals is a third-party product that can be considered as yet another moving part in already long laundry list of the software products contributed to your product by various vendors.
To summarize, I’m neutral to the use of AS3 signals at this point. Would appreciate if someone would contribute compelling arguments for the use of this light-weight and simple to use addition to the toolbox of Flex and ActionScript developers working on enterprise RIA.
Yakov Fain
P.S. AS3 Signals don’t have to be used with any particular Flex-based framework as some people seem to believe. Hint: the name of this framework starts with R and refers to the limbs of a non-human being.
I am very concerned by Apple’s stance on application platform control at this point. They are at the point when the competition is actually caught up technologically and in the price segment with Android. In my opinion, their next step should be to promote VMs on iPad platform thus allowing better hardware AND choice for enterprises. That would really drive iPad acceptance by enterprises as it would allow clean separation of business and consumer functions. I would argue it is needed to allow Apple to sustain the price war and command a higher price without really driving the quality of the hardware in the ground.
How long can you keep the lock on the platform? My 11 year old son rooted his iPhone 4 within a week after getting it, so did all his classmates. And he is probably one of the most loyal Apple fans I know with most of his toys running on OSX platform.
So far virtualization of iPhones and iPads was not practical – those were underpowered devices built for a very short lifespan. Android on iPhone 3 performs really bad, but it is almost usable on iPhone 4. With iPad 2 and iPhone 5 we can expect 2+ years of service before being forced to replace these devices, which is enough for the enterprises to consider them as viable business tools.
For the first time in the last 3 years I am unloading Apple stock – almost all of it – as I believe that their current strategy is slowing the long lasting success. There is the point when the pride of job well done turns to hubris and Apple is crossing that line.
If you already upgraded your Flash Player to 10.2, take a look at this little demo, which has three Flex DataGrid components. Two of them on the left are good old mx:DataGrid and the one on the right side is the extension of new spark:DataGrid available with the recent Flex SDK 4.5 drop.
All the UI controls share our custom implementation of IList/ICollectionView and are able to show 4 million records. Actually, with mx:DataGrid you can go even further and display 10 million records. As a side note, if you stick to MX-only components, the example may be compiled with Flex SDK 3.4 and work with older version of the player.
The spark:DataGrid is a more complex case. First, unlike with MX equivalent we have to subclass original component to add scrolling event. Second, it seems that Spark GridLayout has overflow errors when calculating layout for the dataProvider of approximately 5 million records and above — hence the limitation of mock data set size in demo.
Finally, there is an error with fast scrolling using scroller thumb: after thumb-scrolling spark:DataGrid it’s necessary to move up/down with scroller’s arrow keys otherwise Spark grid would repaint itself after scrolling of mx:DataGrid-s. We are working on this issue – most probably our extension either misses a thumb scroll event or needs to be better synced with the scrolling events.
Don’t try it at home with the default IList implementation (ArrayList) – it’ll eat up all your memory.
