Creating an Ajax TreeView control without JavaScript making you 300 times more productive

In my previous blog, it might sound like as if I am lying through my teeth. However, once you realise how it’s done, there’s actually no magic to it. In p5.ajax, there is one JavaScript file. This is a general purpose JavaScript file, which takes care of serialising the form, updating attributes on DOM elements, and dynamically injecting new HTML snippets from JSON returned from the server.

These above traits though, just so happens to allow me to treat Ajax widgets, in an entirely new way. For instance, the animation you see in the video on my previous blog when I expand the tree nodes, is actually just a CSS animation. The toggling of nodes, occurs exclusively on the server. This allows me to have an entirely new way of dealing with the problem of Ajax, which is simply superior in regards to staying close to the “philosophy of the web”, and semantically much more true to the original design decisions of HTML.

For instance, one thing I didn’t even touch upon in the previous blog, was how the P5 Ajax TreeView can be crawled by search engine spiders, since the spider only see plain old pure hyperlinks – While a client with JavaScript enabled sees DOM events, raising Ajax requests. Semantically, these two different ways of seeing the DOM, ends up with the exact same results. So there’s no “cloaking” occurring. And it 100% perfectly degrades into plain Hyperlinks, if the client has turned off JavaScript for some reasons.

The above combined with the ability to incrementally create my markup and DOM, by composing widgets together, into rich hierarchies from the server – Just so happens to allow me to get away, with creating a fully fledged Ajax TreeView control, without ever having to expand upon my original JavaScript, beyond the 4.8KB that p5.ajax contains at its core.

The results hence becomes that of ending up with an Ajax TreeView, far superior to most other Ajax TreeView in the world, regardless of which parameter you measure it by – WITHOUT as much as a single line of JavaScript! This widget is also entirely created in Hyperlambda, and doesn’t even contain as much as a single line of C# code.

If you’re interested in seeing its code, you can check it out here, here, here, here, here and here. Basically 6 files of Hyperlambda, which are in total 717 lines of code (most of it comments) – Resulting in a reusable general purpose Ajax TreeView control, which are several orders of magnitudes better performance wise, than anything else out there – At least as far as I have seen.

It doesn’t matter who’s Ajax Tree you compare it against either, it’s basically a slaughter, regardless of which Ajax component vendor’s Tree you do the comparison towards; ExtJS/Sencha, Telerik, jQuery, Infragistics, ComponentOne, etc, etc, etc – Basically several orders of magnitude in difference! To give you an idea why, realise that jQuery in its zipped and minified version is at least 25KB. p5.core’s JavaScript is less than 5KB!

And to consume it, is as simple as the following example shows. Realise this is 25 lines of code for the record.

create-widget
  parent:content
  widgets
    sys42.widgets.tree
      crawl:true
      items
        root:/
      .on-get-items
        list-folders:x:/../*/_item-id?value
        for-each:x:/@list-folders/*?name
          list-folders:x:/@_dp?value
          split:x:/@_dp?value
            =:/
          add:x:/../*/return/*
            src:@"{0}:{1}"
              :x:/@split/0/-?name
              :x:/@_dp?value
          if:x:/@list-folders/*
            not
            add:x:/../*/return/*/items/0/-
              src
                class:tree-leaf
        return
          items

To illustrated these reusability features of p5.ajax, lets imagine we wanted to create another Ajax TreeView, a specialised version this time, out of the above code. This specialised version would allow us to inject a “folder browsing Ajax TreeView” into any page we wanted to in our system. Well, that’s as easy as creating an Active Event with the following code.

create-event:my-company.my-folder-tree-view
  return
    sys42.widgets.tree
      crawl:true
      items
        root:/
      .on-get-items
        list-folders:x:/../*/_item-id?value
        for-each:x:/@list-folders/*?name
          list-folders:x:/@_dp?value
          split:x:/@_dp?value
            =:/
          add:x:/../*/return/*
            src:@"{0}:{1}"
              :x:/@split/0/-?name
              :x:/@_dp?value
          if:x:/@list-folders/*
            not
            add:x:/../*/return/*/items/0/-
              src
                class:tree-leaf
        return
          items

After you’ve evaluated the above code in e.g. your Executor, you can create a CMS “lambda” page resembling the following.

create-widget
  parent:content
  class:col-xs-12
  widgets
    my-company.my-folder-tree-view

Notice BTW, that I changed less than 5 lines of code, and was able to create a control out of my existing code. At this point, we can include any “folder browsing Ajax TreeView” we wish, into any page we wish, with a single line of Hyperlambda! Most other Ajax vendors would require you to write hundreds of lines of code, often in 2-3 different programming languages to do the same. So let’s make a qualified guess and say roughly 300 lines of code, reduced to 1 line of code!

According to scientific studies on coding and productivity, which shows that your productivity is proportional to the number of lines you code and have to maintain – You are hence 300 times as productive with Phosphorus Five!

Not too bad for 0KB of JavaScript if you ask me … 😉

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s