Three Open Source javascript UI Tools

This week we have another article courtesy of Todd, our Technical Lead at Robert Stephen Consulting, LLC.  Enjoy!

At RSC, we specialize in installing, hosting and managing ARCHIBUS IWMS systems.  We also write our own software to enhance ARCHIBUS capabilities.  These days, more and more of that software is written in javascript and HTML5.

In this post, I’m going to briefly talk about three open source tools I find make the job of building and managing a javascript user interface simpler.  Here’s the list:

1. jQuery
• A set of tools that make it easier to work with DOM objects (among other things)
2. Block UI
• A handy tool to “freeze” the UI while something important is happening
3. mustache
• A templating tool for easily rendering the contents of arrays and variables

And now a more detailed description of each, and why each is useful:

1.    jQuery

Link:    https://jquery.com/
I’ve been using jQuery for about 6 months now, and know I’m only scratching the surface of what it can do.  I use it to easily find and manipulate DOM (Document Object Model) objects (“find me an object with this ID”), and to easily use ajax to send data to and receive data from the server.  jQuery does a LOT of things:  HTML/DOM manipulation, CSS manipulation, HTML event methods, Effects and animations and Ajax.  It also does some cool things with storing and retrieving data.   It’s probably the most popular javascript library there is, and because it’s open-source, this means there are ALSO a lot of plugins that extend what it can do.  Here’s a great link to get starting finding these:

 https://learn.jquery.com/plugins/finding-evaluating-plugins/

Also, a quick list of the best reasons to use jQuery yourself:

• jQuery is light; the code needed to run it is small, so it won’t significantly increase the time for server response.
• Even with all the power it brings to bear, the jQuery library is open source and free.
• It’s easy to learn; if you can program javascript already, this will just look like a toolbox of easily-mastered shortcuts to you.
• It’s cross-platform, running on all major browsers and on computers and mobile devices.

To be open about it, there IS some criticism of jQuery by javascript purists, particularly in the way it handles an important component of asynchronous operations called “promises.”  Given the problems it solves, these are problems I’m more than willing to live with.

2.    BlockUI

Link:    http://malsup.com/jquery/block/ 

Speaking of jQuery plugins, here’s one now!  BlockUI  will “freeze” a web page by fading it out, showing a spinning “busy” indicator, and a custom message.  It also prevents user interactions with the page.  This can be very handy when you’re doing things like loading a lot of data in the background, or busy building the page objects, and the code to handle what pushing a button will do.

Once you include the library, blocking the UI, even with a custom message, is pretty easy.  Here’s the code to do it:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

Unblocking is just as simple.

I was impressed with this plugin because I’m trying to blend the old and new worlds of forms and javascript for the short term, until I get a complicated form-based UI re-written in modern Responsive Design fashion.  BlockUI (in combination with jQuery) allowed me to handle this gracefully, freezing the whole frameset, instead of worrying about each individual “page” within it.

3.    mustache

Link:    https://mustache.github.io/
Do you have a lot of data (arrays, variables, objects) that you’re trying to show your user as HTML?
Tired of writing loops to get you through the arrays, or “if” tests to decide whether particular things should be shown at all?  mustache is a neat little library that allow you to create what the creators call “Logic-less templates.”  You just include the mustache library, define your HTML as a template, add some specially-formatted tags, then populate the variables, and tell mustache to render the template using the variables.  Simple goodness.  A quick example, so you can see how easy it is: 

A typical Mustache template:

Hello {{name}}

You have just won {{value}} dollars!

{{#in_ca}}

Well, {{taxed_value}} dollars, after taxes.

{{/in_ca}}

Given the following hash:

{"name": "Chris",

  "value": 10000,

  "taxed_value": 10000 - (10000 * 0.4),

  "in_ca": true}

Will produce the following:

Hello Chris

You have just won 10000 dollars!

Well, 6000.0 dollars, after taxes.

As you can see, the tags tend to look like this:  “{{name}}”, and the curly brace on its side looks not unlike a mustache.  So the name is pretty easy to understand.



Like what you read?  Subscribe to the blog and follow us on Twitter, Facebook, Linkedin and Pinterest to keep up to date with the latest news from Robert Stephen Consulting, LLC.

Thoughts? Questions?  Comment below and let us know what you think!  We'd love to hear your insights.

Follow @rsc2lc Tweet
Here’s hoping you find these as useful as I have!