The document discusses embedding JavaScript in native applications, highlighting benefits, use cases, and implementation strategies. It covers various approaches, such as re-implementing native features, simplifying versions, and using embedded JavaScript virtual machines, while addressing performance and compatibility issues. By showcasing examples and demos, it concludes that embedding JavaScript can lead to significant performance gains and enhanced user experience, albeit with potential initial overhead.

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