Kick ass code editing and end to end JavaScript debugging
4 likes3,093 views
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.
Kick ass code editing and end to end JavaScript debugging
- 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