How I learned to stop worrying and love embedding JavaScript

How I learned to stop worrying andlove embedding JavaScript

Kevin Read@unverbrauchtkread@boerse-go.dehttp://gplus.to/unverbraucht

Martin Kleinhans@mklhs

mkleinhans@boerse-go.dehttp://gplus.to/mklhs

How I learned to stop worrying and love embedding JavaScript

Welcome

Topic:Reusing existing Javascript code by embedding it in native applications.

Questions we aim to answer:

● Why? - Benefits.

● When? - Use cases and show-stoppers.

● How? - Architecture and implementation.

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

About us

Company: BörseGo AG

We operate finance-centric portals onthe web and mobile.We also provide SAAS (e.g. to banks)

Focus on chart analysis and real-time data

Examples?http://www.guidants.com/http://www.godmode-trader.de/

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

Motivation

Goal: Create second-gen mobile apps for iOS and Android (for now).

• Features needed:

– Real-time quotes – Information on stocks.. – News

– Interactive Finance Charts

✔✔

?✔

How I learned to stop worrying and love embedding JavaScript

Motivation

“Web” charting is complex and powerful

– JS tool that renders via Canvas

– Real-time quotes via websocket

– Gazillion indicators and tools

– Interactive zoom/translate/…

=> Demo

Ideally, mobile contains the same features.

How I learned to stop worrying and love embedding JavaScript

Possible approaches - background

Data needed when considering implementation details:

• JS code has 35k LOC (w/o blank and comment)

• Two man years of work

• Extensive chart analysis knowledge and math skills needed

• Code is updated frequently

• Backwards and (limited) forwards compatibility for user-data needed

How I learned to stop worrying and love embedding JavaScript

Con

• Expensive and time-consuming to implement

• >= 3x maintenance overhead

– All versions need to be released in lock-step

Possible approaches: #1 - reimplement

Pro

• Native look & feel

• High performance

• Easy to integrate in native apps

#1 Re-implement for all platforms natively

✘

How I learned to stop worrying and love embedding JavaScript

Possible approaches: #2 Simplified native version

#2 Re-implement only subset natively

Pro

• Native look & feel

• High performance

• Easy to integrate in native apps

• Feasible amount of work

Con

• User confusion and dissatisfaction

• Loose main USP

✘

How I learned to stop worrying and love embedding JavaScript

Possible approaches: #3 - embed in web browser

#3 Embed web browser with existing JS

APP

WebView

JavaScript Interpreter

Existing JS code

HTML interface mimicking native look & feel

How I learned to stop worrying and love embedding JavaScript

Con

• Performance issues

• Platform differences

– No calls from JS to native on iOS!

• native look & feel difficult

Possible approaches: #3 - embed in web browser

Pro

• Easy to get started

• Very high code re-use

#3 Embed web browser with existing JS

✘

How I learned to stop worrying and love embedding JavaScript

Possible approaches: #4 - embedding JavaScript VM

#4 Embed JS VM directly w/o browser

• Feasibility of approach proven by

– NodeJS

– Titanium

• For interactive apps only POC existed in 2012

How I learned to stop worrying and love embedding JavaScript

Con

• Initially high implementation overhead

• Platform differences

Pro

• High performance

• JS code reusable

• Native look & feelachievable

• Code updates at runtime

Possible approaches: #4 - embedding JavaScript VM

#4 Embed JS VM directly w/o browser

✔

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #1 - Evaluating Code

Step #1:Evaluating simple JavaScript Code

Core Component: JavaScript Interpreter

• Android: V8• iOS: JavaScriptCore (JSC)

• No JIT (Sandbox restriction)

=> Provides basic language features only

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #1 - Evaluating Code

APP

JSContext

JavaScript Interpreter

function foo() {return Math.min(1, 2);

}

Math, Date, String, Array, Object, ...

Code: API:

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #2 - Adding APIs

Step #2:Extending Context with more APIs

APIs provided by Browser:

• console, setTimeout, setInterval,requestAnimationFrame ...

Custom APIs:

=> NodeJS compatible module system

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #2 - Adding APIs

APP

JSContext

JavaScript Interpreter

var library = require(“foo”);console.log( foo.bar() );

Math, Date, String, Array, Object, … console, setInterval, setTimeout, …requestAnimationFrame, … require

Code: API:

Module*

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #3 - Required Modules

Step #3:Identifying and implementing required modules

Charting needs:

• NO HTML / DOM!

• XMLHttpRequest (AJAX)

• WebSockets

• Canvas

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #3 - Required Modules

Canvas Module

• Renders to View objects in UI layer

• Implements full 2d-Context spec (almost)

• Backed by OpenGL ES

• Prototype: Own Implementation

• Switched to open source library: Ejecta

•Contributed & Ported to android

•Available on github

How I learned to stop worrying and love embedding JavaScript

Embedding JavaScript: #3 - Required Modules

APP

JSContext

JavaScript Interpreter

var canvas = new (require(“canvas”))(view);var context = canvas.getContext(“2d”);view.on(“redraw”) {

context.fillRect(0,0,50,50);}

Math, Date, String, Array, Object, … console, setInterval, setTimeout, … require

Code: API:

Module*

ModuleCanvas

ModuleAJAX

…

JSView

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

Implementation Specifics: platform differences

Major platform differences

• Different JS Interpreters

• Different Languages (Java vs Obj-C)

• Different SDK (UI Toolkits, etc...)

• v8 is C++ => JNI (painful)

– Additional abstraction layer: 50% more LOC• Android: OpenGL on own thread

– all extensions to v8 must be thread-safe

=> two separate frameworks

How I learned to stop worrying and love embedding JavaScript

Objective-C / C

JNI (C / C++)

Dalvik VM (Java)

Implementation Specifics: architectural differences

APP

JSContext

JavaScript Interpreter

Sample_Application.js

Browser

APP

JSContext

v8Helper

iOS AndroidWeb

JSView

ModulesModules

JSView

* *

How I learned to stop worrying and love embedding JavaScript

Implementation Specifics: v8 interpreter API

use namespace v8;

static Handle<Value> log(const Arguments& args) {std::cout << “log: “ << *(String::Utf8Value(args[0]));

return v8::Undefined();}

void main() {Local<FunctionTemplate> console = FunctionTemplate::New();console->Set("log", FunctionTemplate::New(log));

Handle<ObjectTemplate> global = ObjectTemplate::New();global->Set(String::New("console"), console);

Context ctx = Context::New(NULL, global);

Script::Compile(String::New(“console.log(‘Hello World!’);”),String::New("demo.js")

)->Run();}

v8 API

How I learned to stop worrying and love embedding JavaScript

var canvas, context;

function animate () {context.fillStyle = “#f00”;context.fillText(“Hello world!”, 10, 10);

};

function start ( view ) {if ( view ) {

canvas = new (require(“canvas”))(view);} else {

canvas = document.getElementById(“canvas”);}

context = canvas.getContext(“2d”);

requestAnimationFrame(animate);}

if ( typeof document != “undefined” ) {start();

}

Implementation Specifics: sample Application

Sample.js

How I learned to stop worrying and love embedding JavaScript

:JS Code :JSContext :JSView :OpenGL

Implementation Specifics: rendering sequence

load script

requestAnimationFrame(cb) request view refresh

glDrawArrays, ...

run animation requestsexecute JS (cb)

draw

flipPage

fillText

triangles added to list

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

Demo - Example #1

Example #1: Ejecta sample app

=> Graphically intense JS apps see big gains.

Android: Acer Iconia A100 (Tegra 2, Android 4)

• Chrome 29: 14 - 16 fps

• Embedded: ~45 fps

iOS: iPad Mini

• Safari: 17 fps• Embedded: 60fps

+350%

+280%

How I learned to stop worrying and love embedding JavaScript

Demo - Example #2

Example #2: Guidants Mobile

• Universal App for Tablet/Smartphone• For iOS and Android• Uses multiple JavaScript-driven Views

• SAME JavaScript files used in• App• NodeJS• Browser

How I learned to stop worrying and love embedding JavaScript

Agenda

Introduction

Motivation

Embedding JavaScript

Implementation Specifics

Demo

Conclusion

How I learned to stop worrying and love embedding JavaScript

• High gains with respect to• Performance• Integration with native UI as base for UX

• Most benefits when heavy lifting done outside of JS• Possible high initial implementation overhead

Thanks!

Conclusion

Kevin Read@unverbrauchtkread@boerse-go.dehttp://gplus.to/unverbraucht

Martin Kleinhans@mklhs

mkleinhans@boerse-go.dehttp://gplus.to/mklhs

Slides:

bit.ly/myrjs

For code, go to:github.com/godmodelabs/ejecta-v8