How I learned to stop worrying and love embedding JavaScript
2 likes1,458 views
The document discusses the advantages and methods of embedding JavaScript in native mobile applications to enhance user experience and functionality, particularly in finance-centric apps. It outlines various implementation approaches, their benefits and drawbacks, and provides details on architectural specifics for both iOS and Android platforms. The presentation concludes with examples demonstrating performance improvements and integration capabilities of JavaScript within native frameworks.
![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-140618080315-phpapp01/85/How-I-learned-to-stop-worrying-and-love-embedding-JavaScript-26-320.jpg)
How I learned to stop worrying and love embedding JavaScript
- 1. How I learned to stop worrying and love embedding JavaScript How I learned to stop worrying and love embedding JavaScript Kevin Read @unverbraucht [email protected] http://gplus.to/unverbraucht Martin Kleinhans @mklhs [email protected] 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 [email protected] http://gplus.to/unverbraucht Martin Kleinhans @mklhs [email protected] http://gplus.to/mklhs Slides: bit.ly/myrjs For code, go to: github.com/godmodelabs/ejecta-v8