JQuery VS Flex – Choosing a Platform for SAAS

apache-flexjqueryplatformria

Our team is about to start a SAAS web application geared toward small businesses. This is a completely new experience for us; we are a system/linux/php development organization and no experience whatsoever developing client side software except for simple html/php based CRUD support applications.

We are evaluating both Adobe Flex and JQuery. We can't seem to choose between the two. Our priorities are:

Productivity – We have to launch the soonest possible time.
Overall User Experience – Resulting apps have to look professional and user must have pleasant experience using our product. I think this not a problem with both platform, though we will probably automatically lose 10% of potential users who don't have flash installed.
Skill Reuse – We will all have to learn new language(s) and RIA platform on this project and hope we can use it again on more projects. BTW, we are a software contracting organization and this is our first foray to consumer apps. We are hoping though that we can leverage the skills we gain here for our clients.

Application Characteristics:

Data-centric – Lots and lots of CRUD operations.
3-tier – Business logic will reside on PHP server and data will be on the MySQL. The RIA will only present the data to the user.
User accessible data will be large – This is why we decided to use RIA. We can't refresh the page when user just made few alterations/additions.
Security is paramount – I don't see any security implication on choosing one platform over the other but perhaps the community has some ideas?

We are carefully studying this. We frequently hold competition among developers who can implement a test app faster by using a flex or jquery. We would love to hear what the community have to say though.

Thanks in advance!

Best Answer

I have used both. I don't have a strong recommendation, but have some considerations.

Mobile support. Flex requires Flash runtime, which is not present in many mobile platforms. For best results, you will in any case need a separate mobile interface, not just reuse the desktop interface, although the latter works up to some level.
Browser support. You will spend more time with jQuery on this. They abstract away many things, but once you get to the layout specifics of your app, you will still need to do a lot of work testing across browsers and platforms that is not needed with Flex.
UI layout and architecture. How complex is the app? How modular? Flex has very good patterns for componentizing your app, producing reusable components etc, jQuery as such does not help you with that, it is more barebones. With Javascript/jQuery you will need to do your own research to find the best architecture setup.
Development tools. If you like designing your app with a GUI, Flex has a very nice integrated design/coding IDE. You're on your own with Javascript. There are tools, but you will need to do your own selection.
Vendor lockin and cost. Flex costs money (well, the IDE anyway, you can get a free compiler but I haven't tried how usable it is.) Javascript/jQuery is "free" but need to spend time researching all of the above.

User-experience-wise, both are equivalent, you can produce both good and bad experiences with them. Both have decent out-of-box UI widget sets, jQuery with ThemeRoller is somewhat more easily customizable, but Flex also bends itself nicely to skinning with a system very similar to W3C CSS.

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – Add table row in jQuery

The approach you suggest is not guaranteed to give you the result you're looking for - what if you had a tbody for example:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

You would end up with the following:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

I would therefore recommend this approach instead:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

You can include anything within the after() method as long as it's valid HTML, including multiple rows as per the example above.

Update: Revisiting this answer following recent activity with this question. eyelidlessness makes a good comment that there will always be a tbody in the DOM; this is true, but only if there is at least one row. If you have no rows, there will be no tbody unless you have specified one yourself.

DaRKoN_ suggests appending to the tbody rather than adding content after the last tr. This gets around the issue of having no rows, but still isn't bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them.

Weighing everything up, I'm not sure there is a single one-line solution that accounts for every single possible scenario. You will need to make sure the jQuery code tallies with your markup.

I think the safest solution is probably to ensure your table always includes at least one tbody in your markup, even if it has no rows. On this basis, you can use the following which will work however many rows you have (and also account for multiple tbody elements):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Best Answer

Related Solutions

Javascript – n “exists” function for jQuery

Javascript – Add table row in jQuery

Related Topic