Cloud9 IDE: Kick ass code editing and end to end JavaScript debugging
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| 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 | 10.5446/45917 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 201132 / 64
3
7
10
11
17
19
21
28
33
34
35
37
40
44
48
49
52
55
57
59
62
63
64
00:00
CodeIntegrated development environmentConvex hullHand fanRecurrence relationSoftware frameworkWeb browserOpen sourceComputer animationXML
00:26
Element (mathematics)Software frameworkEntire functionNetwork topologyWeb browserIntegrated development environmentComputer animation
00:51
Execution unitUniform resource locatorSoftware developerBitText editorPoint cloudComputer animation
01:03
Convex hullPoint cloudRevision controlClosed setSoftware developerText editorRight angleBeta functionComputer animationLecture/Conference
01:25
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
02:48
Execution unitConnectivity (graph theory)Web browserLine (geometry)Text editorCodeWebsiteComputer animation
03:04
Limit (category theory)MathematicsWebsiteWeb 2.0Projective planeText editorCodeProblemorientierte ProgrammierspracheQuicksortSoftware developerIntegrated development environmentFeedbackComputer animationLecture/Conference
03:41
Server (computing)Projective planeFunction (mathematics)Integrated development environmentInstance (computer science)Video game consoleoutputMessage passingProcess (computing)FeedbackPoint cloudCodeComputer animation
04:39
Cartesian coordinate systemRight angleComputer animationLecture/Conference
04:55
Web browserBitMessage passingPoint (geometry)Server (computing)CodeGraphical user interfaceContext awarenessMathematicsBridging (networking)Point cloudCommunications protocolJava appletControl flowState of matterVisualization (computer graphics)Variable (mathematics)Computer animation
05:52
State of matterPoint cloudServer (computing)Computer animationLecture/Conference
06:03
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
09:38
Convex hullConnectivity (graph theory)Text editorBeta functionPoint cloudSoftware repositoryComputer animation
09:54
Process (computing)Computer animation
10:10
Gamma functionComputer animation
10:24
Computer animationLecture/ConferenceXML
Transcript: English(auto-generated)
00:07
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
00:22
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
00:44
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.
01:06
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
01:23
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
01:41
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
02:03
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
02:26
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
02:44
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
03:02
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
03:21
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
03:40
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
04:02
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.
04:22
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
04:41
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
05:05
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
05:25
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
05:42
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
06:06
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
06:22
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.
06:42
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
07:03
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,
07:24
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
07:41
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
08:01
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
08:23
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
08:49
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
09:04
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.
09:21
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
09:45
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.