Kick ass code editing and
 end to end JavaScript
       debugging
                 Fabian Jakobs
                     @fja...
Code Editor
    +
 Debugger
    =
    ?
Code Editor
    +
 Debugger
    =
   IDE
Overview

•Code Editor
• IDE Plugins
• Debugger
Demo
Editor
ACE
Ajax.org Code Editor


• nobody will use an IDE if the editor sucks
• should be able to replace TextMate
Requirements

• cross browser
• fully featured
• configurable
• scalable
• hackable
Sk y writer
   Why not Bespin?



•inefficient in full screen
• not cross browser      jQ uer y
• dependency on Sproutcore
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...
DOM +
     virtual view port
                                 ..
                                 ..
                     ...
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

                     search
     file system                   code editor
new file
                ...
What is a plugin

• JavaScript for client code
• JavaScript (node.js) for server code
• XML to describe the UI
Video
Debugger
Debugging
                                V8 debugger protocol
                                   over socket.io
         ...
Demo
cloud9 - Eclipse
Google Docs - Word
Open Source
          Building Blocks
connect               node.js
          socket.io               requireJS

         ...
Cloud9 IDE
open sourced
  TODAY
Join us
  in building an IDE
by JS devs for JS devs.
Thanks for watching!
           Fork it on GitHub
   http://github.com/ajaxorg/cloud9
Kick ass code editing and end to end JavaScript debugging
Kick ass code editing and end to end JavaScript debugging
Upcoming SlideShare
Loading in …5
×

Kick ass code editing and end to end JavaScript debugging

6,104 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,104
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Kick ass code editing and end to end JavaScript debugging

  1. 1. Kick ass code editing and end to end JavaScript debugging Fabian Jakobs @fjakobs
  2. 2. Code Editor + Debugger = ?
  3. 3. Code Editor + Debugger = IDE
  4. 4. Overview •Code Editor • IDE Plugins • Debugger
  5. 5. Demo
  6. 6. Editor
  7. 7. ACE Ajax.org Code Editor • nobody will use an IDE if the editor sucks • should be able to replace TextMate
  8. 8. Requirements • cross browser • fully featured • configurable • scalable • hackable
  9. 9. Sk y writer Why not Bespin? •inefficient in full screen • not cross browser jQ uer y • dependency on Sproutcore
  10. 10. Implementation Options •Content Editable • Canvas • pure DOM
  11. 11. Content Editable • not enough control • cross browser issues • not worth it (for code editing)
  12. 12. Canvas • full rendering control • no IE6, IE7, IE8 • implement key/mouse interaction manually • O(number of pixels)
  13. 13. Pure DOM • draw text, lines, rectangles • implement key/mouse interaction manually • naive O(number of lines) • better O(number of visible lines)
  14. 14. DOM + virtual view port .. .. .... .. ... .... . . ... . • rendering a full document in .. . . the DOM doesn‘t scale .. .. • only render visible rows . .. .. .. . .. . .. .. .... . . . .
  15. 15. Renderer •DOM is used for drawing only • no state in the DOM • never read the DOM
  16. 16. Layers
  17. 17. Layers
  18. 18. Demo
  19. 19. IDE Plugins
  20. 20. Everything is a Plugin search file system code editor new file language modes save debugger console
  21. 21. What is a plugin • JavaScript for client code • JavaScript (node.js) for server code • XML to describe the UI
  22. 22. Video
  23. 23. Debugger
  24. 24. Debugging V8 debugger protocol over socket.io IDE IDE Server Client V8 debugger protocol over TCP ? Application Application (node) in Chrome
  25. 25. Demo
  26. 26. cloud9 - Eclipse Google Docs - Word
  27. 27. Open Source Building Blocks connect node.js socket.io requireJS ACE jsDAV node-github APF node-o3-xml async.js
  28. 28. Cloud9 IDE open sourced TODAY
  29. 29. Join us in building an IDE by JS devs for JS devs.
  30. 30. Thanks for watching! Fork it on GitHub http://github.com/ajaxorg/cloud9

×