Browser and C++ guy.Work with JS engine API or

Agenda:

Why C++? What is browser? Interpreters in general. JS engines in general. Spidermonkey API.

About me :)Why C++ dev is talking about browser?

Which languages Ive used

C++

C# JS

Java

Not a C++??

Obj-CJS

How I learn new technology.

What is it? Advantages? What alike? History? How it is made? How to get started?

Why C++?Why for Browser? Why at all?

C++ developer stereotype.

C++ language stereotype.

C++11. New cool features.

auto for-in loop smart pointers lambdas move semantic and much much more...

So, why would you choose C++ for your next project?

performance sensitive app

use all powerful of low level OS features

use libs with C++ API only(JS engine, Google protobuf)

cross platform

What is browser?Tool to watch serials online?

Browseris a tool for work with

remote(or cached) content.

Place your screenshot here

Browser(Layout) engine

Web browser UI

Email client UI

WebView API (Objective-C,

Java, C#)

The most popular browser(layout) engines.

Blink Chrome Google C++

Gecko Firefox Mozilla C++

WebKit Safari Apple C++

Trident IE Microsoft C++

Browser components.

Page loading process.

1.

1. Enter URL.

2. If HTML - pass to render engine, parse it tag by tag.

3. If script or style needed - load it.2.

3.

4. Execute script.5. Constructing DOM and render tree.

6. Store smth.

4. 5.

6.

Execute script abstract algorithm.

void executeStript(name, globalContext) {

auto window = getObject(globalContext, "window");

auto script = hasCompiled(name + ".jsc") ? getCompiled(name + ".jsc") : compile(name);

execute(window, script); }

What is interpreter?Like a translator, but cooler.

Interpreteris a computer program that directly executes, i.e. performs, instructions written in a programming or scripting language, without previously compiling them into a machine language program.

Examples.

LISP interpreter

PHP interpreter

CLR .NET

JavaVM

JS engine

How it works.

State machine

Script

Compile

=>

switch (nextStatement) { case if: // wait condition case break: // exit from the loop .}

Execute

JS engines.

JS engines.

V8 Chrome Google C++

Spidermonkey Firefox Mozilla C/C++

JavaScriptCore (Nitro) Safari Apple C++

JScript IE Microsoft C++

Where are they used.

browser engines

SPA frameworks with native UI

(ReactNative, NativeScript, other)

to expose core to JS - make JS API

(cocos2d-js)

How to import engine into your program.

link like usual library

import sources

JS engine API. Minimal program with Spidermonkey.

int main(int argc, const char *argv[]) {

if (!JS_Init()) return 1;

JSRuntime *rt = JS_NewRuntime(8L * 1024L * 1024L);

JSContext *cx = JS_NewContext(rt, 8192);

JS_SetErrorReporter(rt, reportError);

int status = run(cx);

JS_DestroyContext(cx);

JS_DestroyRuntime(rt);

JS_ShutDown();

return status;

}

JS engine API. Minimal program with V8.

int main(int argc, char* argv[]) {

V8::Initialize();

Isolate* isolate = Isolate::New();

Local context = Context::New(isolate);

Local script = Script::Compile(source);

Local result = script->Run();

isolate->Dispose();

V8::Dispose();

return 0;

}

Spidermonkey API.

Main Spidermonkey concepts.

Runtime is the space in which all objects, scripts are allocated

Context can do many things involving JavaScript code and objects

Global Object contains all the classes, functions, and variables that are available for JavaScript code to use

JS::Value can contain JavaScript values of any type.

How it works.

State machine

Script

Compile

=>Execute

C++

JS

Standard object library,

Global objects and functions,

Defining a function// JavaScriptfunction justForFun() { return null; }

// C++bool justForFun(JSContext *cx, unsigned argc, JS::Value *vp){ JS::CallArgs args = JS::CallArgsFromVp(argc, vp); args.rval().setNull(); return true;}if (!JS_DefineFunction(cx, global, "justForFun", &justForFun, 0, 0)) return false;

Creating an Array and Object.

// JavaScriptvar x = []; // or "x = Array()", or "x = new Array"var y = {}; // or "y = Object()", or "y = new Object"

// C++JS::RootedObject x(cx, JS_NewArrayObject(cx, 0));JS::RootedObject y(cx, JS_NewPlainObject(cx));

Define a class(custom object).

JSClass my_class = {"MyClass", options...};

...

JSObject *obj = JS_DefineObject(...);

...

JS_DefineProperties(cx, obj, my_props);

...

protoObj = JS_InitClass(cx, globalObj, nullptr, &my_class,

MyClass, 0,

my_props, my_methods,

my_static_props, my_static_methods);

How does browser create DOM and Render tree.

Extend Spidermonkey. Cocos2d-js.

helper functions;

exposed to JS cocos2d-x API;

imported bindings generator;

debugger

What are JS bindings in general.

gives JS API for C++ class;

convert JS calls and arguments to C++ ones

C++ JS

Bindings generator.

bool js_danube_WidgetJS_applyState(JSContext *cx, uint32_t argc, jsval *vp) {

...

JSObject *obj = JS_THIS_OBJECT(cx, vp);

js_proxy_t *proxy = jsb_get_js_proxy(obj);

Danube::WidgetJS* cobj = (Danube::WidgetJS *)(proxy ? proxy->ptr : NULL);

...

std::string arg0;

jsval_to_std_string(cx, argv[0], &arg0);

cobj->applyState(arg0);

JS_SET_RVAL(cx, vp, JSVAL_VOID);

...

}

Thanks!

P.S. What next? 1. Bindings(JNI, C++ and Obj-C, other). 2. Google protobuf in Web Services.