How I learned to stop worrying and love embedding JavaScript
Upcoming SlideShare
Loading in...5
×
 

How I learned to stop worrying and love embedding JavaScript

on

  • 145 views

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.

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.

Statistics

Views

Total Views
145
Views on SlideShare
143
Embed Views
2

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 2

https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How I learned to stop worrying and love embedding JavaScript How I learned to stop worrying and love embedding JavaScript Presentation Transcript

    • 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
    • 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 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/
    • 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 & feel achievable • 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 requests execute 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 @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