Migrating from Flex to HTML5 with Web Atoms JS
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