2009
10.31

Implementing enterprise solutions into “cool shit” application

This is series of articles called “Behind The Scenes”, where we describe particular project in different ways. this time it will be our fist one. Think360.

Picture1Think360

Series Articles:

1) Planning, Platforms, Frameworks, Workspace
2) Architecting, Folder structures, Backend
3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, Optimization

Folder Structure:

In flash builder you can create modules in your project. However if your project become bigger it is better to move your module into new project. In this way you create your flex workspace as one project and each project inside of that workspace represent one module/application.

I found very useful to name our workspace as namespace

With this name you can easily put Flex project to svn with .NET project.

ie:
Syerit.Flex.Web.Portfolio (flex workspace)
Syerit.Net.Web.Portfolio (.net solution folder)

Yes that’s right. We use SVN for .NET development.
Why? It’s mainly because of costs. TFS, VSS are great but also very expensive. Those solutions are suitable for much bigger enterprise projects where you have business analysts, testers, developers, build managers, all together counting 50+ staff.
For mid size projects SVN is fairly enough.It’s free and with tools like VisualSVN, Subclipse and Tortoise, it’s very easy to integrate into your project.
And with used structure it’s relatively easy to migrate project to TFS later if you will need to do so.

SVN Structure:

SVN Structure

Naming Conventions:

If you work on bigger project, you can find easily lost because of number of projects in your workspace. To help with this issue, we started to use naming conventions for our projects. Each internal project name starts with some prefix dependent on type of project.

  • FX – flex application
  • FXT – flex based test project
  • FXL – library project
  • FXM – flex based module
  • AS – actionscript based application
  • AST – actionscript test project
  • ASM – Actionscript based module
  • FXB – directory for build scripts

Note: In our case, term Module doesn’t state for Flex module (<fx:Module) but for any sub application loaded into main application. (Module, Sub-application, Flash application)

So in this particular project, we had something like that:

Syerit.Flex.Web.Portfolio (workspace)

  • FX_MainApp
  • ASM_VirtualWorld
  • FXL_MainApp (used as bridge(strong typed VOs) and shared library     between main application and module)
  • FXB_MainApp (ant build scripts for project. We used it for easy deployment)
  • AST_PhysicsTest
  • AST_AwayTest

Architecture/Structure:

Now, the graphical representation of logical structure would look like this:

Syerit Application Structure

Also here is Legend to describe color sections:

  • Light Grey – Flex based application
  • Red – AS3/Flex based module
  • Yellow – XML data
  • White – Developed Application
  • Light Green – Architectural framework
  • Light Blue – Other Libraries
  • Purple – HTML Based Application
  • Amber – .NET Application
  • Grey – CMS
  • Blue – Data Tier

You can see that on sides, there are descriptions of each sections of application.

  • On right hand side we have whole application dividend by .NET metrics
  • On left hand side we have application dividend by RIA metrics

Each application/module in presentation layer has its own config file. We use IoC container called SpringActionscript to inject config classes with some data.

In this way we can change application(replace module, add additional, change control settings, disable deep linking etc.) without recompiling application. DI is very popular these days in Flex community (there are several frameworks including Mate, SpringActionscript, Parsley, Swiz for instance). This pattern is very powerful and often used in enterprise development (Spring in Java, Spring.NET in .NET and may others).

However because we are in real world, every pros has its cons. And the same is it with IoC. While it’s very flexible, extend use of it could lead project to be hardly testable and debugging could be nightmare. So instead of use IoC based framework we went for MVC based PureMVC with IoC extension as SpringActionscript. Development with PureMVC could be time consuming so to help this issue some unknown genius called Darshan Sawardekar created small utility called Fabrication and suddenly creating multicore, multimodule, mvc applications became piece of cake.

So what’s the advantage of this model? Imagine if in the future we’ll want to put another section to our application. We simply create additional module and add to main application view. Nothing else has to be changed.

Or later on we’ll decide to use Flash based CMS instead of html. We just unplug CMS Client and replace with our own CMS. This CMS will use the same functionality available trough Pureherit which use WebOrb to communicate with Umbraco.

Replaced CMS as Application

We can even decide if we want to create it as new application, or simply create additional module. And use all available functionality provided by core application.

Replaced CMS as Module

Because we use Pureherit as some kind of extended façade, we could even replace whole backend system without letting front-end know about it.

I tried to explain whole concept instead of diving ito details, as this could cover whole book. I hope, this part was useful for anybody thinking about creating mid to large interactive applications.

In next chapter We will concentrate on Virtual Office module including 3D, physics, Animation etc..

  1. [...] I just published my second article from Behind The Scenes series at Syerit Labs. This time I go trough architecture and structure, describing some useful practices while setting up mid-to-large scale project. Check it out here. [...]

  2. [...] Architecting, Folder structures, Backend 3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, Game Model 4) Optimization, Testing, [...]

  3. Darshan is not unknown to old school Flash developers, he is one of smartest developers in/from India.

    -abdul

  4. Well the fact is that Darshan is practically invisible to the strange world called web, so that was point of the word “unknown”. I think, if you know him you must be his friend, co-worker or both :) but I can’t argue with second part. I never met/work with him but just by looking on the way he done fabrication, he is definitely one of the smartest and not just in India.

  5. [...] Planning, Platforms, Frameworks, Workspace 2) Architecting, Folder structures, Backend 3) Away3D vs Papervision3D, 3D Modelling, Physics, Sound, [...]