Migrating from Flex to HTML5 with Web Atoms JS

On September 14, 2013, in Programming, RIA, by Akash Kava

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

  • Each device has different UI Elements and Different way of Interaction
  • Each device has different scale and screen measurement
  • Each device needs different programming language expertise
  • Each device has its own set of APIs
  • Emerge of Unified HTML Device Programming like PhoneGap
  • UI is complex to write, and is even more complex to rewrite for different platforms
  • Web is truly a unified version of User Interface

Problem with JavaScript

  • 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

No doubt, each of frameworks are trying to deliver Flex kind of capabilities, but not at all close enough. Creating application with any of them requires huge knowledge of JavaScript itself, including no inbuilt object oriented support. But code becomes chunky, JavaScripting is tedious. A year and half back, we studied and implemented every JavaScript frameworks, but it resulted in huge learning curve for people coming from Flex/Silverlight and Java background. All these libraries are based on “Functional Programming” where else Flex/Silverlight and JavaScript are based on component driven development.

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
AtomViewStack View Stack
AtomFormLayout Form
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
AtomListBox List
AtomItemsControl Repeater
AtomToggleButtonBar Horizontal List
AtomDockPanel Grid
Item Template Item Renderer
AtomWindow Panel
AtomFileUpload – AJAX File Upload
AtomVideoPlayer VideoDisplay
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.

Learning Curve

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.

Mobile Development

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.

Single Framework

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.

Editing Support

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.

Debugging Support

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

http://webatomsjs.neurospeech.com/resources/web-atoms-1.1.1.zip

Share
Tagged with:  

Here comes just another JavaScript framework, well new complicated syntax, lots of new methods and lots of complex JavaScript files to manage? Certainly not, pain of JavaScript is real, and it is also the only option.

Mission of Web Atoms

  1. Not to Invent a New Language
  2. Use more Markup and Less Code (Less Script)
  3. Component Driven Development to increase reusability
  4. Help Existing Apache Flex developers to migrate to HTML5
  5. Integrate Features of Flex and Silverlight into JavaScript

Features

  • Declarative UI Bindings
  • Automatic UI Refresh (One way and Two way Binding)
  • Template Engine
  • Ready to use Business Controls
  • Command Chaining (Advanced MVC)
  • Private Scope Isolation for Components
  • Most Simple form of AJAX Ever (AtomPromise)

Simple Example

<div
    atom-type="AtomListBox"
    atom-items="{ AtomPromise.json('movie-list.json') }"
    atom-name="movieList"
    atom-auto-select-on-click="{ false }"
    atom-allow-multiple-selection="true"
    atom-value-path="MovieName"
    >
    <table>
        <thead>
            <tr>
                <th>
                    <input
                        type="checkbox"
                        atom-type="AtomCheckBox"
                        atom-is-checked="$[scope.movieList.selectAll]"/>
                </th>
                <th>
                    Movie
                </th>
                <th>
                    Category
                </th>
            </tr>
        </thead>
        <tbody
            atom-presenter="itemsPresenter">
            <tr atom-template="itemTemplate">
                <td><input type="checkbox" atom-type="AtomItemSelector"/></td>
                <td atom-text="{ $data.MovieName }"></td>
                <td atom-text="{ $data.MovieCategory }"></td>
            </tr>
        </tbody>
    </table>
</div>

The above code contains a List Box with set of attributes that customizes its behavior. The above sample fetches list of countries from given URL, and then it displays in the table format. Child element of List Box element is template which defines visual layout of List Box. Web Atoms evaluates expressions with $ sign and performs UI Data Binding against those items.

Binding Convention

  • A valid JavaScript Expression between curly braces {} is considered as One Time Binding and it is evaluated only once during initialization of component/element or control.
  • A valid JavaScript Expression between square brackets [] is considered as One Way Binding (UI refreshes when target data changes) and $ determines beginning of source of change.
  • A property path between square brackets [] prefixed with $ is considered as Two way binding in which Data Source is updated as well in response to user interaction.

Scope Isolation

Scope is an object store associated with UI Component or UI Control referred as AtomControl, which provides an isolated storage as per its position in UI Hierarchy. Every UI Control in Web Atoms has a property with name scope, appScope and localScope. Each property gives you access to scopes available at current Scope, Global Application Scope (Global Scope for every component to share data) and a private Local Scope. Scope and Global Scope are maintained by Web Atoms and developers can not control them, however developers can create Local Scope and every children is now part of new Local Scope and is isolated from other Scope.
By giving Name to UI Control, control and its properties become accessible through the scope.
Scope also lets you put functions in it, and different scopes never interfere with same named items. By convention, Scope initialization is written differently than conventional JavaScript.

<script type="text/javascript">
    ({
        view: 'red',
        list: [
            { label: 'Oranges', value: 'orange' },
            { label: 'Apples', value: 'red' },
            { label: 'Grapes', value: 'green' }
        ],
        display: function (item) {
            if (!item)
                return '';
            return item.label + ' are ' + item.value;
        }
    })
</script>

The above script is actually an harmless code, which does nothing when it is parsed and executed by browser. However, the library removes this script and stores it for execution on later stage. And when the controls are initialized, Web Atoms will setup scope corresponding to its position in UI Hierarchy. After setup, these values are available as $scope.view, $scope.list and $scope.display respectively. By accessing through scope property, it provides isolation needed for multi component hosting on one page.

 

Following sample illustrates use of local scope.

    <div
        atom-type="AtomControl"
        atom-local-scope="true"
        atom-abs-pos="100,100,500,200"
        >

        <script type="text/javascript">
            ({
                name: "Scope 1",
                run: function (scope, sender) {
                    alert("Called in Control with " + scope.name);
                }
            })
        </script>

        <button
            atom-event-click="{$localScope.run}"
            >Execute <span atom-text="{$localScope.name}"></span></button>

    </div>

    <div
        atom-type="AtomControl"
        atom-local-scope="true"
        atom-abs-pos="600,100,500,200"
        >

        <script type="text/javascript">
            ({
                name: "Scope 2",
                run: function (scope, sender) {
                    alert("Called in Control with " + scope.name);
                }
            })
        </script>

        <button
            atom-event-click="{$localScope.run}"
            >Execute <span atom-text="{$localScope.name}"></span></button>

    </div>

Simple AJAX (AtomPromise)

In order to provide simple interface to JavaScript promises to implement AJAX and similar asynchronous functionality, Web Atoms has incorporated AtomPromise in the property system, which lets us assign promise in simple expression, but it will do the complex event wiring automatically. In following example, you can see that we are assigning a JSON promise, and it looks like data from url is fetched and assigned to Combo Box. But in reality, we are only assigning a promise, and only if the result of promise will be successful, than actual items from the promise will be assigned in future.

The following example is pretty self explanatory that we are loading list of countries from the given url ‘country-list.json’

<select
    atom-name="countryCombo"
    atom-type="AtomComboBox"
    atom-items="{ AtomPromise.json('country-list.json')}"
    atom-value="$[scope.view]"
    >
</select>

<span
    atom-text="['Selected Country Code is ' + $scope.countryCombo.value]" >
</span>

Templates

In order to achieve true separation of Data and UI, Web Atoms comes with simple DOM Node Templates, which uses UI Data Binding to display contents. And various controls define various templates that can be easily customized by changing Style and other properties of HTML Element. By simply applying an element with atom-template attribute, element is removed from UI Hierarchy and used as template to display the data.

<div
    atom-type="AtomListBox"
    atom-items="{ AtomPromise.json('movie-list.json') }"
    atom-name="movieList"
    atom-auto-select-on-click="{ false }"
    >
    <div
        atom-template="itemTemplate">
        <button atom-type="AtomItemSelector">Select</button>
        <span atom-text="{ ($scope.item_index + 1) + ') ' }"></span>
        <span atom-text="{ $data.MovieName }"></span>
    </div>
</div>

Style Binding

Web Atoms provides extended mechanism of defining and binding individual style properties, which increases granularity of markup.

<script type="text/javascript">
    ({
        list: [
            { label: 'Orange', itemColor: 'orange', itemWidth: 100 },
            { label: 'Apple', itemColor: 'red', itemWidth: 200 }
        ]
    })
</script>

<div
    atom-type="AtomItemsControl"
    atom-items="{ $scope.list }"
    >
    <div
        atom-template="itemTemplate"
        atom-text="{$data.label}"
        style-color="#000000"
        style-background-color="{$data.itemColor}"
        style-width="{ $data.itemWidth + 'px' }"
        >
    </div>
</div>

Style binding is useful when your style is available in the form of Data. Assuming in above example, list is populated from Data.

Licensing

Web Atoms JS is licensed in the following types, please note, license is applicable to the page of the site which uses Web Atoms JS Library.

  1. Free – Attributed License – Commercial or Non Commercial – Requires a back link in bottom right corner of every page to http://webatomsjs.neurospeech.com and Requires Registration with Our Site Directory.
  2. Non Commercial – Open Source Projects – Any open source free apps built and distributed under GPL, BSD, Apache or MIT license can use Web Atoms – Requires Registration with Our Site Directory.
  3. Yearly Subscription – Site License – Single Domain that can be hosted on any number of servers with yearly subscription of $99/year.
  4. Yearly Subscription – Server License – Single Server that can hosted any number of Sites with yearly subscription of $299/year.
  5. Site Perpetual License
    • $999 per Site for hosting on One Server
    • $1999 per Site for hosting on 10 Load Balancer Server
    • $4999 per Site to host on unlimited number of servers or CDN
  6. Server Perpetual License
    • $1999 per Server to host 10 Sites
    • $4999 per Server to host unlimited sites
    • $9999 Data Center License to host unlimited sites on unlimited servers

Documentation

To learn and explore Web Atoms in detail, please visit http://neurospeech.com/webatoms/docs

Share
Tagged with:  

Entity Atoms Flex Edition released

On April 10, 2012, in C#, Programming, RIA, by Akash Kava

We are happy to announce release of Entity Atoms Flex Edition, which provides client frameworks and tools for ASP.NET MVC and RIA Services to access Entity Framework on any mobile platforms.

Microsoft’s latest Entity Framework makes it very easy to setup complex transactional applications. However in order to extend Change Set, Authorization and Audit controls to all mobile platforms Entity Atoms was designed.

Currently, only Flex Edition is available for download, Flex Edition lets you create Flex Mobile application that can execute on any mobile platform.

We are going to release new native framework and tools for major mobile platforms very soon.

Key Highlights

  • Extend Entity Framework to all platforms using RIA Services
  • Simple LINQ Expression Rules to enable Security
  • Enable Table Audits/History including Cascade Delete
  • Customizable Code Generator (Flex, Android, C#, VB.net)
  • Simple Client and Server side validations
  • Easy Access to related entities (navigation properties)
  • JSON Endpoint with Date Handling
  • Additional UI Elements for Flex Mobile
  • Advanced Search (Search navigation properties)
  • Full ChangeSet management at Client Side
  • Unit Of Work pattern at Client Side

System Requirements

  • Windows 7, Windows Vista Service Pack 2,Windows XP Professional.
  • Microsoft .NET Framework 4.0 and above.
  • Microsoft Visual Studio 2010
  • Flash Builder 4.6
  • MS SQL Express 2005 onwards or MySQL or Oracle

Click here to Download Free Demo

Share
Tagged with:  

RIA – Why? Which One? How?

On December 13, 2008, in RIA, by Akash Kava

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.

Target Applications:

  1. Frontend Applications
  2. Small Quick Demo Applications
  3. Graphical Analysis of MIS
  4. Marketing Presentations
  5. Quick Forms/Data Entry for Mass Audience
  6. Polls, Social Interaction Applications
  7. 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.

WHY RIA?

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.

WHICH RIA?

Flex Silverlight JavaFX XUL
Vendor Adobe Microsoft Sun Microsystems Mozilla
Open Source Yes
(I am talking about FLEX not Flash)
No Yes Yes
Support

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
Availability

According to various statistics, the by default availability of dependent software on PCs.

95% 10% 0%

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
Binding Expressions

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
Reflection Available Available Available Available
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
Coders Availability

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.
Commercial Training

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.

Excellent Excellent Training available Where?
Threading Support No Limited No Limited
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

Sqlite
Auto Update on Desktop App Yes No No Yes
Present Since 2001 2007 2007 2001
IDE

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 Cost
IDE Refractoring Yes Yes No No
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
Project Management Yes Yes
Library Management

Creating and importing shared code in the form of libraries.

Yes Yes
Component Development Very Simple Quite Complex as it is divided in User/Custom controls categories. Available Simple
The Result
Leader of RIA Flex Follower The Last Linux Love

Important Note:

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
Share
Tagged with: