We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Cloud9 IDE: Kick ass code editing and end to end JavaScript debugging

00:00

Formal Metadata

Title
Cloud9 IDE: Kick ass code editing and end to end JavaScript debugging
Title of Series
Number of Parts
64
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
In this talk Rik Arends will demonstrate the open source and web based Cloud9 IDE. Cloud9 IDE is the first-ever cloud-based integrated development environment (IDE) for JavaScript developers, incorporating HTML5, supporting Python, Ruby and PHP. Cloud9 IDE is both open source and a SaaS developer environment running on NodeJS and has great run and debug facilities. If you want to quickly start developing with javascript, Cloud9 will allow you to start right away. Of course one of the key features of an IDE is a great code editor. For this Ajax.org built Ace which has recently been adopted by Mozilla as the new code editor for firefox tooling. The combined efforts now makes this the best code editor on the web, and it will be uniquely tuned for javascript developers. In this talk Rik will give a fast paced walkthrough of the IDE and how you can easily write, debug and deploy nodejs and javascript applications with an ease of use previously reserved for full-stack platforms such as .NET and Java. Rik will show step debugging, live code editing and inspectors and consoles. If you are a developer, you dont want to miss this.
CodeIntegrated development environmentConvex hullHand fanRecurrence relationSoftware frameworkWeb browserOpen sourceComputer animationXML
Element (mathematics)Software frameworkEntire functionNetwork topologyWeb browserIntegrated development environmentComputer animation
Execution unitUniform resource locatorSoftware developerBitText editorPoint cloudComputer animation
Convex hullPoint cloudRevision controlClosed setSoftware developerText editorRight angleBeta functionComputer animationLecture/Conference
Uniform resource locatorMusical ensembleBeta functionIntegrated development environmentProjective planeText editorPoint cloudMereologyComputer fileCodeWeb browserUniform resource locatorDemo (music)Network topologyRevision controlGoodness of fitVideo game consoleServer (computing)INTEGRALComputer animation
Execution unitConnectivity (graph theory)Web browserLine (geometry)Text editorCodeWebsiteComputer animation
Limit (category theory)MathematicsWebsiteWeb 2.0Projective planeText editorCodeProblemorientierte ProgrammierspracheQuicksortSoftware developerIntegrated development environmentFeedbackComputer animationLecture/Conference
Server (computing)Projective planeFunction (mathematics)Integrated development environmentInstance (computer science)Video game consoleoutputMessage passingProcess (computing)FeedbackPoint cloudCodeComputer animation
Cartesian coordinate systemRight angleComputer animationLecture/Conference
Web browserBitMessage passingPoint (geometry)Server (computing)CodeGraphical user interfaceContext awarenessMathematicsBridging (networking)Point cloudCommunications protocolJava appletControl flowState of matterVisualization (computer graphics)Variable (mathematics)Computer animation
State of matterPoint cloudServer (computing)Computer animationLecture/Conference
Execution unitOpen sourceDemo (music)Formal languageAdditionPoint cloudComputer fileType theoryVideo game consoleSoftware developerCodeText editorProcess (computing)File systemDebuggerFlagBeta functionInstance (computer science)Set (mathematics)Dynamical systemLevel (video gaming)Electronic mailing listGoodness of fitCompilerPhysical systemComputer chessFeedbackMultiplication signCommunications protocolError messageReal-time operating systemMereologyIntegrated development environmentComputer animation
Convex hullConnectivity (graph theory)Text editorBeta functionPoint cloudSoftware repositoryComputer animation
Process (computing)Computer animation
Gamma functionComputer animation
Computer animationLecture/ConferenceXML
Transcript: English(auto-generated)
Thank you. Nice to be here. I'm Rick Gerens, I'm the CTO of AJAX.org and as AJAX.org we've been working since 2005 on open source UI technology in the browser JavaScript
UI frameworks and that stuff looked something like this. It's really UI framework with trees and buttons and all that kind of stuff. So what we did was in beginning of 2010 we pivoted the company and we focused everything on the
next step in tooling, putting the entire development environment in the browser. We're a team of 15 people, dedicated developers, everybody's now working hard on Cloud9 and Ace, the editor. To show you a little bit, so many tabs.
Everything you see from Cloud9 and the editor you can get from GitHub, so AJAX.org slash Cloud9. It's a local version that you can pull in and play with. We currently support Node.js development so that's what you can use it for
right now. The online version is what we're working on now. We're in closed beta. It looks like this, run.cloud9ide.com and it has a very tight git integration. You have a git project, you want to edit it online or work on it in your
browser. You can go to this URL, put your git URL in the box and it'll fork the project to our servers. I have two already forked here. I'm going to show you the Node chat demo, which is a very basic demo that Ryan made for Node, and do a little hello world here. If you click on the project, it essentially
opens up the IDE. It's very familiar looking. You have a file tree on the side, code editor, console, menus. It looks very much like the IDE that you might use or might not use. I think one of the most important parts here is the
editor. This is a full DOM-based editor with a really good performance. Let's see, I can open a file here probably. I can show you how
fast it works by just copying some text. You can see that it can quite readily deal with thousands of lines of code in your browser. This is of course very important if you want to have a good experience. The editor is a separate
component. It's called Ace. It has its own website as well, ace.ajax.org. The Ace project is now the successor of Skywriter and Bespin, and we've joined with Mozilla to create the coolest and best code editor on the web. This project
is really taking off. A lot of people are adding syntax highlighting, debugging, all sorts of little language tweaks to it. Or, Irakli here is doing Vim support so that everybody who is used to Vim will not trip over their fingers and happily use it. All that stuff is really cool, but it's also essential if
you're a developer and you want to get the proper feedback from your IDE and have a fast environment. Now, I'm not sure everybody here is aware of Node.js. Node.js is actually a very simple concept. It's asynchronous IO based on V8
JavaScript engine. This is, for instance, the Node.js hello world. It's very, very simple. It shows you it creates an HTTP server, waits for a request, and then throws back a message. Now, in Cloud9 you can run and debug Node.js code.
I'm now going to start the debug session on this project. As you can see, in the console we have the console output that is running on the server. This is a JavaScript process that's now running on the server. I can open the
application which says hello world. Now, let's put a breakpoint here and see if we can refresh this. It's not refreshing. I just hit the breakpoint. The debugging support in Cloud9 currently does server-side Node.js, but a lot of
people are working on Ruby support, looking at Java, Python, and also debugging the browser itself, which is, for Chrome, currently fairly easy because it has the same debugging protocol as V8, but for the others there's still a bit of bridge work to do. Now I hit a breakpoint, and I can do
stuff. I can execute in-context code, just like you're used to if you're using Visual Studio. Probably here not, but you can do in-context code. Here is the message variable. It says hello world. I can assign
something hello FOSDEM to it. Now you would actually expect that if I press play, that my browser here would have changed state. This shows that you can debug a Node.js server with full state in Cloud9. This is
step one, great code editor debugging of Node. We've only been in beta a couple of weeks. We already have more than 3,000 people signed up, so it's going
really quickly. There's a lot of good feedback coming from the community and people adding stuff to this IDE. We love to work in it. We make Cloud9 in Cloud9, but in the end it's a developer tool that should be your own. It's written in JavaScript, so you can modify it in JavaScript.
This is something that is a very basic premise, but it's very powerful. For instance, I don't have this in this demo. It's not in Cloud9 yet, but I've seen that they've added real-time JavaScript checking using
UglifyJS and Narcissus running in a background worker. You can have, as you type, nice colored flags that tell you, hey, you're missing a... Well, thank you. You're missing semicolons, or you're missing curlies,
or if you turn on the settings too high it will whine about anything, but it helps you type dynamic languages, dynamic code, because these are not compiled, so your compiler will not complain about something missing or something being wrong. I think the next step for dynamic languages is that the
tooling comes forward and assists you as developers in pointing out errors a lot earlier in the development process. Those are things that we're also going to peek into Node itself. Node.js has almost all of the stack
written in JavaScript, with only a couple of hooks in C for the lower level access. As you can see, as we end up in here in our code, there's actually a whole stack of JavaScript already running in Node.js. The nice thing about the V8 debug protocol is that you can peer into all the code that's running, even though these JavaScript files are not even
on a file system. They're compiled into Node.js itself, which is really nice. Here's our console. Because it is a Git project, the most basic way of interacting with Git is on a command line. I can now run Git commands here on my workspace. Actually, it's a small
Unix process. You can just move around. But this is an essential part of Cloud 9 as well, so you can interact with your files. Also, a really cool addition from Mozilla is
the command processor, which will also arrive in Cloud 9 soon. That's actually a type-based command autocomplete. If I type Git, then I'd get a nice... Well, I can see that. Let's see.
Git is not in the list, but it will show a very nice type system, so you can navigate your commands very quickly. I didn't exactly time this, so I think I'm almost through. All this stuff is open source, and you can play with it. You can apply for the beta on
run.cloud9ide.com and play around with it online. Or you can work on the editor component, which is Ace, which has a different repo also here. I invite everybody to join, play with it, and see what you want it to be, and join in the process. Thank you.