Porting from Flash/Flex to HTML

I have a very complex social networking system built using the Adobe Flex SDK. Since we are experiencing certain performance issues, I want to move it to a "light-weight" platform, the backend is PHP so its just the UI. My 开发者_JAVA百科questions are.

1. What are my other options if I don't want to use Silverlight ?
2. I was told I could use AJAX/jQuery, which I am not familiar with - are there any GUI designers available ?
3. What kind of GUI designer can I use to design my UI ?

If you are really considering moving away from Flash and Flex, I would recommending using an AJAX library. AJAX will enable you to have an interactive UI, much like what can Flash offer, except it is delivered via the browser itself, not the browser Flash Player plugin.

jQuery, jQueryUI, and jQueryMobile, in my opinion are the most powerful and easiest to learn AJAX frameworks. They are all under the same family, so there really isn't that much of a difference in using them. It also maintains the "light-weight" options you were looking for. DreamWeaver CS5 (or the soon-to-be CS5.5), offers great code-hinting to help you develop jQuery applications and UIs quickly.

If you really don't want to learn a framework, I would try the Sencha framework. I have really no programming experience with this, but I know they offer a visual designer program. That is a great pro, but on the downside, it is a commercial framework/product, and is not nearly as light-weight as jQuery.

Hope that is helpful,
spryno724

Disclaimer: I am author of Web Atoms Framework.

Moving from Flex is quite challenging, as concepts of binding, controls in Flex are no longer applicable in pure jQuery based frameworks. You can get controls, but you end up writing lots of scripts, and MXML component based development does not exist as it is not easy to extend the markup and create custom HTML elements as it was possible in FLEX.

Challenges in Moving from Flex to HTML

We had similar challenge, so we decided to write our own framework after going through various existing frameworks. Problem we had was, we had to either train developers to write same application using different UI Logic, which needed bigger learning curve.

So here are the problems with JavaScript

1. It is easy to write once
2. But it is difficult to understand the code (even if its my own code, the code graph becomes way too complex)
3. It is difficult to visualize the UI, as developers tend to write functions wherever they get space, so unless you go through the logic, you dont visualize the UI.
4. Difficult to refractor, refractoring with IDE is easy, but that is code level refractoring, most refractoring is like, ok fine we dont want a drop down, we want a list box here, we want to move this up, we want to move this down.
5. Code is rarely reusable, because JavaScript and UI components are mostly dependent on closure and other callbacks.
6. Most errors are only detected in runtime
7. The biggest problem of all is "Conflicting IDs", and no separation of components.

Benefits of XML kind of Markup in MXML and Silverlight

1. Easy to visualize the UI
2. Easy to collapse and organize the code
3. Easy to reuse markup
4. Custom MXML Components and Silverlight User Controls allowed naming scope, in which children in different components do not interfere each other inspite they have same names.
5. Easy to refractor
6. Easy to detect errors at design time, detecting markup errors are easy and we can automate the process as well.

Keeping everything in mind, we built our own framework to mimic Flex on HTML and after a year and half of efforts we are able to build framework which allows us in creating MXML kind of components and build UI and interaction with simple XML markup (over HTML with custom attributes), so developers can easily migrate.

Web Atoms Framework

1. Syntax of Web Atoms is very similar to that of MXML Component
2. We have created many useful business controls that existed in Flex
3. Although it can not automatically transfer the code, but say like you are moving from Java to C#, apart from different names, the overall style of programming remains same
4. We have introduced concept of Scope, which allows component isolation, so multiple developers can work on one page in different components without conflicting each other inspite using same name of child elements.
5. We have created Simplest form of AJAX (AtomPromise) that looks like if you are writing synchronous code, but works asynchronously and frees you from writing complex callbacks.
6. We have introduced concepts of "Command Chaining" that was similar to concepts of MVVM and MVC, but its more advanced and little simpler. We call it MVC as in Model View Commands, and you can see its outlines here http://www.slideshare.net/ackava/model-view-command-pattern

I can tell you right away, it isn't the platform. There are some performance issues I've noticed when using a very large dataset (as in, millions of rows), but I've been building large enterprise level applications for years. Performance issues are bound to happen in any platform you use if you don't know how to code for it.

Personally, I would look to a way to refactor instead of port. Use an application framework like Parsley, Robotlegs or Swiz, and learn how to get better performance out of your code.