Developing AND executing a C# console app from my phone

For years I have struggled with explaining people why we don’t need another platform for developing and distributing our apps than “the web”. In the meantime, developers were running over each other, like headless chickens, shouting “AppStore”, “Xamarin Forms”“Android Market Place”, “Silverlight” and “God knows what”. Well, the shouting stops today. Everything besides “the web” is rubbish, regardless of what your “domain problem is”, unless you’re developing web browsers or drivers.

Can your favourite “x-platform toolkit” do the above? I have a web server running Apache and Linux. On top of that I have developed a web operating system, in C#, running on Mono. In this web operating system, one of 5 apps happens to be a web based IDE, allowing me to literally create C# Console apps from my phone, AND execute it after I have compiled it. Notice, I could also have created GO apps and Python apps for that matter using the same IDE.

If you want to send your money to Apple or Google, and let them control the distribution of your app – You are of course welcome to do that – But don’t come and tell me the reasons are because you can’t create what you want to create using “the web” – Because it’s simply not true! If you’ve got developers in your organisation telling you “The web is inferior, we’ll need to develop native apps” – Then send them a link to this article, and ask them; “OK, great! Can you create an IDE that allows me to do the above in a ‘native app’?”

You can download Phosphorus Five here – It’s 100% Open Source!

Advertisements

Hyperlambda, a scripting language for .Net and C#

Imagine if you could dynamically “orchestrate” your C# plugins and libraries together in a dynamic environment. What would this do for you? Kind of like a “FoxPro plugin” for C#? Something that would allow you to keep all the advantages of C#, yet still have a dynamic scripting language at your disposal?

Well, you don’t have to wait. This is the purpose of Hyperlambda. I wrote an article about Hyperlambda in MSDN Magazine last year, and it actually became one of the top 5 most read articles in the Magazine’s history – So obviously this is something C# developers were waiting for.

The thing about Hyperlambda, is that it allows you to dynamically “mold” CLR assemblies, classes, and methods together, by injecting Yet Another Layer Of Abstraction (YALOA) in between your C# code, and the parts that “configures” your apps together. In a way, it allows you to “configure” your apps, with a syntax resembling that of YAML. So you get to keep all the advantages of C#, including those 10,000 + Open Source .Net libraries at GitHub – Yet still having all the advantages of a dynamic environment, such as PHP or JavaScript, allowing you to orchestrate your apps together, in a dynamic “scripting” environment. Hyperlambda is not intended to replace C#, quite the contrary – It lives in symbiosis with C#, although I tend to use some strong superlatives about OOP every now and then … 😉

In fact, Hyperlambda serves as a bridge; A bridge between the client and the server, a bridge between your C# code and your app, and a bridge between a statically compiled programming language (C#), and the dynamic environment of JavaScript. It becomes the equivalent of the “grease in your car engine”, that allows all of your car’s parts to function smoothly, without things getting stuck to each other, destroying your car.

A month from now, I will get the opportunity to illustrate exactly what this can do, and its benefits. Simply because a month from now, I will enter in front of a live audience, and “compete” with a static and traditional programming language called Lily, and such hopefully illustrate just how much of an advantage having a little bit of “grease” in your car’s engine actually can give you.

If you’d like to be notified, feel free to subscribe to my blog. The event will be properly marketed, and I will announce it here on my blog when we have a date – At which point you can see me compete with a “traditional OOP (only) solution”. In this competition, both of us will be given the same specification, and asked to solve it as fast as possible. The winner is the first guy to finish. If you can’t wait another month, please realise that the following web based IDE was exclusively built using Hyperlambda. Not a single line of C# code was written to create it …

Hyper IDE contains 2429 lines of code, it was built in roughly 2-3 months, by one guy (me), and it contains 649 comments. Its initial page load bandwidth consumption is roughly 100Kb, and it loads on my phone. Hyper IDE supports some 100+ programming language, and I will obviously exclusively use Hyper IDE in the competition, if I can …

I wish my opponent good luck, and may the best man win … 😉

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!

Performing 1,000,000x better than Google

I love neutral metrics, simply because they don’t lie, and arguing against them, is like arguing that the Earth is flat. Hence, neutral metrics allows us to get our points through, in a scientific and verifiable manner. In such a way, they become the punchline that is impossible to argue against. Below is a chart of the difference in bandwidth consumption between GMail, Twitter and Hyper IDE. It was measured on an empty cache, using Google’s own tool – Google Chrome Inspect!

Below is the data I collected to create the above chart. First GMail.

Then Twitter …

Then Hyper IDE …

My results are of course reproducible. I assume you can find GMail and Twitter yourselves. Here is Hyper IDE, in case you want to verify my math. For the record, Hyper IDE is a fully fledged web based integrated development environment, supporting more than 100 programming languages out of the box. It also allows you to create rich and complex web apps, with a server side back end, in 0.649 seconds. Below you can see the last number verified.

Hyper IDE’s initial release was built in 7 days, which you can verify yourself on its GitHub page, and read an article about here. Hence, when I said 1,000,000x, I was in fact not exaggerating. Accumulated, these numbers becomes somewhere between 50 and 300 orders of magnitudes. So a more accurate number would be …

1,000,000,000,000,000,000,000,……….. – AKA; One Googol

PS, I wrote it without the spelling error … 😉

A comparison between Hyper IDE, Cloud9, CHE and CodeAnywhere

WIIFM?

First a disclaimer, I have never used any of the above products, so my comparison will have to be based upon what Hyper IDE does – Or more accurately what it can do. Hyper IDE’s main USPs are in fact not about what it does, which might sound weird – But rather in what it can do, as I will hopefully be able to explain to you during this article, such that it makes sense. This might sound weird for the uninitiated, but hopefully we will have a common understanding of what this implies, as I wrap up this article, and reach my conclusion at the end down here.

First of all, Hyper IDE is new. The above products have been around for years, so inevitably they will have some features that Hyper IDE does not. This also implies, that I have barely started scratching the surface of the possibilities of Hyper IDE, and Phosphorus Five too for that matter. However, the difference is in the platform that Hyper IDE is built upon.

Hyper IDE, a living system

Hyper IDE is built on Phosphorus Five and Hyperlambda. This allows me to do a lot of “out of the box things”, such as for instance create what I refer to as “living documentation”. These are code snippets and “living elements”, embedded directly into the documentation, allowing me to have the documentation interact with the system – And have buttons and UX elements, in the documentation, that evaluates some piece of Hyperlambda snippet when interacted with. This allows me (and you) to create for instance articles about “How to get started with AngularJS”, in the documentation, and embed buttons like “Click here to do the above”, which would create a new “AngularJS template application” for the developer. Since the code for creating this new app, would be directly embedded into the documentation itself, which would “reach into” the API of Hyper IDE, to create a new app – This facilitates for a more fluid experience, and results in a more tangible learning experience, by including the tactile learning parts of the brain. I refer to this as literate documentation.

The documentation is also extendible, allowing for developers to document their own modules, components, and programs the same way. I (or you) could for instance, directly from the documentation, install new modules, components, and applications – As the developer is interacting with some UI element. Or I could directly from the documentation, send a PGP encrypted email, with the code from the currently active editor, to some other developer, using Sephia Five, etc. Or a link to it, etc.

This modularised architecture also implies that Hyper IDE does not live in “isolation” from the rest of Phosphorus Five. And since P5 is a complete web operating system, with lots of other apps and components, I can do things such as integrate it with Camphora Five modules, which would facilitate for teams of developers to collaborate on projects, and declaratively create their own project management tools, such as “TODO lists”, “Assigned to”, “Chat clients”, etc – Embedded directly into the IDE itself, according to their own specifications. Below is an example of me using Speech Recognition in Google Chrome, to literally talk to my computer, and have the computer generate computer code, from natural spoken English.

The above example uses the “Magic Menu”, which is an extendible speech recognition enabled, modularised, and extendible “navbar”. You can read about the Magic Menu here. For the record, the above example is a relatively “esoteric example”, but illustrate how Hyper IDE, and all components and modules from Phosphorus Five, can become extensions of each other, resulting in that the end result, literally becomes more than the sum of its parts – Arguably proving that 2+2==5. The Magic Menu could also be used to create “Macros” for Hyper IDE, which evaluates some “action” when interacted with, such as analysing the code, and providing automated code reviews, executing pre configured shell scripts, Hyperlambda snippets, etc. Another example would be to integrate Hyper IDE with Camphora Five CRUD modules, creating project management plugins. Below I am creating a new CRUD app with Camphora Five (2 minutes out in the video), for then to edit the automatically generated CRUD app using Hyper IDE.

Since Camphora Five has support for custom views, and also at its core is an API, this allows developers to embed things such as lists, project management tools, and chat clients, by creating custom views, that can easily be “injected” into the IDE itself. Below is a curiosity; “A Babel fish telephone”, that will translate from any language, and display the results in the receivers mother tongue, reading it out loud.

Using the above ideas, I could (in theory) have multiple developers, not even able to understand each others’ language, yet still collaborate on code, and communicate with each other perfectly fine. Yet again, the above is probably a really “weird” example, but things like the above, could be embedded directly into the IDE, and become natural living extensions of the IDE itself – Implying that not two installations of the system, would ever look the same, but rather be customised according to the customer’s needs.

Hyper IDE is a “living thing”, where other IDEs are more “static in nature”

Which I can say with confidence and certainty, since many of these ideas are impossible to implement without Hyperlambda, and I created Hyperlambda, and none of the other IDEs are implemented in Hyperlambda. So even though I have barely even scratched the surface of what’s possible with Hyper IDE by combining it with Hyperlambda and other Phosphorus Five modules – I can say with 100% certainty, that it will dwarf the possibilities of other similar types of IDEs in the long run, due to this “dynamic nature”.

Hyper IDE is a complete platform

For the record, one can build any types of apps in Hyper IDE, such as I am illustrating below, where I am creating a C# console application from my iPhone.

But, the true power arises from the realisation of that Hyper IDE is a complete platform, due to being built upon Phosphorus Five. For instance, Phosphorus Five comes pre-bundled with Hyper Core, which is an HTTP REST based ORM library, allowing me to interact with MySQL, and all other database systems, and/or business logic objects, on the server side, securely from (for instance) JavaScript clients. This implies that as you install Hyper IDE, you already have a secure backend for your front end code, and you don’t need any additional installations before you can start coding. Below I am illustrating how this interacts with Hyper IDE, allowing me to create an AngularJS app in seconds, that already as I click the “Create” button, is wired up towards the server side using HTTP REST services – And having already automatically created my database schema.

This allows a developer to literally “start out running”, without having to install additional dependencies, necessary for the developer to become productive. Another example of this, is how Phosphorus Five already contains features such as URL resolvers (allowing for URL rewriting in a dynamic environment), etc, etc, etc. The above “wizard” is also extendible in nature, and would allow anyone to create his or hers own specialised type of “wizard”, to automatically create new modules, according to input supplied from the GUI of Hyper IDE.

Security

Hyper IDE comes with all the security features of Phosphorus Five. This facilitates for a lot of interesting scenarios. For instance, one could partition the developer team up into multiple different roles, and have each role only having write access (and/or read access) to only specific parts of the code. This facilitates for a lot of highly interesting “out of the box scenarios”, such as allowing you to for instance outsource the creation of some specific component, or module, to a 3rd party – Yet still deny this 3rd party to even read other parts of the code in the system – While still physically have all the code in one server, and being able to create builds, even for the company you outsourced to – Even though the builds themselves, are dependent upon access to the entire code tree.

For instance, I have setup my own server, such that everybody can edit the contents of the “/test/” folder. You can try this in the following link if you wish, by editing this file, and saving it. While if you try to change the following file, and save it, you will be denied access to saving it. If you even try to read the following file, you will be denied access. This makes it much more easy to assign read and write access, to specific parts of the system, using the integrated Peeples module. If you want to see how this access system works in practice, you can see the following video.

Conclusion

The main USP in Hyper IDE, is actually not in its features, or what it actually does today. It is rather more about what id can do, either by me creating modules and/or plugins to it – Or by its users creating their own extensions, that somehow modifies the system one way or another. Hence, Hyper IDE is arguably not an IDE per se. It is more a “platform for configuring your own personalised IDE, according to your own needs, and what features the end user and developer needs in his personalised installation”. Making the system highly “Agile in nature”. Of course explaining things like this to other developers, is often difficult, since everything mentioned in this article has arguably never been seen in these parts of the universe before (even though some developers will claim they have seen it before) – However, hopefully I was able to accurately answer the following question;

What’s in it for me?

… from your point of view. If not, feel free to ask questions.

Psst, you can modify Hyper IDE’s code, from inside of Hyper IDE, and I created Hyper IDE, using Hyper IDE in fact 😉

Still not convinced? Download it an try for yourself 🙂

References

Living software documentation

Software documentation has always haunted me some way, and I have for a long time been fascinated with Donald Knuth’s ideas about “literate code”. Well, I figured, why not “literate documentation” instead? Implying that the documentation for your system, is allowed to execute computing instructions, within its “reader”? This would allow me to create tutorials, that literally “creates themselves”, since the documentation can “reach into the systems its documenting”, and modify the state of it.

In the video below, I am demonstrating how such a documentation system can be created, and more specifically how it will be done, in the upcoming release of Hyper IDE. The advantages are obvious, I think. If you can’t wait, and want to try out Hyper IDE today, even without the “literate documentation parts”, you can download Hyper IDE here. Or you can try out my documentation system here.

A JavaScript/CSS/HTML wristwatch

I just found this amazing little wristwatch snippet thingie on CodePen. Since the thing was licensed as MIT, I figured I’d put it in my own private little collection for later use. See the thing here, or browse its code here.

It’s made by “Sindre”, and you can check out the original CodePen here. However, I think it looks better in Hyper IDE, on its own, without the “chrome” from CodePen. It’s entirely made in JavaScript, CSS and HTML, and uses some pretty nifty features of CSS to pull it off. Check it out for yourself 🙂

If you’d like to create your own private “CodePen” server, such as I have here, you can download Phosphorus Five, which contains Hyper IDE here.

Setting up your own CodePen server

CodePen is an amazing tool. Some of the stuff that is created over there, is simply flabbergastingly cool – Which of course is a testimonial to the collaborative nature of the web and open source. However, every now and then, you need to create stuff in privacy, that you don’t want to share with anybody, except maybe a few selected individuals. An example could be a designer’s portfolio, or a set of reusable JavaScript classes, which you don’t want to share with the world for some reasons. An obvious example could be work done for a client.

For such cases there’s always Hyper IDE. Hyper IDE is an Open Source development environment, which among other things allows you to create JavaScript, HTML and CSS – Arguably giving you your own private “CodePen” server, from where you can securely share out folders, to others, by giving them their own username/password combination, only allowing them to see the contents of some specific folder.

The use cases are obvious. If you check out my test folder on my own installation, you can create and edit HTML, JS and CSS files. If you try to do the same in my modules folder, you will be denied write access. Setting up a folder such that only some specific role(s) are allowed to view its content, effectively password protecting parts of your content – Is obviously also easily accomplished. Just try out to see the contents of this file, and you’ll see how you are denied access to even read it. If I visit the same link, I of course have full access to read its content. Sending links to clients and colleagues, to specific files in your own CodePen server, is obviously easily accomplished. And sending a direct link to them, for them to see the results of the page, is also obviously easily accomplished.

Install your own CodePen server here. If you need help to set this up, feel free to ask me a question over here.

Creating your first AngularJS and MySQL app [video tutorial]

To the right is a screenshot of a small AngularJS app which you can create using Hyper IDE. In fact, you don’t have to do anything but follow a simple little wizard to create it. Below is a video where I walk through some of the more important constructs of the app. The app will integrate with your server-side backend automatically, and update your MySQL database automatically for you, using an HTTP REST based ORM library. And in fact, even the database will be automatically created for you, such that you can literally “start out running”.

In the video below, I will walk you through some of the more important constructs of the app, and explain how it is tied together. Notice, if you wish, you can start out with this app, and modify it as you see fit, to gain a better understanding of AngularJS, HTTP REST based web services, and how to integrate an AngularJS app with a MySQL backend in your own apps. If you want to follow this tutorial on your own machine, you’ll need to make sure you do the following.

  1. Download Phosphorus Five (which contains Hyper IDE and Hyper Core)
  2. Make sure you have MySQL server installed

The installation of Phosphorus Five requires that you either have a Ubuntu server, or that you have Visual Studio or Mono Develop (Linux) on your machine. All of these tools are either free, or Open Source.

If you wish to dive deeper into Hyper Core the MySQL REST based ORM library we are using here, which is a fairly new module in Phosphorus Five, you can check out its documentation online. If you want to read up more on AngularJS, you can find its documentation here.

Editing the app online

Notice, if you wish, you can even edit the app online, using Hyper IDE, by creating a new HTML and JS file, containing the contents of the original files that we created in our tutorial, inside of the “test” folder of the online installation of Hyper IDE. This is necessary, since you don’t have write access to the files directly inside of the “/modules/todo/” folder. However, by replicating the files’ content, in other files, inside of the “/test/” folder, you can play around a little bit with the code online. The best way to follow the tutorial though, is definitely to download Phosphorus Five and Hyper IDE on your own machine.

Outsourcing software development, yet avoid source code theft

A web based IDE such as Hyper IDE, changes every single parameter when it comes to software development. One of the things that just struck me, as I was laying in my tub today, thinking about my toes – Is that it actually makes it possible to outsource software development, yet to some extend avoid having the developers gaining access to the source code. Sounds too amazing to be true? Well, believe me, read on and I’ll prove it.

15 years ago, some partner working with Microsoft, leaked the code for Windows NT on the internet. I remember the incident clearly, since it was beaten to death by mainstream IT news around the world. My guess is that the guy who leaked the code, was given access to the code, such that he could work from home, on his own personal laptop. He probably simply zipped a folder containing the code, and uploaded the code to some torrent site.

As I was laying in my tub, counting my toes, I realised that this would be impossible with Hyper IDE, or any other web based development environment for that matter – Simply since you don’t have access to the code in the same way. If you wanted to, you could disallow access to the code in general to your developers, and in fact only allow them access to whatever parts of the code they are working on. Yet still, allow for them to be able to compile the code at large. This would deny the developer access to the entire code base. And even if he had access to the entire code base, he’d physically have to download one file at the time, which for our Windows NT example above, would require literally ~100,000 download operations – Making it far less likely that he would take the trouble of doing such a thing.

So the paradox becomes that of, that with Hyper IDE, you could easily outsource an entire project, even to some company you only partially trust, have them create all the code, yet still deny them access to the code as a whole. If you’d like to see this in action, you can check out my home server here, which for instance allows you to read all the code, yet still not have direct access to neither my database, nor the password/credentials for it. In addition, it prevents you read access to my password file, and also only allows you to actually modify things inside of the “/test/” folder. Effectively making an outsourced project, much easier to follow, and much more secure in nature, preventing all sorts of problems associated with outsourcing a software project. Read more about Hyper IDE here.