305 Internal APIs and client-side rendering

In a web application you often need to move data between the client (HTML, Javascript) and the server (Ruby, Rails).

Step 1: Moving HTML snippets

Add a find-as-you-type search to MovieDB. Above the list of movies there should be a text input that updates the list with the search results as the user is typing in the query. The user should not have to press a "Search" button (hint: you can bind to the input event).

In this step, the rendering of the search results should happen on the server. So the client is pulling snippets of HTML from the server.

For the part of the implementation that lives in Javascript, implement a Search.match(query) method that returns a promise. You should be able to use it like this:

Copyvar query = // ...
search(query).then(function(html) {
  $('.search-results').html(html)
})

Please make sure that you don't duplicate view code. Both the initial render and the search results should share as much code as possible.

Push a commit once you are done with this step. Discuss the change with your mentor.

Step 2: Moving JSON data

Switch the API so the client requests a JSON document instead of a HTML snippet. The returned JSON could look like this:

Copy{ 
  'results': [
    { 'title': 'Sunshine', 'year': 2007, 'detailsURL': '/movies/4012' },
    { 'title': 'Before Sunset', 'year': 2004, 'detailsURL': '/movies/39' }
  ]
}

You don't need to solve pagination. It's OK to always transmit all search results, or to always limit them to N results.

On the client, build the HTML for the results table manually, by piecing together strings from the JSON data.

Make sure that it is not possible to inject Javascript into the HTML you're building in the browser. To check this, try giving a movie the title <script>alert('hacked!')</script> and see what happens.

Also to avoid duplication, change your code so the movie list is always rendered by the client and never by the server.

Push a commit once you are done with this step. Discuss the change with your mentor.

Step 3: jQuery helpers

Instead of piecing together strings of Javascript in the client, use jQuery functions to construct a DOM tree.

Here are some jQuery functions that will be useful:

Copy$element = $('<tag>..</tag>')
$element.appendTo($otherElement)
$element.html(someHtml)
$element.text($someText)
$element.addClass('class1 class2')
$element.attr({ key1: 'value1', key2: 'value2' })

Push a commit once you are done with this step. Discuss the change with your mentor.

Step 4: Underscore templates

Instead of using jQuery, use _.template Show archive.org snapshot to construct a DOM tree. You need the "underscore" or the "lodash" library for this.

Push a commit once you are done with this step. Discuss the change with your mentor.