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

Ben, I watched this the other day elsewhere. Appreciate you taking the time to redo it and provide source files.

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

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.

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.

Great presentation Ben,

A combination of jQuery and coldfusion is always awesome. They are the best frameworks out there imo.

Khoa

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

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

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.

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

;-)

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?

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!!!

@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.

Hi Ben,

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

In the diagram
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!!!

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 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...

@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...

How would you handle pagination? So for you list of contacts, instead of showing all you are only showing 10 per page with page number links at the top...how would URL look and work then?

Hi Ben,

this is indeed awesome and a great foundation to build highly sophisticated web apps. I'm just wondering about licensing. From lack of any notice info, I assume I can use the codebase in any way I wish? Would you like to have credit somewhere?

Again, thanks for some really good stuff. :-)

@Ben
First of all, great presentation.

@flum and @Ben
I completely agree with flum.

I am fairly new to the ColdFusion and MVC stuff. But from what I know, It is Controller's job to get the data by calling functions in the Model and then pass it on to view and view should only do the rendering.

Is there a way to share the modified files here?

did i find a bug...?

the application is working fine, but i've found a strange behaviour.
there is a mistake between editing and auto-creating a contact (when no contact is found after typing in the search box).

i cannot simulate in the live demo on this page (maybe it already different source code?) but by using the zip, i have the errors...

how to:
* download the zip
* extract it
* put it on the server (i'm testing this on a railo / xampp)
* start the application
* type 1 in the search box and enter (jumps to edit contact - leave other fields blank)
* type enter (saves the contact with name 1)
* type 2 (in search box) and enter
* type enter (saves the contact with name 2)
* click edit on contact 2
* edit the phone number by typing e.g. 2
* type enter to save this contact 2
* type 3 in the search box and enter
* type enter to save
BUG???
* contact 2 is EDITED instead of contact 3 ADDED?

@Ben, @gicalle

I did notice some buggy behavior as well. I was using FF.

Though I used it more like a reference and did not really care about fixing it.

i've found the bug.
in the contact_form.js the 'show view' function was wrong. it checked on 'parameter.id' but it sometimes exists (after editing etc).

i've changed it to first check that the 'name' parameter exists (the one you set with 'name: this.searchCriteria.val()' in contact_list.js) and afterwards for existing 'parameters.id'

	// I get called when the view needs to be shown.
	ContactForm.prototype.showView = function( parameters ){
		var self = this;
		 
		// Reset the form.
		this.resetForm();
		 
		// Show the layout.
		this.layout.show();
		 
		// If there was no ID, then this is an ADD form. Check to see if a default
		// value was passed for the name.
		if ("name" in parameters){
 
			// Disable the form while the model loads.
			this.disableForm();
		 
			// Create the contact and then use it to populate the form.
			application.getModel( "ContactService" ).getContact(
				0,
				 
				// Success callback.
				function( contact ){
					// Now that we have the form data, enable it.
					self.enableForm();
				 
					// Populate the form fields.
					self.populateForm(
						contact.id,
						parameters.name,
						contact.phone,
						contact.email
					);
					 
					// Focus the first field.
					self.fields.name.focus();
				}
			);
		}
				 
		// Check to see if a contact ID was passed in. If so, we need to
		// populate the form with the given contact data.
		else if (parameters.id){
		 
			// Disable the form while the model loads.
			this.disableForm();
			 
			// Get the contact and then use it to populate the form.
			application.getModel( "ContactService" ).getContact(
				parameters.id,
				 
				// Success callback.
				function( contact ){
					// Now that we have the form data, enable it.
					self.enableForm();
				 
					// Populate the form fields.
					self.populateForm(
						contact.id,
						contact.name,
						contact.phone,
						contact.email
					);
					 
					// Focus the first field.
					self.fields.name.focus();
				}
			);
		}
 
		// Focus the first field.
		this.fields.name.focus();
	};

Ben,

This is an excellent tutorial and video, I understood your comment about MVC JS frameworks that add so many things and confuses you. This is very simple and easy to understand MVC method, mind you it is for learning purposes, it covers so many things. thank you for such a professionally done presentation.

Keep up the great work here!!!

Thanks,
Amin

@Ben,

the @id IS defined on that moment, due to the fact that the user just has selected it. so in fact it's a problem of not clearing it (but i've not really found the right place where this occurs) so that's why i flipped the order for the IF THEN check. the parameter NAME is set or erased correctly, so it suits better to first check this.

@Ben,

Wow this is the best presentation about single-page-applications i've seen.

But one question:

What should you do if you used more than a few layouts. All-in-one is not a nice solution for me. Maybe insert content with the html-method?!. I hope you can give me some tips for a good solution.

Thanks
Andre

You should check out "Sammy.js" http://sammyjs.org/

And I know you work (like I do) most of the time using CF but, couchdb coupled with a one page json app is unbelievable.

-Steve

Hi Ben,

I posted here a while back saying how great I thought your app is.

Since then I have been working on my own framework.

The goal has been to create a custom Javascript framework that our developers can use. I want to ensure consistent code and a development methodology that is easy to follow.

Often, especially with Javascript, we end up with too many different development approaches and the result is code that is hard to understand.

I think our framework gives the freedom to the developer to handle any scenario, yet at the same time code by some standard.

Some of the features include:

Clear namespace.
Javascript object and template loader (lazyload).
Object and template cache.
Integration with Pure templating

We have included our code on googlecode.
Its really easy to run, no server required, just download and open.

http://gmwk.googlecode.com

The full framework is found with an example.
We have also uploaded a task to complete which we give to developers who want to work with us remotely.

If you have the time it would be great if you had a quick look and let me know your thoughts?

This is really a top-notch piece of work. Thanks for the time you invested in it.

Hi Ben, excellent application. it really inspired me. i am now building an application based on the javascript framework you presented. But it not functioning properly in IE. all event bind winthin the selfexecuting function do not work but for ff and chrome everything is fine. did u have such issues too?

HI Ben,

Thanks for taking the time to put this together - all very impressive - gets the brain thinking!!

One question - as this was done in CF8 and CF9 brings in the onCFCRequest method, would there need to be a lot of changes made to this Application.cfc to take advantage of the new functionality?

@George,

Your comment made me want to research more on SEO. I'm wondering if keeping your Sitemap.xml file updated with all your pages would solves the issue that this is an AJAX website. Here's Google's page on how to use the Sitemap.

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184&from=40318&rd=1

Does this seem to solve the issue? What do you think?

I've played around with doing the same things you have and I find your approach to be quite elegant.

To take your concept further I am trying to figure out a way to "authenticate" an application similar to this one to using jsonp services so it could be hosted anywhere on a static file server for example with no server-side requirement where its being hosted.

If there was a set of cloud services running jsonp and it was possible to have authentication of the application to these services in terms of "is this app allowed to use this service?", that would be amazing. I'm not sure if that's possible but I'm trying to figure out a way where that could work, possibly with the referrer.

Your style of in applications would be my foundation.

Thank you for building this.

Hey Ben,
I loved this presentation, I am trying to play with it little bit. I am trying to create an application based on this design.

I have a question for you, Since the entire operations (URLs) will be based on hash-tags will it not cause problem in SEO ? If yes, then what is the workaround for that.

Thanks for your post

i am trying to do some experiments with your above mentioned code.my bad luck getting some error.

controller code

Controller.prototype.init = function(){
this.contactListView = application.getView( "ContactList" );
this.contactFormView = application.getView( "ContactForm" );
};

application.js

it seems the view classess are not setting it up. That was the reason when i try to do getclass it is throwing javascript error.

application.js

// This is not a cached class - return a new instance. In order to
// do that, we will have to create an instance of it and then
// initialize it with the given arguments.
var newInstance = new (target.classes[ className ])();
Uncaught TypeError: undefined is not a function

// Initialize the class, this time calling the constructor in the
// context of the class instance.
target.classes[ className ].apply( newInstance, initArguments );

if i use html and javascript only it works fine.Using cf it is giving this error.

it is good one. The only problem of this architecture is the user won't be able to add dynamic select objects. if we added the change event of select object for the first only executes.