Building Single-Page Applications Using jQuery And ColdFusion With Ben Nadel (Video Presentation)

Posted October 9, 2009 at 2:41 PM

Tags: ColdFusion, Javascript / DHTML

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:

1. Introduction
2. Not Your Typical jQuery Presentation
3. jQuery Conference 2009
4. Still Learning!
5. Application Demo
6. Application Architecture Overview
7. Part 1: jQuery
8. jQuery Architecture
9. Self-Executing Function Blocks
10. Application.js Is A Factory
11. Adding Controllers
12. Adding Models / Views
13. jQuery Code Demo
14. Model: Contact.js
15. Model: Contact_Service.js
16. View: Ajax_Notification.js
17. Controller: Contacts.js
18. Tracing Client-Side Page Requests
19. What Else Is Out There?
20. Client-Side Only Version
21. Part 2: ColdFusion
22. ColdFusion Architecture Overview
23. Why OnCFCRequest()?
24. ColdFusion Code Demo
25. Application.cfc
26. The SOAP Philosophy
27. 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  |  Other Searches  |  Print Page

• Add To Del.icio.us
• Add To Digg
• Add to Spurl.net
• Add to Wists
• Add to Simpy
• Add to Newsvine
• Add to BlinkList
• Add to Furl
• Add to reddit
• Add to FARK
• Add to BlogMarks
• Add to Yahoo! My Web
• Add to smarking
• Add to Ma.gnolia
• Add to Segnalo

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.

Ben, Thanks for your most excellent two (or was it thirty) videos on jquery (and with coldfusion)! I've seen both and I've learned tons, way more than I expected. The first (Intensive Exploration of jquery) is brilliant and I understood everything and I have not been intimate with any javascript libary yet. I've had spent a couple hours learning about jquery and your video hit the right spot for getting things to soak in. I regard it as superior. I think the first key to any tutorial (after the outline) is the intro which needs to target a relative novice while not losing the more experienced person.

This single-page application video has pushed me. I didn't get a lot of things in part one but I felt close. And all of it is stuff I want to know. The coldfusion part, which I expected to understand better was actually more difficult than I expected either because I was tiring or more likely because I have not used Ajax (which is another near term goal). Nevertheless, I know I'm on an excellent path and your presentation is again superior. Thank you.

I'm surprised there aren't more comments above on your model-view-controller architecture implementation - perhaps few have much experience. I think the side-track commenting on the no search engine finding does help raise the issue of where one would use this technology. Most web pages and sites don't need it, but it, and derivations of it, can be used to make outstanding "applications."

Can you recommend any books that complement this material. THANKS!

Bon Nadal (catalan) = Merry Christmas

;-)

@Gary,

I appreciate the super positive feedback. As far as what books there are available, I am not really sure. I have read a number of books about jQuery, but none of them have touched on the actual architecture and greater scope of the project at hand. I hope to be putting more time and effort into that understanding.

... I'll certainly keep you informed as new things come to fruition.

Hi Ben,

Thanks for the awsomeness of your post, it has really opened my mind to many possibilities.

I have built several single page applications in the past, using jquery.

I have never thought of using this kind of approach. It just makes sense!

My applications in the past have always ended up very difficult to maintain and hard to follow.
A mash-up of client and server side pages dynamically loaded into the single page's dom, with little defined structure.

I have a new project I am starting this week, which is probably going to take several months of development and possibly years of maintenance.

I am seriously considering using this approach, however i have a concern (probably due to my lack of understanding) namely:-

I use numerous jquery plugins (to cut down development time) things like validation, modal control etc..
How do you see plugins fitting into your model?

@Flum,

That is a good question, regarding the plugins. At the very core, you can still include all the appropriate scripts either at the initial load time (or later on the application life cycle - though that might be more complicated).

Once you have the script, it becomes a question of how to apply the plugins to the DOM. Much in the same way the jQuery UI had the concept of setup / teardown, I think it might be best to create views that have the same concept. Or something like:

* setup
* teardown
* show
* hide

This way, you could have ample hooks to create the appropriate plugin attachments. Then, it becomes important for your controllers to hide/show the views via methods.

Of course, this is all theory for me as I have never put something of this nature into production - I'm just learning here as well :)

Ben Nadel wrote:

@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?
=================================================

I will love that.

Hi, the framework and the demo are awesome! Do you plan to implement the full REST functionality for the framework? I see it only supports GET at the moment.

I would like to use it in a trial project if it supports at least GET and POST. ;-)

Hi Ben,

Just a heads up on 'including plugins' into your framework.

I have started developing an application using the above suggested approach and its working great!

At first, development time was super slow. I guess it took me longer than i thought to wrap my head around it all. But now, because everything is so well structured, I am cruisin!

Once i have my little demo up and running (acceptably) i will send you the link, maybe you could give me some pointers!?

Thanks again!!!

@Flum,

It's great to hear you are finding this practical to use. I have not had enough time to play with this. A few weekends ago, I tried to wrap it up into a project:

http://www.bennadel.com/projects/cormvc-jquery-framework.htm

... But there's still so much I want to try with it. Anytime you wanna drop by and leave feedback, it would be awesome.

@Felix,

Supporting "post" is an interesting concept. Other MVC style frameworks do support POST as a routing type; but, I am not sure I agree with that.

To me, POST feels like such a server-side command. I mean, of course GET is too, but at least we are "hacking" it with the URL fragment hash.

The bottom line is, POST requires the framework to know too much about the code that people are implementing, and that, at some level, feels inappropriate. If I want to do advanced AJAX posting with forms, I'll probably wire that up manually; after all, even if the framework responded to POST messages, you'd still have to manually facilitate the AJAX request.

At the end of the day, maybe someone just needs to explain to me what value POST would add.

@Ben,

One of the most value that POST can add is about security. Edit or delete an item via GET is dangerous, since you have to manually figure out a way to prevent CSRF attacks.

@Felix,

I don't think I know enough about security to really be able to weigh in on that. Perhaps you could help me out and expand a little on how you think the POST operation would / should be handled?

Hi Ben,

I have a question relating to your MVC "ish" architecture in your corMVC contacts example.

In the diagram
http://www.bennadel.com/resources/projects/cormvc/demo/index.htm#/

you suggest that the controller communicates with the app which in turn handles url changes. The controller then routes (controls) the appropriate view, and fetches the required model.
This makes sense to me.

In your code example however, it seems that the view and model is tightly coupled and that they communicate/control without use of the controller.

Consider the "listing all contacts" process in your example:
1. url is changed to #/contacts/
2. corMVC translates routes for controller.
3. Controller displays contacts view
4. Controller calls showView method in contacts View
5. Contacts view then speaks to the model and populates data into itself.

Could it maybe be something like this?:
1. url is changed to #/contacts/
2. corMVC translates routes for controller.
3. Controller displays contacts view
4. Controller calls contacts model and fetches data
5. Controller passes contacts data to a populate view method in the contacts view.

Would it not make sense to separate the view from the model and have the controller doing the work?

I guess I may be missing something, as I am pretty new to all this stuff!

Thanks again for the great ideas and help!!!

@Flum,

I'll be honest with you, I made the diagram without first reviewing the code (it has been a few weeks since I looked at it). The arrows were off... but it took me like over an hour to create that. I'll update it some time.

As far as the coupling between the various layers, when it comes to a system that lives in-memory, the line between VIEW and CONTROLLER start to blur. If you look at FLEX, some people consider FLEX itself to be both the Controller and the View; of course, FLEX now has MVC style architecture.

I am still learning how to think about this (as opposed to an old-school request-response client / server relationship), and it's not easy to think about. As I get more comfortable, I'll likely be upgrading this as much as possible.

This is all very new to me :)

Thank you very much for this very nice work and sharing. I copy your Demonstration files and wrote the SQL Statments with PHP and it works very nice. By study and testing your code I found two little Bugs.
1.) When I select more of one contact and go to the searchfield and enter a new name and press enter I get an empty formular with the new Name. Then I add mailadress and Phonenumbers and save the formular. Unfortunatly is the comittet id in this case not 0. It is the ID of the selected Contact before. In this case it is not possible to difference between an Update or an Insertstatment. My tests here http://www.bennadel.com/resources/presentations/jquery2/demo/#/ have the same result.
2.) When one or two Contacts display the defenitionlist and I press Enter in the empty search field I can not see the first three elements.

So I learned a lot of new thinks an I made a few new Fields in the my Database and change the JavaScript Code, and it works really nice. But I am new with such stuff in jQuery an so I hope, that you don't lough when I ask why contact.js and contact-service.js are diffrent classes is it not possible to write the model in one class?

Can I see somewhere the finished Coldfusion file?

Thanks a lot for this really nice tutorial. If you or somone else here can name other sources for learning such stuff I will be really happy.

Interesting article, I've been looking for someone who has taken this approach and not found many examples. We have a similar approach in that we have Microsoft WCF services sitting as an API feed of methods to consume. We have an application framework with a pagemanager js object which loads a control or page (ascx/aspx) and an associated javascript file, the page manager then initialises the given control. We've found it to work ok, though its met with a great deal of scepticism with classically trained .net developers (who seem to have no grounding in web).

Anyone else have any good examples of this sort of approach in an enterprise environment?

So Ben,

Would you attempt a real application like this if you were a CF developer or would you hire a javascript developer so it didn't take your learning curve to build it for the client?

I have built a couple first try apps in mootools, and I've done some similar quick and dirty functionality in jQuery.

Would you attempt this on a deadline or just in your spare time? I feel like I never learn unless I'm forced into a situation where I can't stand to build something the "wrong way" but I still have a deadline.

Am I the only one?

Hello Ben,

I try putting in Greek character for the name of a contact, and while the contact is stored OK on the .json file and then displayed at the end of the list, after wards the "search-as-you-type" doesn't work. When I delete the Greek contact everything gets back to normal. Is this app non-Unicode? What changes will it need in order to work with Unicode characters?

OK, just to update...
When the above scenario happens, I get this error message from the console:
"Javascript Error: contact.phone.toLowerCase() is not a function"

It indicates the following line in "contact_list.js":
"contact.phone.toLowerCase().indexOf( critiria ) >= 0 ||"

So, I tried wrapping this whole line in comment, and the application works as it should after a refresh. I tried putting in 2-3 contacts with Greek names and it searches them OK among the English ones. Weird... at least for me...
Any ideas so that phone search would work as well??
Ben?

OK, big sorry for all these comments...but I wanna make things right.
I found the problem. It has nothing to do with Unicode at all.
The problem is that, for the phone search to work, the phone value must consist of at least one "-" character anywhere inside the value. I was putting something like "12345" when I created my dummy contacts and I was getting the errors. When I edited my contacts and put "12345-" or any numbers with the "-" character among them, the app worked as it should, including phone search and without errors. It also worked well when no value was set for the phone.
Once again sorry for the post flood. Just experimenting with the code. I will try to find a solution for this just to play and learn a little more.
If someone has any ideas, especially Ben, I would love to hear them...

@Grant,

Right now, I am not comfortable enough to make a full-on production app for this; mostly, just research and development at the moment.

@Apostolis,

That seems like an odd error - there shouldn't be a requirement for the "-" in the phone field. I'll have to look into that.

@Ben Nadel,

Actually, I have more info about this. First of all, the problem doesn't exist at your more recent project CorMVC, where you have the Contacts app example.

Secondly, I've found out that it doesn't have to be an "-" character for the phone search to work. It works with many characters, for example, an "a" between the numbers, or even with a space between them! But strangely, it doesn't seem to work with a value consisting of only numbers. And it didn't work with an "." character also...

@Apostolis,

Hmm, I'll take a look into that phone number field issue.

Post Comment  |  Ask Ben

Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to entry *
	Send me a copy of this comment (as part of the comment thread)

 

* If you subscribe, any new posts to this thread will be sent to your email address.