Kick ass code editing andend to end JavaScript

debugging

Fabian Jakobs@fjakobs

Code Editor+

Debugger

=?

Code Editor+

Debugger

=IDE

Overview

•Code Editor

• IDE Plugins

•Debugger

Demo

Editor

• nobody will use an IDE if the editor sucks

• should be able to replace TextMate

ACEAjax.org Code Editor

Requirements

• cross browser

• fully featured

• configurable

• scalable

• hackable

Why not Bespin?

• inefficient in full screen

•not cross browser

•dependency on Sproutcore

Skywriter

jQuery

Implementation Options

•Content Editable

•Canvas

•pure DOM

Content Editable

• not enough control

• cross browser issues

• not worth it (for code editing)

Canvas

• full rendering control

• no IE6, IE7, IE8

• implement key/mouse interaction manually

• O(number of pixels)

Pure DOM

• draw text, lines, rectangles

• implement key/mouse interaction manually

• naive O(number of lines)

• better O(number of visible lines)

DOM + virtual view port

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

• only render visible rows

..

..

....

..

...

.... . . ...

.

..

.

.

..

..

.

..

.. ..

.

.. . ..

..

.... . . .

.

Renderer

•DOM is used for drawing only

•no state in the DOM

•never read the DOM

Layers

Layers

Demo

IDE Plugins

Everything is a Plugin

searchfile system code editor

language modes

debugger console

new filesave

What is a plugin

• JavaScript for client code

• JavaScript (node.js) for server code

• XML to describe the UI

Video

Debugger

Debugging

Application(node)

IDEServer

IDEClient

V8 debugger protocolover TCP

V8 debugger protocolover socket.io

Applicationin Chrome

?

Demo

cloud9 - Eclipse Google Docs - Word

Open SourceBuilding Blocks

node.js

requireJS

connect

socket.io

ACE

APF

jsDAV

async.js

node-github

node-o3-xml

Cloud9 IDE

open sourcedTODAY

Join usin building an IDE

by JS devs for JS devs.

Thanks for watching!Fork it on GitHub

http://github.com/ajaxorg/cloud9