“Excuse me, where can I find For Sale signs?”
“Probably they are in the Hardware section.”
“If we don’t know where to shelve an item, we put it in Hardware.”
For a successful project, you need the right mix of team members, tools, and techniques. This chapter covers a variety of topics that are important for development managers and enterprise and application architects who take care of the ecosystem in which Flex teams operate. The fact that Flex exists in a variety of platforms and that BlazeDS and LCDS can be deployed under any Java servlet container sounds great. But when you consider that today’s enterprise development team often consists of people located all around the globe, such flexibility can make your project difficult to manage.
This chapter is not as technical as the others. It’s rather a grab bag of little things that may seem unrelated, but when combined will make your development process smoother and the results of your development cycle more predictable.
Specifically, you’ll learn about:
Staffing enterprise Flex projects
Working with the version control repository
Creating build and deployment scripts
Logging and tracing
Open source Flex component libraries
Integration with Spring and Hibernate
The chapter’s goal is to give you a taste of your options and help make your Flex team more productive. Without further ado, let’s start building a Flex team.
Any project has to be staffed first. Developers of a typical enterprise RIA project can be easily separated into two groups: those who work on the client tier and those who work on the server-side components. You can further divide this latter group into those who develop the middle tier with business logic and those who take care of the data. In all cases, however, how does a project manager find the right people?
The number of formally trained Flex programmers is increasing daily, but the pool of Flex developers is still relatively small compared to the multimillion legions of Java and .NET professionals.
The main concern of any project manager is whether enough people with Flex skills can be found to staff, but what does the title of “Flex developer” mean? In some projects, you need to develop a small number of Flex views, but they have very serious requirements for the communication layer. In other projects, you need to develop lots of UI views (a.k.a. screens) supported by standard LCDS or BlazeDS features. Any of these projects, however, require the following Flex personnel:
For the sake of simplicity, this discussion assumes that the project’s user interface design is done by a professional user experience designer.
The better you understand these roles, the better you can staff your project.
GUI developers create the view portion of an RIA. This is the easiest skill to acquire if you already have some programming language under your belt. The hard work of the Adobe marketing force and technical evangelists did a good job in creating the impression that working with Flex is easy: just drag and drop UI components on the what-you-see-is-what-you-get (WYSIWYG) area in Flash Builder, align them nicely, and write the functions to process button clicks or row selections in the data grid—sort of a Visual Basic for the Web.
The GUI development skillset is low-hanging fruit that many people can master pretty quickly. Savvy project managers either outsource this job to third-party vendors or send their own developers to a one-week training class. There is rarely a staffing problem here.
GUI developers interact with user experience designers who create wireframes of your application in Photoshop, some third-party tool, or even in Flex itself. But even in the Flex case, GUI developers should not start implementing screens until approved by a Flex component developer or an architect.
They analyze each view created by a web designer to decide which Flex components should be developed for this view and how these components will interact with each other (see Figure 2-4). Most likely they will be applying a mediator pattern (described in Chapter 2) to the initial wireframe.
Experienced Flex component developers know that even though the syntax of ActionScript 3 looks very similar to Java, it has provisions for dynamic programming and often they can use this to avoid creating well-defined Java Bean–ish objects.
Decide which frameworks, component libraries, and utilities should be used on the project
Decide on communication protocols to be used for communication with the server tier
Enhance the application protocols if need be
Decide how to modularize the application
Arrange for the unit, functional, and stress tests
Make decisions on application security issues, such as how to integrate with external authentication/authorization mechanisms available in the organization
Act as a technical lead on the project, providing technical guidance to GUI and component developers
Coordinate interaction between the Flex team and the server-side developers
Promote the use of coding best practices and perform code reviews
Conduct technical job interviews and give recommendations on hiring GUI and component developers
These skills can’t be obtained in a week of training. Flex architects are seasoned professionals with years of experience in RIA development. The goal of any project manager is to find the best Flex architect possible. The success of your project heavily depends on this person.
Not every Flex developer can be profiled as a member of one of these three groups. In smaller teams, one person may wear two hats: component developer and architect.
RIAs require new skills to develop what was previously known as boring-looking enterprise applications. In the past, development of the user interface was done by software developers to the best of their design abilities. A couple of buttons here, a grid there, a gray background—done. The users were happy because they did not see anything better. The application delivered the data. What else was there to wish for? Enterprise business users were not spoiled and would work with whatever was available; they needed to take care of their business. It was what it was.
But is it still? Not anymore. We’ve seen excellent (from the UI perspective) functional specs for financial applications made by professional designers. Business users are slowly but surely becoming first-class citizens!
The vendors of the tools for RIA development recognize this trend and are trying to bring designers and developers closer to each other. But the main RIA tool vendors, Adobe and Microsoft, face different issues.
Adobe is a well-known name among creative people (Photoshop, Illustrator, Flash); during the last two years, it has managed to convince enterprise developers that it has something for them, too (Flex, AIR). Adobe is trying to win developers’ hearts, but it does not want to scare designers either. In addition to various designer-only tools, Adobe’s Flash Catalyst tool allows designers create the Flex UI of an application without knowing how to program.
Today, a designer creates artwork in Illustrator or Photoshop, and then developers have to somehow mimic all the images, color gradients, fonts, and styles in Flash Builder. But this process will become a lot more transparent.
A web designer will import his Illustrator/Photoshop creations into Flash Catalyst, then select areas to be turned into Flex components and save the artwork as a new project: a file with extension .fxp. Adobe did a good job of maintaining menus and property panes in Flash Catalyst, similar to what designers are accustomed to in Illustrator and Photoshop. The learning curve for designers is not steep at all.
Designers will definitely appreciate the ability to work with Flex view states without the need to write even a line of code. Creating two views for master/detail scenarios becomes a trivial operation.
Flash Catalyst is a handy tool not only for people trained in creating artwork but also for those who need to create wireframe mockups of their application using built-in controls including some dummy data.
Working with Flash Catalyst requires UI designers to use Flash Creative Studio version 4 or later for creation of original artworks. This is needed, because Flash Catalyst internally uses the new .fxg format for storing just the graphic part of the Flex controls.
Flash Catalyst will become a valuable addition to the toolbox of a web designer working in the Flex RIA space.
Microsoft comes from quite the opposite side: it has legions of faithful .NET developers, and released Silverlight, which includes great tools for designers creating UI for RIA. Microsoft Expression Design and Expression Blend IDEs take the artwork and automatically generate code for .NET developers and help animate the UI to make it more rich and engaging.
Adobe invests heavily in making the designer/developer workflow as
easy and smooth as possible. Adobe’s Catalyst generates Flex code based
on the artwork created with tools from Creative Studio 4 and later. Most
of the work on the application design is done using Adobe Photoshop,
Illustrator, or Fireworks, and application interactions you can create
in Flash Catalyst. During conversion, the selected piece of the artwork
becomes the skin of a Flex component. Figure 4-1 shows how you can
convert an area in the artwork into a Flex
Flash Catalyst allows you to create animated transitions between states and, using the timeline, adjust the length and timing of the effects. It allows developers and designers to work on the same project. Designers create the interface of the RIA, and developers add business logic and program communication with the server.
In an effort to foster understanding between the developers and designers, Adobe consults with professors from different colleges and universities on their visual design and software engineering disciplines. The intent is to help designers understand programming better and help software developers get better at designing a user experience. It’s a complex and not easily achievable goal, breeding these new creatures called “designopers” and “devigners.”
If you are staffing an RIA project and need to make a decision about the position of web designer, you’re better off hiring two different talents: a creative person and a web developer. Make sure that each party is aware of decisions made by the other. Invite designers to decision-making meetings. If the project budget is tight, however, you have no choice but to bring on board either a designoper or devigner.
With the right staff on board, you’re ready to dig into your project. Even though the Flex SDK includes a command-line compiler and a debugger and you can write code in any plain-text editor of your choice, this is not the most productive approach. You need an IDE—an integrated development environment—and in the next section, you’ll get familiar with IDE choices.