This talk is about Ace, a browser based editor, that powers Cloud9Ide.

1. Ace:
Browser based editor
Julian Viereck
@jviereck

2. Fabian Jakobs Kevin Dangoor
ajax.org Mozilla
@fjakobs @dangoor

3. Code Editors

4. Our life is in the cloud...
and our dev env?
We use desktop apps to
build web apps?
Can’t we do better?
Yes - we can!

5. 13.7 billion years ago 230 million years ago 230,000 years ago
1770
1983 2008 2009
Mozilla Ajax.org
Skywriter Ace
2010 2010

6. Ajax.org Cloud9 Editor
(Ace)
• Fully featured
• Extensible
• Scalable
• Cross Browser

7. No Compromise
• we don‘t strive for almost as good
• we strive to be at least as good
• it‘s time for the web to take over

8. Cloud9IDE Demo

9. Ace Building Blocks
Editor Edit Session
Document
(Controller) (Model)
Language
Mode
Keyboard Renderer
Handler (View) Selection

10. Tech Details

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

12. Virtual Viewport
..
..
....
..
...
.... . . ...
.
• rendering a full document in ..
.
.
the DOM doesn‘t scale ..
..
• only render visible rows .
..
.. ..
.
.. . ..
..
.... . . .
.

13. Performance
• Document size shouldn‘t matter
• Everything in the main thread should scale with the
viewport size
BUT
• not everything does!
• We need web workers

14. Web Workers
Main JS Thread Worker
Edit Session JS Parser
Document Mirror
. .
. .
.. ..
.. ..
. .
.. . .. .. . ..
.. ..
.... . . . .... . . .

15. Ace Demo

16. Present

17. Present
• 30+ Contributors
• 677 Watchers, 148 Forks on Github
• 234 Pull Requests
• 17 Language modes

18. Future
• Code completion
• Code Navigation
• Outline View
• Documentation

19. Happy Coding!
@cloud9_editor
http://ace.ajax.org
https://github.com/ajaxorg/ace

20. Photo Credits
• Big Bang http://www.flickr.com/photos/neychurluvr/4021590334/
• Mozilla Dinosaur http://www.flickr.com/photos/neychurluvr/4021590334/
• Bacon http://en.wikipedia.org/wiki/File:RawBacon.JPG
• Ben and Dion http://www.flickr.com/photos/franksvalli/5163228449/
• JSConf.EU http://blog.sinnerschrader.de/mt-static/support/themes/jsconf2009/lg_logo.png