Ace:Browser based editor

Julian Viereck@jviereck

Fabian Jakobsajax.org

@fjakobs

Kevin DangoorMozilla

@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

1983

230 million years ago 230,000 years ago

1770

2008 2009

MozillaSkywriter

2010

Ajax.orgAce2010

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

Renderer(View)

Editor(Controller)

Edit Session(Model)

LanguageMode

Document

SelectionKeyboardHandler

KeyboardHandler

Tech Details

Renderer

•DOM is used for drawing only

•no state in the DOM

•never read the DOM

Virtual Viewport

• rendering a full document in the DOM doesn‘t scale

• only render visible rows

..

..

....

..

...

.... . . ...

.

..

.

.

..

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

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

Worker

Web WorkersMain JS Thread

Document....

..

.

.. . ..

..

.... . . .

JS ParserEdit Session

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_editorhttp://ace.ajax.org

https://github.com/ajaxorg/ace

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