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.

1. Bridging the Gap
Jeff Harrell, UIE Architect at PayPal

2. 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

3. 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

4. Increasing the speed of design iterations is important
{code}

5. Bridging technology gaps
1. Prototype one stack, production another = broken model
2. Three application stacks and three UI technologies
+
Prototype Dust JSP XSL

6. Getting there
Dust to the rescue!

7. 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.js
Browser

8. Prototyping speed has improved, but...
Still have 10+ years of existing and legacy code
JSP
L
XS

9. Looked at our existing technology stack – Java and JSP
JSP iteration speed isn’t bad, but not ideal

10. So we...
1. Embedded Rhino for a JavaScript environment
2. Have replaced JSP with Dust templates

11. New and improved – Java and JSP Dust
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);
}
}
https://gist.github.com/vybs/1624130

12. New and improved – Java and JSP Dust
Dust UI code is shared across node.js and Java

13. Large amount of code on legacy stack – XSL and C++
XSL iteration speed is poor

14. We’re exploring...
1. Embedding V8 for a JavaScript environment
2. Replacing XSL with Dust templates

15. New and improved – C++ and XSL Dust
#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);
}
https://github.com/jeffharrell/DustJsCpp

16. New and improved – C++ and XSL Dust
Dust UI code will be shared across node.js, Java and C++

17. 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

18. Thank You
@juxtajeff