Bespin, Skywriter, Ace                  The Past, Present and Future                    of online Code Editing            ...
Fabian Jakobs   Kevin Dangoor                        ajax.org          Mozilla                        @fjakobs        @dan...
Code EditorsMontag, 2. Mai 2011
Code EditorsMontag, 2. Mai 2011
Code EditorsMontag, 2. Mai 2011
Code EditorsMontag, 2. Mai 2011
Code EditorsMontag, 2. Mai 2011
Code EditorsMontag, 2. Mai 2011
No Compromise                      • we don‘t strive for almost as good                      • we strive to be at least as...
Ajax.org Cloud9 Editor                           (Ace)                      • Fully featured                      • Extens...
Our Goal TodayMontag, 2. Mai 2011
Ace Building Blocks                        Editor       Edit Session                                                    Do...
Demo                      Part 1Montag, 2. Mai 2011
Montag, 2. Mai 2011
Tech DetailsMontag, 2. Mai 2011
Renderer                      •DOM is used for drawing only                      • no state in the DOM                    ...
Virtual Viewport                                         ..                                         ..                    ...
Virtual Viewport                                                       ..                                                 ...
Virtual Viewport                                                       ..                                                 ...
Virtual Viewport                                                       ..                                                 ...
Performance                      •   Document size shouldn‘t matter                      •   Everything in the main thread...
Performance                      •   Document size shouldn‘t matter                      •   Everything in the main thread...
Performance                      •   Document size shouldn‘t matter                      •   Everything in the main thread...
Performance                      •   Document size shouldn‘t matter                      •   Everything in the main thread...
Web Workers                      Main JS Thread   Worker                       Edit Session    JS Parser                  ...
Demo                      Part 2Montag, 2. Mai 2011
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Past, Present and                            FutureMontag, 2. Mai 2011
13.7 billion years ago   230 million years ago          230,000 years ago                                                 ...
PresentMontag, 2. Mai 2011
PresentMontag, 2. Mai 2011
PresentMontag, 2. Mai 2011
PresentMontag, 2. Mai 2011
PresentMontag, 2. Mai 2011
PresentMontag, 2. Mai 2011
Present                      • 30+ Contributors                      • 677 Watchers, 148 Forks on Github                  ...
Future                      • Code completion                      • Code Navigation                      • Code Folding  ...
Happy Coding!                                   @cloud9_editor                                  http://ace.ajax.org       ...
Photo Credits                      •   Big Bang http://www.flickr.com/photos/neychurluvr/4021590334/                      •...
Upcoming SlideShare
Loading in …5
×

Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing

4,156 views

Published on

More and more sites allow code to be edited in the browser... anything from simple templates all the way up to complete applications integrating both client and server code. The most popular editor for this purpose is probably still <textarea>, which is a terrible code editor (just hit the tab key to see what I mean!)

There's no excuse for just using <textarea> any more. The Ajax.org Cloud9 Editor (Ace) project was born out of Ajax.org's Cloud9 IDE cloud-based coding environment and Mozilla's Bespin/Skywriter project. With this project, we're creating an easily embeddable, "no compromises" editor.

In our talk, we'll show off how you can:

Use Ace in your own projects by adding just a couple of lines to your page
Configure Ace to your tastes
Extend Ace with custom features
Along the way, you'll see a number of Ace's features that go beyond just syntax highlighting: live syntax checking, highlight uses of variables, easy keyboard navigation (even for vim users!) and more.

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

No Downloads
Views
Total views
4,156
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing

  1. 1. Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing Fabian Jakobs Kevin DangoorMontag, 2. Mai 2011
  2. 2. Fabian Jakobs Kevin Dangoor ajax.org Mozilla @fjakobs @dangoorMontag, 2. Mai 2011
  3. 3. Code EditorsMontag, 2. Mai 2011
  4. 4. Code EditorsMontag, 2. Mai 2011
  5. 5. Code EditorsMontag, 2. Mai 2011
  6. 6. Code EditorsMontag, 2. Mai 2011
  7. 7. Code EditorsMontag, 2. Mai 2011
  8. 8. Code EditorsMontag, 2. Mai 2011
  9. 9. 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 overMontag, 2. Mai 2011
  10. 10. Ajax.org Cloud9 Editor (Ace) • Fully featured • Extensible • Scalable • Cross BrowserMontag, 2. Mai 2011
  11. 11. Our Goal TodayMontag, 2. Mai 2011
  12. 12. Ace Building Blocks Editor Edit Session Document (Controller) (Model) Language Mode Renderer (View) SelectionMontag, 2. Mai 2011
  13. 13. Demo Part 1Montag, 2. Mai 2011
  14. 14. Montag, 2. Mai 2011
  15. 15. Tech DetailsMontag, 2. Mai 2011
  16. 16. Renderer •DOM is used for drawing only • no state in the DOM • never read the DOMMontag, 2. Mai 2011
  17. 17. Virtual Viewport .. .. .... .. ... .... . . ... . .. . . .. .. . .. .. .. . .. . .. .. .... . . . .Montag, 2. Mai 2011
  18. 18. Virtual Viewport .. .. .... .. ... .... . . ... . • rendering a full document in .. . . the DOM doesn‘t scale .. .. . .. .. .. . .. . .. .. .... . . . .Montag, 2. Mai 2011
  19. 19. Virtual Viewport .. .. .... .. ... .... . . ... . • rendering a full document in .. . . the DOM doesn‘t scale .. .. • only render visible rows . .. .. .. . .. . .. .. .... . . . .Montag, 2. Mai 2011
  20. 20. Virtual Viewport .. .. .... .. ... .... . . ... . • rendering a full document in .. . . the DOM doesn‘t scale .. .. • only render visible rows . .. .. .. . .. . .. .. .... . . . .Montag, 2. Mai 2011
  21. 21. Performance • Document size shouldn‘t matter • Everything in the main thread should scale with the viewport sizeMontag, 2. Mai 2011
  22. 22. Performance • Document size shouldn‘t matter • Everything in the main thread should scale with the viewport size BUTMontag, 2. Mai 2011
  23. 23. Performance • Document size shouldn‘t matter • Everything in the main thread should scale with the viewport size BUT • not everything does!Montag, 2. Mai 2011
  24. 24. Performance • Document size shouldn‘t matter • Everything in the main thread should scale with the viewport size BUT • not everything does! • We need web workersMontag, 2. Mai 2011
  25. 25. Web Workers Main JS Thread Worker Edit Session JS Parser Document Mirror . . . . .. .. .. .. . . .. . .. .. . .. .. .. .... . . . .... . . .Montag, 2. Mai 2011
  26. 26. Demo Part 2Montag, 2. Mai 2011
  27. 27. Montag, 2. Mai 2011
  28. 28. Montag, 2. Mai 2011
  29. 29. Montag, 2. Mai 2011
  30. 30. Past, Present and FutureMontag, 2. Mai 2011
  31. 31. 13.7 billion years ago 230 million years ago 230,000 years ago 1770 1983 2008 2009 Mozilla Skywriter 2010Montag, 2. Mai 2011
  32. 32. PresentMontag, 2. Mai 2011
  33. 33. PresentMontag, 2. Mai 2011
  34. 34. PresentMontag, 2. Mai 2011
  35. 35. PresentMontag, 2. Mai 2011
  36. 36. PresentMontag, 2. Mai 2011
  37. 37. PresentMontag, 2. Mai 2011
  38. 38. Present • 30+ Contributors • 677 Watchers, 148 Forks on Github • 234 Pull Requests • 17 Language modesMontag, 2. Mai 2011
  39. 39. Future • Code completion • Code Navigation • Code Folding • Outline View • DocumentationMontag, 2. Mai 2011
  40. 40. Happy Coding! @cloud9_editor http://ace.ajax.org https://github.com/fjakobs/coffeepreviewMontag, 2. Mai 2011
  41. 41. 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/Montag, 2. Mai 2011

×