View
231
Download
0
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
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
Recommended