« October 2005 | Main | January 2006 »

November 26, 2005

Flex Friday Demos: A Preview of Flex Beta 1

Early in development, the Zorn (Flex Builder) team started tradition of having "Friday Demos", which is a lot of fun. I think Sho gave it it's official name. Basically what happens is that the team gathers together on Friday afternoon and different team members give demos of the features that they're working on. This allows everyone to see the progress we're making and helps give a sense of how the product is coming together.

Of course we work closely with the Flex Framework team, both technologically as well as physically — they're located on the other side of a huge, brick, metal lined vault (I'm not kidding!) that's directly in back of where Sho and I have our offices. In fact, we really think of ourselves as part of an extended team, so we include them in this tradition, too.

In order to get the Alpha release out, we spent a long time testing, fixing bugs and doing all of the things you need to do any time you ship software, and so we hadn't been developing new features for a while. As a result, we hadn't had Friday demos for a bit, but this changed yesterday, and all I can say is "Wow!" I'm so excited by this that I woke up at 2 am and just had to blog about it to give everyone a sense of some of the things we're working on for the Beta 1 release of Flex Builder 2 and the Flex Framework 2. Now, not every developer demos each Friday, but this week, we had a good set of representatives from each functional area.

The demos started at Dexter's desk and he showed some of the new design view features, such as in-place label editing. This allows you to edit the text of a component in-place in design view by double clicking on it. It really feels nice and intuitive.

We then went over to Winsha's and she showed snapping and guides in design view. We have heard from lots of people that they wanted this and got feedback about how it should work. Winsha went through a bunch of the different subtleties of the feature and Sho explained to everyone why the nuances were important. I think it's going to be a really cool feature that people are going to like.

Next stop was David's and he showed code editing feature after feature after feature. He started with a bunch of things around dealing with imports that will save people lots of time. I can't remember all of the things he showed, but he showed auto-adding import statements if you used a class that you hadn't imported and arranging import statements and a bunch of other things. David then showed off the new outline view, which will please a lot of people who've tried the Alpha and missed it.

Everyone oohed and aahed, and then somebody asked if there was anything else and David just started showing stuff that nobody even knew about. He showed code collapse, auto adding ASDoc comments, block comment, block un-comment, ctrl-click hyperlinking, pop-up outline with quick keyboard filtering, some hover-over that showed something cool about the object you were over. On and on. I can't remember everything he showed, but it was really amazing how many nice, time saving features will be in there for coders.

We then went over to Mike's desk and he showed work he's been doing to clean up how variables are displayed in the debugger and it really looks great! This involves hiding things like private variables an object's base classes, sorting things with underscores better, enabling you to hide or show statics and constants and a bunch of other things. The Alpha build shows every member the class has, and many of them are implementation details that are not important and get in the way. This really simplifies things and makes it much easier to understand what's going on. Mike also showed debugger support for XML which is really cool. This allows you to see the contents of the XML object more naturally both in object form and as XML in the debugger.

From there we wandered over to Greg's and he showed some very innovated design view features he's been working on with NJ for working with nested containers such as VBox and HBox. These and other layout containers are really powerful features of Flex but are very difficult to work with in a graphical design tool for a variety of reasons. For example, they're invisible and are typically nested and they tend to collapse tightly around each other. As a result, it can be hard to select them or understand how they're laid out. The new feature is sort of hard to describe, but it basically allows a cool way of visualizing them and how they interrelate in order to select them, add new ones, etc. I think it's going to make working with nested containers much easier!

At this point, we wandered over to the Flex Framework team area to see two really cool demos. First, we stopped at Glenn's desk to see the new Transitions work.

One of the really innovative things in Flex is View States, which are in the Alpha build. This allows you to model how a view changes using a declarative syntax and Flex Builder supports this nicely in design view. In the Photo browsing app that Kevin Lynch demoed at Web 2.0, he made nice use of states to transform the app from a small, compact search dialog into a larger view that showed the Photos. To add a nice effect when morphing between the two views, he added a resize effect to the panel that frames the app. However, sometimes you need very fine control of how objects move from one state to another. This is what Transitions do and Glenn did a great job showing off what he and others have been working on.

The first example Glenn showed 3 tiled windows, with a 4th hidden, and when you click on them, they swap positions, so you cycle through different layouts. Glenn showed two different versions of the app with different transitions and both were lots of fun. The windows would spin, bounce, and move through interesting paths as they shuffled around.

The second example showed a more subtle example of building a logon form, which you want expand to show some extra fields, but you want it to expand first, and then show the fields with a nice effect. The transitions allow you to have great control over how each element moves from one state to another.

Finally, we made our last stop of the day at other Dave's (who I will call Big Dave, since he is really tall!) desk, where we saw some of the recent performance improvements to both Flex and Flash Player 8.5. Back at MAX, I showed some of these demos during a talk I gave, and people were really impressed with how things have improved.

For example, I showed start up performance for a fairly good sized business portal style app with charts and grids and a bunch of data. In Flex 1.5 with Flash Player 7, it takes 3.52 seconds to launch and fully display. At MAX, I showed the same app ported to Flex 2 starting up in 0.95 seconds, which is much, much faster. Well, Big Dave showed that we haven't stopped improving performance and the current build starts up in 0.59 seconds! We were floored.

Big Dave then showed the scrolling app, which displays a datagrid that makes very heavy use of custom cell renderers and times how long it takes to scroll to the 50th record. In the Flex 1.5 version is takes an excruciating 15.90 seconds to run. The alpha version that I showed at MAX is much faster, taking just 3.06 seconds, which is more than 5 times faster. Well, Dave showed the results of our continued focus on performance and now it completes in just 1.25 seconds! Again, we were blown away, and what a way to finish a very memorable Friday afternoon with the Flex teams!

Note: The demos actually took place on the afternoon of Nov 4th and I wrote this mostly on the morning of the 5th. I didn't finish it till now because I had to head off to speak at the 3 Asia MAX conferences, which kept me really busy (and tired) over the past 3 weeks. I went to 4 countries in 2 weeks and I'm still a bit jet lagged and exhausted! It went great and I in fact showed both Glenn and Big Dave's demos during my keynotes. I'll try to post something about my experience there in a bit!

Posted by Mark Anders at 11:32 AM | Comments (4)

November 03, 2005

Flex based Yahoo Maps and Some Cool Mashups

The new Yahoo maps that was built in Flex 1.5 went live today and it's really impressive! You can check it out here. The performance is really great and its user interface is really refined.

One of the really cool things that Yahoo has done is to expose AJAX and Flash and Flex interfaces to Maps, which is really great. The Flash API are listed here, and Flex API for Flex 1.5 available here. I do hope they'll be libraries available for Flex 2 in the near future.

Yahoo also has a developer gallery that showcases apps built on top of their API at the Yahoo Maps Application Gallery. Check them out, but one of the things that I thought was most striking was how much better, more responsive and just plain cooler the Flash/Flex based apps were than those done in AJAX. Here are 2 ones I liked based on Flash and Flex:

Metalique MashUpComing
Flikr Maps in Flash

That's not to say that AJAX is bad. On the contrary! There are some cool ones done with AJAX as well, as well as a few that combine with AJAX with Flash, such as this one:

Upcoming Events in AJAX and Flash

Overall, lots of great stuff and it's fantastic to see Yahoo supporting a range of technologies for accessing their API.

Posted by Mark Anders at 07:38 AM | Comments (3)