Related

App Builder - Vala

The Roo Bootstrap library.

Javascript Templating, AngularJS and Roo.XTemplate

Roo.XComponent introduction

The Roo Bootstrap library.

Published 2014-05-12 00:00:00

A little update on our latest little mini project. Wrapping the Twitter Bootstrap library into RooJS Objects, and creating a manageable method to develop Bootstrap applications without the JQuery spaghetti. 

Background

A few years ago I forked the original ExtJS1 and created the RooJS1 library, since then we have extended, fixed and enhanced the library quite a bit. It forms the backbone of most of the customer driven applications. 
At the same time we developed a desktop tool app.Builder, that enables us to drag and drop components from the library and edit them in a WYSIWYG interface. Not only able to design the interface, but also add the Javascript to manage the interactive elements of the interface. This tool is essential to rapidly building the UI, and maintaining applications, as there is a direct relationship between an element in the application and the code that occurs when someone presses a button/ reloads a grid etc..
The only downside to this library has been that is is not well suited to general web user frontend applications. While we have improved it's mobile feature set, it is not particularly responsive, and does not work that well to small devices.

Twitter Bootstrap

Like most of the rest of the world we noticed Twitter's bootstrap library, however did not really do much investigative work until recently when we started a couple of new projects that needed a more mobile/web front end. As we had a reasonable lead time on the projects I made the decision to start implementing a Roo wrapper around the Bootstrap components.
The reasons for this was two fold, first was to avoid jquery, as it tends to result in horrific unreadable spaghetti code, great for those quick special effect, but awful for a larger project which is evolving and needs to stay manageable. Second was so we could use our builder tool to create Bootstrap applications.
The first step for this was to extend the Roo.Component (which provides a basic building block) into Roo.bootstrap.Component. Then create a Roo class for each of the major Bootstrap components. Buttons, Form elements, layout elements etc..
Since this is part of the Roo library we have infrastructure in place to build documentation for all these components. this is all in the roojs documentation
Once we had the components built, the next step was modifying our standard Component manager Roo.XComponent so it can build user interfaces from JavaScript structures defining the UI. 
Our code for a generate page looks like this.

Index = new Roo.XComponent({
    part     :  ["templates","Index"],
    order    : '001-Index',
    region   : 'center',
    parent   : '#bootstrap',
    name     : "unnamed module",
    disabled : false, 
    permname : '', 
    _tree : function()
    {
        var _this = this;
        var MODULE = this;
        return {
            xtype: 'Body',
            xns: Roo.bootstrap,
            'xtype-bootstrap' : 'Roo.bootstrap.Body',
            items : [
                {
                    xtype: 'Container',
                    xns: Roo.bootstrap,
                    'xtype-bootstrap' : 'Roo.bootstrap.Container',
                    sticky : 'wrap',
                    items : [
                        {
                            xtype: 'Navbar',
                            xns: Roo.bootstrap,
                            'xtype-bootstrap' : 'Roo.bootstrap.Navbar',
                            bar : true,
                            inverse : true,
                            brand : 'Some Brand',
                            brand_href : baseURL,
                            items : [

a menu item with some interactivity
{
    xtype: 'MenuItem',
    xns: Roo.bootstrap,
    'xtype-bootstrap' : 'Roo.bootstrap.MenuItem',
    listeners : {
        click : function (e)
        {
            Roo.Ajax.request({
                url : baseURL + '/MyAccount/Logout',
                method: 'POST',
                success : function()
                {
                    location.href = baseURL;
                }
            });
        }
    },
    html : 'Logout'
}

So our UI builder can generate these files and allows you to add listeners (event handlers) directly to the elements.
From there, we just include the code on the front page
 <script type="text/javascript">
//     Roo.debug = 1; // outputs debugging to show what is going on.
     Roo.XComponent.build();
 </script>
       

Making it SEO friendly.

The one snag with this approach is that the resulting pages are just a few javascript includes, and practically no HTML or content. The means that if google indexes the page it's likely to find no keywords, links etc. to add to it's database. making the site invisible to google. A rather disastrous situation if you are a startup hoping for a few hits from google.
To solve this, we came up with the idea of saving the rendered HTML to a file, and then using that as a PHP template (like a classic MVC) application. Then by calling the build method above with build_from_html set (as below) the components objects that make up the javascript take ownership of the rendered HTML as if it had been rendered initially by the components.
 Roo.XComponent.build({
        build_from_html : true
    });
This means that we can mix back end dynamically generated HTML pages, with a front end rich user experience, and keep the code manageable and clean.
The builder app only works on Linux (using gnome seed / gtk) and I've written a bit before about how to use it.

Add Your Comment

    Follow us