kick ass code editing and end to end javascript debugging
DESCRIPTION
Cloud9 IDE is aiming to be the IDE for Javascript developers. We have all experienced the Eclipse variants and other Java or C++ IDE's for which webdevelopment and javascript was an afterthought. Extending these applications or customizing them to our needs was done in either Java or C++ and generally very difficult. We are developing applications in javascript to run online for a purpose, why shouldn't you do your application development online too?This talk gives an overview over the Cloud9 IDE and delves into the technical details of the code editor and the buildin debugger.TRANSCRIPT
Kick ass code editing andend to end JavaScript
debugging
Fabian Jakobs@fjakobs
Code Editor+
Debugger
=?
Code Editor+
Debugger
=IDE
Overview
•Code Editor
• IDE Plugins
•Debugger
Demo
Editor
• nobody will use an IDE if the editor sucks
• should be able to replace TextMate
ACEAjax.org Code Editor
Requirements
• cross browser
• fully featured
• configurable
• scalable
• hackable
Why not Bespin?
• inefficient in full screen
•not cross browser
•dependency on Sproutcore
Skywriter
jQuery
Implementation Options
•Content Editable
•Canvas
•pure DOM
Content Editable
• not enough control
• cross browser issues
• not worth it (for code editing)
Canvas
• full rendering control
• no IE6, IE7, IE8
• implement key/mouse interaction manually
• O(number of pixels)
Pure DOM
• draw text, lines, rectangles
• implement key/mouse interaction manually
• naive O(number of lines)
• better O(number of visible lines)
DOM + virtual view port
• rendering a full document in the DOM doesn‘t scale
• only render visible rows
..
..
....
..
...
.... . . ...
.
..
.
.
..
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
Renderer
•DOM is used for drawing only
•no state in the DOM
•never read the DOM
Layers
Layers
Demo
IDE Plugins
Everything is a Plugin
searchfile system code editor
language modes
debugger console
new filesave
What is a plugin
• JavaScript for client code
• JavaScript (node.js) for server code
• XML to describe the UI
Video
Debugger
Debugging
Application(node)
IDEServer
IDEClient
V8 debugger protocolover TCP
V8 debugger protocolover socket.io
Applicationin Chrome
?
Demo
cloud9 - Eclipse Google Docs - Word
Open SourceBuilding Blocks
node.js
requireJS
connect
socket.io
ACE
APF
jsDAV
async.js
node-github
node-o3-xml
Cloud9 IDE
open sourcedTODAY
Join usin building an IDE
by JS devs for JS devs.
Thanks for watching!Fork it on GitHub
http://github.com/ajaxorg/cloud9