How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and
love embedding JavaScript
...
How I learned to stop worrying and love embedding JavaScript
Welcome
Topic:
Reusing existing Javascript code by embedding ...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
About us
Company: BörseGo AG
We operate finance-centric porta...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
Motivation
Goal: Create second-gen mobile apps for iOS and
An...
How I learned to stop worrying and love embedding JavaScript
Motivation
“Web” charting is complex and powerful
– JS tool t...
How I learned to stop worrying and love embedding JavaScript
Possible approaches - background
Data needed when considering...
How I learned to stop worrying and love embedding JavaScript
Con
• Expensive and time-
consuming to
implement
• >= 3x main...
How I learned to stop worrying and love embedding JavaScript
Possible approaches: #2 Simplified native version
#2 Re-imple...
How I learned to stop worrying and love embedding JavaScript
Possible approaches: #3 - embed in web browser
#3 Embed web b...
How I learned to stop worrying and love embedding JavaScript
Con
• Performance issues
• Platform differences
– No calls fr...
How I learned to stop worrying and love embedding JavaScript
Possible approaches: #4 - embedding JavaScript VM
#4 Embed JS...
How I learned to stop worrying and love embedding JavaScript
Con
• Initially high
implementation
overhead
• Platform diffe...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #1 - Evaluating Code
Step #1:
Evaluatin...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #1 - Evaluating Code
APP
JSContext
Java...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #2 - Adding APIs
Step #2:
Extending Con...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #2 - Adding APIs
APP
JSContext
JavaScri...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #3 - Required Modules
Step #3:
Identify...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #3 - Required Modules
Canvas Module
• R...
How I learned to stop worrying and love embedding JavaScript
Embedding JavaScript: #3 - Required Modules
APP
JSContext
Jav...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
Implementation Specifics: platform differences
Major platform...
How I learned to stop worrying and love embedding JavaScript
Objective-C / C
JNI (C / C++)
Dalvik VM (Java)
Implementation...
How I learned to stop worrying and love embedding JavaScript
Implementation Specifics: v8 interpreter API
use namespace v8...
How I learned to stop worrying and love embedding JavaScript
var canvas, context;
function animate () {
context.fillStyle ...
How I learned to stop worrying and love embedding JavaScript
:JS Code :JSContext :JSView :OpenGL
Implementation Specifics:...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
Demo - Example #1
Example #1: Ejecta sample app
=> Graphicall...
How I learned to stop worrying and love embedding JavaScript
Demo - Example #2
Example #2: Guidants Mobile
• Universal App...
How I learned to stop worrying and love embedding JavaScript
Agenda
Introduction
Motivation
Embedding JavaScript
Implement...
How I learned to stop worrying and love embedding JavaScript
• High gains with respect to
• Performance
• Integration with...
Upcoming SlideShare
Loading in...5
×

How I learned to stop worrying and love embedding JavaScript

507

Published on

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.

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How I learned to stop worrying and love embedding JavaScript

  1. 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. 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. 3. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  4. 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. 5. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  16. 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. 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. 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. 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. 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. 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. 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. 23. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  24. 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. 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. 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. 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. 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. 29. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  30. 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. 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. 32. How I learned to stop worrying and love embedding JavaScript Agenda Introduction Motivation Embedding JavaScript Implementation Specifics Demo Conclusion
  33. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×