Bridging the Gap with Dust.js
Download as PPT, PDF
1 like6,456 views
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.
![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](https://image.slidesharecdn.com/bridgingthegap-130329004918-phpapp02/85/Bridging-the-Gap-with-Dust-js-11-320.jpg)
![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](https://image.slidesharecdn.com/bridgingthegap-130329004918-phpapp02/85/Bridging-the-Gap-with-Dust-js-15-320.jpg)
Bridging the Gap with Dust.js
- 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.jsandDust 1.Greatforprototypeanditerationspeed 2.Engineerscomfortablemovingbetweenlayers 3.Dustisrenderableonthebrowser,node.jsandmore Dust Node.js Browser
- 8. Prototyping speed has improved, but... Stillhave10+yearsofexistingandlegacycode JSP L XS
- 9. Looked at our existing technology stack JavaandJSP JSPiterationspeedisntbad,butnotideal
- 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. Were 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