bespin, skywriter, ace the past, present and future of online code editing
DESCRIPTION
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 , which is a terrible code editor (just hit the tab key to see what I mean!)There's no excuse for just using 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 pageConfigure Ace to your tastesExtend Ace with custom featuresAlong 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.TRANSCRIPT
Bespin, Skywriter, AceThe Past, Present and Future
of online Code Editing
Fabian JakobsKevin Dangoor
Montag, 2. Mai 2011
Fabian Jakobsajax.org
@fjakobs
Kevin DangoorMozilla
@dangoor
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
Code Editors
Montag, 2. Mai 2011
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
Montag, 2. Mai 2011
Ajax.org Cloud9 Editor(Ace)
• Fully featured
• Extensible
• Scalable
• Cross Browser
Montag, 2. Mai 2011
Our Goal Today
Montag, 2. Mai 2011
Ace Building Blocks
Renderer(View)
Editor(Controller)
Edit Session(Model)
LanguageMode
Document
Selection
Montag, 2. Mai 2011
Demo Part 1
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Tech Details
Montag, 2. Mai 2011
Renderer
•DOM is used for drawing only
•no state in the DOM
•never read the DOM
Montag, 2. Mai 2011
Virtual Viewport................. . . ..........
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
Montag, 2. Mai 2011
Virtual Viewport
• rendering a full document in the DOM doesn‘t scale
..
..
....
..
...
.... . . ...
.
..
.
.
..
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
Montag, 2. Mai 2011
Virtual Viewport
• rendering a full document in the DOM doesn‘t scale
• only render visible rows
..
..
....
..
...
.... . . ...
.
..
.
.
..
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
Montag, 2. Mai 2011
Virtual Viewport
• rendering a full document in the DOM doesn‘t scale
• only render visible rows
..
..
....
..
...
.... . . ...
.
..
.
.
..
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
Montag, 2. Mai 2011
Performance• Document size shouldn‘t matter
• Everything in the main thread should scale with the viewport size
Montag, 2. Mai 2011
Performance• Document size shouldn‘t matter
• Everything in the main thread should scale with the viewport size
BUT
Montag, 2. Mai 2011
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
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
Montag, 2. Mai 2011
Worker
Web WorkersMain JS Thread
Document....
..
.
.. . ..
..
.... . . .
JS ParserEdit Session
Mirror....
..
.
.. . ..
..
.... . . .
Montag, 2. Mai 2011
DemoPart 2
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Montag, 2. Mai 2011
Past, Present and Future
Montag, 2. Mai 2011
13.7 billion years ago
1983
MozillaSkywriter
2010
230 million years ago 230,000 years ago
1770
2008 2009
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
Montag, 2. Mai 2011
Present
• 30+ Contributors
• 677 Watchers, 148 Forks on Github
• 234 Pull Requests
• 17 Language modes
Montag, 2. Mai 2011
Future
• Code completion
• Code Navigation
• Code Folding
• Outline View
• Documentation
Montag, 2. Mai 2011
Happy Coding!
@cloud9_editorhttp://ace.ajax.org
https://github.com/fjakobs/coffeepreview
Montag, 2. Mai 2011
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