Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Hyperlambda - Do More With Less

DZone's Guide to

Hyperlambda - Do More With Less

In this post, a developer discusses an open source markup language he created and the benefits in terms of development speed and lines of code it brings to projects.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

Hyperlambda is kind of like YAML. YAML is a markup language, and it means "Yet Another Markup Language." YAML has many interesting traits, it's most important being the ease of declaring tree structures. However, it is also unnecessarily complex, and contains too many syntactic elements - at least for my taste - so I created Hyperlambda. At its core, there are only two syntactic basic elements in Hyperlambda.

  1. A colon separates the name of a tree node from its value.

  2. Two consecutive spaces beneath any node declare a children node collection.

Maybe you're asking what's the use-case for yet another markup language? Well, one of these use-cases is the ability to dynamically declare your HTML elements, and associate Ajax event handlers with them. Below is an example from my previous article.

/*
 * Creates a modal window.
 */
create-widgets
  micro.widgets.modal:my-modal
    widgets
      h3
        innerValue:This is a header
      p
        innerValue:This is a paragraph
      div
        class:right
        widgets
          button
            innerValue:Close
            onclick

              // Closes modal window.
              delete-widget:my-modal

Even if you have never created a single line of code in your entire life, the above snippet is probably easily understood. It creates a modal window, with an H3 element, a paragraph, and a right aligned div that contains a single button. As the button is clicked, the modal window is deleted. Below is a screenshot of how it'll look if you "evaluate" the above Hyperlambda through "Hypereval" from Phosphorus Five.

Screenshot of the results of a piece of Hyperlambda that creates a modal window

The beauty of the above construct is that your "onclick" event handler is actually evaluated on the server. The client only sees JavaScript, HTML, and CSS - and the HTML is automatically created according to your Hyperlambda's structure. This allows you to evaluate your backend business logic, in response to some client-side JavaScript event.

By creating a server-side alternative to declaring your HTML and DOM structure, we have effectively created an invisible and magical "bridge" between your frontend code, and your backend business logic. Compare the above easy syntax with creating something similar in, for instance, Bootstrap CSS, and the arguments in favor of Hyperlambda literally unfold by themselves.

To do something such as the above in Bootstrap, you will have to create your DOM structure as a piece of HTML, you will have to create some piece of JavaScript that displays your window, possibly add some CSS to your solution - and to make the button invoke your server when clicked would probably imply adding PHP or some other server-side programming language to your mix - in addition to tons of boilerplate XHR/HTTP boilerplate JavaScript code. With 19 lines of Hyperlambda code, we removed the need for literally hundreds of lines of code, spanning half a dozen different languages.

According to research into the subject, the amount of energy you need to apply to create and maintain an application is directly proportional to the number of lines of code your application contains. This suggests that developing and maintaining an application with 200 lines of code is 10 times as demanding as developing and maintaining an application with 20 lines of code. 

According to Paul Graham, you should "always choose the highest level of abstraction that is possible to choose according to your needs." There are a lot of things which require low-level abstractions to adequately function. For instance, I probably wouldn't recommend anybody to create a first-person shooter polygon rendering function in Hyperlambda. However, 80% of any "enterprise application" consists of stuff such as retrieving form data, storing that data in some database on the server side, and evaluating some simple piece of business logic in the process - and maybe giving some sort of feedback to the user in the process.

"What would it mean to you as a developer, and your employer, if you could create your enterprise applications 10x faster? What would be the value of that?"

Below is a video demonstrating a web-based IDE, entirely created in Hyperlambda. The code for Hyper IDE is exactly 6,200 lines of code. The Bootstrap DateTimePicker is 2,636 lines of code. The Bootstrap DateTimePicker allows you to pick dates. Hyper IDE is a fully fledged IDE, with plugin support, shell integration, support for more than 100 programming languages, multiple tabs, syntax highlighting, autocomplete, etc., etc., etc. - and it's 2.5 times the codebase - and, in fact, roughly 50% of Hyper IDE's codebase consists of comments. This implies that Hyper IDE and the Bootstrap DateTimePicker are roughly equal in size.

If you check out the GitHub repository for Hyper IDE, you can see that there are 411 commits. If you check out the repository of the Bootstrap DateTimePicker, you'll see 689 commits. The guy who created the Bootstrap DateTimePicker is (obviously) a very skilled developer - in JavaScript, CSS, HTML, and Bootstrap. I am (obviously) equally skilled in Hyperlambda. However, I created something that was at least 100x more complex than the guy who created the DateTimePicker - and I spent less energy doing it!

In addition, the DateTimePicker example page, will, according to Google Chrome, consume 250KB of initial bandwidth. My Hyper IDE example page will only consume 124KB of initial bandwidth. This implies that a DateTimePicker created with Bootstrap CSS will steal twice the amount of initial bandwidth as a fully fledged IDE that was created with Hyperlambda. I think the numbers here speak for themselves.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:
ajax ,web dev ,markup languages ,web application development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}