Our demo: Real-time c ollaborative city planner Changes are distributed using XMPP XMPP bot updates traffic patterns Runs in Javascript on the server Welcome!

Our demo:

Real-time c ollaborative city planner

Changes are distributed using XMPP

XMPP bot updates traffic patterns

Runs in Javascript on the server

What is O 3 ? Collection of C++ components, made available through Javascript API Runs on all major browsers, and all major operating systems Library to create scriptable C++ components

Collection of C++ components, made available through Javascript API

Runs on all major browsers, and all major operating systems

Library to create scriptable C++ components

What is O 3 ? Comes in two flavors: O 3 client-side: Runs as plug-in in the browser Extends DOM API with O3 components Useful if you’re developing in the browser O 3 server-side: Runs as standalone application Uses Google’s V8 engine to run scripts Provides the same components

Comes in two flavors:

O 3 client-side:

Runs as plug-in in the browser

Extends DOM API with O3 components

Useful if you’re developing in the browser

O 3 server-side:

Runs as standalone application

Uses Google’s V8 engine to run scripts

Provides the same components

What is O 3 ? All O3 components are available on both the client and the server! To use O3 at the client, you need a plugin however…

All O3 components are available on both the client and the server!

To use O3 at the client, you need a plugin however…

What is O3? O3 Library consists of three parts: Component model Reflection layer Containers, algorithms, etc.

O3 Library consists of three parts:

Component model

Reflection layer

Containers, algorithms, etc.

Component model Subset of Microsoft’s COM specification (as opposed to XPCOM, CORBA, etc.) Looks like this: o3_iid(iFoo, 0x3F2504E0, 0x4F89, 0x11D3, 0x9A, 0x0C, 0x03, 0x05, 0xE8, 0x2C, 0x33, 0x01); struct iFoo : iUnk { virtual void bar(int x) = 0; }; o3_cls(cFoo) struct cFoo : cUnk, iFoo { o3_begin_class(cUnk) o3_add_iface(iFoo) o3_end() };

Subset of Microsoft’s COM specification (as opposed to XPCOM, CORBA, etc.)

Looks like this: o3_iid(iFoo, 0x3F2504E0, 0x4F89, 0x11D3, 0x9A, 0x0C, 0x03, 0x05, 0xE8, 0x2C, 0x33, 0x01); struct iFoo : iUnk { virtual void bar(int x) = 0; }; o3_cls(cFoo) struct cFoo : cUnk, iFoo { o3_begin_class(cUnk) o3_add_iface(iFoo) o3_end() };

Reflection layer Special interface: struct iScr : iUnk { int resolve(const char*); void invoke(iCtx* ctx, Access access, int id, int argc, Var* argv, Var* rval, Ex* ex); … }; Allows you to query C++ objects for their methods and properties! Indexed based because some script engines require this (i.e. IDispatch)

Special interface: struct iScr : iUnk { int resolve(const char*); void invoke(iCtx* ctx, Access access, int id, int argc, Var* argv, Var* rval, Ex* ex); … };

Allows you to query C++ objects for their methods and properties!

Indexed based because some script engines require this (i.e. IDispatch)

Containers, algorithms, etc. We don’t use STL (although you could!) Our containers have lots of useful features and optimizations: Stack allocation for small strings Copy-on write semantics Automatic UTF-8/UTF-16 conversion (not possible with STL) Vectors are scriptable as well! (using Array interface)

We don’t use STL (although you could!)

Our containers have lots of useful features and optimizations:

Stack allocation for small strings

Copy-on write semantics

Automatic UTF-8/UTF-16 conversion (not possible with STL)

Vectors are scriptable as well! (using Array interface)

Writing components Writing O3 components is easy! All you need to do is add some tags: o3_get int value(); // getter o3_set int setValue(int value); // setter o3_fun int function(int x); // function Code generator will do the rest! (also written in Javascript)

Writing O3 components is easy!

All you need to do is add some tags: o3_get int value(); // getter o3_set int setValue(int value); // setter o3_fun int function(int x); // function

Code generator will do the rest! (also written in Javascript)

Writing components We want our components to be as fast as possible! Immediate properties: o3_imm_get int foo; // read-only o3_imm_set int bar; // write-only o3_imm int value; // read/write No getters/setters are generated, properties are accessed directly.

We want our components to be as fast as possible!

Immediate properties: o3_imm_get int foo; // read-only o3_imm_set int bar; // write-only o3_imm int value; // read/write

No getters/setters are generated, properties are accessed directly.

Writing components We want to be able to load components on the fly! Extension properties: In C++: o3_ext(“cO3”) o3_fun static int test(int x); In Javascript: o3.loadModule(“test”); o3.test(3);

We want to be able to load components on the fly!

Extension properties:

In C++: o3_ext(“cO3”) o3_fun static int test(int x);

In Javascript: o3.loadModule(“test”); o3.test(3);

Dealing with async Use threads to implement asynchronous Javascript calls. Use message passing to implement callbacks This requires an explicit message loop on the server: while (true) o3.wait(); Not needed at the client! (We can hook into the browser message loop there…)

Use threads to implement asynchronous Javascript calls.

Use message passing to implement callbacks

This requires an explicit message loop on the server: while (true) o3.wait();

Not needed at the client! (We can hook into the browser message loop there…)

HTTP Component Based on XMLHttpRequest API Example: var http = o3.http(); http.onprogress = function(http) { if (http.bytesReceived > 10000) … } http.onreadystatechange = function(http) { if (http.readystate == http.COMPLETED) … } http.open(“GET”, “www.ajax.org”); http.send();

Based on XMLHttpRequest API

Example: var http = o3.http(); http.onprogress = function(http) { if (http.bytesReceived > 10000) …

} http.onreadystatechange = function(http) { if (http.readystate == http.COMPLETED) … } http.open(“GET”, “www.ajax.org”); http.send();

XML Component Based on XML DOM API Example: var xml = o3.xml(); var doc = xml.parseFromString(string); var element = doc.documentElement; for (var child = element.firstChild; child != element.lastChild; child = child.nextSibling) …

Based on XML DOM API

Example: var xml = o3.xml(); var doc = xml.parseFromString(string); var element = doc.documentElement; for (var child = element.firstChild; child != element.lastChild; child = child.nextSibling) …

FS Component Example: var cwd = o3.cwd; var file = cwd.get(“test.txt”); file.onchange = function(file) { file.copy(cwd.get(“test.bak”)); } We’re working on other components as well! IMAGE SOCKET JS

Example: var cwd = o3.cwd; var file = cwd.get(“test.txt”); file.onchange = function(file) { file.copy(cwd.get(“test.bak”)); }

We’re working on other components as well!

IMAGE

SOCKET

JS

Putting it together Wait for update from XMPP server (using HTTP) Parse XMPP data (using XML) Calculate traffic patterns (using trip generation) Notify server of changes (using HTTP)

Wait for update from XMPP server (using HTTP)

Parse XMPP data (using XML)

Calculate traffic patterns (using trip generation)

Notify server of changes (using HTTP)

Thank you!