Embedding V8 in Android apps with Ejecta-V8
1 like279 views
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.
![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](https://image.slidesharecdn.com/presentationtng-180813085158/85/Embedding-V8-in-Android-apps-with-Ejecta-V8-26-320.jpg)
Embedding V8 in Android apps with Ejecta-V8
- 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