Building Single-Page Applications Using jQuery And ColdFusion With Ben Nadel (Video Presentation)
Posted October 9, 2009 at 2:41 PM
The following video and slide show is my presentation: Building Single-Page Applications With jQuery and ColdFusion. Building a single-page application is a radical shift from the request-response lifecycle that many of us are used to. Not only does it require an excellent Javascript abstraction layer like jQuery, it necessitates a more complex system architecture. In this presentation we will explore ways in which we can organize and define our client-side code to make single-page application development with jQuery more manageable.
| | | | ||
| |  | | ||
| | | |
The video is broken up based on a Table of Contents. At the bottom of the video, next to the time line, there is a small icon that looks like a piece of paper; clicking on that icon (of putting focus on the movie and hitting CTRL+T) will pop-up the table of contents which can be used to jump from chapter to chapter. The following chapters are available:
- Introduction
- Not Your Typical jQuery Presentation
- jQuery Conference 2009
- Still Learning!
- Application Demo
- Application Architecture Overview
- Part 1: jQuery
- jQuery Architecture
- Self-Executing Function Blocks
- Application.js Is A Factory
- Adding Controllers
- Adding Models / Views
- jQuery Code Demo
- Model: Contact.js
- Model: Contact_Service.js
- View: Ajax_Notification.js
- Controller: Contacts.js
- Tracing Client-Side Page Requests
- What Else Is Out There?
- Client-Side Only Version
- Part 2: ColdFusion
- ColdFusion Architecture Overview
- Why OnCFCRequest()?
- ColdFusion Code Demo
- Application.cfc
- The SOAP Philosophy
- Outroduction
If you want to play around with AwesomeContacts - the single-page jQuery demo application - you can view it here, or you can download the ZIP archive of the code here. I have configured the download so that it starts out in "static" mode such that it doesn't require any server-side technology to run.
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
jQuery Plugin: From - Filtering A Collection Based On Ancestors
Older Post
Passing A Function To jQuery's Attr() Method For Implicit Iteration
Reader Comments
Ben, I watched this the other day elsewhere. Appreciate you taking the time to redo it and provide source files.
@Todd,
My pleasure. I learned a lot doing this :)
Looking forward to giving this a try this weekend.
BTW - Love the new classifieds for CF9!
Whoa... this blew my mind! I just recently got into doing more client side javascript stuff with jQuery and this is awesome. I've been missing out on a lot of powerful techniques.
Great presentation! I'm really blown away by the amount of work you obviously put into this. It's clear, well organized, the explanations are thorough, and perhaps most important, the content is practical and useful. Next time I need to build a desktop style web app, I may actually use this as a starting point. Many thanks and keep up the fantastic work.
Great presentation Ben, as a lover of both JS and CF and a firm believer that there should be a CFJS server-side ability, I was wondering what your opinion would be on CFJS?
Basically the ability to have an Application.cfjs file which is JavaScript 1.8, e4x compatible with the ability to load a file into DOM and use jQuery server-side but executes onApplicationStart, onCFCRequest and the other CF server functions allowing for cf files to be included as cf can include jsp pages now.
I always think that .NET includes C#, F# JScript and VBScript, so where is the harm in ColdFusion including cfml and cfjs (and perhaps also server-side ActionScript).
Hi Ben,
Great presentation - amazing material and incredibly well presented.
Thank you
Ben,
Fantastic presentation. Is Application.js a framework of yours? I'm having trouble finding information on it through google... I'd like to know its licensing information and whether there's a website with documentation (yet).
Thanks
Cool demo. Haven't gone through the video (yet) but checked out the source, and cool to see MVC making it's way into JS. I've been playing a lot lately with single page apps that gracefully degrade if something off happens, and use event delegation to capture any actions, so it's really cool to see a real example of that type of approach (at least through a single page app that doesn't rely on iframes).
Good demo but there's one major problem with the AwesomeContacts application; it doesn't work at all without JavaScript turned on.
This won't be a problem for the vast majority of users but will cause issues for spiders; especially GoogleBot. Spiders don't use JavaScript so Google won't be able to index your application and you won't get ranked well at all.
If you want to have a one-page site, you need to provide a way for Google to index the site or SEO is impossible.
George.
@All,
Thanks for the nice feedback; glad you're liking the presentation.
@Marcel,
That might not be so crazy. Have you played around with Rhino at all? I have not yet looked into it, but it's basically an environment for running Javascript on the server. It's probably something I should look into.
@Mike,
The Application.js is something I built from scratch for the presentation. I am thinking about fleshing it out and giving it some documentation. Is that something people would be interested in?
@George,
That's where I draw the line between "websites" and "applications". Certainly, a website needs to degrade nicely for users and SEO purposes; but, this is really an "application" that has a set of system requirements that go with it. I don't think there is anything wrong with saying to people - if you want to use this *application* you need to have Javascript enabled. period. - otherwise, I simply cannot ensure a quality if user experience that this was all designed to achieve.
I've be doing it all day, not that great with Java, but slowly getting there, I now have the Javascript loading ok and loading envjs and creating the DOM, tomorrow I will try to push it further and see if I can load a html page into it (I think I may have sorted that but still not sure how to check :) ).
I got CFGroovy2 and it works great only it is an older verion of javascript and I am not sure how to get the one I am using (1.7) to load instead.
I think it could be all levels of awesome if the Railo guys could help CFJS take a step forward. I truly believe that it could massively increase the level of interest in ColdFusion which benefits us all regardless of our own interest in server-side javascript.
Perhaps I will grovel at Mr Forta's feet when he comes for cf.Objective(ANZ) Melbourne (My home town, YAY) in November and see where that gets me :)
PS. I'll keep you posted on my Rhino experiments and send you the files when I find something of use if you are interested.
The graceful degradation part for Spiders and JS turned off wouldn't be too too. Most of those ajax requests are MVC based, so you could easily just right in the anchors to an address that exists so that when a spider hits them, it loads up the view.
Then override the client side clicks and capture them to load those views via AJAX. I don't think it'd be too much extra work and would make this thing search engine friendly.
Great presentation Ben,
A combination of jQuery and coldfusion is always awesome. They are the best frameworks out there imo.
Khoa
@Marcel,
Yeah, I was thinking about seeing if CFGroovy could load the Javascript - I assume Rhino just comes as some JAR file, but I haven't looked into it yet. It could be very exciting.
@Oliver,
You could certainly do it. My only question would be if it's worth the effort? When you are going to build a complex piece of software, there are simply expectations OF the client that might need to be met. Look at places like 37-Signals which is no longer supporting IE6 in their application development.
I'm not saying you can't do it - I'm just wondering if it would be worth it in the context of "software applications"
@Khoa,
Agreed!
@Ben
I think you're missing the point. You can certainly expect *users* to have JS turned on. Spiders (or robots, or crawlers, or whatever you want to call them), however, cannot be expected to parse JS. The GoogleBot is such a spider.
If your site doesn't work at all without having JS turned on, it can't be crawled by Google and you won't appear in search results (or won't be ranked well) because the site won't have been indexed due to the fact you're *requiring* JS to be turned on in order to use the UI.
If you want to appear in Google's index, you absolutely *have* to have a version of your site which can be used without JavaScript. It doesn't have to be overly pretty or have every piece of functionality present in the 'JS-enabled' version. It just has to be easily crawlable and optimised as such.
SEO is a whole different ballgame for another day but to put it in perspective, we employ someone specifically (and probably pay them handsomely) to make sure our site is ranked very well by Google. It's serious business which all starts with your site being able to degrade well when the user-agent doesn't have JS turned on and hence be indexed in the first place.
George.
@George,
Ahh, I see where our disconnect is - I don't expect a site like this to be crawled by a search engine. I am talking about building *software*, not *websites*. Most likely, an application like this would be behind a login screen or probably on some company's extranet, beyond the reach of a spider.
Sorry if I was not clear about that. I am not sure what kind of value an architecture like this would add to a public site. If you look at the applications that heavily use AJAX - Basecamp, FaceBook, GMail - they are all "private" applications, away from the public eye.
So, yes, if you intended to use this for a purely public site, then yes, you might, at the least, need to supply a non-JS version of the site. Sorry for misunderstanding where you were going with that.
George -
Sheesh! You are really stuck on this crawling thing. I can tell you that the majority of us that would be designing such an application would not have it hanging out there for public access.
Now, the one issue might have to do with accessibility for visually impaired users. So, there is a potential for a lawsuit as I doubt that JAWS or whatever it is could handle this beast. I don't know what the latest is on accessibility and the law. If you hire someone and all your Intranet software is done with jquery and the user cannot use it, then there is either a lawsuit or some major bucks to recode.
However, there is a lot of talk about accessibility and jquery, so there is probably a solution to make everyone happy.
Great job Ben. Do you have any plan to build a CF 8 version? Thnx
@Marco,
Thanks my man. The focus of the talk was more on the Javascript side of things. I don't think there was anything on the server-side that was targeted at a particular version of ColdFusion. If there is any CF9-specific stuff (which I don't think there really was), it would only be at the syntax level.
Is there something in particular that you were thinking of?
Looking your code I found parts based in CF 9 version. Nothing is sooooo difficult to translate in CF 8 flavor. Like this in APIResponse.cfc:
<cfset var local = {} />
to
<cfset local = StructNew() />
Thanks for your time.
@Marco,
Ah, gotcha. That's actually CF8 syntax. In CF9, I wouldn't even need to create the local scope - it is created implicitly.
You must be running on CF7.
