Javascript and AJAX (Fri Nov 10, lecture 29)

Homework due for today

Legend: : Participation | : Early | : PDF | : Portfolio | : Zipped

  1. AJAX: Do your own research on what AJAX is and means. Wikipedia, Blogs, Rails Guides, all those are places to look. Now think about ways to use Ajax in your product. While there are some obious ones, see if you can come up with one or two imaginative, innovative, and yet not crazy impossible applications of Ajax. I am not that interested in the ones you have already chosen but novel ones that your teammates did not think of. Explain how the code would achieve what you are describing. Deliverable: Describe one or two innovative ways to use Ajax in your product, in detail. pdf.
  2. Self Knowledge: Reflect personally on what you have learned in this course about yourself. And reflect about how this course has affected the way you are professionally. Please avoid platitudes. It will be graded participation only but I will read every single one and give you feedback. Here are some questions to help you think about it:

    What latent interests have been reinforced? What did you discover you were not so interested in? What have you learned about the work you want to do in the future? based on your interests and your strenghts? Do you have more clarity there? Where do you know you want to learn a lot more?

    Deliverable: Pdf, Your personal reflection, ~1 page

  3. Teams: Codeship: Get your app deployed onto CodeShip. Log in with the email of the github account who owns the offical team repository. The documentation of CodeShip is quite good. Make sure you have at least one rails integration test to run whenever someone onbEnsure that whenever the team pushes to your master branch, the tests are automatically run and if they pass, the result is pushed out to Heroku. Team Deliverable: Submit the text of the log generated by Codeship to demonstrate that it is working.

Background!

  • Ajax:
    • Used to stand for “Asynchronous Javascript and XML”
    • Nowadays the term has gotten generic – XML is rarely involved, JSON is used instead
    • If it means anything it means updating a page without a visible refresh
    • Unobtrusive Javascript: Why is Unobtrusive Javascript Important?
  • Responsive Design
    • Single web site for all devices (web browser vs. mobile)
    • Layout changes (radically) if needed to accommodate screen size
    • Radically means: rearranging components, and even dropping content altogether
    • You’ve seen this so much, it’s more or less expected now
    • Famous example Boston Globe, was one of the earliest really responsive web pubs.
Use Cases
  • Asynchronous update: page changes without the user doing anything
  • Typeahead: suggested completions added to a textbox while typing
  • Delayed Rendering: Result from a query comes in gradually
  • In Place Editing: Forms that allow in place editing (instead of a big submit button)
  • Server Push: Browser update initiated by the server!
How Ajax works
  • Steps
    1. Browser makes a ‘background’ http request
    2. Server (i.e. the controller) returns ‘data’ or ‘js code’
    3. Browser based code (javascript) interprets that data or executes the code.
    4. Browser changes DOM which changes what is displayed in the current page

Deeper dive

Not a toy Javascript is a serious and very important langauge
  • It might be the most important language right now
    • Why?
    • Has nothing to do with Java!
    • Name is strictly political (back in the 80’s I think)
  • Browser DOM :: HTML :: CSS :: JavaScript are interlocking partners that work together
  • Document Object Model
    • DOM is a strictly a tree with the <html></html> at the top of the tree, assigned to variable document.
    • Each tree element is a node. Every node has exactly one parent
    • The DOM tree can be modified AT RUN TIME
    • Any change to the DOM tree is immediately reflected in the visual appearance of the page!

Let's look at some code: Github: Ajax Demo

Ajax basics in Rails

  • Unobtrusive Javascript
  • Uses JQuery
  • Ties js to erbs and the views

Let's look at some code: Github: Form/Pusher Demo Demo

Server Push

  • Not a real term :)
  • Many different ways of approaching. Sort of immature right now
  • Key techniques are:
    • Periodic background polling by browser
    • WebSockets and variants which maintain an open connection to server
    • Rails 5 Action Cable
  • Some links to study further:

Let's look at some code: Github: Form/Pusher Demo Demo

References

Look at next class