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
