Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Matt Vickers and Andy Orsow and Shawn Grigson and Billy Kiely and Jonathan Rowny and Bryan Stanley and Andrew Cullen and Sophy Eung and Scott Markovits and Clark Valberg and Jonathan Hau and Joel Hill and Aaron Stump and David Bainbridge
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Matt Vickers Andy Orsow Shawn Grigson Billy Kiely Jonathan Rowny Bryan Stanley Andrew Cullen Sophy Eung Scott Markovits Clark Valberg Jonathan Hau Joel Hill Aaron Stump David Bainbridge

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

By
Published in , Comments (77)

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.


 
 
 

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

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.

Reader Comments

32 Comments

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.

11 Comments

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.

13 Comments

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

1 Comments

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

33 Comments

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.

15,880 Comments

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

13 Comments

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 :)

13 Comments

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.

14 Comments

Great presentation Ben,

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

Khoa

15,880 Comments

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

33 Comments

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

15,880 Comments

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

74 Comments

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.

15,880 Comments

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

15 Comments

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.

15,880 Comments

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

13 Comments

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!

15,880 Comments

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

4 Comments

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?

15,880 Comments

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

1 Comments

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.

2 Comments

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

4 Comments

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

15,880 Comments

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

2 Comments

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

15,880 Comments

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

4 Comments

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

15,880 Comments

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

1 Comments

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.

1 Comments

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?

12 Comments

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?

4 Comments

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?

4 Comments

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?

4 Comments

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

15,880 Comments

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

4 Comments

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

1 Comments

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?

15,880 Comments

@Jason,

I am not sure I have the "best" answer for that at just this moment. I guess you'd have to have the "Service" layer have some sort of partial results set, like:

getContacts( offset, count, callback )

... which takes care of cutting up the result set in which ever way it sees best (local vs. AJAX) and then passing the results off to the "callback" argument.

Of course, that's just theory at this point.

1 Comments

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

15,880 Comments

@Dieter,

Yeah, feel free to use it. All the stuff I post here is definitely a "Use at your own risk" kind of thing :) I would always appreciate a shout-out somewhere, that'd be awesome.

15,880 Comments

@Dieter,

Also, if you have any suggestions about it, I'd love to hear it. A lot of this stuff is just proof-of-concept so I know there is a ton of room for improvement.

2 Comments

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

15,880 Comments

@Chait,

Thanks - there's definitely room for improvement here; this presentation was more an "exploration" that it was a "Teaching".

Also, I regarding the email you sent me, the reason that I use "this" something and "self" other times has to do with how the This reference works. At any time, the "this" keyword refers to the context in which the function is executing. When you create an object and give it methods, and then call those methods, the natural context of those methods is the object that contains them.

However, when you pass a function by reference, you break the bond with its context. You can also create a new context by assigning that function to a different object. In fact, a single method reference can be a property of two different object AND its context (this) will change depending on the object on which it is invoked.

To explain that a bit more understandably, look at this:

// Define free floating function.
var hello = function(){ alert( this.name ); };

// Define girl A.
var sarah = {
name: "Sarah",
hello: hello
};

// Define girl B.
var tricia = {
name: "Tricia",
hello: hello
};

Here, we create a function, hello, that alerts the value this.name. Then, we attach that method to two different objects (girl A and girl B). If you were invoke the hello() method on either girl:

sarah.hello();
tricia.hello();

The hello() function will execute under two different context at the time of execution, each successfully referencing the appropriate context (this) and therefore the appropriate this.name value.

Soooo, why do I use "self" sometimes? This has to do with the way functions create closures:

www.bennadel.com/blog/1482-A-Graphical-Explanation-Of-Javascript-Closures-In-A-jQuery-Context.htm

When I define the local variable, self, and I point it to this:

var self = this;

... I defines a variable, self, within the closure created by some functions. Therefore, even when you pass a method reference around and the THIS context reference changes, the closure variables do NOT. As such, the "self" variable always points to the original THIS reference even when the function's context changes.

I am sorry if that is not clear - it's kind of a funky thing to explain.

4 Comments

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

4 Comments

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?

15,880 Comments

@Gicalle,

I actually get an even stranger behavior when I tried that - my second record disappeared altogether. Right now, I am trying it out in Chrome. Perhaps there is a bug in the Javascript that is not working properly in Chrome. I'd try it on Firefox, but on my junky home computer, it takes FF like 5 minutes to boot up.

What browser were you using, out of curiosity?

2 Comments

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

15,880 Comments

@Chait,

Yeah, exactly - this was more an exploration than anything else. I'd love to figure out why it's buggy; but, there's only so many hours in the day :)

4 Comments

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();
	};
1 Comments

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

15,880 Comments

@Gicalle,

Hmmm. If the parameters.id is not defined, the check should be false and should allow flow to move to the parameters.name check. As such, I'm not sure why switching the order would necessarily cause things to start working.

However, if you've found that this helped then there is probably a piece of logic that I am missing. Then again, it's been a while since I've actually looked at the details.

@Amin,

Awesome! I hope this code experiment can help you think differently about Javascript development.

4 Comments

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

1 Comments

@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

15,880 Comments

@Andre,

That is definitely the same question that has been on my mind as well. I wanted to keep putting off this question because I thought it would only cloud the conversation (for the time being). But, now, this is a question that needs to be answered. I would love to tell you that you should use something like LAB.js or Require.js; but, I simply don't have the experience to respond to this with authority.

I will do my best to have the answer for this in a week's time :D

4 Comments

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?

15,880 Comments

@Steve,

I've definitely looked at Sammy JS. In fact, I attended Aaron Quint's preso at the jQuery Conference two years ago (which is where I first heard about it). I liked it; but there was something about it that I couldn't quite wrap my brain around. I am not sure that I agree with the way that some of the GET vs. POST routing was done (and why there is any client-side distinction as nothing is actually being sent... so to speak).

Of course, I'm still a novice when it comes to all this stuff; I just keep throwing stuff against the wall to see what sticks.

@Flum,

Sounds really cool; I'll be sure to check it out. A lazy loader for objects / templates is still something that I have not wrapped my head around yet. I've peeked at the RequireJS stuff; but, I think I need to really set aside some time to think about those kinds of things.

Thanks for sharing the link.

15,880 Comments

@Charlie,

Thanks - I hope you enjoyed this exploration. I'm really looking to get back into this kind of stuff. I think something like RequireJS would really start to rock here.

1 Comments

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?

1 Comments

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?

1 Comments

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.

5 Comments

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.

2 Comments

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.

2 Comments

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.

15,880 Comments

@All,

Hey guys, I know this post is pretty old. Lately, I've been using AngularJS to build single-page applications, with a ColdFusion-powered back-end that is basically a RESTful API.

I'll try to get a new presentation going on that stuff one of these days!

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel