Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bridging the GapJeff Harrell, UIE Architect at PayPal
PayPal recently adopted JavaScript templating 1. Increase the speed of design iterations 2. Separate concerns between UI a...
Increasing the speed of design iterations is important 1. Extremely quick to build out experiments 2. Test high fidelity d...
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 U...
Getting there Dust to the rescue!
Started with our ideal UI stack – node.js and Dust    1. Great for prototype and iteration speed    2. Engineers comfortab...
Prototyping speed has improved, but...Still have 10+ years of existing and legacy code                                    ...
Looked at our existing technology stack – Java and JSPJSP 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   import   java.util.HashMap;   import   java.io.PrintWriter;   import   org.codehaus...
New and improved – Java and JSP DustDust 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   #include <string>   #include <map>   #include <dustjs.h>   using namespace std;   in...
New and improved – C++ and XSL DustDust UI code will be shared across node.js, Java and C++
Now, Dust UI code is usable across all stacks1. DRY for your UI2. UI is portable across applications and partials sharable...
Thank You  @juxtajeff
Upcoming SlideShare
Loading in …5
×

Bridging the Gap with Dust.js

7,662 views

Published on

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.

Published in: Technology
  • Be the first to comment

Bridging the Gap with Dust.js

  1. Bridging the GapJeff 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 JSPJSP 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 DustDust 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 DustDust UI code will be shared across node.js, Java and C++
  17. Now, Dust UI code is usable across all stacks1. DRY for your UI2. UI is portable across applications and partials sharable3. Prototypes in same technology as production
  18. Thank You @juxtajeff

×