AGENDA

• Javascript & Hyperspace
• Web architecture
• Client-side vs. Server-side
• REST
• JSON
• MVC
• Web frameworks vs. Client-side apps

AGENDA

• Backbone.js
• Model
• Collection
• View
• Router
• Dynamic templates

client-side vs. server-side

• Isolated web-apps (client-side only):
  • Only front-end. Ex: "BMI calculator".
  • Front-end and back-end. Ex: "TODO list manager" persisting on HTML5 local storage on the browser.

client-side vs. server-side

• Integrated web apps (client-side and server-side):
  • Front-end on client-side + back-end on server-side. Response is hypertext over HTTP. Ex: "TODO list manager" in a web framework (Struts, JSF, Rails).
  • Front-end and back-end on client-side + REST back-end on server-side. Response is data over HTTP. Ex: "Trello" implemented in Backbone.js.

REST

• REpresentational State Transfer.
• Stateless architectural style for distributed systems, based on HTTP protocol:
  • HTTP methods are verbs (actions).
  • URIs are nouns (resources).
  • HTTP status codes are meaningful actions responses, like 200 (ok), 404 (not found), 500 (internal server error).

REST

• REST actions addressed today:
  • HTTP GET:  retrieves a resource. Ex:  GET /users/1 retrieves the user which id = 1.
  • HTTP POST: creates a resource. Ex:  POST /users creates an user (data on request body).
  • HTTP PUT: updates a resource. Ex:   PUT /users/1 updates the user which id = 1 (data on req. body).
    
  • HTTP DELETE: removes a resource. Ex:  DELETE /users/1 removes the user which id = 1.

MVC

• Model-View-Controller.
• Architectural design pattern that leverages better application organization through separation of concerns:
  • Model: business data.
  • View: user interface.
  • Controller: connection and data input logic.

MVC in Javascript

• Avoid "spaghetti code" (hard to read and maintain for the lack of structure).
• Overall maintainability is strongly improved. It  makes it clear to identify where to change the code.
• Enables more objective unit tests.
• Modularity allows better distribution of tasks among the team.

MVC IS OUR HYPERSPACE!!

WEB FRAMEWORKS vs. client-side apps

• Server-side web frameworks:
  • Actions life cycle is managed and routed on the server-side.
  • Server-side templates generating HTML from data.
  • HTTP response transmitting hypertext (HTML).
  • Every action demands a page reload.
  • Actions are synchronous.

WEB FRAMEWORKS vs. client-side apps

• Client-side apps:
  • Actions life cycle is managed and routed on the client-side.
  • HTTP response transmitting data (JSON, XML, etc...).
  • Client-side templates generating HTML from data.
  • Actions DON'T demand any page reload.
  • Actions can be asynchronous.

backbone.js

• Javascript library that provides structure to client-side applications based on REST APIs using JSON.
• Created in 2010, it is currently used in big websites such as Airbnb, BitTorrent, Digg, Foursquare, Hulu, LinkedIn mobile, Pinterest, Trello, Walmart and Wordpress.
• Depends on Underscore.js and jQuery (or similar libs such as Zepto.js, with varying degrees of compatibility).

backbone.js

• SPA (Single-Page Application): architectural style about doing a single page load for the whole application.
• Elements: Model, Collection, View and Router.

Backbone.js isn't a classic MVC framework...

...but it belongs to MV* family, which similar goals!!

Model

• Stores and manipulates data.
• Communicates with REST APIs.
• Supports parsing, translation, validation and business logic processing.

var CardModel = Backbone.Model.extend({
  urlRoot : '/api/cards'
});

• urlRoot specifies the base URL for REST calls, which will precede the REST actions.

Model

• REST methods:
  • fetch(options): Retrieves an entity via HTTP GET.
  • save(attributes, options): Creates an entity via HTTP POST (if the object doesn't have an id yet) or updates an entity via HTTP PUT (if the object has an id already).
  • destroy(options): Removes an entity via HTTP DELETE.

Model

• Parâmetros:
  • attributes: Object containing data to be saved.
  • options: Object containing configuration such as: 
    • url: Connection URL with the server-side, overwriting urlRoot.
    • success: Callback function for success response.
    • error: Callback function for error response or timeout .

Model

var model = new CardModel({
  id: 1
});

// GET /api/cards/1
model.fetch({
  success: function(model, response, options) {
    console.log('Success! Model = ' + model.toJSON());
  },
  error: function(model, response, options) {
    console.log('Error or timeout.');
  }
});

Model

• Some common methods:
  • get(attribute): Gets the value of an attribute from the Model. Ex: card.get('title');
  • set(attribute, value): Sets a value for an attribute on the Model. Ex: card.set('title', 'Project X');
  • toJSON(): Returns a copy of the Model data in JSON. Ex: card.toJSON();

Collection

• Ordered list of Models.
• Creates models from a JSON array.
• Implements array methods from Underscore.js library.

    var CardCollection = Backbone.Collection.extend({
  model : CardModel,
  url : '/api/cards'
});

• model specifies the Model to be created.
• url specifies the base URL for REST calls, which will precede the REST actions.

Collection

• Ordered list of Models.
• Creates models from a JSON array.
• Implements array methods from Underscore.js library.

    var CardCollection = Backbone.Collection.extend({
  model : CardModel,
  url : '/api/cards'
});

• model specifies the Model to be created.
• url specifies the base URL for REST calls, which will precede the REST actions.

Collection

• Collections complement the REST API from Models with this method:
  • fetch(options): Retrieves an array of entities via HTTP GET, populates each entity as a Model and inserts it in the Collection.

Collection

var cardCollection = new CardCollection();

// GET /api/cards
cardCollection.fetch({
  success: function(collection, response, options) {
    console.log('Success! Collection = ' + 
                collection.toJSON());
  },
  error: function(collection, response, options) {
    console.log('Error or timeout.');
  }
});

Collection

• Some common methods:
  • get(id): Retrieves a Model a from its id. Ex: collection.get(12);
  • at(index): Retrieves a Model from its position on the Collection. Ex: collection.at(1);
  • add(model): Adds a Model to the Collection. Ex: collection.add({'title', 'Project X'});
  • remove(id): Removes a Model from the Collection. Ex: collection.remove(12);

Collection

• Some common methods:
  • toJSON(): Returns a copy of the Collection data in JSON. Ex: collection.toJSON();
    
  • where(attributes): Returns just the Collection elements which match the given criteria. Ex: collection.where({'type': 'PROJECT'});
  • pluck(attribute): Returns an array with extracted values from Collection elements, based on the given attribute. Ex: collection.pluck('title');

View

• Manages the presentation logic and events.
• Renders an HTML template which can be added to the DOM, consuming data from Models or Collections.
• The HTML template can be dynamically generated.

View

• Main attributes to be implemented:
  • events: Events mapping object, like this:
    'CSS selector': function / 'function'
  • render(): Method that should contain all the View logic, in three steps:
    • Retrieving/preparing the HTML template.
    • Rendering the HTML template from a Model or Collection.
    • Inserting the rendering result into el attribute.

View

• Some common View attributes:
  • el: HTML element rendered by this View. It can be accessed via $el as a jQuery/Zepto.js object.
  • id: The id attribute from el.
  • className: The class attribute from el
  • tagName: The HTML tag to be used by el.
  • remove(): Removes the View from the DOM and remove all event listeners binded to it.

View

var CardView = Backbone.View.extend({
  events: {
    'click button.close': function(e) {
      e.preventDefault();
      this.remove();
    }
  },
  render: function() {
    var result = 
       '<h1>' + this.model.get('title') + '</h1>' +
       '<button class="close">Close</button>');
    this.$el.html(result);
  }
});

View

• View parameters:
  • el: An existing HTML element can be provided to receive the content rendered by the View.
  • model: The Model to be consumed by render().
  • collection: The Collection to be consumed by render().

View

var cardModel = new CardModel({ id: 1 });

cardModel.fetch({
  success: function(model, response, options) {
    var cardView = new CardView({
      model: cardModel
    );
    cardView.render();
    $('#contents').append(cardView.el);
  },
  error: function(model, response, options) {
    console.log('Error or timeout.');
  }
});

Router

• Allows for URL handling and routing.
• Controls the navigation history.
• Avoids direct requests to the server-side.
• Main attribute:
  • routes: Mapping routes object, like this:
    'uri': function / 'function'

Router

• Some common methods:
• route(path, name): Also inserts a route, but can use regex. Ex: router.route(/^card/(\d+)$/, 'viewCard');
• navigate(path, options): Navigates to a URL. In order to also trigger the route, use options as {trigger: true}. Ex: router.navigate('/card/32', {trigger: true});
______________________________________________
 Boosting the client-side with Backbone.js

Router

var AppRouter = Backbone.Router.extend({
  routes : {
    '' : 'viewAll',
    'card/:id' : 'viewCard',
    '*path' : 'viewAll'
  },

  viewAll: function() { ... },

  viewCard: function(id) { ... }
});

Router

• It is necessary to call Backbone.history.start()
to start the routes monitoring by the Routers.
• Pass {pushState: true} to it in order to use HTML5 pushState. Otherwise, the routing would use # after the URL query string..

var appRouter = new AppRouter();

Backbone.history.start({
  pushState : true
});

Dynamic templates

• On the View, the HTML template can be generated by any Javascript templating library such as Underscore.js, Mustache, Handlebars.js, dust.js, etc...
• It is the same idea of PHP, JSP, ERB, ASP - but now on the client-side.
• It is much more maintainable then concatenated strings.

Dynamic templates

• Handlebars.js: performative, flexible and easy to learn and to handle alternative.

{{#if children}}
  <ul>
    {{#each children}}
      <li>{{title}}: {{description}}</li>
    {{/each}}
  </ul>
{{else}}
  <p>There is no items!</p>
{{/if}}

• Will be covered on a next AC talk by Alysson Ferreira!