I gave a talk, recently, at @Media Ajax on jQuery (and a similar one at the Ajax Experience in Boston). I covered a broad amount of information (all the way from the absolute basics up to building and using plugins).
» Building Interactive Prototypes with jQuery
Here are the files mentioned in the talk:
- Accordion Menu (Apple.com) (Completed)
- Ajax Todo List (Completed)
- Ajax Social Networking Site (Completed)
I’ve had a ton of requests for the code to the completed social networking site and you can find that here (and in the above zip): social.php
I plan on turning the Ajax Social Networking Site demo into a screencast at some point, as some tend to find it rather compelling and useful.
Please let me know if you have any questions concerning the talk.
Simon Brüchner (November 30, 2007 at 10:58 am)
Great presentation!
darius (November 30, 2007 at 1:04 pm)
Excellent work on the presentation.
I am wondering what makes the examples you provide ‘Prototypes.’
Do you think it’s better to use jQuery as strictly a prototyping framework, and then building out optimized versions of the objects/functions in ‘regular’ javascript?
Tom (November 30, 2007 at 1:20 pm)
I’d like to hear the game plan of jQuery UI vs. ExtJS. Ext and jQuery are composable but also compete. I think jQuery is winning for a small, core feature set. But the full widgets always end up needed, and Ext is way ahead of jQuery UI there. Ext is just huge (but then there’s Joel’s argument which might eventually be right). Competition is great, but unless a de facto standard arrives, the real higher-level systems won’t get there, either.
And if you have concerns about the uptake of Ext, the trends show their beginning much like yours. I’d like to hear if you intend to continue competing or if some sort of cooperation could be worked out. And again, I’m somewhat fine either way, but this feature set needs to be provided before long from a de facto winner, so we can move on to grander things.
Just some thoughts.
Don Albrecht (November 30, 2007 at 1:46 pm)
Excellent presentation. It’s a great way to get people to appreciate the amazing capabilities of jQuery.
jQuery allows for the progressive construction of interactivity in a way that the other toolkits don’t and I think expressing it in terms of progressive prototyping & iterative development was a great idea way to promote it.
John Resig (November 30, 2007 at 2:44 pm)
@darius: Yeah, unfortunately I named the presentation before I actually gave it – in retrospect, I don’t talk a whole lot about prototyping (the only real example would be the accordion menu, I think). The audience at @Media was slightly more of the designer persuasion, hence why I structured the talk in this manner. And no, I don’t think jQuery is useful only as a prototyping language – I was just showing that it’s actually possible for prototypers (typically, designers) to create interactive applications, trivially.
@Tom: We’re planning on the next release of jQuery UI for mid-December (lots of bug fixes and added stability). Unless Extjs has a massive change of heart, I don’t expect there to be very much cooperation (their SVN is closed only to those who pay, they use a non-standard Open Source license, they don’t allow bundling of Extjs with other libraries, and you can’t re-use the theming outside of Extjs). On the other hand, we’re completely Open Source/Free Software from the ground up. Additionally, we’re moving in directions that they simply aren’t: We’re working to completely optimize for accessibility, coming in line with the ARIA recommendation (something that they’re not concerned about). If anything, ARIA could be seen as the de facto standard for browser-based widgets (Dojo being the first framework to follow them, we’re hoping to be next). So, in reality, let’s hope that Extjs starts to follow suit and get in line.
Tom (November 30, 2007 at 3:45 pm)
Thanks much for the information.
One more question, any chance for a combobox in JQuery UI? Or have I just missed it? (The data table could be spiced up, too, I think.) Thanks again for the info.
John Resig (November 30, 2007 at 3:49 pm)
@Tom: Here’s the rough road map that we have, going forward. I think ‘Spinner’ is what you’re looking for (Yellow means that it’s “planned for, but not started yet”). And, yes, the table sorter is fairly feature free, which is why we’re shooting for a full Grid implementation (which is what most people are looking for, IMO).
Tom (November 30, 2007 at 5:21 pm)
Thanks much for the additional info. (BTW, if ‘Spinner’ includes freeform, autocompleting text with optional enforcement of dropdown selection choices and custom rendering, then that’s what I want. I tend to think of spinners as meaning numeric entry with up/down buttons on the right, and I find those less useful as I’d usually rather just type the number I want.)
John Resig (November 30, 2007 at 6:03 pm)
@Tom: Ah, good point – in that case we do have ‘Autocomplete’ on the roadmap and it sounds like it meets the needs that you have.
Tom (November 30, 2007 at 7:58 pm)
Sounds great.
djot (December 1, 2007 at 9:44 am)
–
Hi John,
On page 25 (“Social Networking”) in the PDF the links do not point to the social site.
On the last page, all links are just text, so not clickable.
djot
–
John Resig (December 1, 2007 at 1:10 pm)
@djot: That’s correct – they’re just PNGs. That’s why I provided the links in the post itself, for you to visit.
Jörn Zaefferer (December 2, 2007 at 9:44 am)
@Tom: It may take a while, but eventually this autocomplete plugin should find its way into the UI project. You’re welcome to try it out now.
Philippe Rathe (December 4, 2007 at 12:17 pm)
Hi John,
I often read about jQuery being fully-documented. I just want to know if I’m missing something because speaking for myself, the doc on the official site is not documented enough. I was trying to find more documentation directly in the Subversion trunk javascript files, but I didn’t find any more.
I saw some of the Interface plugin source files (http://interface.eyecon.ro/) being well documented by you and it was good stuff.
Not looking especially for something as fully-documented as the YUI, but sometimes I have to guess some behavior.
Anyway I enjoy working with it.
Thanks.