Events & Callbacks (ESaaS 6.5)! 2013 Armando Fox & David Patterson, all rights reserved

Size: px

Start display at page:

Charla Fleming
5 years ago
Views:

2 Events" What: occurrences that affect the user interface" User interacts with a page element" Previously-set timer expires" Data received from server in response to AJAX call (later)" Events are usually (not always) associated with a DOM element" Bind a handler (function) for a particular event type on one or more elements" 2"

3 Manipulating the DOM using events: overview" 1. Identify element(s) you will want to do stuff to, make sure they re conveniently selectable using $() 2. Similarly, identify element(s) on which interactions will trigger stuff to happen 2.5. Create failing test for handler using TDD 3. Write handler function(s) that cause the desired stuff to happen" 4. In a setup function, bind the handlers (third way to call $() )" 3"

4 Handlers on Buttons & Links" A good summary of recognized handlers: What about links & buttons that are clickable without JavaScript?" handler runs first" if handler returns false, no other action taken" otherwise, other actions follow handler" example use: client-side form validation"

" attr('src') Add/remove CSS classes, hide/show" Create setup function that binds

5 Summary: jquery & DOM" Select elements with $() (or wrap to give them secret jquery powers)" Inspect them " text() or html() is(:checked), is(:selected), etc." attr('src') Add/remove CSS classes, hide/show" Create setup function that binds handler(s) on element(s)" common ones: onclick, onsubmit, onchange" Pass func to $() (alias for document.ready())"

6 <form onsubmit='checkinputs()'> <input type="text"/> <input type="submit"/> </form> If this form is loaded in a non-js-aware browser: " Browser will complain about malformed HTML when page is loaded (server should respect browser version and not send JavaScript) Browser will complain, but only when form s Submit button clicked The form will be submitted, but without inputs being checked Nothing will happen when submit button is clicked (form won t be submitted) 6"

8 AJAX == Asynchronous Javascript And Xml" JSAPI call XmlHttpRequest (a/k/a xhr) contacts server asynchronously (in background) and without redrawing page " Normal HTTP request, w/special header: X-Requested-With: XmlHttpRequest! Controller action receives request via route" What should it render in response?" render :layout => false render :partial => 'movies/show'" render :json (calls to_json)" render :xml (calls to_xml)" render :text " render :nothing => true "

9 The basic AJAX cycle, as seen from browser JSAPI" r = new XmlHttpRequest; r.open(method,url,async); method GET,POST,HEAD,PUT,DELETE..." async: true means script should not block (important!)" r.send("request content"); r.abort(); Callbacks during XHR processing" r.onreadystatechange=function(xmlhttprequest r) {... } function inspects r.readystate uninitialized,open, sent,receiving,loaded" r.status contains HTTP status of response" r.responsetext contains response content string"

10 The jquery way" $.ajax({type: 'GET', url: URL, timeout: milliseconds, success: function, error: function! // many other options possible });

Rails Cookery: AJAX with Rails+jQuery" javascript_include_tag 'application'" your code in app/assets/javascripts/*.js! Define handler function that.

11 Rails Cookery: AJAX with Rails+jQuery" javascript_include_tag 'application'" your code in app/assets/javascripts/*.js! Define handler function that..." optionally inspects element state, attributes, " calls $.ajax() " Define controller action & route to receive request, and determine what will be returned" Define callback function to receive server reply" Unpack JSON objects & modify DOM?" Replace existing HTML element (e.g. <div>) in place?" Add/change/remove CSS classes/properties?"

12 A simple example" Server side:" class MoviesController < ApplicationController def = Movie.find(params[:id]) render :partial=>'movie', :object=>@movie if request.xhr? # else render default (show.html.haml) end end Client side:" 12"

13 Which is FALSE concerning AJAX/ XHR vs. non-ajax interactions? AJAX requests can be handled with their own separate controller actions In general, the server must rely on explicit hint (like headers) to detect XHR The response to an AJAX request can be any content type (not just HMTL) If the server fails to respond to an XHR request, the browser's UI will freeze 13"

15 Jasmine: Testing JavaScript" Idea: run your tests in browser" Install jasmine gem & jasmine-jquery add-on" rails generate jasmine:install Jasmine server (rake jasmine) on localhost:8888 serves Jasmine test page " Reload page == rerun tests!" How to construct tests?! How do tests see the page on which they would normally operate?! 15"

16 Jasmine is Like RSpec" Sets of related examples" describe "things" do it "..." do...end end describe("things", function() { it("...", function() {... } ); }); Setup/teardown" before(:each) do...end beforeeach(function() {...})" 16"

17 Expectations" expect {...}.to == "foo" expect(expr).toequal("foo").tobetruthy(),.tobefalsy().tobehidden().tohaveclass().tocontaintext() 17"

18 Expectations: Jasmine-jQuery" tobeselected(), tobechecked() tobedisabled(), tobevisible(), tobehidden() tohaveclass("foo"), tohaveid("foo") tohaveattr("href", " Putting it together example:" describe('clicking Hide button', function() { it('hides Movie div', function() { $('a#hide').trigger('click'); expect($('div#movie')).tobehidden(); }); }); 18"

19 Which are always true of Jasmine s it() method: (a) it can take a named function as its 2 nd arg (b) it can take an anonymous function as its 2 nd arg (c) it executes asynchronously (a) & (b) (a) & (c) (b) & (c) (a), (b) & (c) 19"

21 Stubs (Spies)" Strategy: create spy method that replaces real method that is a property of an object" spyon(moviepopup,'new').andreturn(value).andcallthrough().andcallfake(func) Why no quotes around MoviePopup?" Examine calls on spy:" expect(moviepopup.new.mostrecentcall.args). tocontain("gravity") expect($.ajax.mostrecentcall.args[0]['url']). toequal("/movies/1") 21"

22 HTML Fixtures" Goal: provide enough HTML for JS code to do its thing in a familiar environment" <table id="movies"> <tbody> <tr class="adult"> <td>casablanca</td> <td>pg</td> <td><a href="/movies/1">more about Casablanca</a></td> </tr> </tbody> </table> loadfixtures('movie_row.html') loads this into div#jasmine-fixtures (automatically cleaned out)" Fallacies & Pitfalls for 6.7 shows how to autogenerate these fixtures from real views" 22"

23 Stubbing Redux" 23"

24 Putting it all together example" Example" Jasmine tests" (why no call to MoviePopup.setup?)" 24"

25 In the example, why did we use andcallfake() to pass ajaxargs in stubbing the AJAX call, rather than just andreturn(ajaxargs)?" We could have done it either way; just a matter of choice $.ajax doesn't actually return the server reply content, so andreturn won't work ajaxargs is in the wrong scope, so its value is not "visible" to andreturn We needed to be able to spy on (monitor) the AJAX call 25"

27 Single-Page Apps" Load page once; no further page reloads, since everything else done via AJAX" Uses same MVC flows we already know!" but rendered content from server is handed to your JS code, not to browser" So, what should controller method render?" Certainly not a full HTML page" HTML snippet? incorporate into page" Raw text? hard to send structured data" XML or JSON!" 27"

28 A simple example" Server side:" class MoviesController < ApplicationController def = Movie.find(params[:id]) render :json if request.xhr? # else render default (show.html.haml) end end Client side:" 28"

29 Which, if any, of the following statements are TRUE regarding JSON objects in Rails apps?! A JSON object s properties must exactly match the corresponding ActiveRecord model In an association such as Movie has-many Reviews, the owned objects must be returned in 1 or more separate JSON object JSON objects can only be consumed by a JavaScript-capable client None of the above are true 29"

And In Conclusion: JavaScript Wrapup (ESaaS 6.9-6.11)!

30 And In Conclusion: JavaScript Wrapup (ESaaS )! 2012 Armando Fox & David Patterson Licensed under Creative Commons Attribution-NonCommercial- ShareAlike 3.0 Unported License

31 Emerging JS use cases" Server-side frameworks: Node.js" JS library for creating server-side apps" Uses event-driven programming in JS" Potentially much more memory-efficient per user compared to traditional server-side frameworks" Client-side frameworks: Backbone.js" Express views & models entirely in JS" Server just returns JSON" Client-side frameworks: Yahoo Mojito" CoffeeScript"

32 JavaScript & Performance" The browser is increasingly the client-side OS that matters" CSS has made layout increasingly sophisticated" JavaScript + AJAX has made UI increasingly rich & desktop-like" What s the cost of all this?"

33 Where does the time go?" CSS selectors + JavaScript interpreter = 41% of total client rendering time" Esp. selectors that require walking DOM tree, eg div > li Browsers compete on speed of JavaScript interpreter => selector/ parser performance increasingly important" Work at UC Berkeley (Prof. Ras Bodík s group):" Parallelizing parsing & CSS selectors" Increasing use of GPU for rendering" parser" HTML parser" 21%" DOM CSS rules selector engine" selector engine" 29%" layout engine" 9%" rendering" rendering" 23%" JavaScript 12%" interpreter interpreter" Courtesy Leo Meyerovich, UC Berkeley

34 Pitfall: Adding JavaScript will make my app more responsive " Risk: too-wide API to server, with needlessly expensive database calls" Risk: at mercy of JS interpreter on a wide variety of devices" Risk: testing/debugging is more complicated, since must handle client-side errors"

35 Some of the AJAX interactions in Ben Bitdiddle s AJAX-intensive SaaS app feel sluggish. The likeliest cause is:! Slow JavaScript interpreter (for example, users with very old browsers/computers) Slow database queries associated with AJAX actions Network delays due to sending too much data to browser in AJAX responses Can t tell without further information 35"

JavaScript: the Big Picture

JavaScript: the Big Picture JavaScript had to look like Java only less so be Java's dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JavaScript would have happened.! JavaScript: