Developing Online with Cloud9 IDE

Updated jeffcogswell 0 Tallied Votes 506 Views Share
Manufacturer
Ajax.org
Price
Free for open source projects, or $49 per mon
Pros
Excellent, full-featured IDE that runs right in the browser.
Cons
Still some problems such as no easy way to upload files into a project right from within the browser.
Summary
This is an awesome tool. It still has some limitations, but once those are worked out, I can see myself using this exclusively for my web development.
Rating

When I first started working on this article, I was originally planning on reviewing a different product, a new project from Eclipse called Orion. However, it turns out that project just isn't ready for prime time. It's still in a very early stage, and I don't feel I would do it justice by reviewing it yet. But while I was reading about it, I realized that a new product that I had already known about had just officially been released. That product is called Cloud 9 IDE.

Now right up front I want to point out that even though Cloud9 has been officially released, it's still kind of buggy. But after spending several days using it, I have to say it is, nevertheless, very solid and something I'm certainly excited about.

What exactly is it? It's a full IDE for developing software that runs completely in the browser. Or, at least almost completely in the browser. But I'm getting ahead of myself. Let's take a look at it.

The main web site is www.cloud9ide.com . You can sign up for a free account, or a commercial account. Free accounts are only for testing or for developing open source apps. If you want to develop commercial apps, you need to pay for a subscription. And either way you can download the full IDE and run it on your own server, which is what I ended up doing.

It's primarily intended for developing web applications using server-side JavaScript, specifically Node.js. You may have seen I've already written a bit about Node.js, as well as a web application framework built for Node.js called Express.js. (And for what it's worth, after spending even more time with these products since my initial review, I like them even better. And trust me, I don't say that often. There's a lot of garbage out there. But Node.js and Express.js are definitely not garbage.)

Normally when you think of an IDE, at least when I think of one, I think of a program that lets me edit all my files and build them all from a GUI interface, without having to drop to the command prompt. And that's exactly what you get with Cloud9. But in this case, all your editing takes place right in the browser. I'm serious, this thing works almost exactly like a desktop IDE. Check out this screen shot:

And look at this with my program running:


Look closely at a few things. There are several tabs in the right pane, one for each file I have open. On the left is a project explorer showing all the directories and files in my project. I can double-click the files in the project explorer and they open in a new editor tab, just as you'd expect. I can run my program by clicking the run button, and it starts up with an output pane at the bottom (which you can see in the second image). My server-side calls to console.log appear in this output pane. And once the program is running, I can open another browser window and point the browser to my program, which in my case will be a program running under Express.js.

But let me clarify something there: This is an IDE running in a browser. Therefore it's a web application, which runs over a port you specify. That means, in my case, since I'm running it on my own server, I had to install it on my server, and register it to start when the server starts up. In my case, I set it to run under port 8080. Therefore I point my browser to my URL, with :8080 after it. That opens the IDE in my browser.

The software I'm using the IDE to develop is also a web app. But two web apps can't use the same port. So I set up web app I'm building to run under port 8081 right from the code itself:

app.listen(8081);

So from within the Cloud9 IDE, which is running on port 8080, I launch my program, which starts up the server-side application, which listens on port 8081. So to try out the program I'm running, I switch to another browser window, type in the URL, and follow it with :8081. I switch back to the IDE, make any changes I need in my code, restart the program, go back to the other tab and refresh, and my changes are there. Perfect.

Now look more closely at the editor screen shot here:


The editor has syntax highlighting, and there's on-the-fly parsing that notifies you of errors in your code. The errors show up as little red X's to the left of the code, and when you float your mouse over them you see the error message. There are warnings as well, which show up as little yellow bang symbols.

Also, regarding the syntax highlighting, the editor understands several types of files. Here's a menu that lets you select the file types:


Keystrokes that you expect in a good editor are mostly present. You can undo by pressing Ctrl+Z, for example. Pressing Ctrl+S saves the file. And this one is cool: If you highlight several lines of code, and press Tab, the lines all indent just as they do in better code editors. Oh yeah, and if you double-click one of the tabs, the code file you're looking at maximizes in the browser to take up as much real estate as possible. Double-click the top again and it goes back to normal. I also found a few interesting keystrokes. If you're on a line and you hold down Ctrl and press either the up arrow or down arrow, the code line itself will move up or down within the document. That's helpful if you need to rearrange your lines of code. But oddly, some keystrokes I rely on are missing; for one, pressing Ctrl+Backspace doesn't delete the word before the cursor. (But the people who develop the software maintain a forum on Google Groups and they're friendly and responsive, so perhaps I'll mention it there and they might add it.)

The editor also highlights matching braces and parentheses, which, believe me, when you're writing code in JavaScript where it's easy to get lost in all the braces and parentheses, is wonderful.Debugger

There's also a full-featured debugger. However, this particular feature is apparently still in beta, as it gave me some headaches. (But as fast as they're updating this thing, I don't think it'll be long before they work out the kinks.) You can set breakpoints; inspect variables, and so on. These tools are all on the right side of the window:

And at the top you can trace through your code using these buttons:


When working right, the debugger's pretty cool—you click to the left of your code lines and set breakpoints and you can step through your code, again, just like a traditional desktop IDE like Eclipse or Visual Studio. Good stuff.Team Development

One particularly exciting feature is the nice set of team development tools. Since it's just me working, I couldn't really test these out. But on the right side are features for working in teams. For example, there's a chat box that lets you communicate with the other team members. Here's my lonely chat screen:


But it goes beyond chat. You can add and remove developers from the team, and control who gets to work on what parts of the project. (I'm not sure how that feature works since, in case I didn't mention it, I was all by myself.)A few missing features

There are a few missing features that I'd like to see added, and these are features that have been requested in the forums. Presently there's no easy way to upload existing files to your project. The software integrates well with github, and that means you can upload your files to github, and from there move them into your project. But if you're not using github, it becomes kind of a pain. Several times I had to ssh into my system to get to a command prompt, and then remotely pull files in and move them around. (For example, I had to run the Express setup to create a new project pre-populated with my Express files.) Working with it, I isolated some features that would have helped:

First, a way to add a file based on a URL—in particular, a URL, such as the download link at jqueryui.com. This would be sort of like a combination file-open / save-as feature, but you would put in a URL. You would click a button and the file would download to your project into a directory you specify.

Second, I could use a way to uncompress files. A lot of libraries, such as jqueryui, are available as archives. So continuing with the file-open scenario, I might pull down a .zip archive; but instead of just saving the archive, Cloud9 would unzip it into a directory I specify. For example, I wanted to add jqueryui to a project, so I had to download it to my computer, then FTP it to my server, then ssh into my server, then unzip it. (Or, alternatively, unzip it locally and then upload all the files. However, with huge libraries, that could be a headache.) Either way, it was kind of a pain, and it would have been nice to be able to do that right from within the IDE. But considering this feature has been requested several times, I imagine they'll find a way to make it happen.

Third, there's a console that lets you do some configuring, but it's pretty limited. It would be nice if the console let you run various configuration tools such as the Express.js setup tool that creates a starter application for you. Presently, as I mentioned earlier, I had to ssh into my server to make that happen.

Conclusion

I have to say, Cloud 9 IDE is pretty darn sweet. I don't say this often, but I think this could change the way we do development. Right now it primarily supports JavaScript running under Node.js, although the editor has syntax highlighting for other languages such as PHP and Python. (And realistically you can use things like PHP with it; just launch your web server and point your browser to your PHP files that you're editing with it.)

But one big question is this: Why? Why would you want to use this tool? Why not just use the nice desktop IDEs we already have? Well, the biggest reason is mobility. I know that when I travel, I have to lug around a pretty heavy laptop that's powerful enough to run all my software, including Visual Studio, SQL Server, IIS, apache, Eclipse, and the list goes on. Wouldn't it be awesome if I could actually develop from a small, lightweight netbook or even an iPad? Of course, that would require an internet connection.

And that brings me to the second why: If I want that kind of mobility, can't I just use remote desktop? Indeed, I do use remote desktop. One of my hosted cloud servers is a Windows 2008 server, and I can easily remote in and get to work. But what's enticing about Cloud9 is that it's light weight and lower bandwidth. You don't need a superfast connection, and if you're stuck at a big-chain coffeehouse that limits your speed, or even blocks remote desktop protocols, then you can still get to work. I even used it over a 3G connection without any problems at all. There's very little data moving between the browser and your server. Yes, remote desktop sessions are highly optimized, but this takes it to the next level. Very little bandwidth is needed at all.

All in all, I'm impressed. Cloud9 still needs some work, but when it's done, I can see myself using this exclusively for my Node.js development.

jwenting 1,889 duckman Team Colleague

it's buggy and solid at the same time? Doesn't compute.

Personally, I'd never use any "cloud" products for sensitive data unless there's a signed (on paper) and legally binding contract with the service provider about the security of that data and their inability to access and sell it.

jeffcogswell 175 Light Poster Featured Poster

re - buggy vs solid

I just mean solid design, but buggy code because it's still in beta. Whatever. No big deal.

re - cloud

What I'm really talking about is a type of hosting where your servers can grow dynamically. Originally, that's all the term meant. As you already know, in the past, when you would rent server space, if you rented a virtual private server, you would get a fixed portion of a server under which your OS would run. With a resource-intensive OS like Windows, the result was extremely poor performance. But then they came up with a different type of virtualization whereby resources could be added dynamically, and the server itself could grow automatically as needed (or you could manually modify the amount of space dynamically). Originally, that's all "cloud" meant before marketing people and tech journalists latched onto the term and destroyed its usage.

In this article, I only used the word "cloud" once (other than the name of the product) and that was here:

"One of my hosted cloud servers is a Windows 2008 server, and I can easily remote in and get to work."

And that's what I'm referring to. I'm talking about what we techie people call hosting, but not just any kind of hosting but specifically one that uses hypervisor virtualization and methods for adding memory and other resources dynamically as needed. Unfortunately, marketers and even tech journalists have grabbed the term "cloud" and used it to refer to anything and everything remotely related to online storage.

So I agree with you. Store my cell phone data in goodness-only-knows where in some nebulous system where nobody knows who has access to it, and whether it's even backed up? I agree, forget it. We've seen what happens there with lost data, stolen data, you name it. But as a small business developer, I need hosting, and have for years. Until I'm big enough to build my own data center, I rely on third-party hosting. And that's what I'm talking about in this article. Yes, I'm storing my source code on the hosted server, and that's a reality with scripting languages like PHP. And it's my responsibility to keep it backed up. And this tool, Cloud9 IDE, is, at heart, really just an online editor where I can edit these files without having to constantly FTP back and forth. But with or without a product like Cloud9 IDE, I still have to upload my files to the host. This just makes it easier.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.