Creating a web based IDE

Hyper IDE is an Integrated Development Environment. It consists of 64 Hyperlambda files,  2429 lines of code, in addition to 649 comments. As a bonus, it contains 6 Markdown files, which serves as its entire documentation. Please take some time to diggest these numbers. Then realise that there are DateTimePickers on GitHub having twice as many lines of code as Hyper IDE. A DateTimePicker allows you to, well, “pick dates” – Hyper IDE is a *complete web based IDE*.

How did I find the above numbers you may ask? Well, the meta system of Hyperlambda allows me to automatically extract this type of information from Hyperlambda modules. Check out a screenshot below to understand what I mean.

The meta system (think reflection) also allows me to intelligently extract comments from my source code files, transform these comments to HTML from their Markdown representation, and display these as the documentation for my Active Events (think functions) and source code files. So when I am done coding, I am also largely done with the documentation. Which probably explains why the complete help system for Hyper IDE contains no more than 6 files. As I am browsing the help files for Hyper IDE, I can immediately edit its Active Events, and/or its files – Using Hyper IDE itself paradoxically as my editor. This is because every “function”, when you read its reference documentation, is aware of which file it was declared in, and which major comment it should use as its reference documentation. An example screenshot can be seen below.

Yet again, the above documentation was automatically generated from the source code files, without me having to do anything. If I click on the above “…/launch.hl” file for instance, the file opens immediately in my Hyper IDE editor, as a tab view, and I can start editing the file. At which point I have Syntax HighLighting, AutoComplete, and everything you can imagine from an IDE. To open up the AutoCompleter you can click CTRL+SPACE (CMD+SPACE on an OS X machine). Below is a screenshot.

I also have true AutoCompletion for JavaScript, CSS, HTML and XML files. In addition to “anyword” AutoCompletion for 100 additional programming languages. Editing multiple files at the same time, in separate tab views, is also implemented of course (duuh…!)

Hyper IDE has a rich plugin architecture. Out of the box, it contains 15 plugins, ranging from minifying and beautifying CSS and JavaScript – To a wizard form that allows me to create a new CSS skin, or an AngularJS module for that matter. Creating new plugins, without modifying the source code of the project itself, is as easy as creating a simple Active Event. Below is a plugin that will only be loaded if your currently edited file is an HTML file.

/*
 * Creates our bubble window HTML plugin.
 */
create-event:hyper-ide.plugins.htmlmixed.is-html-file
  return
    button
      innerValue:@"<span class=""icon-question""></span>"
      title:Shows an information window
      onclick
        /*
         * Displays an information "bubble" window.
         */
        micro.windows.info:This is an HTML file!

Whether or not the plugin is loaded, is decided from its name. Since the name of the above plugin is [hyper-ide.plugins.htmlmixed.xxx], it will be loaded every time an HTML file is opened. If I had called it [hyper-ide.plugins.hyperlambda.xxx], it would only load for Hyperlambda files. I can create any plugin I want to, for any language I wish, including Python or Brain**** for that matter! Yes, Hyper IDE supports Brain****!

Hyper IDE allows me to zip any folder on my server, and download it to my client. It also allows me to download individual files. In addition, it allows me to upload files from my hard drive, and unzip zip files directly on the server. It allows me to evaluate Hyperlambda files, in addition to bash scripts, allowing me to integrate with stuff such as Git or compiler services. Below is an example of how I checkin my changes to GitHub.

And I am still not done! In fact, if I were to tell you about all of its features, I’d arguably have to spend almost as much time as I did implementing these features. However, one nice little detail, I think myself, is that I can actually instantiate Hyper IDE as a “plugin”, loading it on any page I want to load it on, for any reason I would want to do such a thing. Below is a screenshot where I load Hyper IDE from my desktop, by clicking a button in one of my help files. This will load Hyper IDE inside a modal window – Without an iframes or other “sub optimal” technologies – And allow me to use Hyper IDE from any other module I need access to it.

Forgive me for saying this, but being able to do all of the above, with only 2429 lines of code, is actually quite unbelievable! As I said initially, I can show you DateTimePickers, and AngularJS tutorials for that matter, with more lines of code than that which created Hyper IDE. And that’s my point.

Hyper IDE, and Hyperlambda, the language that built it, is pretty “Hyper” to say the least …

Do you think I’m joking? Sorry buddy, there’s no joke coming. If you don’t believe me, feel free to download it yourself, or watch the following video where I demonstrate some of Hyper IDE’s features.

Ohh yeah, I almost forgot – It works from your Phone and your Tablet, and it’s Open Sauce – And you can set it up on a Linux Laptop in 5 minutes, having access to your own secure web based IDE, on your phone, from anywhere you are in this world … 😀

Get Hyper Today!

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.