bridging the gap with dust.js
DESCRIPTION
Jeff Harrell from PayPal talks about how he and his team are using Dust and JavaScript templating to enable rapid, Lean UX development from prototype to production, and to bridge their node.js, C++ and Java UI technology stacks.TRANSCRIPT
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