72
A friend in need - a JS indeed +

a friend in need-a js indeed / Yonatan levin

Embed Size (px)

Citation preview

Page 1: a friend in need-a js indeed / Yonatan levin

A friend in need - a JS indeed+

Page 2: a friend in need-a js indeed / Yonatan levin

Yonatan Levin

levin.yonatan

parahall

Gett

Google Developer Expert

Page 3: a friend in need-a js indeed / Yonatan levin

70 Cities > 20M usersRuby, Go, Python, Microservices

Page 4: a friend in need-a js indeed / Yonatan levin

~ 2000 members Largest Android Active Community

Page 5: a friend in need-a js indeed / Yonatan levin

What Do We Do?

● Android Fundamentals

● Android UI / UX

● Community Hackathon

● Android Performance

● Mentors Program● Active community

Page 6: a friend in need-a js indeed / Yonatan levin

What we are going to do?

Fun!

GetTaxi Gett story

V8 engine

Dynamic UI Concept

Page 7: a friend in need-a js indeed / Yonatan levin

Let’s make it even more engaging

Page 8: a friend in need-a js indeed / Yonatan levin

Count how many times word Gett

appears in the presentation

Page 9: a friend in need-a js indeed / Yonatan levin

Let the fun begin!

Page 10: a friend in need-a js indeed / Yonatan levin
Page 11: a friend in need-a js indeed / Yonatan levin
Page 12: a friend in need-a js indeed / Yonatan levin
Page 13: a friend in need-a js indeed / Yonatan levin

Imagine...

Page 14: a friend in need-a js indeed / Yonatan levin
Page 15: a friend in need-a js indeed / Yonatan levin
Page 16: a friend in need-a js indeed / Yonatan levin
Page 17: a friend in need-a js indeed / Yonatan levin

Slide about Gett

Page 18: a friend in need-a js indeed / Yonatan levin
Page 19: a friend in need-a js indeed / Yonatan levin
Page 20: a friend in need-a js indeed / Yonatan levin
Page 21: a friend in need-a js indeed / Yonatan levin

Intro - Normal World

Customer AppiOS / Android

Server

Supplier AppiOS / Android

Page 22: a friend in need-a js indeed / Yonatan levin

Offline/2G

Page 23: a friend in need-a js indeed / Yonatan levin

Our World

Server

Customer AppiOS / Android

Supplier AppiOS / Android

Page 24: a friend in need-a js indeed / Yonatan levin
Page 25: a friend in need-a js indeed / Yonatan levin

Ability to calculate price without server instantly

Page 26: a friend in need-a js indeed / Yonatan levin

First approach

Server

Pricing Calculator

Pricing Calculator

Supplier AppiOS / Android

Page 27: a friend in need-a js indeed / Yonatan levin

Same logic - 4 times

Server

Pricing Calculator

Pricing Calculator

Pricing Calculator

Pricing Calculator

Page 28: a friend in need-a js indeed / Yonatan levin

Product guy:- We need an ability to create a new class

every day.- Every single moment!

Page 29: a friend in need-a js indeed / Yonatan levin

Pain of Upgrade

Page 30: a friend in need-a js indeed / Yonatan levin

“Fool me once, shame on you; fool me twice, shame on me.”

Italian proverb

Page 31: a friend in need-a js indeed / Yonatan levin

Server creates Pricing Calculator

Pricing Calculator Gem

JS Code

Ruby Code

Page 32: a friend in need-a js indeed / Yonatan levin

Runtime Flow

App Server Container (Rails)Pricing Calculator Gem

JS Code

Ruby Code

Load JSPricing Calculator

Server-side Calculation API

Supplier AppiOS / Android

JS Runtime

JS Pricing Calculator

Page 33: a friend in need-a js indeed / Yonatan levin

Different Capabilities of Execution Context

Pricing Calculator

(Ruby)

ServerNetwork CallNetwork Call

Supplier AppiOS / Android

JS Runtime

JS Pricing Calculator

Page 34: a friend in need-a js indeed / Yonatan levin

Architecture is ready.What next?

Page 35: a friend in need-a js indeed / Yonatan levin

WebView

Page 36: a friend in need-a js indeed / Yonatan levin

JavaScript

final String javaScriptCode = "var recursive = function(n) {"

+ " if(n <= 2) {"

+ " return 1;"

+ " } else {"

+ " return this.recursive(n - 1) + this.recursive(n - 2);"

+ " }"

+ "};"

+ "recursive(28)";

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

mWebView.evaluateJavascript(javaScriptCode, this);

Page 37: a friend in need-a js indeed / Yonatan levin
Page 38: a friend in need-a js indeed / Yonatan levin

Average Top Device: ~42 msAverage Low End Device: ~92 ms

Page 39: a friend in need-a js indeed / Yonatan levin

WebView Various version

Depends on what is installed on device

Not controllable

We have a lot of “Made in China” devices

Page 40: a friend in need-a js indeed / Yonatan levin

We love native-development

Page 41: a friend in need-a js indeed / Yonatan levin

V8

Page 42: a friend in need-a js indeed / Yonatan levin

V8

V8 is Google's open source high-performance JavaScript engine, written in C++ and used in Google Chrome

And also Node.JS

https://developers.google.com/v8/

Page 43: a friend in need-a js indeed / Yonatan levin

You can use it native

https://github.com/v8/v8/wiki/D8%20on%20Android

Page 44: a friend in need-a js indeed / Yonatan levin
Page 45: a friend in need-a js indeed / Yonatan levin

Write some JNI codeV8Runner::V8Runner () {

isolate = Isolate::New();

Locker l(isolate);

Isolate::Scope isolateScope(isolate);

HandleScope handle_scope;

context = Persistent<Context>(Context::New());

}

void V8Runner::mapMethod (JNIEnv* env, jobject v8MappableMethod, const char* name) {

Locker l(isolate);

Isolate::Scope isolateScope(isolate);

HandleScope handle_scope;

Context::Scope context_scope(context);

MappableMethodData* data = new MappableMethodData();

data->methodObject = env->NewGlobalRef(v8MappableMethod);

env->GetJavaVM(&data->jvm);

methodDatas.push_back(data);

//context->DetachGlobal();

Handle<Object> global = context->Global();

global->Set(String::New(name), FunctionTemplate::New(&registerCallback, External::New(data))->GetFunction());

//context->ReattachGlobal(global);

}

Page 46: a friend in need-a js indeed / Yonatan levin

Eclipse J2V8

Small tiny library

Wrapper for JNI

Really easy to integrate and use

Page 47: a friend in need-a js indeed / Yonatan levin

How to?

compile 'com.eclipsesource.j2v8:j2v8:3.1.6@aar'

mRuntime = V8.createV8Runtime();

int value = mRuntime.executeIntegerScript(javaScriptCode);

mRuntime.executeStringScript(javaScriptCode);

mRuntime.executeObjectScript(javaScriptCode);

Page 48: a friend in need-a js indeed / Yonatan levin
Page 49: a friend in need-a js indeed / Yonatan levin

~23 ms

Page 50: a friend in need-a js indeed / Yonatan levin
Page 51: a friend in need-a js indeed / Yonatan levin

Back to Gett story

Page 52: a friend in need-a js indeed / Yonatan levin

Download calculator on login

Server

Pricing CalculatorPricing

Calculator

Page 53: a friend in need-a js indeed / Yonatan levin

public VoidResponse downloadChargingEngine(String fileName, String filePath) {

retrofit2.Call<ResponseBody> call = mGTServiceApi

.downloadChargingEngine(ChargingEngine.VERSION);

return getToFile(call, fileName, filePath, VoidResponse.class);

}

Page 54: a friend in need-a js indeed / Yonatan levin

JavascriptMeterComponent

J2V8JavascriptEngine

Warm your engines

J2V8

Pricing Calculator

Page 55: a friend in need-a js indeed / Yonatan levin

Start your enginesprotected static JavascriptMeterComponent createJavaScriptComponent(String

javascriptFilePath) {

J2V8JavascriptEngine javascriptEngine = new J2V8JavascriptEngine();

JavascriptMeterComponent javascriptMeterComponent = new

JavascriptMeterComponent(javascriptEngine);

File file = new File(javascriptFilePath,J2V8JavascriptEngine.J2V8JavascriptFileName);

javascriptMeterComponent

.loadChargingEngine(new java.io.FileInputStream(file));

return javascriptMeterComponent;

}

Page 56: a friend in need-a js indeed / Yonatan levin

JavascriptMeterComponent

J2V8JavascriptEngine

Run!!!!

J2V8

“calculate_and_adapt”Ride data

Price (JSON)

Page 57: a friend in need-a js indeed / Yonatan levin

Calculate

public CalculationResult calculateAndAdaptOrderCost(Data data, String priceModel,

String areasFixedPrice) {

String rideData = mGson.toJson(data);

String calculationAsJson = mJavascriptEngine

.executeMethodOnObject("$calculate_and_adapt",rideData);

return mGson.fromJson(calculationAsJson, CalculationResult.class);

}

Page 58: a friend in need-a js indeed / Yonatan levin

Wait, but where is the magic?

Page 59: a friend in need-a js indeed / Yonatan levin

Taxi Cleaner iMaster

Page 60: a friend in need-a js indeed / Yonatan levin

“adapt” that turns the raw data to UI key-value

public class CalculationResult {

private List<List<BreakdownRow>> breakdown;

private Totals totals;

}

Page 61: a friend in need-a js indeed / Yonatan levin

“adapt” that turns the raw data to UI key-value

public class BreakdownRow {

String label;

String value;

@SerializedName("valueIsMonetary")

boolean valueIsMonetary;

String description;

}

Page 62: a friend in need-a js indeed / Yonatan levin

Flat and insert to list

private void convertRowsToItems(List<List<OrderBreakdown.BreakdownRow>> breakdown) {

List<RowItem> rowsItemsList = new ArrayList<>();

// flat the rows - show all row as an item

for (List<OrderBreakdown.BreakdownRow> breakDownRowArray : breakdown) {

for (OrderBreakdown.BreakdownRow breakdownRow : breakDownRowArray) {

String description = breakdownRow.getDescription();

String RowLabel = breakdownRow.getLabel();

rowsItemsList.add(new RowItem(RowLabel, breakdownRow.getValue(),

breakdownRow.isSummary(), breakdownRow.isValueIsMonetary()));

}

}

Page 63: a friend in need-a js indeed / Yonatan levin

Taxi Cleaner iMaster

Page 64: a friend in need-a js indeed / Yonatan levin

So what we had

V8 Engine

Business pricing logic outsourced to the server

UI is no longer tightly coupled to the fields but built

dynamically

#PerfMatters

Page 65: a friend in need-a js indeed / Yonatan levin

Launched Jul 2015

Moscow, Marathon of 4 dev days launching.

Page 66: a friend in need-a js indeed / Yonatan levin

2 AM

Proguard cut our JNI Java Side :)

Page 67: a friend in need-a js indeed / Yonatan levin

Return Val;

Almost 1.5 year in production.

0 performance issues.

Page 68: a friend in need-a js indeed / Yonatan levin

Server

Pricing CalculatorPricing

Calculator

Download calculator from server

Page 69: a friend in need-a js indeed / Yonatan levin

“It’s not us, it’s server”

Page 70: a friend in need-a js indeed / Yonatan levin

Q?

Page 71: a friend in need-a js indeed / Yonatan levin

What about Quizz?

Page 72: a friend in need-a js indeed / Yonatan levin

parahall