Bridging the Gap

Jeff Harrell, UIE Architect at PayPal

PayPal recently adopted JavaScript templating

1. Increase the speed of design iterations

2. Separate concerns between UI and application

3. Bridge technology gaps in our current app stacks

Increasing the speed of design iterations is important

1. Extremely quick to build out experiments

2. Test high fidelity design + code on users

3. Rinse and repeat

Increasing the speed of design iterations is important

{code}

Bridging technology gaps

1. Prototype one stack, production another = broken model

2. Three application stacks and three UI technologies

Prototype Dust JSP XSL

+

Getting thereDust to the rescue!

Started with our ideal UI stack – node.js and Dust

1. Great for prototype and iteration speed

2. Engineers comfortable moving between “layers”

3. Dust is renderable on the browser, node.js and more

Dust

Node.jsBrowser

Prototyping speed has improved, but...

Still have 10+ years of existing and legacy code

XSL

JSP

Looked at our existing technology stack – Java and JSP

JSP iteration speed isn’t bad, but not ideal

So we...

1. Embedded Rhino for a JavaScript environment

2. Have replaced JSP with Dust templates

New and improved – Java and JSP Dust

https://gist.github.com/vybs/1624130

import java.util.HashMap;import java.io.PrintWriter;import org.codehaus.jackson.map.ObjectMapper;import com.paypal.dust.DustJs;

public class DustExample { public static void main(String[] args) throws Exception { PrintWriter writer = new PrintWriter(System.out, true);

HashMap<String, Object> model = new HashMap<String, Object>();

model.put("first_name", "Jeff"); model.put("last_name", "Harrell"); model.put("balance", 10);

DustJs.render("account", model, writer); }}

New and improved – Java and JSP Dust

Dust UI code is shared across node.js and Java

Large amount of code on legacy stack – XSL and C++

XSL iteration speed is poor

We’re exploring...

1. Embedding V8 for a JavaScript environment

2. Replacing XSL with Dust templates

New and improved – C++ and XSL Dust

https://github.com/jeffharrell/DustJsCpp

#include <string>#include <map>#include <dustjs.h>

using namespace std;

int main(int argc, char **argv) { map<string, string> model;

model["first_name"] = "Jeff"; model["last_name"] = "Harrell"; model["balance"] = 10;

return DustJs::render("account", model);}

New and improved – C++ and XSL Dust

Dust UI code will be shared across node.js, Java and C++

Now, Dust UI code is usable across all stacks

1. DRY for your UI

2. UI is portable across applications and partials sharable

3. Prototypes in same technology as production

Thank You@juxtajeff