Programming Flex 2

Foreword

Whenever I talk to people about Flex 2, the most common questions they ask are the basic ones: what is it, who is it for, and why did we build it? It turns out that although these questions are basic, they really get to the heart of what Flex 2 is all about.

Flex 2 is a new technology for building rich web applications and experiences that run on Flash Player, so they look great, are responsive, and are highly interactive. It was designed specifically to be comfortable and productive for those coming from a web or application development background, though it is suitable for anyone.

Why did we build it? Well that’s a longer story.

This Shouldn’t Be Too Hard

The genesis of my involvement with Flex 2 really started with a seed of inspiration. Like everyone who surfs the Web, I would occasionally come across an application that just blew me away. It would be responsive, look incredible, and have an almost cinematic quality to it. Being curious, I would poke around to figure out how it was built.

What I discovered was that it was almost always built with Flash. Because my background is in software development and I like to build things, this made me want to try Flash, so I did. The result was shocking and humbling. I failed miserably, and I came away unable to fathom how anybody built anything with Flash, never mind how they built the amazing creations that had inspired me.

Part of my problem was with the Flash authoring tool. Not only didn’t it feel like the developer tools I’d used before, but also it didn’t really seem to have been designed for what I was trying to do. For example, the Timeline is one of the most notable features of Flash. I could not, for the life of me, figure out how I would use it to build an application. Although developer tools often provide a toolbox of components, such as buttons and lists that you can drag onto the design surface, the Flash toolbox was different. Here the components were things such as a line, rectangle, pen, pencil, ink bottle, and paint bucket. How do I build an application with a pencil?

The other problem I had was with the terminology used to describe the concepts presented by Flash Player. In Flash, small reusable UI elements are called Movie Clips. The main display area is called the Stage. The output of compiling the project is a Movie. I can’t tell you how weird it was to try to track down a problem by running the Debug Movie command.

Maybe We Need a Different Approach

From my experiment, I concluded that Flash simply was not designed for building applications, or for developers like me. However, rather than see this as a problem, I saw it as an opportunity. How many more great Flash applications would there be if it was easier for developers to build them?

I focused on this question, instead of just trying harder to use Flash, because my main interest in software is not so much in writing applications, but in improving the process of doing so. That is, I’ve been most concerned with what the code actually looks like. As a result, I’ve spent most of my career working on application frameworks and tools that simplify development.

My first framework was called zApp, and I began writing it in 1989. I had been developing for Windows for three years, starting with version 1.03, and had grown frustrated by how difficult it was. zApp not only made Windows development much easier, but also solved another key problem for developers. It allowed you to move your application to other platforms, such as OS/2 or Unix, simply by recompiling. zApp was released in 1991 and it became a popular cross-platform application framework.

During the mid-’90s, while working at Microsoft, I became more involved with web applications and was amazed at how hard it was to write them. So, in 1997, a colleague and I developed a prototype web development framework that we called XSP. Based on the prototype’s success, I led a team to build a production version that we shipped in 2002 as ASP.NET.

So, as I thought about Flash, I felt the same level of excitement that I had in those previous projects, and I wanted to do something about it. Doing so would enable me to simultaneously explore two areas that I loved: web application development and rich, cross-platform UIs. Therefore, in mid-2004, I joined Macromedia to help make Flash a great platform for developers.

My First Meeting with Flex

At Macromedia, my first task was to learn about all of the projects underway that were related to Flash, and it was then that I first heard about Flex. Version 1.0 had been released a few months earlier, and it was described to me as a presentation server for experienced Java developers building enterprise applications. When I heard this and learned the price, which was very high, I realized why I had not previously noticed it. A high-priced enterprise server did not jump out at me as an easier way to build Flash applications.

However, as I learned the details of how Flex actually worked, I began to become more interested in it. The key thing Flex provided was a powerful, easy-to-use, developer-friendly framework for developing Flash applications. It also had a nice XML-based language for defining the UI structure that ironically felt very similar to programming in ASP.NET.

The server component of Flex provided two things. The first was the compiler that translated all of the code into a SWF file for the Flash Player to run. The compile-on-demand model was also very similar to how one built applications in ASP.NET. However, unlike ASP.NET, the code you wrote ran on the client, not on the server.

So, the main question I had at this point was why is Flex a server? You don’t need a server to compile, and it seemed to me that that would be much more easily done on a developer’s machine.

There was one other server component of Flex, which was a gateway that enabled Flash to talk to the server using an optimized binary protocol and integrated with backend Java code. This was the one component of Flex that really needed to be a server. However, it was used for only certain scenarios, and it really was optional. It also was not addressing the fundamental problem I was looking to solve: namely, making it easier and more intuitive for developers to build Flash applications.

Flex, Take 2

So, the biggest problem that I saw with Flex 1.0 was not with the technology per se, but with the packaging and positioning. Selling Flex as an expensive enterprise server made it irrelevant to developers who just wanted to build cool stuff in Flash. I just could not imagine anyone who went through what I did with Flash saying, “Hmmm, this isn’t really for me, maybe I’ll check out that multithousand-dollar enterprise presentation server.” As a result, an opportunity was missed, because I had become convinced that if developers tried Flex, they would love it.

After I finished looking around, I made some recommendations as to what I thought should be done. The first was that the part of Flex used to build Flash applications (i.e., the Flex framework and compiler) should be offered separate from the server. I had no problem with the server, as it had a lot of value, but it should not be required.

I also recommended that we build a real developer-style tool for Flex that enabled a more traditional client development model. Flex 1.0 did have a development tool, called Flex Builder, but it was built as an extension to Dreamweaver and it lacked many features one expected in a real developer IDE. What I wanted was something that felt more like a tool such as Visual Studio or Eclipse.

The Flex 2 Framework

Fortunately, there was broad agreement, and my recommendations were reflected in what we actually did to create Flex 2. So, what is it?

The core of Flex 2 is the Flex framework, a library of ActionScript objects that provide a great foundation for building rich Internet applications that run on Flash. It is a developer-centric framework that provides a strong architecture and uses design patterns that will be familiar to developers coming from a .NET, Java, or web development background.

Flex 2 has a rich component model, similar to the ones found in Visual Basic, .NET, and Java. Components expose properties to enable configuration, provide methods to enable invoking their functionality, and fire events when their state changes. Flex 2 provides standard mechanisms for providing data to components, for customizing their look and feel, and for managing their layout.

But Flex doesn’t just provide architecture. It also provides a wealth of useful components so that developers don’t have to build everything from scratch. These include buttons, lists, menus, sliders, tabs, accordions, data grids, and more. Of course, it is easy to build your own components from scratch or customize the ones provided.

The primary way one programs with Flex is via a mix of ActionScript and an XML-based language called MXML. Each tag in MXML maps to a component, so unlike HTML, you don’t have a fixed set of tags. If you write new components, you have new tags to use. Properties on a component become the tag’s attributes. MXML also supports script blocks where you can put ActionScript event-handling code and utility functions.

One exciting decision we made was to provide the Flex Framework SDK, which includes the Flex framework with complete source, compilers, and other utilities, for free. We did this to encourage adoption and enable it to be freely used with non-Adobe tools. You can download it by going to the official Flex web site, http://www.flex.org.

Flex Builder 2

Flex Builder 2 is an IDE that makes using the Flex framework more productive. It provides a great code-editing environment for both ActionScript and MXML, a WYSIWYG design view to allow you to build your UI visually, a powerful debugger, and a project system that automates compiling your application.

The source editors are especially valuable because they help you to write correct code more easily and they streamline learning the framework object model. We put a lot of work into code completion to make it always up-to-date, whether it’s providing suggestions for built-in classes or for ones that you create.

One of the challenges in doing this was that because MXML and ActionScript are essentially two languages defining and using the same objects, what you do in one affects the other. For example, you can define a class in ActionScript and use it from MXML, and as you make changes to the class definition, they will be reflected in the hints you are offered when editing MXML code.

Because we wanted to make Flex Builder a tool that developers would really like, we built it on the Eclipse framework as a set of plug-ins. Eclipse is a widely adopted, open source tools framework originally developed by IBM. It has a huge extension-building community, and many of its extensions are free and open source and can easily be integrated into Flex Builder 2. You can install Flex Builder as a standalone tool, or as a set of plug-ins to an existing installation of Eclipse.

ActionScript 3

One of the most important aspects of Flex 2 is that it is written entirely in ActionScript 3, which was introduced as part of Flash Player 9. Both products shipped simultaneously. ActionScript 3 is an incredibly important new language for a number of reasons.

First, ActionScript has always been based on EcmaScript, which is the standard that JavaScript is based on, but in the past was not implemented 100% to specification. To better support the standard and help it move forward, Macromedia played an active role on the EcmaScript planning committee and made ActionScript 100% compatible with the next major revision of the standard.

One thing you’ll find is that this is not the JavaScript you have in today’s browsers, but rather is a much more modern and robust language. In fact, I find it to be much more like C# or Java and think it will really appeal to developers coming from either of those languages. A key feature that I really like is the option of strong typing. This results in much more useful error messages and enables you to produce much more correct and reliable code.

To provide a more robust execution environment for ActionScript 3, the Flash Player team developed a new virtual machine (VM), called ActionScript Virtual Machine 2, or AVM2 for short. It was created from the ground up to be fast and scalable, and it features a just-in-time (JIT) compiler that turns the ActionScript 3 bytecode into native code. In that respect, it is much more like a Java VM or the .NET CLR than the script engines in today’s browsers. The result is that it is 10 times faster than the previous VM and it uses much less memory. Note that the previous version of the VM, now called AVM1, continues to be included within Flash Player to ensure backward compatibility.

We recently made AVM2 open source by donating it to the Mozilla Foundation for incorporation into Firefox. We believe this will speed adoption of the new standard, and help ensure compatibility with future implementations of JavaScript.

Flex Data Services

The final component of Flex 2 is Flex Data Services (FDS), which represents the evolution of the original Flex server. FDS has added an incredible array of features to enable richer, more responsive applications, including client server messaging, JMS integration, a rich data model and data synchronization framework, data paging, and proxy services.

One of the most intriguing features is that FDS supports bidirectional messaging between the client and the server. This allows the server to actually push data to the client without the client having to poll for updates. This solves one of the key problems in building rich web applications for real-time data display, such as for financial services.

Although FDS is not always required when building a Flex application, it is extremely valuable when it is required. To encourage easy adoption of FDS, we created a free Express edition that allows free, nonexpiring commercial use. The only limitation is that the applications can’t be clustered or run across multiple CPUs.

Taking Another Look at Flash

After joining Macromedia, I was able to take another look at Flash and spend more time programming with it. This was important so that I could get a better understanding of how Flash developers work today. Over time, I was able to break through some of the barriers I had initially encountered and began to understand how Flash abstractions relate to those I was used to. As such, I gradually got the hang of the fact that a Movie Clip is just another type of component.

I also had the opportunity to meet a number of the world’s top Flash developers, which was really great, because they were the ones who inspired me to learn about Flash in the first place. This was when I first met Chafic Kazoun and Joey Lott, the authors of the book you hold in your hands.

One of the things that I found interesting is that today’s Flash developers are somewhat different from those in other communities. Some came to Flash from a creative background, without prior software experience, and got into programming Flash in order to enhance their work. Others came to Flash from a programming background, but were also interested in the aesthetic aspects of software. Whichever way they got there, however, they all had a mix of the creative and technical skills that is not typical.

I do believe that Flex will change this somewhat, because you no longer have to have great design skills to create something in Flash that looks fantastic. Flex applications look great out of the box.

One of the things I have been delighted with is that Flex has been enthusiastically received by Flash developers. One might have thought that they wouldn’t care because they had already mastered the skills needed to use Flash, but they do care and they like it. In fact, I recently spoke at some conferences, and the other Flex presenters were almost all Flash developers who had gotten hooked on Flex.

In talking to them, I learned that they like that they can be more productive when they’re building something that fits within the Flex paradigm. They find that the architecture is well done and solves comprehensively what they used to address in an ad hoc way. They love the fact that Flex Builder has a great coding environment. And of course, they love that Flex and Flash can work together, so they can use each where appropriate. Flex is not the right solution for everything they might want to build, but when it is the right solution, they love it as much as anyone.

Programming Flex 2

One of the things that makes frameworks such as Flex so great is that they provide a rich architecture and lots of prebuilt software components that enable you to build software much more quickly than if you had to write it yourself. And the best frameworks, of which Flex is one, allow you to deeply customize and extend the provided functionality so that you are not limited in your creations.

With all of this, however, comes a degree of complexity. We put a ton of effort into making sure that things are as consistent as possible, that the right design patterns are used, and that there is the right balance of ease of use and flexibility, all in an effort to make things as simple to learn and use as possible. With that said, there’s nothing like a good book to take you through the concepts so that you can really understand what’s going on.

What I really like about Programming Flex 2 is that not only does it take you through the breadth of what Flex provides, but it also takes you deep into how it works. It explains the high-level concepts as well as points out the finer details of what’s really happening.

I also like that Programming Flex 2 takes a practical approach, explaining common techniques of how ActionScript programs typically work in ways that go beyond simply explaining the classes that Flex provides.

Both Chafic Kazoun and Joey Lott are ideal people to present this information. Both are long-time Flash developers, are well known in the Flash community, and are among the elite of the Flash development world. Each of them has been using Flex for a long time.

I think that the depth of their Flash experience is part of what makes Programming Flex 2 so special. Their mastery of the Flash Player API combined with their extensive knowledge of Flex enable them to not just tell you how to leverage the features Flex provides, but to do so with a thorough understanding of the entire system.

Looking Ahead

When we shipped Flex 2 June 27, 2006, it was just a few days shy of 18 months since we had started developing it. It was a great accomplishment, because we built a new tool from scratch, rewrote the framework in ActionScript 3, which was still being developed, and shipped on schedule.

It was an amazing time, and a lot of fun. Of course, for us, probably the biggest thing that happened was that Macromedia was acquired by Adobe Systems. Although some Macromedia fans expressed concern that Adobe might not really support Flex, they couldn’t have been more wrong. It was amazing to experience how excited Adobe employees were about Flex and all of the technology being created by the former Macromedia teams. And over the past year since the acquisition, this has been confirmed by what we’ve been able to accomplish.

January 4, 2007, just six months after shipping Flex 2, we released Flex 2.0.1. Although it sounds like a tiny update, it actually has a number of new features and improvements. One of the key things that we were able to deliver was Flex Builder 2 for the Mac, running on both PowerPC and Intel.

We followed this up January 16 with Flash Player 9 for Linux. What makes this so important is that it means you can now run Flex 2 applications that behave identically across Windows, the Mac, and Linux.

One of the most important extensions of what Flex can do is a project that was begun immediately after Adobe and Macromedia combined. Apollo is a technology that will allow developers to build desktop applications that run outside of the browser using the web technologies they use today, including Flex/Flash, HTML/AJAX, and PDF.

This means you can develop a Flex application and install it on either Windows or the Mac (Linux will come a little later) and it will behave like any other application on your system. On Windows, it can appear in the Start menu and in the taskbar, and on the Mac, it will appear in the Doc. Apollo will have additional APIs that enable you to interact with the system in ways you can’t from within the browser. For example, you can open multiple windows, support drag and drop, and more directly access the filesystem.

What’s more, you will be able to integrate full HTML into a Flex application. That is, you’ll essentially be able to have the full HTML engine that powers the Mac Safari browser embedded within your Flex app.

So, I think we are doing a number of exciting things to move Flex forward. However, I’m most looking forward to being inspired by the incredible apps that you create with Flex 2. Good luck and happy coding!

—Mark Anders

Senior Principal Scientist,

Adobe Systems Incorporated