Creating a lite Flex framework from scratch

A while ago, we at Sofanatics started to put together our new real-time sports event client for the Flash Player. We knew from the beginning that we didn’t want to go with Flex. While it’s a great framework for building RIA’s, it’s too monolithic and too slow for our needs, as we knew that we would need every CPU cycle to create a visually stunning application with lots of data flying around.

However, I still wanted to use many of the features that make developing with Flex so much faster than building out an app in pure ActionScript. In no particular order, these features are:

1. MXML. Declarative programming is one big time-saver.
2. Contraint-based layout. Our interface scales with the browser. Without a good layout-framework, putting the interface together would require a lot of extra effort.
3. Data-binding. Once you hook up your data via data-binding, you swear never to go back again.
4. States. Coupled with declarative layout, states provide a fast way of putting together the visual representation layer of the app.
5. Transitions & Effects. I’m a sucker for smooth transitions in UI’s
6. Declarative graphics. Declaring shapes, fills and borders in MXML is just cool.

In addition to these Flex-based features we had the following requirements

1. Be fast. That’s a no-brainer.
2. Be small. The Flex framework takes around 300kb without any components. I’ll target 30kb.
3. Mix&match. You should be able to use any assets in your display list, not only instances derived from UIComponent, as is the case with Flex.

Searching the Internets, I did not find that many frameworks that supported these requirements. The best that I found was ReFlex, but I had some issues with it. While it provides most of the features I was looking for, I still found it to be a bit too slow. Most of the core code relies on anonymous objects, arrays and interfaces instead of using strongly typed parameters and vectors. I did not measure performance, but I’m sure its performance is not optimal. And although developing against interfaces makes your code more manageable, I opted for making my core code as fast as possible, even if it meant making it harder to read or modify (though creating components based on the framework should of course be easy and have a clean API).

So I decided to write my own. It currently powers all of the Sofanatics client’s UI, so check it out to see some of it’s features. Otherwise it’s still very much in the making. Once done, I’ll release it under the MIT license and put it up on Github. But even in its infancy, I do like it very much. It gives you a tenfold increase in productivity against building a UI via ActionScript, but gives the speed of a pure AS implementation.

Now all I need a great name for this cool little framework. Got any ideas?

14 Comments

• 
  Mansour April 10, 2011 at 22:42

  Looking forward to see what u have implemented – tried something in the past – but did not get very far – have a GIT URL ?

  Reply
  • 
    Tuomas Artman April 11, 2011 at 10:05

    Nothing on GIT yet. Probably gonna take me a while to get the first version out. Stay tuned.

    Reply
• 
  Mansour April 10, 2011 at 22:48

  FlexLite ? Looking forward to src/swc !

  Reply
• 
  James April 11, 2011 at 03:00

  Called it µframework or µinterface. We feel it fit quite nicely to your project.

  Reply
  • 
    Tuomas Artman April 11, 2011 at 09:56

    James, cool idea. Thanks. Altough that would make the package name a bit hard to write

    Reply
• 
  Vivek Gupta April 11, 2011 at 09:25

  Great point Tuomas. I think its the need of time, Flex empowers rapid development, but at the same time it’s too slow and heavy.

  Also I think the post title itself can be a good name for this framework. “Flexlite”.

  All the Best for further development, looking forward for it’s release

  Reply
• 
  Vladimir Tsvetkov April 20, 2011 at 16:08

  Tuomas, I guess you’ve already check out the project we did almost 2 years ago – FLit:

  http://code.google.com/p/flit/

  A brief introduction to FLit: http://npacemo.com/wordpress/2009/06/30/flit-a-light-weight-flex-for-flash-apps/

  It does almost everything you target in your framework wish list, except for the declarative graphics. I see the value in having the ability to use graphic primitives in MXML – especially when you want to test a component without having to create its skin in Creative Suite.

  Check it out. You might pick up some cool ideas. The overall size of the framework is 27K from Flex + approx. 40K from us.

  Good luck and keep me updated on your progress,
  Vladimir

  Reply
  • 
    Tuomas Artman April 27, 2011 at 08:23

    Hey Vladimir. Yeah, I’ve had a look at FLit years back. When I started developing “Flow” (that’s the official name now), I didn’t recall FLit. If I had, I probably wouldn’t have gone through all the trouble to create my own framework, cause FLit looks pretty good

    Reply
    • 
      Vladimir Tsvetkov July 1, 2011 at 16:48

      Check this out:

      http://obecto.com/

      Obecto’s new web site developed with FLit!

      Reply
• 
  Flow Framework status « Artman&Co – Flash, the Internet & All Else that Matters May 22, 2011 at 16:57

  [...] Creating a lite Flex framework from scratch [...]

  Reply
• 
  Flow Framework – first examples « Artman&Co – Flash, the Internet & All Else that Matters June 6, 2011 at 14:36

  [...] from the workbench, here are a few examples what the Flow Framework will enable developers to do. Nothing spectacular and very much work in progress, but I wanted to [...]

  Reply
• 
  Alex November 4, 2011 at 22:04

  Brilliant work in regards to Flow framework. Just curious, how long would it take to develop something like this?

  Thanks again for the effort.

  Reply
  • 
    Tuomas Artman November 13, 2011 at 14:18

    Thanks Alex. Hard to count hours as the whole development of the framework has been a on and off project. Maybe a few months of dev so far?

    Reply
• 
  flex developer December 3, 2011 at 10:39

  It’s great effort by you….

  Reply

Leave a comment