The document discusses the development of a code editor and debugger, emphasizing the need for a powerful and configurable IDE that caters to JavaScript developers. It outlines various technology choices, including the use of Ace editor, the challenges faced with different rendering methods, and the implementation of plugins for enhanced functionality. Additionally, it promotes the open-source Cloud9 IDE project, encouraging collaboration among JavaScript developers.

1. Kick ass code editing and
end to end JavaScript
debugging
Fabian Jakobs
@fjakobs

2. Code Editor
+
Debugger
=
?

3. Code Editor
+
Debugger
=
IDE

5. Overview
•Code Editor
• IDE Plugins
• Debugger

6. Demo

7. Editor

8. ACE
Ajax.org Code Editor
• nobody will use an IDE if the editor sucks
• should be able to replace TextMate

9. Requirements
• cross browser
• fully featured
• configurable
• scalable
• hackable

10. Sk y writer
Why not Bespin?
•inefficient in full screen
• not cross browser jQ uer y
• dependency on Sproutcore

11. Implementation
Options
•Content Editable
• Canvas
• pure DOM

12. Content Editable
• not enough control
• cross browser issues
• not worth it (for code editing)

13. Canvas
• full rendering control
• no IE6, IE7, IE8
• implement key/mouse interaction manually
• O(number of pixels)

14. Pure DOM
• draw text, lines, rectangles
• implement key/mouse interaction manually
• naive O(number of lines)
• better O(number of visible lines)

15. DOM +
virtual view port
..
..
....
..
...
.... . . ...
.
• rendering a full document in ..
.
.
the DOM doesn‘t scale ..
..
• only render visible rows .
..
.. ..
.
.. . ..
..
.... . . .
.

16. Renderer
•DOM is used for drawing only
• no state in the DOM
• never read the DOM

17. Layers

18. Layers

19. Demo

20. IDE Plugins

21. Everything is a Plugin
search
file system code editor
new file
language modes save
debugger console

22. What is a plugin
• JavaScript for client code
• JavaScript (node.js) for server code
• XML to describe the UI

23. Video

25. Debugger

26. Debugging
V8 debugger protocol
over socket.io
IDE IDE
Server Client
V8 debugger protocol
over TCP
?
Application Application
(node) in Chrome

27. Demo

28. cloud9 - Eclipse
Google Docs - Word

29. Open Source
Building Blocks
connect node.js
socket.io requireJS
ACE
jsDAV node-github
APF node-o3-xml async.js

30. Cloud9 IDE
open sourced
TODAY

31. Join us
in building an IDE
by JS devs for JS devs.

32. Thanks for watching!
Fork it on GitHub
http://github.com/ajaxorg/cloud9