Ace:Browser based editor      Julian Viereck        @jviereck
Fabian Jakobs   Kevin Dangoor  ajax.org          Mozilla  @fjakobs        @dangoor
Code Editors
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!
13.7 billion years ago        230 million years ago          230,000 years ago                                            ...
Ajax.org Cloud9 Editor         (Ace)• Fully featured• Extensible• Scalable• Cross Browser
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
Cloud9IDE Demo
Ace Building Blocks         Editor                  Edit Session                                                Document  ...
Tech Details
Renderer•DOM is used for drawing only• no state in the DOM• never read the DOM
Virtual Viewport                                 ..                                 ..                                 ......
Performance•   Document size shouldn‘t matter•   Everything in the main thread should scale with the    viewport size     ...
Web WorkersMain JS Thread   Worker Edit Session    JS Parser   Document      Mirror   .             .   .             .   ...
Ace Demo
Present
Present• 30+ Contributors• 677 Watchers, 148 Forks on Github• 234 Pull Requests• 17 Language modes
Future• Code completion• Code Navigation• Outline View• Documentation
Happy Coding!       @cloud9_editor       http://ace.ajax.orghttps://github.com/ajaxorg/ace
Photo Credits•   Big Bang http://www.flickr.com/photos/neychurluvr/4021590334/•   Mozilla Dinosaur http://www.flickr.com/pho...
Upcoming SlideShare
Loading in...5
×

2011 05-jszurich

581

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2011 05-jszurich

  1. 1. Ace:Browser based editor Julian Viereck @jviereck
  2. 2. Fabian Jakobs Kevin Dangoor ajax.org Mozilla @fjakobs @dangoor
  3. 3. Code Editors
  4. 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. 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. 6. Ajax.org Cloud9 Editor (Ace)• Fully featured• Extensible• Scalable• Cross Browser
  7. 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. 8. Cloud9IDE Demo
  9. 9. Ace Building Blocks Editor Edit Session Document (Controller) (Model) Language ModeKeyboard Renderer Handler (View) Selection
  10. 10. Tech Details
  11. 11. Renderer•DOM is used for drawing only• no state in the DOM• never read the DOM
  12. 12. Virtual Viewport .. .. .... .. ... .... . . ... .• rendering a full document in .. . . the DOM doesn‘t scale .. ..• only render visible rows . .. .. .. . .. . .. .. .... . . . .
  13. 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. 14. Web WorkersMain JS Thread Worker Edit Session JS Parser Document Mirror . . . . .. .. .. .. . . .. . .. .. . .. .. .. .... . . . .... . . .
  15. 15. Ace Demo
  16. 16. Present
  17. 17. Present• 30+ Contributors• 677 Watchers, 148 Forks on Github• 234 Pull Requests• 17 Language modes
  18. 18. Future• Code completion• Code Navigation• Outline View• Documentation
  19. 19. Happy Coding! @cloud9_editor http://ace.ajax.orghttps://github.com/ajaxorg/ace
  20. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×