Intro to JavaScript Framework uilang

uilang is a JavaScript framework created by Benjamin De Cock in order to help designers prototype quickly. uilang has a simple, natural language like syntax that is significantly easier to get the hang of for a designer with no coding experience than JavaScript or jQuery. The framework is effective and easy to use.

What Makes uilang Special?

There are plenty of prototyping tools and frameworks around. There are frames.js, Invision, Flinto or even POP. Yet, one of my favourites is uilang; there are two things that make it a very good prototyping option. First of all, it’s a framework so you can code and create the exact interactions you want. When you are working with a prototyping tool you’re limited to what they can give you in terms of available animations or transitions. A framework doesn’t have that kind of restraint which is why it’s a better prototyping option. This ensures that not only does the ideal interaction can be demonstrated but that the developers making it will have a significantly clearer idea of what you want them to create later as well. After all, you can easily give them the final code and although it may not be perfect it will translate the idea much better than some annotations of on a mock up.

The second thing I love about uilang is it’s natural language abilities. In order to write code for uilang framework, you’re essentially describing what you want the code to do. uilang then takes it and translates it into javascript. It’s a truly beautiful experience for people who are unfamiliar with code. I will show you examples shortly so you can see for yourself how easy uilang is to use.

Natural Language, ftw!

Making use of natural language was a very smart move. It breaches the gap for people who don’t know code significantly because it allows them to in fact code without knowing it. It’s brilliant. The user experience of such syntax is smart. Natural language removes the idea of having to deal with technology, computers and machines; it makes the experience more human actually. I think this is a very smart move on the part of uilang because no matter what, most industries and technologies will eventually move towards natural language interaction. This makes for a lovely experiment with a prototyping tool that is actually working.

How Does It Work?

The set up is simple. You download the JavaScript file and place it into your project’s directory. Include a link to the file in the header of the page you are working on and you’re done. The next thing you need to do is start writing some code. You write uilang within the tags that you can place anywhere on within you HTML but ideally at the end of your content and before the tag.

uilang

Example of Syntax

Consider uilang a transpiler. The Javascript file you link to translate uilang’s syntax into legitimate JavaScript; that’s the magic of how this frameworks works. So consider the example below which is the equivalent of an accordion toggle.

Toggle with uilang

clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"

JavaScript output

document.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('h1'), function(el) {
        el.addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            [].forEach.call(document.querySelectorAll('h1.open'), function(el) {
                el.classList.remove('open');
            });
        });
    });
    [].forEach.call(document.querySelectorAll('h1'), function(el) {
        el.addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            e.target.classList.add('open');
        });
    });
});

It’s easy to see how simplified uilang is with the example above. But what most people don’t realize is how hard it is for a novice programmer, like a designer with has no programming experience, to come up with the latter script. More so, it’s more time consuming. uilang is a quick way to get a simple interaction or animation happening to see how the design is coming along. It can be hard, sometimes, to get a prototype going and this is just another way of doing so.

A toggle switch syntax with uilang

clicking on "#switch" toggles class "active" on "#switch"

Javascript output

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('switch').addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            document.getElementById('switch').classList.toggle('active');
    });
});

Overlay module with uilang

clicking on ".rsvp" adds class "open" on "#overlay"
clicking on ".close, .confirm" removes class "open" on "#overlay"

JavaScript output

document.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('.rsvp'), function(el) {
        el.addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            document.getElementById('overlay').classList.add('open');
        });
    });
    [].forEach.call(document.querySelectorAll('.close, .confirm'), function(el) {
        el.addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            document.getElementById('overlay').classList.remove('open');
        });
    });
});

As you can see the output is vanilla JavaScript. Nonetheless, still more code to write than with natural language uilang.

Hiding something on click with uilang

clicking on ".hide" adds class "hidden" on "#notification"

JavaScript output

document.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('.hide'), function(el) {
        el.addEventListener('click', function(e) {
            if (e.target.nodeName.toLowerCase() == 'a') {
                e.preventDefault();
            }
            document.getElementById('notification').classList.add('hidden');
        });
    });
});

As you can see, uilang’s single line of natural language can be an essential tool in getting some functionality into a mock up quickly. The above two examples would take me a while to write in JavaScript and I do in fact know how to code. On top of that, I’d have to make sure that I didn’t screw anything up and that the code was working. Sure it’s a small snippet of code so it won’t take me hour and hour to figure out what’s wrong but it’s much easier and better to use uilang instead of writing out the code. uilang faster and easier which makes it a better option.

Not Replacing Code Altogether

I don’t want to imply that we should use uiland instead of JavaScript altogether. Not only would that miss the point of the post but it’s not the best idea either. uilang is a prototyping framing and tool. It’s meant to help designers or product managers, anyone who is not a programmer really, to swiftly create prototypes and interactions. If you’re up for creating another framework to replace writing JavaScript with natural language go for it, but uilang is best used for prototyping.

Conclusion

So there you have it, a natural language way to create interactions within your mockups. I hope you give uilang a try as it’s a really cool tool. It’s perfect for novice coders or people who don’t know code all together. It’s makes creating prototypes very easy. Additionally, the learning curve for uilang is almost nonexistent due to its use of natural language.

Advertisement