Client

The client-side framework provides a structured and scalable modularization of the front-end user experience fully backed up by jQuery and underscore.

External Libs

• jQuery: v1.10.2
• underscore: v1.5.2
• socket.io: ~0.9.16 (from the Socket server)

Core

The Core Class controls the app environment and abstracts the browser integration with the external libs, making the modules and controllers support full code recycling.

• core.log.info(message)

  Log some variable or message string to the default log endpoint (currently the browser console).

• core.log.error(message)

  Throw some variable or message string to the default error endpoint (currently the browser console).

  Roadmap: Implement silent and external logging through the socket connection.

• core.client([sel])

  The client class, responsible for abstracting the whole browser and html integration. It wraps the jQuery library and integrate with some methods from underscore encapsulated and the full library in the client.util object.

  So you can do something like:

  // returns the body content
  client("body").html();
  
  // return some input value
  client("input#email").val();
  
  // invoke the underscore template
  var compiled = client.util.template("Hello <%= name %>!");
  
  // will print: "Hello John!"
  console.log(compiled({name: "John"}));

  • core.client.render(controller, data)

  Render a controller into the default controller endpoint, defined by the data-endpoint="controller" html attribute.

  Template:

  <div data-endpoint="controller"></div>
  
  <script data-controller="home" type="text/template">
    Hello <%= name %>!
  </script>

  Javascript:

  // renders in the controller endpoint div: Hello John!
  client.render("home", {name: "John"});

  Result:

  <div data-endpoint="controller">Hello John!</div>

Sandbox

The sandbox controls the data processing and distribution between the backend application, the environment and the application modules.

• Broadcast: Used to implement a publisher/subscriber pattern between the application and its modules.

  Roadmap: Using the socket server, merge the backend and the frontend as one big publsher/subscriber pattern.

  • sandbox.broadcast.publish(event, data): Publish data to the sandbox broadcast environment. Example:

    sandbox.broadcast.publish("user/login", {email:"[email protected]", password:"1234"});

  • sandbox.broadcast.subscribe(event, callback): Subscribe to a event in the sandbox broadcast environment. Example:

    sandbox.broadcast.subscribe("user/login", function(data){
      if(data.email == "[email protected]" && data.password == "1234")
        alert("Welcome John!");
      alert("You're not the John we're looking for!");
    });

  • sandbox.broadcast.unsubscribe(event, callback): Unsubscribe a function from a event in the sandbox broadcast environment. Example:

    sandbox.broadcast.unsubscribe("user/login", function(data){
      if(data.email == "[email protected]" && data.password == "1234")
        alert("Welcome John!");
      alert("You're not the John we're looking for!");
    });

• API:

  You can call API methods (backend) using the sandbox and the configurations specified in the app.js file.

  For calling /user/login method, use:

  sandbox.api("user/login", {email: "[email protected]", password:"1234"}, function(data){
    if(data.result == "success")
      alert("Welcome " + data.user.name + "!");
  });