Houdini

1. Houdini

2. Houdini Introduction About us The research problem The proposed solution One language for the web JavaScript Implementation Code partitioning Overview Architecture Demo Summary Future research Acknowledgments

3. About Us Introduction • The Hebrew University CS Internet Lab • Prof. Ari Rappaport • Assif Ziv, Graduate Student • Topology Algorithms Developer at HP • MEET staff alumni • Ohad Assulin, Graduate Student • W3 member, ECMA member • MEET staff alumni

4. Research Problem Introduction • Web development is difficult • Traditional web development requires: • Knowledge of at least two programming languages • Coding for multiple hosts • The consequences are: • Bad code readability • Glue code • Long development phase • The research objective: A simpler, practical language for web development

5. Proposed solution Introduction • Houdini code • Single language • JavaScript (Browser/Node.JS) • Unified code • Hidden network layer • SDK • Improved performance

6. // client side function login() { varuser = document.getElementById("userBox"); varpass = document.getElementById("passBox"); validate(user, pass); } function validate(user, pass) { if(user.length < 3 || pass.length < 3) print("Both username and password must be more than 2 characters"); else{ ajax.send({ method : "post", body : "user=" + user + "&pass=" + pass, success : loginResult(data) }); } }; functionloginResult(data) { if(data == true) print("We know you! Welcome back!"); else print("Not sure, try again!"); }; function print(info) { document.getElementById("printBox").innerHTML(info); }; // server side http.createServer(function(req, res) { varuser = req.parameters["user"]; varpass = req.parameters["pass"]; checkDb(user, pass, res); }).listen(80); functioncheckDb(user, pass, response) { db.query("select count(*) from users where user=? and pass=?“, [user, pass], function(result) { response.end(result.count); }); }; Traditional code

7. @clientOnly function login(){ varuser = document.getElementById("userBox"); varpass = document.getElementById("passBox"); validate(user, pass); }; function validate(user, pass){ if(user.length< 3 || pass.length < 3) print("Both username and password must be more than 2 characters"); else checkDb(user, pass); }; functionloginResult(data){ if(data == true) print("We know you! Welcome back!"); else print("Not sure, try again!"); }; @clientOnly functionprint(info){ document.getElementById("printBox").innerHTML(info); }; @serverOnly functioncheckDb(user,pass){ db.query("select count(*) from users where user=? and pass=?", [user,pass],function(result){ loginResult(result.count); }); }; Houdini code

8. One language for the web • Traditional web applications • JavaScripton the client-side • Java/ .NET / Python etc., on the server-side • Single language web-apps pros • Focused development skills • Code reuse • Client-Server object passing

9. JavaScript Introduction • Runs on both sides • The only native browser supported language • Popular • Every web developer is proficient in JavaScript • Fast • Convenient asynchronous coding • Full closures

10. Code Partitioning • Only a fraction of a web-app. code is restricted to one side (client/server) • Code could be partitioned in two automatically (using a min-cut algorithm) • Client Side • Server Side • The cut affects performance • Dynamic partitioning is feasible • Usage statistics could be utilized to learn a better cut

11. Overview Implementation • Houdini has the ability to: • Take unified JavaScript code as input • Model the code as a call-graph • Partition the code in two • Setup a traditional web environment • Log and analyze the code in runtime • Re-partition the code when necessary • Additional capabilities • Specialized development environment (IDE) • Call-graph real-time visualization tool

12. Architecture Implementation

13. Further Research Summary • Data mobility • Performance benchmark • Development benchmark • Server code distribution • Performance enhancements • Cut by users groups • Other optimization policies

14. Acknowledgments Summary • Node.JS • Socket.io (web-sockets) • Express (HTTP server) • Burrito (Abstract Syntax Tree analyzer) • Arbor.JS\Halfviz (Graph visualization tool) • Alligator (template engine) • Ace (client-side online IDE)