SlideShare a Scribd company logo
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

More Related Content

What's hot

On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
Dave Bouwman
 
Java vs javascript (XPages)
Java vs javascript (XPages)Java vs javascript (XPages)
Java vs javascript (XPages)
Andrew Barickman
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
Christian Heilmann
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
gdgvietnam
 
Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and Beyond
Spike Brehm
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
Sriram Angajala
 
Node.JS error handling best practices
Node.JS error handling best practicesNode.JS error handling best practices
Node.JS error handling best practices
Yoni Goldberg
 
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databindingDev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Stuart Lodge
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
jeresig
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
Mats Bryntse
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
Gary Arora
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
Mats Bryntse
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Alan Richardson
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
 
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Роман Лютиков "Web Apps Performance & JavaScript Compilers"Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Fwdays
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
Doris Chen
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
alexsaves
 

What's hot (20)

On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
 
Usability in the GeoWeb
Usability in the GeoWebUsability in the GeoWeb
Usability in the GeoWeb
 
Java vs javascript (XPages)
Java vs javascript (XPages)Java vs javascript (XPages)
Java vs javascript (XPages)
 
Maintainable Javascript carsonified
Maintainable Javascript carsonifiedMaintainable Javascript carsonified
Maintainable Javascript carsonified
 
gDayX - Advanced angularjs
gDayX - Advanced angularjsgDayX - Advanced angularjs
gDayX - Advanced angularjs
 
Building a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and BeyondBuilding a Single-Page App: Backbone, Node.js, and Beyond
Building a Single-Page App: Backbone, Node.js, and Beyond
 
Nightwatch JS for End to End Tests
Nightwatch JS for End to End TestsNightwatch JS for End to End Tests
Nightwatch JS for End to End Tests
 
Node.JS error handling best practices
Node.JS error handling best practicesNode.JS error handling best practices
Node.JS error handling best practices
 
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databindingDev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
Dev evening - MonoTouch, MonoDroid, Mvvm MvvmCross and databinding
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Роман Лютиков "Web Apps Performance & JavaScript Compilers"Роман Лютиков "Web Apps Performance & JavaScript Compilers"
Роман Лютиков "Web Apps Performance & JavaScript Compilers"
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 

Similar to Embedding V8 in Android apps with Ejecta-V8

Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
Spike Brehm
 
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
Node azure
Node azureNode azure
Node azure
Emanuele DelBono
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
JohnLagman3
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
 
Nativescript with angular 2
Nativescript with angular 2Nativescript with angular 2
Nativescript with angular 2
Christoffer Noring
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
Christian Heilmann
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
William Myers
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
Speedment, Inc.
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
Malin Weiss
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
Mark Fayngersh
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Bramus Van Damme
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
Ran Mizrahi
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
Ran Mizrahi
 
Dust.js
Dust.jsDust.js
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
George Nguyen
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin German
Adam Boczek
 

Similar to Embedding V8 in Android apps with Ejecta-V8 (20)

Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
 
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
 
Node azure
Node azureNode azure
Node azure
 
8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation8.-Javascript-report powerpoint presentation
8.-Javascript-report powerpoint presentation
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Nativescript with angular 2
Nativescript with angular 2Nativescript with angular 2
Nativescript with angular 2
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
Dust.js
Dust.jsDust.js
Dust.js
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin German
 

Recently uploaded

Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
Jhone kinadey
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
VictoriaMetrics
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
gapen1
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
Ortus Solutions, Corp
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
mohitd6
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
widenerjobeyrl638
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
kalichargn70th171
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
campbellclarkson
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
michniczscribd
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
Anand Bagmar
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio, Inc.
 

Recently uploaded (20)

Boost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management AppsBoost Your Savings with These Money Management Apps
Boost Your Savings with These Money Management Apps
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
如何办理(hull学位证书)英国赫尔大学毕业证硕士文凭原版一模一样
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
bgiolcb
bgiolcbbgiolcb
bgiolcb
 
The Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdfThe Role of DevOps in Digital Transformation.pdf
The Role of DevOps in Digital Transformation.pdf
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
 

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