Flex – MXML + ActionScript
Flex was great platform, and it still it is, we spend years developing on flex and MXML markup was probably the best way to write UI components. However, dependency on Flash forced us to move away from Flex and migrate to HTML5.
HTML as Universal UI Language
- Easy to write
- Difficult to maintain
- Difficult to Refractor
- Difficult to understand our own code
- Cannot blame anyone for my own code
- Difficult to visualize UI Hierarchy
- How does my UI Looks?
- And this is what code looks at the
Backbone, jQuery, Knockout, Prototype ….. Endless Names with Endless Forks on Github
Reason behind Web Atoms JS
Primary focus of Web Atoms JS was to introduce and emulate component driven development found in Flex/Silverlight and Java. A true potential of Object Oriented Development along with simpler syntax without reinventing whole new language. Let’s analyze small Flex Code vs Small Web Atoms JS code. A simple Signup Form.
Now let’s review, Web Atoms JS example for exact same UI component.
If you notice, methodology is exactly same, however since HTML does not offer custom Tag Names, we have to use atom-type attribute to convert HTML element to Web Atoms UI Element. For Flex/Java and Silverlight developers, this syntax is easier to grasp and learn instead of New HTML Grammar Syntax which is confusing. So let’s review available Flex to HTML components already shipped with Web Atoms JS version 1.1.1.
|Web Atoms JS Counter Part||Flex|
|AtomFormGridLayout – a dynamic Form Layout that can manage multi column rows, with each row having independent number of columns.||–|
|AtomForm, AtomPostButton with AtomPromise. AtomPromise encapsulates all AJAX calls and AtomPromise is tightly integrated into Property System, so you can assign a promise and async call is automatically managed.||HttpService|
|Item Template||Item Renderer|
|AtomFileUpload – AJAX File Upload||–|
|AtomNavigatorList – iPhone kind of UI Navigator to drill into detail and coming back||Mobile Views ?|
Dynamic Compilation from Flex to JS vs Recreating Components
We earlier did wait from Adobe to bring some sort of AS to JS compiler, but we realize that HTML5 is coming up with new technologies. Any dynamic compilation from Flex to JS will not result in perfect HTML app as Flex does not contain HTML elements and there is no possibility of including more HTML library. CSS3 brings up lots of new things and HTML will come with new things, it will not be easy to incorporate anything else apart from Flex components. So one time migration from Flex to HTML5 will give us the freedom from Flex itself as well as we will be able to expand and integrate other HTML or JS libraries easily.
In case of Web Atoms JS, it is just a syntax that is different, but most common logic remains same, as Web Atoms JS comes with Components that are already used by your developers and they are familiar with all of them. Component properties are also very much similar to that of found in Flex/Silverlight and Java.
All of components shipped in Web Atoms JS are 100% mobile browser compatible infact they are compatible with even non mobile devices like TV, Camera etc.
Web Atoms JS provides almost everything that you need to create working business application. However we have not considered Graphs yet, but there is an easy way to integrate third party components as well.
We have provided rich syntax highlighter for Visual Studio as of now, and we will be coming up with more editor supports soon. You can also check out our live website and you will get CodeMirror extension to colorize Web Atoms attributes on HTML.
To analyze inherited Data properties and other Scope properties, we have created Chrome Web Atoms Properties Pane extension, which lets you analyze HTML Elements and data associated with it.
Download Source and Documentation
RIA (Rich Internet Application) means faster means to develop light applications to fit in your business presentation and few quick interactive applications. With RIA you can not make a money tree and you can not become rich.
- Frontend Applications
- Small Quick Demo Applications
- Graphical Analysis of MIS
- Marketing Presentations
- Quick Forms/Data Entry for Mass Audience
- Polls, Social Interaction Applications
- Thin Client Applications
With RIA you can generally make a thin client applications, which surely needs to interact with high poerful web server or any other form of server over internet. RIA replaces frontend for modern internet applications from traditional HTML/JS form processing websites.
Traditional web portal applications (ASP.NET/EJB..) takes too much of time to process every single request, as it does not use full potential of client side computer. Every decision of which button to be displayed, state of an application and user’s choices and preferences, everything is maintained on server and applications utilizes too much of bandwidth as well.
Thats why, RIA is simple step to differentiate user interface and business logic completely with implementations of standards like SOAP web services and REST apis.
All RIAs are compiled at development site, that means the final RIA is in form of an application, which will execute accurately as designed. However in traditional HTML+JS, if any part of HTML is not rendered properly or its coded wrongly, there is no way to detect until it is delivered to browser and some error has been encountered. Pre compilation on RIA, reduces time required to develop web application drastically.
(I am talking about FLEX not Flash)
Community Support is very bad when you need quick solution in an emergency.
|Paid Support & Community||Paid Support & Community||Community Support||Community Support|
|Dependency||Flash Player||Silverlight Player||Java Runtime + JavaFX Runtime||XUL Runtime|
According to various statistics, the by default availability of dependent software on PCs.
Although few PCs and all MACs have Java Runtime, they still need something additional.
|30% as FireFox supports XUL Apps|
|Size of Runtime||1MB||4.5MB||30MB||4MB|
|Native Device Access||Camera, Mic and Speakers||Speakers||Speakers||None in Web App,
May be few in Desktop App
|Audio Video Support||Widely used FLV and MP3 format, stable and its there since 2001||WMV/WMA/WMA Pro||No||No|
|Converters for the Supported Video||FFMPEG and many other commercial vendors available||Paid Encoders||No||No|
|Documentation||SDK Documentation and Samples||MSDN but still very premature, (Reason, the learning curve is little higher)||JavaDocs but JavaFX is still new||Apache Documentation, very scattered, difficult to learn.|
|Syntax||XML + Action Script||XML + C# / JS / VB.NET||Totally New Syntax||XML + JS|
|Language Feature||Strictly Typed with “Object” being dynamic type||Strictly Typed,
Dynamic type to come in C# 4.0
|Strictly Typed||Dynamic Typed|
Flex introduced wonderful concept of auto updating expressions when properties or variables changes.
|Very Accurate||Accurate but lengthy code||Available||Better then JavaFX and Silverlight|
|Two Way Databinding
||Not Available, Coming up in Flex 4||Available||-||Available|
|Binding Declaration||Simple Attribute||Extra Code in each bindable property||Extra code in each bindable property||Simple Attribute|
|Code Size||Very Concise||Even simpler things like validator etc takes 6 lines, too big code size to maintain||Size is small, but very disorganized, difficult to read||Concise enough|
|Platform Availability||Windows, Mac, Linux||Windows Only||Windows, Mac, Linux||Windows, Mac, Linux|
|Stability||Very Stable||Pre Beta||Pre Beta||Stable Enough|
|Control Library||Rich set of Controls available, plus lots of free stuff available as well||Very basic controls, you have to spend money on other ISVs to get good controls||Good set of Controls||Almost everything is free, lacks good documentation though|
For project managers, how difficult it will be to find coders who will code.
|Easily Available as existing Flash, HTML, JS, ActionScript can code.||C# and Microsoft Technology programmers can code.||Java Programmers can code, but due to new syntax, its still difficult to get hands on it.||Very difficult as it requires too extra knowledge of mozilla architecture and various standards, which is not taught anywhere.|
Starting project is very easy, but ongoing maintanence and meeting deadlines requires excellent knowledge of technology, which you should not rely on community blogs, because time required to search any solution is costly.
|Themes/Skinning||Yes||Yes, but size of code is very big||No||Yes|
|WebService Integration||Yes||Yes||Yes but very frustrating||Yes|
|Upload/Download||The Best Feature in Flex||Yes||Yes||Yes|
|Installable on Desktop||Yes||No||Yes||Yes|
|Database Support (in desktop app only)||Sqlite||Not Applicable||JavaDB
Too heavy and too slow
|Auto Update on Desktop App||Yes||No||No||Yes|
Plugins are available under eclipse and netbeans etc type of editor, but problem is they are so premature, they dont support refractoring, analysis, debugging and lots of other facilities.
|Flex Builder||Visual Studio||Plugin||Plugin|
|IDE Source Versioning||CVS
Good for Multiusers
|Source Safe (Single Developer only)/ TSS (too costly)||Plugin||Plugin|
|Drag and Drop Editor||Yes||Limited, because to script you need Visual Studio and to design you need Blend (Other paid software)||No||No|
|Code Intellisense (Auto Complete)||Yes||Yes|
Creating and importing shared code in the form of libraries.
|Component Development||Very Simple||Quite Complex as it is divided in User/Custom controls categories.||Available||Simple|
||Leader of RIA||Flex Follower||The Last||Linux Love|
Silverlight claims to be platform independent, but reality is, Microsoft no longer provides any more upgrades of Silverlight version for any other operating system other then Windows. And Linux was already not officially supported by Microsoft.
Advantages of RIA
- Reduce Development time
As compared with traditional web application, since RIAs are pre compiled, errors due to syntax, wrong spellings can be detected earlier at time of desiging.
- Load First, Run Throughout
RIAs load entire application (Except XUL) in the beginning, instead of HTML+JS, which loads as things proceed. This means, either application will load completely and work accurately even with slower bandwidth connection, or if some part didnt load, it will straightway display an error. So it works like transaction, either all or nothing. HTML+JS can behave unexpectedly in case of missing components.
- Seperate Design and Development Processes
Flex and Sliverlight offers complete seperation of Development and Designing keeping integration simple, other platforms (earlier web ones) require too much time integrating designs and process.
- Utilize Client Computing
Almost every computer has high powerful graphics capabilities, HTML/JS doesnt offer any great benefit over it. RIAs can completely explore native graphics capabilities and you get wide range of user interface functionality.