Stuart's smart and articulate, not to mention that he's a hometown boy.
Many of the recent successful companies (google, yahoo...) didn't come from vendor-supplied solutions. They evolved on Open Source, by having a good idea, being early to the solution space, and pursuing it tenaciously. AJAX (and likely on Ruby on Rails) is a great enabler for
97% of AJAX traffic on the web is html. But he lies. He pulls number out of his, erm.... thumb.
Prototype, the Library
It provides low level support for dynamic web apps, hiding browser oddities. It's used by Scriptaculous and Rico, and was driven and inspired by Ruby on Rails - the method names in it a RoRish already. It does xhr completely and provides some JS extensions. It does a bit of DOM and CSS/Behavior stuff, and in Stuart's model, it does 'view-centric' ajax (sending mostly html to the client).
Next we demo'd a basic type-ahead search app (think GoogleSuggest). There is lots of space for compromise, from doing full ajax (lots of server interaction) to pulling all results to the browsers and filtering things entirely on the client in js; there's all sorts of space for compromises in between. Doing ajax is about taking granularity from one page at time to much smaller mini-requests. For this demo, we talked through the Rails call to do this, then looked at the js that was generated as a result of that call.
Random tool aside: The Green Checkmark is the Firebug Firefox extension. Get it. Use it. It even has a Javascript debugger. Good mention too for the Web Developer toolbar.
The server side of the demo is in Rails; it does the database-y bit that does the search, then returns a rendered partial to the page with the results.
There are several useful XHR helper methods: link_to_remote, form_remote_tag, remote_form_for, observe_field, observe_form, submit_to_remote. These do a lot of common, useful, helperish stuff that you probably want to already be doing anyway.
Degradable Ajax
It's pretty straightforward to have an Ajax app behave like a conventional web1.0 app, albeit without the fancy typeheads and puffs and shrinks. If the ajax widgets call url foo, and the form submit url is foo, the action behind foo can be smart enough to know whether the request came from an ajax control, in which case it returns a partial, or if the form submits, it processes and returns the entire page.
Scriptaculous
Scriptaculous is a effects and widget library that builds on Prototype. It, too, is very Ruby- and Rails-ish in it's naming and parameters. The next demo and code review was a autocomplete field with Scriptaculous. The nextnext demo is a scriptaculous drag-and-drop demo. These libraries make it so darn easy those things that used to be such a pain.
RJS
All the code so far (and both libraries) falls flat at changing more than one section of the page at once. RJS does this, and it does it by sending js back to the browser to be executed. To get started do rake rail:update:javascripts. Add javascript_include_tag :defaults in your template page to get all the right libraries in your page. When you call something like this:
if @saved
page.visual_effect(:blind_up, 'model_form', :duration=>0.5)
page.replace_html 'model_error', 'Saved!'
else
page.replace_html 'model_error', error_messages_for('player')
end
page.delay(0.5) { page.redirect_to(:action=>'list') }
rather than the obvious-looking calls back to the client. It generate javascript and sends it back to the client to make these things happen.
Streamlined
Stuart, after doing DHH's 7 minute rails demo in 3 minutes, regenerated and threw the same screens up using Streamlined, his companies gee-whiz ajaxy rails generator. It's great. It's beautiful. It's wicked easy. And they're officially launching it here at OSCON (tomorrow, I think). What Stuart demo'd was just a little tiny taste of what it can do (as witnessed at RailsConf), and he'll going to floor everyone tomorrow at the conference session.
Random tool aside #2: JavasScript Shell another useful Firefox extension. It lets you run arbitrary js against your page on the fly.
More on Protype
At a more raw javascript level, the prototype library helps make js behave very much like a real oo language, and helps smooth over the difference between different vendors browsers. Getting down to js at this level, while painful at time, is necessary to work around certain kinds of problems. Prototype's usefulness shouldn't be underestimated. It's not just for visual DOMish javascript, but it adds considerable Object (big O) support to javascript.
Technologies from this talk to look more at:
- Streamlined - A fantastic ajax scaffold generator for rails.
- Prototype Window Class - a js library for doing windows.
- ARTS Testing Extension - good tool for testing rjs code
Stuart's presentation slides and sample code is available at codecite.com
-Bill
Tags: OSCON06, Ajax, RubyOnRails, Javascript
No comments:
Post a Comment