Embedded below is my presentation for tonight’s Philadelphia Flash and Flex User Groups.
Thanks everyone who could make it. It was fantastic to see the local Flash Community after way too long :).
Writing your own UI Toolkit is, if nothing else, educational. As the OpenPyro framework continues to evolve, every time a new feature is added, I look around at prior art in the domain and evaluate the choices made by different frameworks which has been fascinating. Of course, the first framework I look at (since I have had most experience with that) has always been Flex (both Flex 3 and 4 separatly since they are so different), but often I do compare that with choices made by the IPhone’s UIKit, HTML/CSS and (rarely) Swing or any of the Java toolkits.
One of the features that I know I will need to add in a future version will be a simpler way to style/skin the controls. OpenPyro controls are based around composition so creating new UI assets and passing them in as skin elements is simple enough but there is always a need to do something simpler. A blue scrollbar for example shouldn’t need blue assets, more the ability to tell the scrollbar to draw itself with a stroke/fill of blue color.
Flex’s choice in this domain has been CSS and thats not surprising. A lot of the way Flex was developed was to enable it to be a gateway drug to ActionScript for developers from other technology domains and who doesn’t know CSS? Flex 3’s CSS capabilities were very basic and I keep reading how Flex 4’s CSS engine is so much more complete. And considering how much easier it is to create a Flex 3 theme compared to a Look and Feel in Swing, that seems to have been a decent choice. Someone recently asked when OpenPyro would support that functionality which led to this post.
I have often found writing CSS for Flex a chore, for most of the reasons I find writing CSS rules boring: complete loss of any logic system. Deep in ActionScript land while developing an application, switching to CSS is irritating. Suddenly I am in a file where I cannot really code any logic or rules. One of the first libraries of ActionScript I wrote over 3 years back had explicitly defined style objects. For example, ScrollBars would have a corresponding ScrollBarStyle class that listed all style properties. Being a pure AS class, I could also code logic in that, so conditionally apply style properties because I could inspect the properties of the UI element the style was being applied to. Heck, I could even get code hinting of relevant styles for a particular component.
What spurred this post today was seeing how the engineering team I work with at Comcast Interactive Media adopting the Less CSS engine. I have personally not worked with this yet but I might in a coming sprint. By accounts so far, its awesome to work with and I completely don’t doubt that. Most of the logic here seems something that you can write pretty easily in pure AS3 classes and pass them around as something equivalent to Flex/Javascript’s CSSStyleDeclaration object (link to JS CSSStyleDeclaration object)
Anyway, the point of this post was, while CSS may be the most familiar styling metaphor, there may be better ones. I hope OpenPyro can probably adopt something more powerful like lessCSS rather than pure CSS.
Update: Another flavor of a *better CSS* system: SASS
Update 2: Smashing Magazine has a pretty good writeup on CSS ideas and debates. More food for thought as I spec out a styling language for OpenPyro.
An exciting week for Flash Platform Developers as Adobe released a number of Beta versions on the Adobe Labs site. I have just started playing with a couple of them but its definitely worth the shout out.
Flash Builder 4:
Flash Builder 4 is the next version of the Eclipse based IDE formerly known as Flex Builder. The renaming is more than just a re-branding exercise, as FB4 seems to have added features that make it a lot easier to work with other frameworks besides Flex. This is really exciting for me personally as this means it will be a lot easier to work with OpenPyro in FB4. In fact Greg even created a simple project with AS3 only classes that could be exposed as MXML tags. The resultant file size is minute.
Besides that, the my favorite extension to the IDE has been the inclusion of FlexUnit, the unit testing framework for Flex. While FlexUnit itself has been available as a library for a while, inclusion into the IDE will make unit testing a lot easier and hopefully a lot more prevalent.
There is also a network monitor built right into the IDE. While I have used Firebug with success for Flash apps on the web, doing the same for AIR apps has been a challenge (though Charles has been really good, though a requires a bit of a context-switch when coding). The network monitor is going to make a lot of lives a lot easier.
Integration of ASDocs is another great feature, as well as code generation for integrating with serverside code.
[Update] There are also a bunch of improvements to the Debugger on FB4 which you can read more about here.
Flash Catalyst:
Flash Catalyst is a new tool that Adobe is releasing with the promise of truthfully translating designer interactions to stub code that a developer can add functionality to. Basically Catalyst can import any Photoshop, Fireworks or Illustration file, and then can allow the design to assign behaviors to the different parts. For example the designer can select four graphics and mark tham as the four parts of a Scrollbar. The interactions are written out as Flex4 tags that can be compiled into a swf with complete interactivity.
The video below shows how Catalyst can be used:
Flex 4:
The two releases of course directly depend on the Flex 4 SDK, Adobe’s Open Source framework for building Rich Internet Applications. The new release of the SDK introduces a new component architecture called Spark. The core difference between the Spark and the earlier Halo architecture is the favor of the composition as a design pattern over inheritance. What this translates into in everyday development is a leap in productivity as complex UI components can be created a lot easier than before and not requiring things to be subclassed as often. This also makes skinning a lot easier, since all the skin parts can be swapped pretty easily. Another new thing in Flex 4 is the introduction of a new graphics interchange format called FXG, an xml format for graphics that can be understood even by the CS4 products like Photoshop and Fireworks. Matt Chotin’s post on changes in Flex is a lot more comprehensive.
BrowserLab
BrowserLab, a project formerly known as Meer Meer, is a new service being released by Adobe that targets HTML developers. BrowserLab allows developers to preview any URL as rendered by different browsers. The service is in limited beta, but I was able to get an account before it was capped, and I can tell you its pretty impressive. It would be interesting to see how Adobe can integrate this with Dreamweaver, although its supposed to remain open to mortals like myself who still prefer TextMate 😉
So a lot of toys on the labs site. Take em out for a spin and let me know what you think 🙂
Its kind of ironic that I am posting this on the same week as Adobe Flex wins the Sys Con Ajaxworld award for the Best Open Source RIA Solution, but I think a conference with almost no showing from the open source community thats actually contributing to the Javascript AJAX Framworks is of questionable merit anyway, so lets continue.
I have mentioned before my feelings on Flex but here is a quick recap: I was a big fan of Flex when Flex 2 first came out, but off late I have been disappointed with it enough that I have started working on my own open source UI framework called OpenPyro. And the questionable decisions being made around the Flex 4 api are not helping my feelings towards it. And I am relieved that I am not the only one who feels this.
I just finished reading Simeon Bateman’s post on how just making the source code available does not make a successful open source project, and how Adobe is pretty much failing with Flex as a genuine open source project because all decisions and priorities are being made behind closed doors, and I couldnt agree more (I am so glad he started this one and not me, at least the we’ll share the wrath of Flex devs who dont agree 😉 ). He also recently posted a tweet wondering if creating a branch off the Flex framework trunk with patches to not require the Fx prefix to the Flex4 components would be a good idea. I think it will be, but I think we can and should go beyond.
I have no idea how many bugfixes and patches Adobe has got so far on the framework and I seriously doubt there are as many. Part of the problem is Flex is a behemoth of a framework and there aren’t that many people who understand the project at its core. I personally think the framework needs some serious refactoring to improve performance, filesize and more importantly to reduce the complexity and the deep inter-coupling of the framework. However, there is almost no immediate way this would let Adobe make more money through a new toolset so its (understandably) not Adobe’s priority.
Whats also interesting is that Flex has kind of crippled growth in the Actionscript based application frameworks domain. Having options is (almost) always a good thing and multiple projects keep forcing each other to evolve. But there isnt really another framework that competes with Flex that has gained any serious traction. There are a few frameworks that some companies have released but none that have gained any number of external contributors or that have become familiar names in the developer community. There are a few MVC frameworks like PureMVC, Mate, etc and such which have survived mostly since they dont compete with Flex (Flex is a pure UI framework and Adobe’s MVC framework Caringorm is just bad). The sad fact is I have met so many Flash/Flex developers who are ridiculously smart and if they came together, would give the Flex framework a real run for their money.
Flex builder is partly to blame. Flex builder is by far the best development environment out there for Flash projects, and is geared towards Flex only, giving you the option to develop in Actionscript but not really allowing any kind of system to integrate third party libraries. In fact it took me a fair amount of googling to figure out how to use Flex builder to create an Air application without using Flex. Do you know how to do that ? Also the preview build for Flex Builder 4 (Gumbo) includes support for unit testing for Flex projects but not AS3 projects. WTF. Shouldn’t AS3 projects be the first priority and Flex just being an extension of that ?
IDEs like Aptana let you choose from various open source frameworks out there.
Given all this, as a developer community we need to come together. Flash and Actionscript need to go beyond Adobe. A community controlled branch would really help but I am not sure how the MPL license (under which Flex has been released) permits that kind of forking. Also, refactoring the Flex framework is a HUGE task. (anecdote: I had a conversation with the manager of the Philadelphia Flex User Group Derek Wischusen the other night who told me he had another WTF moment with Flex when he tried to use the Base64Decoder class in an AS3 project and ended up pulling the entire Flex framework since the class references ResourceManager that of course was tightly coupled with a huge part of Flex. Things like this should not be acceptable. ). If you are a Flex developer, evaluate other projects out there. If you see one that may have potential, get into it a little more, blog about it at least and contribute to it if possible. If you have an open source framework thats interesting, pimp it as much as you can and get feedback and encourage participation any way you can (and also leave a comment here, I am trying to take stock of actionscript frameworks out there).
What do you think ?
Having worked with Flex long enough there are definitely times I get really annoyed when Flex does something I feel is counter intuitive or when I have to go around a pretty complicated process to do something that I feel would be trivial in Flash. But given a limited time frame for a project, I usually default to a Flex project as opposed to a pure AS3 project just since there are so many conveniences in the framework.
I am curious how the rest of the Flex community feels now that Flex has been out there for a while and the “new-and-shiny” effect has worn off. So I would like to ask, the following question: What is your favorite feature of the Flex framework. Below is a poll widget but it may be restrictive to your answer, so feel free to comment or elaborate on what you love/hate about the framework.
Whats your favorite Flex feature ?
( polls)
Thanks all
Its exciting to see LogBook, Comcast Interactive Media’s first open source project get some traction. There is talk of LogBook being included in other open source projects as well as people have started submitting patches and suggestions to the project.
One issue that was submitted a few days back was around the Logging implementation dispatching all logging events out of the application across the LocalConnection. Here is a quote from the issue:
Logging could add significant overhead to an application, due to
log message construction, and sending messages to LogBook.It is good practice to minimize logging overhead, with code like:
if (Log.isInfo()) {
LOG.info(“version: {0}”, version);
}The current implementation of class LocalConnectionTarget always
sets the log level to ALL and the log filter to “*”. This means
that all logging methods are executed, which is undesirable.
You can see the details of the issue here.
I just wanted to elaborate a little on why the LocalConnectionTarget class does not use any kind of filtering to reduce the number of LogMessages being constructed.
One of the reason we went with LogBook as an AIR application as opposed to a web application was because as far as I know, the Flash Player process on the web is independent from that in AIR. This means that LogBook could become a very elaborate application on its own but it will not impact the performance of the application using LogBook based logging. Also when we pass objects across LocalConnection, these objects do not accumulate in the application’s memory. Here is a screenshot from a quick experiment where I ran an endless loop that created a custom LogDispatcher object, had it send a log message across the LocalConnection and then get garbage collected. The memory profile of the application can be seen below:
Here is also the live objects screen capture:
As you can see, over 600 objects were constructed but all of them could be garbage collected with no overhead in terms of memory used.
So your take away from this discussion is: using LogBook has virtually no memory overhead in your application. The idea of broadcasting all messages to LogBook is to allow you to filter the data on the client at the moment of debugging or after, rather than configuring it at some pre-launch time.
Now LogBook itself is another story. Another bug submitted by the same developer who reported this also talked about LogBook’s performance when over 1000 messages were collected, and yes, I have verified that at that point, the application becomes pretty sluggish. So for the next version of the LogBook, I am considering leveraging the SQLite database that AIR comes packaged with.
More on LogBook 2.0 soon. We are already on it and it will be good ;). If you would like to participate in defining the functionality in 2.0 or better yet, help us develop it, join the conversation on the LogBook user group here.
So as most of you guys may know, Aral Balkan, one of the biggest names in Flash development, has been working for a while on a reference Google App Engine application called GAE SWF. In the last build, version 1.53, he has included a component that lets users browse and upload an image to their profile page. The user also gets the opportunity to scale and crop the image before he assigns it to his profile. The exciting part is Aral is using my ScrollImage component that he has extended, to handle the scroll, rotate and crop functionality. Aral has also released the updated source code under the MIT license as well, which is the same license that the original code was released in.
I am really excited the ScrollImage is finally out in the wild. I originally wrote it as part of a UI requirement on a pet project that I dropped later so there was no reason to take the component to completion. However now that its out there, I am thinking spending some time adding some configuration options so that its complete (in my book) may not be a bad idea. I will also put the final source code on google code or something where it actually maintains a version history.
In the meanwhile, check out the GAE SWF project here and Aral’s updated code here.
LogBook 1.2.1 patch release is now available on googlecode now. The release addresses quite a few bugs and feature requests. The list of patches can be found here.
We are also discussing features for LogBook 1.3 at the Google group for the project. If you have a feature you would like to see added or contribute, join the conversation here. Like Mat said in a previous thread there, the importance of a feature is only as much as the conversation around it.
There are some interesting discussions I have had around LogBook with a couple of folk within Comcast Interactive Media where I work. For example, one of the things we have had to deal with is QA bugs that we cannot reproduce. Running LogBook in the background on QA machines and looking at the logs generated would be an interesting idea to implement, thus making LogBook a part of the QA cycle. The biggest thing that needs is a notion of a session in LogBook which is something we dont have right now. I guess that could be a part of 1.3 or 1.4. Other ideas are welcome.
If you have any code around debugging Flex applications that you would like to contribute to LogBook, do let me know as well.
One of the bugs reported on our recently released LogBook application was around the “Clear Logs” button. Within LogBook, we keep all the LogMessage messages in an ArrayCollection. When Clear Logs was clicked, we called a removeAll() function to clear the ArrayCollection. However when the size of the ArrayCollection grew more than a hundred or so, the clear command took a while and the whole application would freeze for a few seconds. A quick change of that to ArrayCollection.source = new Array() fixed the performance immediately. Interesting.
Looking deeper into the removeAll function and following the hierarchy to the ArrayList class, I saw that the removeAll loops through the entire source array, looking at each member to see if its an event dispatcher and if so calling a function to remove the propertyChange listener. Confused a bit, I posted a message on flexcoders to see why this was the case. Alex Harui from Adobe resonded with this:
Our code has to look like that otherwise if someone kept a reference to one of the objects that got removed, it would keep the ArrayList from being GC’d. We added listeners, so we should remove them. If the data objects are going away too, then you can probably reset the source, but if you see a memory leak later, I’d definitely check in that area.
Makes sense, but only kind of since the way the eventlistener was added was with the weak keys flag turned on, which means that I did reset the array, even if the old LogMessage objects were in memory, the garbage collector could still get rid of them whenever it ran. So I responded to Alex so:
Hmm, maybe I am missing something here? The only place I see addEventListener being called is
protected function startTrackUpdates(item:Object):void
{
if (item && (item is IEventDispatcher))
{
IEventDispatcher(item).addEventListener(
PropertyChangeEvent.PROPERTY_CHANGE,
itemUpdateHandler, false, 0, true);
}
}which has the weak-keys boolean flag turned on. Shouldnt that allow garbage collection to run without explicitly calling removeEventListener ?
And Alex’s response:
Because of the way GC works, I still think it is best for us to remove the listeners. GC is only on allocation so again, if someone had a handle to an object that got removed and twiddled a value, the notification code would run needlessly until GC kicked in.
However, I think you’ve come up with a great optimization for folks who know they are destroying everything all at once.
So the final verdict: If you are destroying all the objects within the Arraycollection, use ArrayCollection.source = new Array() instead of ArrayCollection.removeAll(). Calling removeAll() on large ArrayCollections seems to be a really heavy operation and could kill responsiveness of the app.
I do feel that this is a bug and not a simple optimization. Here is the final email I sent to flexcoders a couple of minutes back:
Hi Alex,
Thanks for responding. Should this be tracked as a bug? I think there may be a better way of handling this:
On removeAll() you can set a flag like removeEventListenersPending = true, copy the old elements to a temporary new array and run through the it in smaller sized increments (removing event listeners from say 40 objects every enterframe using something like calllater). In the meanwhile if a property change event is fired, you can see if the flag is set and if so make sure the item is in the current source array and not the temp array. When all objects in the temp have had their event listeners removed, set the removeEventListenersPending = false.
I think the current implementation may be causing a lot of performace issues since a lot of people may be using ArrayCollections for large data sets (thats what Flex is great for 🙂 ) and may not know of the penalty of the removeAll().
If anyone has any opinions, please feel free to comment. Okay, back to real work :).
As promised, today we are formally releasing LogBook, our internally developed tool for logging events from Flex (and coming very soon, pure Flash AS2/AS3) applications. For the uninitiated, logging is the process of recording and storing information about events in your application. The functionality is similar to the trace command, but a lot more robust. Logging combined with a strong log viewer like LogBook gives you a much deeper understanding of the state of your application.
Some quick notes on LogBook:
1) LogBook is being released under the MIT open source license.
2) A detailed post on its features and how to use it is here at the CIM Flash Team Blog.
3) The code for LogBook is being hosted at http://cimlogbook.googlecode.com/.
4) We have also set up a Google group for logbook that we can use to discuss features that we should add in upcoming releases and bugfixes/patches.
5) The installer can be found in the downloads section there.
6) LogBook runs on the AIR beta 3 runtime.
At CIM we already have a list of features we are going to release in the next build. But of course if you have any feature you would like to request, please drop us a mail at cimlogbook@googlegroups.com. We are really hoping LogBook 1.2 is the first step towards a robust Flex/Flash development/debugging toolset.
Happy debugging :).
Code Zen 