Transcript
Page 1: Bespin, Skywriter, Ace The Past, Present and Future of online Code Editing

Bespin, Skywriter, AceThe Past, Present and Future

of online Code Editing

Fabian JakobsKevin Dangoor

Montag, 2. Mai 2011

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

Fabian Jakobsajax.org

@fjakobs

Kevin DangoorMozilla

@dangoor

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

Code Editors

Montag, 2. Mai 2011

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

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

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

Ajax.org Cloud9 Editor(Ace)

• Fully featured

• Extensible

• Scalable

• Cross Browser

Montag, 2. Mai 2011

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

Our Goal Today

Montag, 2. Mai 2011

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

Ace Building Blocks

Renderer(View)

Editor(Controller)

Edit Session(Model)

LanguageMode

Document

Selection

Montag, 2. Mai 2011

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

Demo Part 1

Montag, 2. Mai 2011

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

Montag, 2. Mai 2011

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

Tech Details

Montag, 2. Mai 2011

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

Renderer

•DOM is used for drawing only

•no state in the DOM

•never read the DOM

Montag, 2. Mai 2011

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

Virtual Viewport................. . . ..........

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

Montag, 2. Mai 2011

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

Virtual Viewport

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

..

..

....

..

...

.... . . ...

.

..

.

.

..

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

Montag, 2. Mai 2011

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

Virtual Viewport

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

• only render visible rows

..

..

....

..

...

.... . . ...

.

..

.

.

..

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

Montag, 2. Mai 2011

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

Virtual Viewport

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

• only render visible rows

..

..

....

..

...

.... . . ...

.

..

.

.

..

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

Montag, 2. Mai 2011

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

Performance• Document size shouldn‘t matter

• Everything in the main thread should scale with the viewport size

Montag, 2. Mai 2011

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

Performance• Document size shouldn‘t matter

• Everything in the main thread should scale with the viewport size

BUT

Montag, 2. Mai 2011

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

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

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

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

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

Worker

Web WorkersMain JS Thread

Document....

..

.

.. . ..

..

.... . . .

JS ParserEdit Session

Mirror....

..

.

.. . ..

..

.... . . .

Montag, 2. Mai 2011

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

DemoPart 2

Montag, 2. Mai 2011

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

Montag, 2. Mai 2011

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

Montag, 2. Mai 2011

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

Montag, 2. Mai 2011

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

Past, Present and Future

Montag, 2. Mai 2011

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

13.7 billion years ago

1983

MozillaSkywriter

2010

230 million years ago 230,000 years ago

1770

2008 2009

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

Montag, 2. Mai 2011

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

Present

• 30+ Contributors

• 677 Watchers, 148 Forks on Github

• 234 Pull Requests

• 17 Language modes

Montag, 2. Mai 2011

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

Future

• Code completion

• Code Navigation

• Code Folding

• Outline View

• Documentation

Montag, 2. Mai 2011

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

Happy Coding!

@cloud9_editorhttp://ace.ajax.org

https://github.com/fjakobs/coffeepreview

Montag, 2. Mai 2011

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

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


Recommended