|By Jason Dolinger||
|July 15, 2009 04:00 AM EDT||
With the arrival of .NET 3.5, WPF and the RTM of Silverlight 2, .NET developers have more choices than ever for designing, developing and deploying compelling applications with rich user interfaces. However, there are other mainstream alternatives that don't fall into the .NET camp. When it comes to the RIA world, technologies such as Adobe Flex and Flash may seem more foreign to some of us then driving on the left side of the road would be to an American. However, given the need to work on a Flex project, we are actually quite well suited for the transition, more so in many cases than developers coming from a more traditional web development world.
First off all, why choose to use Flex anyway? If you are building an RIA to deploy through the browser, Silverlight would seem the logical choice for a truly custom and unique UI when ASP.NET and AJAX don't fit the bill. But there are certain situations where an enterprise may decide that going the Adobe route is the correct choice for the needs of a particular project. The primary motivation comes with an application that is being built for external consumers. The Flash plug-in currently has a 99% market penetration according to Adobe and that's hard to argue with. This will be changing as Silverlight continues to be adopted but it currently remains an important consideration. As an example, I was recently involved in building an RIA meant to be subscribed to by many large financial institutions. These types of clients do not typically have the freedom to install browser plug-ins at will. Something like the Silverlight plug-in would need to be deployed in a firm-wide rollout after many months of compatibility testing, while Flash has been standard for years. Aside from this reason, the Adobe AIR runtime makes for a compelling usage scenario where your application assets can be deployed both in the browser or standalone on the desktop, allowing reuse of the majority of the same code base. AIR has a sophisticated web-based deployment and versioning model as well. Some form of this is expected in Silverlight 3 but it is already a reality for AIR. Finally, if you have a set of graphical assets already designed for Flash and designers who are most experienced in this area, the Flash/Flex path may be the easiest way to get the user experience you are after.
If you (or your project manager/architect) have decided that it must be Flex, don't be discouraged. While learning any new platform is a non-trivial undertaking, Flex is not as foreign to .NET as it may seem. When I've conducted interviews for Flex positions, usually the candidate came from a history of Java web development. The Flex platform enjoys close ties with the Java community, from its Eclipse-based IDE, Java style package naming, and Adobe's support of its Livecycle Data Services and BlazeDS APIs for remote service integration. However, I believe that the learning curve is more natural coming from WPF or Silverlight than from Java, culture and IDE differences aside. Rich Internet Applications are closer architecturally to desktop applications written in C++, WinForms or WPF than the standard non-AJAX web application. The kinship between Silverlight and Flash is even closer. RIAs are persistent applications that maintain state, and call remote services to load and store data (usually through XML or JSON), rather than loading pages of HTML. As such, the patterns for architecting one should follow those of a desktop application deployed in an n-tier environment. Further, the major elements of the Flex platform will be quite familiar to any WPF or Silverlight developer. Flex contains an XAML-like markup language for UI layout, an OO language to glue everything together, a mature set of controls and layout panels, an analogous eventing system, databinding, and a DataTemplate like mechanism.
Introducing the Flex 3 Framework
Flex is the UI toolkit for building RIAs based on the ActionScript language and running in Flash player, as WPF and Silverlight are frameworks for building applications in C# that run in the .NET CLR or Silverlight runtime. As WPF has XAML, Flex has its own analogous language called MXML that serves the same purpose. It is a serialization language for describing your application views by constructing trees of layout elements and control elements, and setting properties on them. Your MXML files get compiled to ActionScript and the MXML tags that you declare create instances of AS classes. Flex does not have the same concept of codebehind as you'll find in the .NET world, but ActionScript can co-exist in the same file as your MXML markup in a special CDATA block for this purpose. This ActionScript is just another part of the class that the MXML in the file gets compiled into, so the overall effect is the same.
Many other WPF constructs have similar analogues in the Flex world. Flex provides an eventing model that anyone familiar with C# delegates and events will have no trouble understanding. Routed events have been a part of Flex for as long as they were in WPF. These events have a tunneling phase (called "capture") where they travel down through the control tree from the top level (called the Stage in Flash) to the target where the event occurred, followed by a bubbling phase where they travel up the tree, in both directions, looking for any registered event handlers.
Flex has a databinding mechanism for connecting UI controls to model data. The syntax is more awkward than you may be used to, but you can (and should) still make use of this for binding your view controls to their model (or viewmodel). Unfortunately there is no concept of a DataContext, so even if a single model object provides all of the underlying data for your view, you'll need to specify that in each binding expression path.
For giving a custom look to lists of data as well as DataGrid columns, Flex gives you a construct called an item renderer that is quite similar to our familiar DataTemplate. An item renderer is usually a small tree of MXML, but can be implemented as a class with some behavior behind it. When binding to a list of data, Flex uses the renderer as a factory to create additional instances of the same class, used to render each underlying model item in the list. Just as in XAML, your item renderers can be declared inline, separated out into separate component files or even built up in code. Item renderers in Flex only apply to list data. With the PresentationModel patterns being applied in .NET 3.5 now, views are often being abstracted into a simple ContentControl rendering dynamically based on the DataTemplate for the bound Content, but you won't be able to do anything quite that clever here.
Learning the ActionScript language will present no major hurdle for anyone experienced with C# or Java. ActionScript 3 (the current version) is based on ECMAScript 4.0, and is largely grounded in OO principles with the addition of some ideas from the functional world. It is a true object-oriented language supporting inheritance, polymorphism and interfaces. The language is somewhat more dynamic; however, there are no strongly typed arrays or lists and you can forget about generics. There are no explicit delegates or events (objects fire events by implementing the IEventDispatcher interface). But functions are first class objects that can be passed as method arguments, used most frequently for adding handlers for events. Functions can also be anonymously declared inline. Interestingly, the ActionScript Array class has a number of higher order functions such as forEach(), filter(), map(), and some() for applying a function over a list of elements. If you are already using LINQ extension methods and delegates, you'll have no problem figuring out what to do with these. The language does leave out a few of the common OO constructs that you've grown accustomed to, such as abstract classes, private constructors and static initializers. While you will miss them, they won't be anything that you can't work around.
Flex makes use of the Flash player threading model in which all of the code you write executes on the single UI thread, so forget about doing CPU-intensive processing while keeping your UI responsive. You can perform some I/O bound operations through a model similar to .NET's Asynchronous Programming Model though. Through this mechanism, you schedule an asynchronous action to be executed by the Flash player, such as calling a remote service or reading a file. You provide an event handling function to be invoked when the operation is finished so you can process the results, but this will be invoked on the same UI thread. While this model can be limiting, it does free you from worrying about thread synchronization or the need to marshal data between threads.
Perhaps the most initially disconcerting part of your switch to Flex will be getting used to a new development environment. The FlexBuilder IDE is based on Eclipse, coming either as a standalone install + the Eclipse shell or as a plug-in for existing Eclipse installations. Eclipse is a full-featured IDE when using it for Java development, and you get out of the box a similar feature set to what you have with Visual Studio + Resharper. But FlexBuilder does not support most of the more advanced refactorings, code organization, and generation tools that Eclipse users might be accustomed to. Therefore, you may feel that you are taking a step backwards when making the switch from Visual Studio. Most of your basic debugging tools are present (there are no conditional breakpoints but this is coming in Flex 4).
The story is more fragmented regarding the UI designer/developer workflow. Expression Blend has come a long way toward allowing designers and developers to simultaneously work on the same source tree and have a productive working relationship. Unfortunately there is no equivalent in the Flex world, and no tool that generates MXML, which can build and run the same projects used in Flex Builder. There is a built-in WYSIWYG editor in Flex Builder, but like the XAML designer in Visual Studio, it's not very useful beyond trivial applications. In general the flow between developers and designers is not as natural. Achieving more interesting effects, skins, and animations in Flex is often a combination of handwritten MXML combined with artifacts generated from tools such as Flash IDE, Adobe Illustrator, and open source libraries like Degrafa.
The Server Tier
As mentioned, the Adobe Flex community enjoys close ties with the Java world, and you'll find that a majority of Flex applications are served from and call remote services on a Java application server, or servlet engine. A large reason is that Adobe has released and supported a suite of APIs for integrating Flash Remoting with Java, through its AMF (Action Message Format) binary protocol. These products, BlazeDS and LiveCycle Data Services, provide a framework for exposing Java classes as endpoints for Flash Remoting and you get automatic mapping between your ActionScript and Java domain objects.
However, Flex is not in any way tied to Java, and you can easily serve a Flex application from IIS. Flex's HTTPService class asynchronously consumes XML, JSON or SOAP served from .NET Web Services, REST, or WCF. In this way you'll continue to use your IIS and .NET server infrastructure and skills, perhaps with a thin facade layer to serve the data in the format your Flex application expects. Furthermore, there is an open source implementation of AMF: FluorineFx. It comes complete with framework libraries and wizards for generating and configuring an ASP.NET web application that serves AMF. Writing a remote service for a Flex application becomes little more than writing your class and marking it with the appropriate attributes. I'd highly recommend checking out this option if you want to keep using C# on the server. AMF is more efficient than XML or JSON, and you'll have the power of using strongly typed ActionScript domain objects in your Flex tier without needing to write the mapping layer yourself. Pushing data to the browser is an option with Lightstreamer, RTMP, or sockets with a custom protocol.
Architecture and Design Patterns
As with any platform, architecture and design plays a larger role as the complexity of your application increases. This is one of the places where your existing experience will translate very well, and you'll be better off than Flex developers coming from the web world.
One of the biggest problems we need to circumvent is that of your entire application becoming housed within a few monolithic UI classes. The problem is even worse with Flex because, as mentioned, the code that you write along with your view can be put in a script block right in your MXML markup. This can be greatly abused just as code behind in WPF and other .NET platforms often is. I've seen more than one application consisting of a few grotesquely large MXML files with a few helper classes. Instead we need a way to write our applications in a clean and decoupled manner and achieve a proper separation of concerns.
There are a number of MV-x patterns used to provide basic architectural organization, often Model-View-Presenter for WinForms and Model-View-ViewModel (also called PresentationModel) in WPF. M-V-VM is the choice for WPF (over vanilla MVP) because of the platform's sophisticated databinding framework. As Flex also has a useable binding system, I've successfully applied M-V-VM to a large Flex project. The typical three-layer approach:
Service layer composed of classes that wrap Flash RemoteObjects (when using FluorineFx) or HTTPService classes for JSON or XML transfer. There should be service interfaces for all classes.
ViewModel layer that handles events from the views and exposes bindable properties that present a flat picture of the model data used in the view. These classes get injected with the service classes (of course talking to them through their interface to allow for mocking).
View layer composed primarily of MXML components with a minimum of ActionScript required to glue everything together. The primary purpose of this code is to create the ViewModel instance and direct event handlers from the UI controls into the ViewModel. Code that needs to stay very close to the view (such as drag and drop) can stay here as well.
I like to couple the above pattern with dependency injection to construct and inject instances of the viewmodel classes with their services and any other dependencies. This is still a rare technique in the Flex community, but is becoming more commonplace with several quite useable open source containers out there. SpiceFactory's Parsley and the Spring ActionScript container (formerly known as Prana) are great candidates for this.
Another architectural alternative is the Cairngorm framework, which is the Adobe approved framework for achieving the ideals set out above. You'll find many Flex projects that use it to varying degrees of success and pain. The main features of Cairngorm are a FrontController class with a set of commands that you write to handle the events, a ModelLocator singleton that provides a global access point to your model layer, and a ServiceLocator singleton for looking up instances of Remote Service wrappers. At first glance, Cairngorm feels a lot like a Java Struts MVC style framework (with FrontControllers and Commands), and may trick some more web developers into believing so, but this is not the case.
Cairngorm, like any framework, has some useful constructs and some frustrating ones, and one of the things that makes a framework useful is being able to incorporate the parts you want without making your whole codebase depend on the pieces you don't. While this is not a problem inherent in Cairngorm, many developers new to the framework utilize everything verbatim in the way that the tutorials and how-to's demonstrate. This tends to result in a congested code base with too much boilerplate code for Commands and Delegate classes, and lots of direct dependencies on the ModelLocater and ServiceLocator singletons. As we know that singleton classes are the enemy of flexibility and testability, this should make most of us cringe.
If you decide to leverage Cairngorm or take over a project already using it, remember to apply the good lessons you've learned in the .NET world. ViewModels are still worthy constructs to use with the framework, providing a place for handling events and exposing portions of your model that are local only to your specific component (they can be managed by the ModelLocator). Cairngorm is open source, so you can modify the FrontController to use your IoC container as the factory for your Command classes, so they are injected with the ModelLocator and service instances, rather than using the singleton method of accessing them. The Spring ActionScript container is already incorporating extensions to allow you to work around the messier parts of Cairngorm and is worth a look just for this reason.
As Silverlight and WPF mature and gain mainstream acceptance, Flex and Flash will undoubtedly be forced to evolve in a direction where they can stay competitive. It's likely that there will be further feature swapping and parallels between the two. If you do find yourself in a position where you or your team will need to work on a Flex application, don't feel that you will be throwing away what you know and starting from scratch. Rest assured that you will be in the best possible place to pick up the new framework as well as anyone, and can continue to build on the .NET infrastructure and support that you already have.
|cgehrke 07/09/09 06:30:00 AM EDT|
Thanks for your article. Your points are clearly explained and well thought out. Great job.
I am curious why you don't mention Adobe's latest design tool called Adobe Catalyst which has been in Beta and available for download for months now?
Adobe Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding.
I have been using Catalyst since December 2008 when I received a copy in Milan at the Adobe MAX Event. It's the perfect tool for merging the design world of Adobe to the developer world of Flex and Flash.
Using Catalyst, a designer can open and retain their artwork in a native format. No conversion or cutting up necessary. Just open your art file (PNG, PSD, AI) and retain your folder structure, effects and layers. You can then begin defining your elements so Flex knows what to do with them (IE: Buttons, Scroll Bars, Navigation, Etc,). Catalyst will write the Flex code for the developer under the hood. At any point you can switch back and forth from design to code view.
Adobe is known for it's great design tools: Photoshop, Illustrator and Fireworks to only name a few. It was only a matter of time until they found a way to merge the design world with the newly acquired developer world of which they adopted from Macromedia only 5 years ago. I am sure we've only seen the tip of the iceberg in regards to Adobe's full potential in the developer world.
Not to take away from your article in anyway, you did a great job here. Thanks for sharing.
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it's a mix of architectural styles ...
May. 27, 2015 03:00 AM EDT Reads: 5,904
We certainly live in interesting technological times. And no more interesting than the current competing IoT standards for connectivity. Various standards bodies, approaches, and ecosystems are vying for mindshare and positioning for a competitive edge. It is clear that when the dust settles, we will have new protocols, evolved protocols, that will change the way we interact with devices and infrastructure. We will also have evolved web protocols, like HTTP/2, that will be changing the very core of our infrastructures. At the same time, we have old approaches made new again like micro-services...
May. 27, 2015 02:30 AM EDT Reads: 5,585
Connected devices and the Internet of Things are getting significant momentum in 2014. In his session at Internet of @ThingsExpo, Jim Hunter, Chief Scientist & Technology Evangelist at Greenwave Systems, examined three key elements that together will drive mass adoption of the IoT before the end of 2015. The first element is the recent advent of robust open source protocols (like AllJoyn and WebRTC) that facilitate M2M communication. The second is broad availability of flexible, cost-effective storage designed to handle the massive surge in back-end data in a world where timely analytics is e...
May. 27, 2015 02:00 AM EDT Reads: 6,346
Collecting data in the field and configuring multitudes of unique devices is a time-consuming, labor-intensive process that can stretch IT resources. Horan & Bird [H&B], Australia’s fifth-largest Solar Panel Installer, wanted to automate sensor data collection and monitoring from its solar panels and integrate the data with its business and marketing systems. After data was collected and structured, two major areas needed to be addressed: improving developer workflows and extending access to a business application to multiple users (multi-tenancy). Docker, a container technology, was used to ...
May. 27, 2015 01:00 AM EDT Reads: 2,515
The true value of the Internet of Things (IoT) lies not just in the data, but through the services that protect the data, perform the analysis and present findings in a usable way. With many IoT elements rooted in traditional IT components, Big Data and IoT isn’t just a play for enterprise. In fact, the IoT presents SMBs with the prospect of launching entirely new activities and exploring innovative areas. CompTIA research identifies several areas where IoT is expected to have the greatest impact.
May. 26, 2015 09:00 PM EDT Reads: 5,229
The 4th International Internet of @ThingsExpo, co-located with the 17th International Cloud Expo - to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA - announces that its Call for Papers is open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
May. 26, 2015 06:00 PM EDT Reads: 2,276
The Industrial Internet revolution is now underway, enabled by connected machines and billions of devices that communicate and collaborate. The massive amounts of Big Data requiring real-time analysis is flooding legacy IT systems and giving way to cloud environments that can handle the unpredictable workloads. Yet many barriers remain until we can fully realize the opportunities and benefits from the convergence of machines and devices with Big Data and the cloud, including interoperability, data security and privacy.
May. 26, 2015 05:00 PM EDT Reads: 4,960
The Internet of Things is tied together with a thin strand that is known as time. Coincidentally, at the core of nearly all data analytics is a timestamp. When working with time series data there are a few core principles that everyone should consider, especially across datasets where time is the common boundary. In his session at Internet of @ThingsExpo, Jim Scott, Director of Enterprise Strategy & Architecture at MapR Technologies, discussed single-value, geo-spatial, and log time series data. By focusing on enterprise applications and the data center, he will use OpenTSDB as an example t...
May. 26, 2015 02:00 PM EDT Reads: 6,697
The Internet of Things is not only adding billions of sensors and billions of terabytes to the Internet. It is also forcing a fundamental change in the way we envision Information Technology. For the first time, more data is being created by devices at the edge of the Internet rather than from centralized systems. What does this mean for today's IT professional? In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists will addresses this very serious issue of profound change in the industry.
May. 26, 2015 01:15 PM EDT Reads: 1,159
Scott Jenson leads a project called The Physical Web within the Chrome team at Google. Project members are working to take the scalability and openness of the web and use it to talk to the exponentially exploding range of smart devices. Nearly every company today working on the IoT comes up with the same basic solution: use my server and you'll be fine. But if we really believe there will be trillions of these devices, that just can't scale. We need a system that is open a scalable and by using the URL as a basic building block, we open this up and get the same resilience that the web enjoys.
May. 26, 2015 01:00 PM EDT Reads: 7,310
We are reaching the end of the beginning with WebRTC, and real systems using this technology have begun to appear. One challenge that faces every WebRTC deployment (in some form or another) is identity management. For example, if you have an existing service – possibly built on a variety of different PaaS/SaaS offerings – and you want to add real-time communications you are faced with a challenge relating to user management, authentication, authorization, and validation. Service providers will want to use their existing identities, but these will have credentials already that are (hopefully) i...
May. 26, 2015 01:00 PM EDT Reads: 4,607
All major researchers estimate there will be tens of billions devices - computers, smartphones, tablets, and sensors - connected to the Internet by 2020. This number will continue to grow at a rapid pace for the next several decades. With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo, June 9-11, 2015, at the Javits Center in New York City. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be
May. 26, 2015 12:15 PM EDT Reads: 2,710
Container frameworks, such as Docker, provide a variety of benefits, including density of deployment across infrastructure, convenience for application developers to push updates with low operational hand-holding, and a fairly well-defined deployment workflow that can be orchestrated. Container frameworks also enable a DevOps approach to application development by cleanly separating concerns between operations and development teams. But running multi-container, multi-server apps with containers is very hard. You have to learn five new and different technologies and best practices (libswarm, sy...
May. 26, 2015 12:00 PM EDT Reads: 2,473
SYS-CON Events announced today that DragonGlass, an enterprise search platform, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. After eleven years of designing and building custom applications, OpenCrowd has launched DragonGlass, a cloud-based platform that enables the development of search-based applications. These are a new breed of applications that utilize a search index as their backbone for data retrieval. They can easily adapt to new data sets and provide access to both structured and unstruc...
May. 26, 2015 12:00 PM EDT Reads: 2,248
The Internet of Things is a misnomer. That implies that everything is on the Internet, and that simply should not be - especially for things that are blurring the line between medical devices that stimulate like a pacemaker and quantified self-sensors like a pedometer or pulse tracker. The mesh of things that we manage must be segmented into zones of trust for sensing data, transmitting data, receiving command and control administrative changes, and peer-to-peer mesh messaging. In his session at @ThingsExpo, Ryan Bagnulo, Solution Architect / Software Engineer at SOA Software, focused on desi...
May. 26, 2015 11:00 AM EDT Reads: 4,269
An entirely new security model is needed for the Internet of Things, or is it? Can we save some old and tested controls for this new and different environment? In his session at @ThingsExpo, New York's at the Javits Center, Davi Ottenheimer, EMC Senior Director of Trust, reviewed hands-on lessons with IoT devices and reveal a new risk balance you might not expect. Davi Ottenheimer, EMC Senior Director of Trust, has more than nineteen years' experience managing global security operations and assessments, including a decade of leading incident response and digital forensics. He is co-author of t...
May. 26, 2015 11:00 AM EDT Reads: 5,968
SYS-CON Events announced today that MetraTech, now part of Ericsson, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Ericsson is the driving force behind the Networked Society- a world leader in communications infrastructure, software and services. Some 40% of the world’s mobile traffic runs through networks Ericsson has supplied, serving more than 2.5 billion subscribers.
May. 26, 2015 10:15 AM EDT Reads: 1,928
While great strides have been made relative to the video aspects of remote collaboration, audio technology has basically stagnated. Typically all audio is mixed to a single monaural stream and emanates from a single point, such as a speakerphone or a speaker associated with a video monitor. This leads to confusion and lack of understanding among participants especially regarding who is actually speaking. Spatial teleconferencing introduces the concept of acoustic spatial separation between conference participants in three dimensional space. This has been shown to significantly improve comprehe...
May. 26, 2015 10:00 AM EDT Reads: 3,387
Buzzword alert: Microservices and IoT at a DevOps conference? What could possibly go wrong? In this Power Panel at DevOps Summit, moderated by Jason Bloomberg, the leading expert on architecting agility for the enterprise and president of Intellyx, panelists will peel away the buzz and discuss the important architectural principles behind implementing IoT solutions for the enterprise. As remote IoT devices and sensors become increasingly intelligent, they become part of our distributed cloud environment, and we must architect and code accordingly. At the very least, you'll have no problem fil...
May. 26, 2015 10:00 AM EDT Reads: 2,181
The Domain Name Service (DNS) is one of the most important components in networking infrastructure, enabling users and services to access applications by translating URLs (names) into IP addresses (numbers). Because every icon and URL and all embedded content on a website requires a DNS lookup loading complex sites necessitates hundreds of DNS queries. In addition, as more internet-enabled ‘Things' get connected, people will rely on DNS to name and find their fridges, toasters and toilets. According to a recent IDG Research Services Survey this rate of traffic will only grow. What's driving t...
May. 26, 2015 09:00 AM EDT Reads: 5,436