1. Hijax: Progressive Enhancement with Ajax

    clear:left

  2. The problem

    Treating Ajax as an “all or nothing” technology.

    It will take a lot of time and effort to create a “separate but equal” non-Ajax version.

  3. The solution

    Progressive Enhancement

  4. Progressive Enhancement in theory

  5. Progressive Enhancement in practice

  6. CSS: inline vs. external

    Gotta keep 'em separated

  7. JavaScript: inline vs. external

  8. External JavaScript function

    function doPopups() {
      if (document.getElementsByTagName) {
        var links = document.getElementsByTagName("a");
        for (var i=0; i < links.length; i++) {
          if (links[i].className.match("help")) {
            links[i].onclick = function() {
              window.open(this.getAttribute("href"));
              return false;
            };
          }
        }
      }
    }
  9. Unobtrusive JavaScript

    Avoid:

  10. Applying Progressive Enhancement to Ajax

    “But it's a whole different paradigm — the old rules don't apply.”

    “But it's not a website anymore — it's more like a desktop application.”

  11. Why it matters

    “It must degrade well. It must still be accessible. It must be usable. If not, it is a cool useless piece of rubbish for some or many people.”

    Thomas Vander Wal

  12. The Hijax approach

  13. Server-side requirements

    Lego bricks

    Back-end architecture should be modular.

    Web pages are created by joining modules together (e.g. navigation, log-in form, shopping cart, etc.)

    [Hint: APIs are very modular]

  14. The paradox

  15. Pattern recognition

    A page that includes a form: when the form is submitted, the same page is returned with just part of the page updated.

    Example: Contact form (JS)

  16. More pattern recognition

    Clicking on a link returns the same page but with one portion changed (different data or different view of data).

    Example: Shopping cart (JS)

  17. Choosing a data format

  18. Keep It Simple Stupid

    Dumb waiter

    Use the XMLHttpRequest object like a dumb waiter:

    Client-side processing is kept to a minimum: all the heavy lifting happens on the server.

    Example: Sorting tables (JS)

  19. Benefits of Hijax