Embed your Javascript code in your native mobile app for fun and profit. We showcase our approach to embed Canvas-heavy interactive JS code within our iOS and Android app.

1. How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and
love embedding JavaScript
Kevin Read
@unverbraucht
kread@boerse-go.de
http://gplus.to/unverbraucht
Martin Kleinhans
@mklhs
mkleinhans@boerse-go.de
http://gplus.to/mklhs

2. 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.

3. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

4. How I learned to stop worrying and love embedding JavaScript
About us
Company: BörseGo AG
We operate finance-centric portals on
the 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/

5. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

6. 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
✔
✔
?
✔

7. 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.

8. 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

9. 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
✘

10. 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
✘

11. 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

12. 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
✘

13. 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

14. 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 & feel
achievable
• Code updates at
runtime
Possible approaches: #4 - embedding JavaScript VM
#4 Embed JS VM directly w/o browser
✔

15. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

16. 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

17. 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:

18. 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

19. 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*

20. 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

21. 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

22. 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

23. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

24. 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

25. 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
* *

26. 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

27. 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

28. 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 requests
execute JS (cb)
draw
flipPage
fillText
triangles added to list

29. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

30. 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%

31. 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

32. How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implementation Specifics
Demo
Conclusion

33. 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
@unverbraucht
kread@boerse-go.de
http://gplus.to/unverbraucht
Martin Kleinhans
@mklhs
mkleinhans@boerse-go.de
http://gplus.to/mklhs
Slides:
bit.ly/myrjs
For code, go to:
github.com/godmodelabs/ejecta-v8