WebFund 2015W Lecture 16

Video

The video from the lecture given on March 9, 2015 is now available.

Notes

AJAX-notes

Assignment 7 is similar to assignment 6 but using we are now using the AJAX-notes demo application (code is very different but logic is same).

Notice that the URL does not change when moving through the different notes pages. This is due to the use of client-side JavaScript. If we look at the DOM through the element inspector in a web browser, the code is much more complex than the page source. This too is due to the use of client-side JavaScript. When actions are made such as moving to the edit note view, the client-side JavaScript modifies the DOM now rather than having the client render a whole new page.

Routing changes

To get the user's notes, we use a new route called /getNotes. This returns note objects in an array (passed as JSON string). It is parsed by the browser to generate the notes list. If you put this route directly into the browser's address bar, you can see the JSON string representation of the response which is simply all of the user notes.

Other differences in index.js include:

• '/notes' - This route no longer provides the notes to the Jade page which gets rendered. The retrieval of the notes is now handled in the client-side script.
• '/edit/:id' - This route no longer exists. This functionality has been moved to the client-side script as well.
• '/updateNote' - This is now used instead of the '/update' route.

Jade changes

The Jade code is now much simpler. The Jade templates for the edit page, the delete page and the updated page are no longer needed. All of this is replaced by the functionality achieve on the single notes page through the client-side script. The contents of notes.jade is also simpler. Much of the content is now replaced by a div.notesArea. The notes.js script appends conent in this div.

The client-side script

All of the moved functionality can be found in the script notes.js. This is a client-side script which is included in the head of the notes page using script(src=”/javascript/notes.js”) . This script makes use of jQuery to manipulate the DOM. The script starts by running everything inside $(function(){...} when the page has finished loading. Initially, a bunch of functions are set up, then at the end, one of them is called.

The noteListing() function:

• Replaces the notesArea div with a new div.
• Appends some HTML elements to the div.
• Inserts a placeholder saying "Loading Notes..."
• Adds a New Note and a Refresh button, giving them a each a click event.

The getAndListNotes() function:

• Sends a GET request to the server to the '/getNotes' route.
• Calls another function to populate the notes with and passes it the data received from the server's response.

The GET request in getAndListNotes() as well as other requests used in this script all happen in the background (asynchronously) and do not require the page to ever be reloaded. They simply update the DOM as necessary.

Client-side JavaScript calculator

A simple example such as the calculator shown in class may be used as part of the course later.

Some aspects of this calculator example include:

• The page is never reloaded - all operations are cient-side
• The source code is quite simple
• digits.not($(‘#dot, #sgin’)).click is used to prevent the default event from happening

On-screen notes

AJAX

• client-side JavaScript
• uses background GETs and Posts

What else do “major” web apps do?

• nothing else, fundamentally
• use more APIs
  • graphics (canvas)
  • socket I/O
  • ...
• fancier libraries
  • higher-level interface
  • handle page updates transparently
    • change data on server, pushed to browser
    • change data in browser, pushed to server
• different languages
  • e.g. write in Java, deploy in JavaScript
  • asm.js (subset of JavaScript)
    • write in c or c++ and compile to JavaScript