Posts

Web Atoms JS – More Markup – Less Code

/in

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