Ajax Programming Patterns – Podcast 2 of 4: Browser-Server Dialogue Patterns

Continuing from the previous podcast (cough 12 weeks ago), more programming patterns. Unfortunately, this recording (and the next one) went pear-shaped. Sorry. I do, however, recommend them to those of you who’ve been wondering what an Ajax talk would have sounded like in crackly 1930s recording technology, and one in which the speaker has a severe cold. FYI The level was too low and it didn’t correct very well…maybe one day, I’ll re-record, but for now I’d prefer to just get them out there as they have been sitting in the libsyn archive for many weeks.

The 40-minute podcast covers the following patterns:

  • Call Tracking Accommodate busy user behaviour by allocating a new XMLHttpRequest object for each request. See Richard Schwartz’s blog entry.Note: Pending some rewrite to take into account request-locking etc.
  • Periodic Refresh The browser refreshs volatile information by periodically polling the server.
  • Submission Throttling Instead of submitting upon each Javascript event, retain the data in a local buffer and upload it periodically.
  • Explicit Submission Instead of submitting upon each Javascript event, require the user to explicitly request it, e.g. submit upon clicking a button.
  • Distributed Events Keep objects synchronised with an event mechanism.
  • Cross-Domain Proxy Allow the browser to communicate with other domains by server-based mediation.

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

This podcast covers six patterns on Browser-Server Dialogue: Call Tracking, Periodic Refresh, Submission Throttling, Explicit Submission, Distributed Events,

Thanks for your feedback since last time. Good, bad, or ugly, it’s all welcome – in the comments for this podcast or [email protected]

Ajax Programming Patterns – Podcast 1 of 4: Web Service Patterns

Whereupon a new podcast series begins …

As promised, a new series of Ajax pattern podcasts. This is the first of four podcasts on the Ajax programming patterns.

In this 73 minute podcast, we look at the seven patterns of web services as they relate to Ajax clients.

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

  • RPC Service Expose web services as Remote Procedural Calls (RPCs). (Note: In the book and wiki, REST appears before RPC.) (6:55)
  • RESTful Service Expose web services according to RESTful principles. (13:25 )
  • HTML Response Have the server generate HTML snippets to be displayed in the browser. (44:45)
  • Semantic Response Have the server respond with abstract, semantic, data. (49:00)
  • Plain-Text Message Pass simple messages between server and browser in plain-text format. (56:05)
  • XML Message Pass messages between server and browser in XML format. (57:20)
  • JSON Message Pass messages between server and browser in Javascript Object Notation (JSON) format. (59:55)

Thanks for your feedback since last time. Good, bad, or ugly, it’s all welcome – in the comments for this podcast or [email protected]

Dynamic Favicons

Favicons should ideally be easy to manipulate, as easy as manipulating the web page’s UI. (Favicons are the little website icons you see in the address bar, browser tabs, etc.) For example, a chat app like Meebo could signal that your buddy’s trying to contact you, a mail app like GMail could indicate You Have Mail!

I’ve found surprisingly little info on this – is anyone doing it? Anyway, I’ve been wanting to play around with this for a while and having recently submitted the final book draft (post pending), I finally had some spare time to play with it. Fortunately, it turns out to be perfectly feasible – it seems that Firefox and Opera both use <link> tags to determine favico, and this can be changed dynamically to satisfaction. The only gotcha is that you can’t try to be too efficient – if you reuse an existing link object and overwrite its href property, the browsers won’t pay any attention. so you simply have to remove the existing link tag and add back a new one with the new icon URL. Unfortunately, IE and Safari don’t seem to use the link technique at all – I think they just use the “favicon.ico” file. If you know of a way their icons could be dynamically manipulated, please mail me or add a comment here.

So I’ve created a library, favicon.js, that lets you manipulate favicons with a single call – changeFavicon("theIconUrl.ico");. You can also set the document title, changeFavicon("theIconUrl.ico", "Hi Everybody!"), which just sets document.title. There are a couple of demos and a brief FAQ:

Ajaxify favicon demo

Implementation Details. Here’s the favicon.js code as it stands, all 32 lines of it :-).

javascript

  1. var favicon = {
  2.  
  3. change: function(iconURL) {
  4.   if (arguments.length==2) {
  5.     document.title = optionalDocTitle;
  6.   }
  7.   this.addLink(iconURL, "icon");
  8.   this.addLink(iconURL, "shortcut icon");
  9. },
  10.  
  11. addLink: function(iconURL, relValue) {
  12.   var link = document.createElement("link");
  13.   link.type = "image/x-icon";
  14.   link.rel = relValue;
  15.   link.href = iconURL;
  16.   this.removeLinkIfExists(relValue);
  17.   this.docHead.appendChild(link);
  18. },
  19.  
  20. removeLinkIfExists: function(relValue) {
  21.   var links = this.docHead.getElementsByTagName("link");
  22.   for (var i=0; i&lt;links .length; i++) {
  23.     var link = links[i];
  24.     if (link.type=="image/x-icon" && link.rel==relValue) {
  25.       this.docHead.removeChild(link);
  26.       return; // Assuming only one match at most.
  27.     }
  28.   }
  29. },
  30.  
  31. docHead:document.getElementsByTagName("head")[0]
  32. }

Update (Two Days Later)

Crikey! Dugg and on Delicious Popular. And, well, Ajaxian too ;-). Digg is interesting … The last time I submitted my own story to digg, it got precisely two diggs (thanks to the other guy!). This time, I didn’t bother. Is there a moral here?

New, improved, with animate(). Most people get dynamic favicons, but some people have said this whole thing is about animation, about as useful as a blink tag, etc. Okay, that kind of misses the main point, which is about notifying the user while a tab is in the background. The FAQ makes it pretty clear that animated icons was a kind of afterthought (actually, it only occurred to me after I created the cycling demo – changing according to a timer was simply the easiest way to update a background tab, since there’s no chat functionality needed or anything like that). But, you know, when a simple idea like that causes seems so wrong to some people, there’s probably wheels in it. And while I did say animated GIFs are possibly more elegant in the FAQ, it since occurred to me that it’s a bit of a hassle for the casual developer to make an animated GIF. You also get the benefit of compatibility with Opera (and maybe others?). So I’ve added an animate() method, only 8 more lines in all, that lets you cycle through a sequence of images. I expect to post it over the weekend. Mmm…Eye Candy!

SAG Ajax Patterns Review 3 – Call Tracking, Distributed Events, On-Demand Javascript, XML Data Island, Browser-Side Templating

Following from previous posts, here’s my notes from the third SAG (Uni. of Illinois CS Dept) workshop/discussion on the Ajax Patterns. See the initial post for a background on this series.

Note that there was a “2.5”th workshop on HTML Response, JSON Message, XML Message, etc – it happened, but there’s no audio, so I decided to skip it wrt the numbering (the present workshop is really Workshop 4).

 

Feb-20-2006 Third Ajax Patterns Discussion

0:00

Use the "hidden version" versus the wiki [MM Guys, definitely the hidden version - the wiki more or less stopped a few months ago.]

Mention of O'Reilly Rough Cuts - Takes a while to make something ready, do you want to deny people the advantage of seeing it?

5:00 Intros

5:30 Call Tracking

[MM btw On the wiki, this was the first full pattern I wrote and it's pretty awful. Virtually rewrote it for the book. (The book content should eventually find its way back to the wiki, but maybe something more like the book format, with Wizlite for annotation.)]

XMLHttpRequest Call didn't address the bigger picture Call tracking highlights the async nature of calls - several ways to track it. Hand-drawn, crude, diagrams.
[MM These diags are mockups for the O'Reilly illustrators] Could have global XHR object - but then limiting multi-processing Is this pattern worried about resources or reliability? - More about [TODO Clarify it's about Call Tracking.] From the wiki version, seems like resources etc. Ambiguous.

11:00 When start thinking abt async communication, can think about reflecting on the message. (??)

============================================================ 12:00 Distributed Events

Fits quite well with Call Tracking [TODO Check Related Patterns sections, add refs?]

Single object/entity might have interdependencies

Clear that it's like an Ajax version of publish-subscribe - "Distributed" name confusing, "terrible". - Sounds like multiple servers (no). - Using patterns like Observer, a different name referring to the same thing. - But he's focusing on the fact that the events are distributed. ie in Java usually listeners are all in the same ?space. - Yeah it's kind of distr'd events, but the problem doesn't fit in with it.

Solution didn't seem to get into the details. Focus went back and forth between events and. [TODO Observer pattern sidebar]

Interesting, the problem is a really different context. There's no vocab for that sort of thing, he's trying to create a vocabulary for it with this pattern. - Except that in MS case it's transparently distributed. Hook docs together, doesn't matter if docs are on same machine or not. Built into that (platform). Probably slower than JS. People have been building distr'd events systems for a long time. Interesting that it's become a big part of these JS systems. - So maybe problem/forces should say more about the complexity of the communication

19:00 browser-to-browser is not distrib'd. [TODO Clarify that it's the same browser.] - Last line "should be clear ...": Using a generic interface rather than making a specific interface. Could have model object with a list of views. Instead, we say the model has a list of dependents - Well yes, it's another level of indirection, but could have implemented update as a list of views. But the main thing is, we have a generic interface - you don't know if the dependents are views and what they'll do with it. If you know they're views and you call redisplay(), you'll know they'll redisplay. - Had the same feeling - less about extra layer of intermediation and more about the fact it's generic. - [TODO Reword] - Examples: APIs where there's a central mediator. Java listeners don't have a central controller, every event listener has its own [TODO Decision - central manager versus Java-style autonomous where each object maintains its own listeners. (See below.)] - Decisions: History or state. cf Memento pattern [TODO Ref Mememto (or sidebar)]

Enjoyed this discussion. Issues about reflection or whether interfaces are generic to the problem you're solving. As the event mechanism becomes more complex, tend to genericise. The event handling becomes the focus, the architectural locus of these dist'd environments. Temptation to overload the event mechanism - the idea of reflection comes in, interesting that we don't have the vocab to talk about it.

Tradeoffs - "better solution" by adding a layer of indirection. But that comes at a cost.

I think the heart of this pattern is "something changes, something then notified". Key is for Observer, should be named after what happened to the subject. If you have a system where you're calling your observers to go do something ... (different type of events). Events are always events relative to some subject, whereas if going to have some central repo with dictionary mapping subjects to listeners. Actually a fairly minor issue, but seems bigger because not addressed. As events get more complex, tend to centralise it [TODO Also depends on sophistication of inheritance and delegation mechannisms ... not so great in JS, which pushes toward centralising]

33:10 Observer mistakes: Forget to (un)register observer, forget to notify observer, forget to declare observer's handler. Some mistakes easier to catch than others, for me the ones that take longer are when I forgot to register it, esp if only in some certain conditions. From HotDraw, learned it doesn't pay to try to be efficient. e.g. Drag figure around a screen - must redisplay, therefore must be real fast, therefore didn't use observer. So easy to make mistakes when mixing those mechanisms (observer and direct call). Became a lot easier when committed to using observer for everything. [TODO Mention this - tip:]

There's a lot you could say about it, not sure author wants to say it. Good purpose: How to convert distr'd events into that style. Can see a lot of people doing it the stupid way - each display element asking the server if something's changed. [TODO Flag this risk, probly in Decision about central management?]

Code example: Show picture (e.g. interaction diagram) [TODO Diagram]

============================================================ 38:45 On-Demand Javascript

Just-In-Time JS Not convinced of author's motivation for this. Would have to be huge amount of JS to worry about it - it's nothing compared to an image. But I was excited about it for other reasons, could have dynamic behaviour depending on the user/context. [TODO Mention how images are different, they load in parallel and user can begin interacting beforehand. Can't say same about JS.] [TODO Emphasise the "behaviour messages" idea as well.]

Need to give performance reasons, could do with an eg in 2-3 sentences Also useful for cross-domain. "Conventionally best practice has been to include JS unobtrusively" [TODO Reword/elaborate if nec Maybe "best practice is ..."]

Should have a pattern for modularising your system [TODO More background info on this, if not separate pattern.]

Near the end of the Solution Variant: Question - What does it mean to add new members to the DOM? [TODO Clarify ie that nothing will actually happen.] Javascript Response - Reword to "Behaviour Message"

Didn't feel that I knew how to do it. Got the big picture, but not the details, even though lots of pointers. If author wants me to implement it just by reading the pattern, needs more details. - But I never feel like I can do anything unless I try it. [TODO Check (the book version has updated this, check that).]

Interesting if browsers could do this automatically. Cache JS. [MM Caching addressed in latest book version.]

Question on debugging: What if run eval(js) - if you look at src for the original page, it won't be there. How will you find those definitions when you're in the browser? That could be a good reason not to use it. [TODO Discuss Venkmann-handling (should work ok).]

============================================================================== 55:30 XML Data Island

Have a group of data you want to do something with - bring the XML in, display the table etc from that, and you still have the data.

What's the motivation of having it in XML? - They do say that - "could have a custom data format" etc.

Interesting. Stick an entire chunk of XML, which is gibberish to the HTML, but can still use it.

"Even without these browser-specific technologies ...", so the author thinks XSLT goes along with XML Data Island. - Then you do get this agreed-upon standard for doing these transformations. - HTML has a schema. - Ah but there's this special XML tag. Best thing is for the browser to ignore it - they can all ignore it in a portable way. (Laughter.) - Some people here speak other languages - we're all used to hearing a language we don't understand and we all ignore it - common human reaction, and somehow our programming languages don't do it. Only thing that's advanced enough to ignore things it doesn't understand is HTML. - Ajax is defiantly utilitarian - unrelentingly ugly and people just plow ahead. One thing now is that org's like Google can pay people to plough through the ugliness - crud to deal with, browser dependencies

============================================================ 1:05 This pattern answers why using XML. Ajax apps so dynamic, talking to the server all the time. - With HTML, could convert on the server [TODO Why not server-side XSLT] - Mentions you can offload work - Don't want the GUI to be hard-coded into the server. Story is weather info - just has to tweak the XSLT - doesn't change the XML coming from the weather place. Your portal can display it different from anyone else. - Fits with web services - cf Stylesheets [TODO Good to have links to tutorials on XSLT. Chiliplop pattern language (?) Book on XML patterns, never finished. On website.]

============================================================ 1:12:30 Browser-Side Templating

Didn't see any templates I really liked, even though should
be do-able.  Authors thinking it makes life easier for web
developers, I don't know.
  - My guess is that it makes life easier ... because half of
    them are below average, below-average programmers like
    when you can cut-and-paste etc
    [MM Surprised it's seen as a cut-and-paste technique -
    really just a means of separating presentation from
    logic.]
  - With JSP etc, can still let a web designer work on the
    template
    [TODO Explain why - ie to keep the HTML dependence in the
    web tier]

Comet: It’s Ajax for “Push” (Podcast)

Here’s a podcast about Comet – exploring the two-way web with Ajax. From my Ajaxian post earlier today:

Alex Russell has coined a term for a flavour of Ajax that’s been getting more attention of late. Comet describes applications where the server keeps pushing – or streaming – data to the client, instead of having the browser keep polling the server for fresh content. Alex identifies several buzzworthy examples:

This is an important article because it captures a growing trend in Ajax, a trend I had in mind when I said we expect to hear more about “Push and the Two-Way Web” in the next twelve months, on the occasion of Ajax’s birthday. There will, of course, be people saying “there’s nothing new here”, and that’s presumably all too obvious to Alex himself, who has worked with these ideas for a long time. But as with Ajax, it’s the power of a name. I don’t think these ideas can adequately be described as Ajax, because Ajax changes a lot about the browser whereas Comet fundamentally changes the nature of browser-server communication. I see Comet as part of the overall Ajax trend, complementary to the UI aspects of Ajax.

People may also say there are existing names like “Push”. True, but they have baggage – I think it’s useful to have a name for this architectural pattern in light of the relationship to Ajax.

Anyways, I wanted to expand on some of the thoughts in the article and after the recent Basics of Ajax Podcast, I’m in the mood for more audio rambling. So here’s a 56-minute discussion about Comet and the general trend of push and streaming within Ajax.

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

Shownotes…

It's the Duplex, Stupid! Push or Pull - it doesn't matter so much. What's critical here is the focus on the two-way web.

Applications - Chat - Wiki - News - Current events, sport, financials, etc - Trading and Auctions - Real-time control and logistics - File transfer (combine with local storage) - Any other genre you'd care to name

Vanilla Ajax: Await the User

Comet Ajax: Keep Pushing

Polling Ajax: Keep Pulling

Benefits of Comet - Responsive: data pumped out immediately - More stable profile - Less overhead of establishing connections

Benefits of Polling - Browser memory - Can run on any standard server; Comet requires suitable server - Can upload at the same time - Can run on - with Comet, XHR and IFrame won't always reflect changes while the connection's open - Being more standard, works with existing infrastructure. Comet is vulnerable to middle-men dropping the connection. - Simpler architecture - only the browser's in control - Easier to test - More familiar architecture - Less programming effort - with Comet, must watch for changes on the stream - More efficient for infrequently accessed data - Leverages caching

Maybe Comet causes more pain, but if it keeps the user happy ...

Questions and Trends - Which to use. Variables include: frequency of updates, importance of updates, server capabilities, target browsers - Dealing with incoming messages, e.g. Distributed Events pattern, Event bus (browser or server?), etc - Workarounds for throbber, status bar, clicking sound, etc. - How often to drop connections - How browsers can accommodate it

Proof-Of-Concept Demos - Wiki using Periodic Refresh/Polling - Wiki using HTTP Streauh, Comet (Actually, this is only a very basi implementation - there's no use of events, just custom handling of HTTP.

Related Patterns - HTTP Streaming - Periodic Refresh (aka Polling) - Distributed Events

As always, feedback is welcome – [email protected]

SAG Ajax Patterns Review 2 – User Action, Scheduling, Web Service, REST, RPC

Following from the previous post, here’s my notes from the second SAG workshop/discussion on the Ajax Patterns. See the earliest post for a background on this series.

Feb-2-2006 Second Ajax Patterns Discussion

“We should set up wizlite “sag” group for annotations” [MM For the benefit of others, the online book draft version uses Alex Kirk’s Wizlite.] Wizlite – is it Ajax? [MM Yes, Alex Kirk’s a prolific Ajax developer and writer]

Wizlite – can you trust the data on all these things to stay online [MM Backup solutions like openonomy, part of the argument with these Web 2.0 things is they host it, but you own the data, so you can in theory point a backup service to it and at least you’ll always have the raw data. As for privacy, not much you can say about that (although, in theory, Ajax lets you host encrypted content- see the Host-Proof Hosting pattern). Also, some free content is available, then removed.

Maybe AjaxPatterns.org will go down when the book is published [MM I know it was a joke, but just to let you know, won’t†happen. It’s a CC license, and a big factor in going with O’Reilly was being able to keep the wiki online before, during, and after. Interestingly, O’Reilly didn’t have the Rough Cuts program going at the time, but they presumably had been planning it.]

Author had some auditory issues, need to fix that. [MM Thanks, this mp3 worked out better. The first one was fine too once I listened to it with better earphones. Given the quality of my own podcasts, I certainly can’t be a critic here. BTW I think it would be great if the SAG talks were actually linked from a feed. To me, this is the best kind of podcast you can get – it’s zero effort – a meeting that would have happened anyway. (Unlike, say, me rambling about Ajax, which is not something I normally do spontaneously)]

=======================================================

10:50 User Action

So what is the User Action pattern? – What’s the proper way of handling user actions? – “User Action” is more of a problem than a solution. More Event Handler or Callback. Names are typically solutions. Or does a JS programmer call it that? [MM No]. – Rather call it Listener than Event Handler if that has a narrower connotation. – Depends on what people really call it. – But better names come along too, e.g. “Ajax”. – Listener is kind of Java-ish, and JS and Java don’t have much in common other than the name. – The “Java” in “Javascript” name was marketing-driven, a misnomer. [TODO Mention ECMAScript/Javascript distinction in conventions section] – => Suggestion to author for rename

Implies you’re not going to see that event loop, it’s invisible, it’s probably more in the virtual machine. – If doing distr’d programming, end up with lots of loops. Difficult to integrate different packages. If all buried inside the language, could be better because no incompatibilities, but could be worse because it’s invisible. – So events are part of this language. [MM Yes, part of the browser’s DOM implementation]

OK, issues – Not specific to this pattern, but author discusses incompat’s between IE and Firefox. Should be some mentioning about this. [TODO Check pattern mentions libs and deals with this in general terms. Note that intro will discuss how incompats are handled. Mostly, the answer is “Use a library” and that it’s beyond the scope of this book – refer to a JS/DOM book instead. Also, note that I only address IE and Firefox directly.] – Prototype library deals with this. – IE7 uses XHR natively. [MM True, though not a huge deal, before you just needed a factory function. The bigger question is whether they behave the same] – Code – redefine the event handler – is that common? Wouldn’t normally do that. [TODO Indicate this is rare, possibly scrap the Decision. Note: This is indeed somewhat rare]

Could people write a User Action – Just showed onMessageMouseOut or whatever, needs to at least show the outline of the function [TODO I think the request here is to show the signature of onclick, onkeypress, etc. Except they’re all the same – onclick(ev), onkeypress(ev), etc. Need to clarify this in the solution] – Interesting that not compatible across all platform – Couldn’t you abstract out differences between events [TODO I thought that was mentioned, including the quirksblog et al contest, check it] – Interesting discussion on p5 about dynamically .. – Upon seeing that, and if he feels that way, scoring this as a variant of Observer would be an interesting way to go. – That section was a bit confusing. Third parameter was confusing. – How often do you need to have >1 event handler? Not very often. And can always have a composite handler. [TODO Mention that.] – JS event mechanism involving strings e.g. “onclick” for the event handler. Neat but refactoring side of me starts to worry. [MM Could say the same about onclick … in JS x.onclick is equivalent to x[“onclick”].]

=====================================================

29:00 Scheduling

What is it? – As the author puts it, running something at a time in the future or repeatedly. – Another use of event handling. And that’s one reason why “User Action” is better than “Event Handling” [MM That’s basically the rationale I used, could still be “UI Events”] – The vocab is tricky because the overall JS vocab and ideas are still emerging. – Maybe some background on JS event handling is available in the earlier section. [TODO No it’s not. A little in the tutorial but no. Needs sidebar perhaps.] – Is the author assuming JS? [MM Assuming basic knowledge. I suspect most readers have done a little hacking with it, the kind that was used in pre-Ajax style web development.] – Seems like it’s assumed. – But sometimes seems to assume reader doesn’t know anything about JS. [MM Unfortunately, Ajax is so all-encompassing that it’s a tricky issue, and the group of people who could benefit from these patterns is also quite wide. So it’s been a juggling act, but I’m really assuming some basic web development, and not necessarily any general GUI development (ie there are plenty of people who’ve programmed PHP for 5+ yrs, maybe since high school, and have never done anything like Swing).] – Only has example of one-off. Not for repeated event. [TODO Check that. (Solution itself includes that, but maybe reference it from examples, or reference other examples that use it eg Live Search).] – I thought it (JS) was supposed to be object-oriented – As much as it’s like “Java”. – I saw that JS is a prototype-like language in the Self tradition. [MM True. Each object has a mutable “prototype” property. We still need to work out how to fully harness it] – Could also have network events [TODO Sidebar: Also point out other events: XHR, onload/onunload] – Worth mentioning that the timers are not really timers, I’m not going to run my pace-maker using these timers [TODO Precision of timer]

===================================================== 41:00 Web Service

Author provided it even though not on the wiki (as with Ajax App)

Quite short and for being an important pattern, it didn’t seem to be very detailed. So what is Web Service? – Just seems real simple, what the Ajax .. is going to call on the server. – Uses HTTP protocol to pass parameters and bring back data. Could use SOAP, whatever. – It’s a Context, not a pattern. I’m not sure how serious I am about that, but … – Problem: What will the Ajax App call on the Server. – Important to have a web service, just not sure (??if need it as a pattern). – Name is ambiguous (because of SOAP etc) – Well that’s what there are other patterns for eg REST and RPC. – Part of the problem is there isn’t much content to a web service. The hard part is working out what all the messages are, what to expose, etc. – Even when CORBA came out, we felt like, this is old-hat, just trying to standardise what we’ve been doing, etc. – Want to have layers – CORBA, COM, components, Web Service is just the latest in a long line. SUN-RPC (early 80s) was already a standard. – This not only doesn’t tell you how to do these hard issues, but doesn’t…. I would like to see something like: Just because decided to do web service, problems aren’t over. Only just begun. Have to decide on (etc). People want freedom from choice. One reason people like SOAP, REST, etc. [TODO Mention that] – Also, why did web services arise that way? Why not a custom service on port 1065? Why HTTP? [TODO Sidebar? Forces?]

===================================================== 53:10 RESTFul Service

  • Main distinuishing factor bn REST and RPC: REST uses standard keywords for communicating to services. He has interesting anecdote on Google (Accelerator).
  • The idea is if everyone starts following REST, documentation is minimal.
  • “Motivating REST” – He does say important things like there are going to be web crawlers, caches, proxies, etc. So how can you make sure people’s assumptions are met … [TODO Check this is emphasised enough] And I think that’s a big part of REST. [TODO Use the browser as an example, ie type URL makes it perform a GET request]

What do you wish you had in here? – No (I didn’t understand REST from this). – REST = Non-SOAP procedure call. – I’ve heard people say you can use SOAP in a REST-like way [MM Yes, mentioned in “RPC Call” pattern and also in the RPC discussion in the REST solution] – How is this different from a standard form submission? [TODO Sidebar or explanation comparing to std web call? e.g. REST usually returns XML] – Normal web form submission is REST automatically, although one of the things is you want POST to be idempotent. So when you POST, you’ve made a new object. ie Put an ID on the form, so when you POST it says “I’ve already seen this. You’ve sent me this order already.” So won’t put in two orders. – Okay, I was going to ask this … using the URL as a piece of the environment? – No, not the URL. Cannot do it with the URL. The URL tells you the object that you’re posting. – Points to examples in Solution. But these aren’t RESTful [TODO *** Make it a lot clearer that these these match examples aren’t necessarily RESTful!!! I think these might have set the stage for general REST confusion!] – Football service [MM Incidentally it’s Aussie rules :->] – Matches==Games [TODO Change to “game”, good enough for everyone] – I think REST would be good for CRUD, but not sure for transactions. – Well, TX’s are more difficult. Have to make an object that represents the TX, and that’s how businesses work. “I sent you the purchase order, etc”. [TODO Be more clear on this] – Author should describe something outside CRUD. [TODO It’s already there in later sections, but maybe discuss it upfront?] – Was looking forward to learning about REST, but still left wanting more. – The important people here are those who don’t know REST, hence probably needs more content even though it’s already long. [TODO Consider what to add/change] – TODO A REST and RPC FAQ Sidebar – e.g. Can RPC be RESTful?

===================================================== 1:13:55 RPC Service

  • Package up params, unwrap etc. There’s a bunch of ways to do it and he talks about them.
  • Call-By-Reference. URLs can be your references [TODO Mention that]
  • With REST. A lot of things you could say. e.g. Make up all the arguments in the URL. But if you have side effects, that doesn’t work. The side effect operations that aren’t idempotent, e.g if you’re doing SOAP, args will be passed in the POST message, so the URL isn’t really a resource.
  • Pretending you can treat the world as a bundle of RPCs, have to cope with lack of availability, errors, etc, which make RPC unreliable.
  • Which is why REST is successful. What if someone moves a page?
  • Would be nice if RPC was possible, but it’s just not.

1:22 Next time: Patterns after RPC Service?

Basics of Ajax 3 of 3: Events and Much More (Podcast)

Ajax Basics 3 of 3

This is the final of three podcasts on the basic Ajax patterns.

  • Podcast 1: Display Patterns and the DOM.
  • Podcast 2: Web Remoting – XMLHttpRequest, IFrame Call, HTTP Streaming.
  • Podcast 3: Dynamic Behaviour – User Actions (Events), Timing, Ajax App, Web Service, On-Demand Javascript, Richer Plugin

Podcast 3: User Actions (Events), Timing, Ajax App, Web Service, On-Demand Javascript, Richer Plugin

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

This 77 minute podcast covers all the foundational technologies not yet covered in previous podcasts. Due to some reshuffling as the book was being edited, there are now four more patterns here than previously announced:

  • User Action Using the DOM’s event mechanism to deal with user actions such as mouse clicks (02:05)
  • Scheduling Schedule one-off or continuous events – Javascript code to run in the future (15:55)
  • Ajax_App The root of all Ajax (Note: The wiki version is empty at this time). Discussion of [Ajax Deluxe versus Ajax Lite]((http://www.softwareas.com/ajax-lite-versus-ajax-deluxe). (22:10)
  • Web Service The thing what sits on your server and gets called by the browser ‘n’ stuff (Note: The wiki version is empty at this time) (31:30)
  • On-Demand Javascript Remoting via Javascript – allows cross-domain remoting and lazy loading of modules (34:35).
  • Richer Plugin “Richer Plugin is an acknowledgement that Ajax alone is not always enough” (This pattern was the subject of the recent “What Ajax Can’t Do” debacle – Quote from Digg user: “This article is total crap.”) (48:20)

Featuring Ruby music by Why.

That completes the Basics series. Once the book is out of the way (Real Soon Now), expect to hear more Ajax pattern podcasts!

As always, feedback is welcome – [email protected]

Basics of Ajax 3 of 3: Events and Much More (Podcast)

Ajax Basics 3 of 3

This is the final of three podcasts on the basic Ajax patterns.

  • Podcast 1: Display Patterns and the DOM.
  • Podcast 2: Web Remoting – XMLHttpRequest, IFrame Call, HTTP Streaming.
  • Podcast 3: Dynamic Behaviour – User Actions (Events), Timing, Ajax App, Web Service, On-Demand Javascript, Richer Plugin

Podcast 3: User Actions (Events), Timing, Ajax App, Web Service, On-Demand Javascript, Richer Plugin

Click to download the Podcast. You can also subscribe to the
feed if you want future podcasts automatically downloaded - check out the
podcast FAQ at http://podca.st.

This 77 minute podcast covers all the foundational technologies not yet covered in previous podcasts. Due to some reshuffling as the book was being edited, there are now four more patterns here than previously announced:

  • User Action Using the DOM’s event mechanism to deal with user actions such as mouse clicks (02:05)
  • Scheduling Schedule one-off or continuous events – Javascript code to run in the future (15:55)
  • Ajax_App The root of all Ajax (Note: The wiki version is empty at this time). Discussion of [Ajax Deluxe versus Ajax Lite]((http://www.softwareas.com/ajax-lite-versus-ajax-deluxe). (22:10)
  • Web Service The thing what sits on your server and gets called by the browser ‘n’ stuff (Note: The wiki version is empty at this time) (31:30)
  • On-Demand Javascript Remoting via Javascript – allows cross-domain remoting and lazy loading of modules (34:35).
  • Richer Plugin “Richer Plugin is an acknowledgement that Ajax alone is not always enough” (This pattern was the subject of the recent “What Ajax Can’t Do” debacle – Quote from Digg user: “This article is total crap.”) (48:20)

Featuring Ruby music by Why.

That completes the Basics series. Once the book is out of the way (Real Soon Now), expect to hear more Ajax pattern podcasts!

As always, feedback is welcome – [email protected]

Advanced Feature Wishlist for Ajax Frameworks

Looking at the best practice/process patterns gave me some ideas for Ajax frameworks. Here’s a few thoughts. I know some frameworks already do some of these things, though most don’t, and none do all of them.

Logging frameworks should provide a sensible default, ie log to a div, but allow for more flexiblity on the logging strategy, as in log4j. For example, it would be nice to hook into a local storage solution like AMASS. I know we can all “spy on users”, but a local storage solution lets you amass lots more data, helps solve some privacy issues, and will survive network problems … could even help restore lots data. I’m obviously thinking more of intranets than public internet apps.

Mock object frameworks should, um ,exist. As I mentioned last week, there’s definitely a good case for a JS mock object library like JMock.

Web Remoting frameworks should:

  • Provide a high-level, technology-free, interface, and then implement it in as many ways necessary to support the greatest amount of browsers possible. Gloves off – IFrames, Images, Stylesheets … whatever works.
  • Make access to 3rd-party domains virtually transparent. e.g. CPaint does this by allowing a proxy option, which points to a proxy running on your server. That aside, calls are same as normal.
  • Support simulation. Let a caller prep the remoting framework with the response it should provide to a given query. Testing in that way, I could see very little reason to ever go back to the real server if you could do this.
  • Support logging. Rather flabbergasted that I couldn’t find a framework that supports logging of remote calls. The new Network Sniffing pattern describes other tricks for logging browser-server traffic, but the JS remoting frameworks ought to take care of it.
  • Support mocking. In addition to prepping with the response, the caller should be able to say “throw an exception if you don’t get this query”. Note that this wouldn’t need to be the responsibility of the remoting framework if there was a general-purpose mocking framework available.

8 New Ajax Patterns (Diagnosis and Testing)

Cool! The Best Practices/Processes Patterns are now complete. They are the final eight Ajax Patterns for now – “final” in the sense of “the list is not yet finalised”. The patterns had been sitting there unattended for about four months now.

More details on the new patterns later, but here’s a quick summary …

First, there’s a new demo – the Ajax Patterns Reader – the best version to try is at http://ajaxify.com/run/reader/logging/realService/. The reader grabs the AjaxPatterns.org content and presents them Ajax-style. You actually queue up patterns in a playlist and click “Next” to “play” them. Yeah, a bit contrived, but it helped illustrate quite a few patterns! If I have time, I’d like to enhance it into a proper reader, and also offer an easy interface to leave feedback, which would be automatically appended to the wiki’s Discussion tab for that pattern.

BTW This further refactoring of the Ajax Patterns Reader illustrates the Scriptaculous GhostTrain tool. If you haven’t seen GhostTrain, have a look – the Javascript will track your activity and build up a test case dynamically (covered in the new System Test pattern). All within the browser. I’ve been in contact with the developers (Thomas and Jon), and discovered it’s still proof-of-concept, but if they can tie it all together, it will be an excellent way to create a system/functional test.

Next, there’s four patterns on diagnosis:

And finally, four patterns on testing:
  • Simulation Service Develop the browser application against “fake” web services that simulate the actual services used in production.
  • Browser-Side Test Create automated tests of browser-side Javascript components.
  • Service Test Build up automated tests of web services, using HTTP clients to interact with the server as the browser normally would.
  • System Test Build automated tests to simulate user behaviour and verify the results.