ColdFusioning

Backbone.js 0.9.0 Released

Wed, 01 Feb 2012 11:54:00 -0400

Yesterday, Backbone.js 0.9.0 was released. If you'd like to know what changed, you can view the Changelog.

NOTE: You must use Underscore.js > 1.3.1 with this Backbone.js update

I just dropped the new library into my favorite video website and ran our client-side unit tests. It did not go well. It looks like there will be some work done before implementing this release. Around half of the tests failed.

This new version looks like a great update and it is exciting that Backbone.js is nearing a 1.0 release. However, this isn't a minor upgrade and it is not backwards compatible.

Adobe Max 2011 and Responsive CSS

Fri, 21 Oct 2011 11:09:00 -0400

Earlier this month, I attended Adobe Max 2011. It was a great conference and I highly recommend anybody who is considering attending to sign-up as soon as possible. While on the cross-country flight out to Los Angeles, I saw post on Twitter that once of the pre-conference instructors was stuck in Europe and wouldn't be able to make it in time for his class. The class was "Adobe ColdFusion and Modern Web Front Ends" and a request was posted for a substitute teacher. Naturally, since I work with Adobe ColdFusion and modern web front ends everyday, I volunteered to teach the class (finding out later it was a 7 hour class :) ). I was sent the presentation and class materials on the plane and dove in. The next morning, we explained the situation to the class and they were very understanding. We went through the course material throughout the day and, except for one ColdFusion bug in the demo code, everything went really smoothly. The class was amazing and asked great questions. As promised, below is a list of links we reviewed in the class: Responsive CSS Examples
http://meltmedia.com/
http://www.kayakcapers.co.uk/
http://2011.dconstruct.org/
Fluid Images
http://unstoppablerobotninja.com/entry/fluid-images/
Browser Tools
http://resizemybrowser.com/

HTML5 Resources
http://html5boilerplate.com
http://www.modernizr.com/
http://diveinto.html5doctor.com/
http://stuffandnonsense.co.uk/projects/320andup/
If anybody has an questions from the class or any of the material covered, please let me know.

Building Lightning Fast Mobile & Desktop Web Applications Presentation

Sat, 17 Sep 2011 19:14:00 -0400

I gave a presentation at NCDevCon 2011 on "Building Lightning Fast Mobile & Desktop Web Applications". If you missed the presentation, they have posted the presentation online! You can view it anytime but it does require Microsoft Silverlight: View Online Though the slides are in the video, if you don't have Silverlight installed, I'm including the slides in a PDF. Also, the presentation description is: In this session we are going to explore different techniques and methods to speed up your mobile and desktop web applications and websites. Consumers and end-users have come to expect pages to load quickly and be responsive. Research shows that our brains can perceive time around 100 millisecond intervals and those intervals can add up if you have bottlenecks in your page load times or the responsiveness of the pages is poor once they are loaded. We are going to look at techniques you will be able to implement immediately to speed up both the actual and perceived experience of your site. This session will cover both server and client-side technologies. We will explore desktop and mobile use-cases and demonstrate various tools you can use today. This session will utilize ColdFusion and Backbone.js but concepts will apply to all web applications.

I'm speaking at NCDevCon 2011!

Thu, 04 Aug 2011 13:29:00 -0400

I am very honored to have been selected to speak at NCDevCon 2011! The event is September 17-18th, 2011. If you'd like to come hear me (or these other great speakers ) be sure not to miss this event. My topic is "Building lightning fast mobile & desktop web applications". We'll be exploring different techniques to build extremely fast and responsive web applications. We'll also look at Backbone.js and using it to build Single Page Web Applications (SPWA). If there is anything specific you'd like me to address or specifically speak on, either related to 'lightning fast mobile & desktop web applications" or Backbone.js specifically, let me know in the comments below. See you in Raleigh, NC on September 17 - 18, 2011!

Mobile Development QA Setup

Fri, 01 Jul 2011 16:29:00 -0400

I haven't had time to post an actual update about mobile development, so here is a photo of some of the devices I use:

Undocumented and Off Script: ColdFusion & Ehcache (Rob Brooks-Bilson)

Fri, 13 May 2011 18:36:00 -0400

I had a lot of interest in this topic, so I decided to take notes during the meeting. Rob Brooks-Bilson covered a lot of data and I made bullet points as he spoke. He has since posted his slides online so you can see the slides that go with my notes. Please let me know if you have any questions.

More notes here:

Google Notes

Rob's Notes

Lot of different areas to cache... multiple opportunities
Multiple caching architectures
- In-Process (L1 Cache)
  - Operates in the same process as application server
  - Super fast
- Out of Process (L2 Cache)
  - Add on Terracoda
  - Much more scalable but slower than in-process
  - Data/objects must be serialized/deserialized
Non-deterministic (cache-aside)
- Look in the cache, if not there, hit the db
- most popular
Deterministic (cache as sor)
- Always go to the cache
- All cache data is pre-populated
Cache Eviction Algorithms
- Time-based
- Cost based
  - FIFO
  - LRU
  - LFU
    - Unique to Ehcache

Ehcache
- De facto cache for enterprise Java and ColdFusion
- Over 500K implementations
- Can be configured to run
  - Local: In-process
  - Replicated: in-process
  - Distributed: In-process and Out of process
- Super fast for in-process
- No serializations required for objects written to memory
- Supports multiple expiration algoritms

Coldfusion
- page fragment
- objects and data
- ORM
- 9.0.1 addedl more support
- Ehcache 2.0 added a lot more support
Don't cache to disk unless you absolutely have to
- Consider using RAM based
- "Put as much in memory as you can, use disk for failover"
Every ColdFusion application has two available caches by default
- cfcache - template based, fairly automatic
- object cache - put queries, objects, etc - 'cache anything'
Default caches are bound to named applications (Application.cfc or Application.cfm)
- Caches are NOT tied to ColdFusion scopes
- Caches persist even if the bound application scope times out
Additional user-defined caches can be defined
ehcache.xml
- Tons of options to configure
- Can be set dynamically using cacheSetProperties() or set in the xml
- Get the cache properties using the cacheGetProperties()
Ehcache vs Persistent Variable Scopes
- Why use Ehcache instead?
- Limit to session scope
- Ehcache advantages
  - Performs well regardless of load
  - Easily replicated/distributed
  - Self-managing
  - Comprehensive monitoring and statistics
  - Search
  - Big memory
- Performance is about the same
Object Caching Considerations
- Carefully consider how you plan to use keys to avoid potential key collision
- No namespace, but simulate them using User_, Product_, Item_, etc.
- Or use multiple caches regions
- Objects (including queries) are stored by reference - BE CAREFUL! - Or you can turn it off
- Only serializable objects can be written to the disk cache
- Be careful using cacheGetAllIDs() - with millions of items, could be a problem
Cache Replication
- Object, Template & Hibernate caches can be replicated
- Simple config
- Cache replications can be done via RMI, JMS, jGroups or Terracotta
- Replication can be synchronous or async
- Sync vs Async
  - Async is fastest
  - Potential for data inconsistency
Upgrading to Newer versions of Ehcache or Terracotta
- Adobe won't support but shouldn't have any problems
- Ehcache upgrade is easy
- Terracotta takes a few more steps
Using Ehcache with Terracotta
- Tiered Caching Architecture
- L1 in process, L2 out of process
- Enterprise Terracotta lets you scale out and setup terabytes
- 80/20 rule
- Terracotta has a great dashboard / dev tools
Slides available afterwards - 20-30 more slides
Ehcache Monitor
- Free for development, commercial license for production
- Monitor multiple cache servers from a single web console
- Two components, probe and server
- Simple config
- Stats are transmitted via XML over HTTP
Cache Search
- Available starting in Ehcache 2.4.0
- Single node for open source
  - Multi node requires Enterprise
- Support for simple and compound functions
  - Provides search operators (think AND, EQ, GT, LE, NOT, OR)
- Very powerful - no ColdFusion functions exposed but Java/Ehcache commands are very easy to use
Ehcache 2.x Engancements
- Cachewriters
- Read-through
- Blocking-cache
- SelfPopulatingCache
- Support for distributed transactions
- Big Memory
Resources
- Ehcache.org
- CF Docs
- highscalability.com
- Java DZone Article for High Performance Applications

cfObjective Keynote Notes

Thu, 12 May 2011 13:02:00 -0400

This week, I'm attending cfObjective for the first time. Below are some of my quick notes from the cfObjective Keynote. They are down and dirty but if you have any questions, leave a comment. Also, make sure you check out the cfObjective Twitter Feed. There's some great presentations over the next day.

Scott Stroz

"God is a PHP Developer, it took him 6 days to create everything, if he was a CF developer it would only take 4 days, and then a 3 day weekend"

The thing that sets us apart is the community

Ray Camden

Speaking about CFB2

"If you see 4 numbers at the bottom of your file, you're doing it wrong.

Jason Dean

Speaking about ColdFusion developers and jobs

Use students and interns

Bob Silverberg

Speaking about open source involvement

Contributing to documentation helps too

Mark Esher

Next version of ColdFusion

jRun is going away and Verity is too

Apache Solr is going to continue to be included for search

Apache Axis2 included in the next version of ColdFusion

Great scheduled tasks support. Application specific tasks.

Async job queue in next version of ColdFusion

"Something cool" coming with HTML5 and jQuery

Next version of ColdFusion will include support for closures

Big advances in Security in the next version

Also check out this online shared Google Doc for more notes.

spwa-backbone Update for Backbone.js and Underscore.js

Sun, 01 May 2011 04:45:00 -0400

Tonight, I updated the spwa-backbone library to work with the latest Underscore.js. If you'd like to learn how to use the library, you can view the Backbone.js spwa-backbone post. In the comments, "Jeremy" discovered a bug that caused the spwa-backbone to not work with the latest Underscore.js library. The latest Underscore.js library (version 1.1.6) caused an error because: "_.bind now errors when trying to bind an undefined value." You can view the updated source on Github:
http://github.com/ibjhb/spwa-backbone I've also added the annotated source online:
http://ibjhb.github.com/spwa-backbone/ Lastly, you can view a sample application, using the spwa-backbone for Backbone.js library online:
http://ibjhb.github.com/spwa-backbone/ Also, rather than link to the public library URLs, I now include the libraries (jQuery, Backbone.js & Underscore.js) in the repo so the code will continue to work if those libraries are updated.

Using spwa-backbone To Build A Single Page Website Application

Tue, 25 Jan 2011 04:19:00 -0400

Today we're going to look at building a single page website application using Backbone.js and spwa-backbone libraries.

You can view the source code on Github. You can also view the single page web application example in the /example/ folder. For a more complete example, visit: Single Web Page Example

What is an spwa?

Specifically, an spwa is a single page web application. More generally, it's a website or application where all (or most) of the content is in a single page. You can have links to other pages but the URL stays the same, except for possibly anything after the hash tag (the pound sign - #).

Why would I want to build an spwa?

There are many reasons to build an spwa. The most obvious advantage is pure speed. Since most of the content is loaded in a single, first request, the subsequent calls are extremely fast.

When you load the example application, you can see that switching from page to page is almost instant. Also, if you open Firebug, you'll see that there are not additional http requests to the server for each page.

Another major reason is bandwidth considerations for mobile devices. Since all the pages are loaded with the first request, we don't need to make subsequent calls to the server. Additionally, all of our JavaScript libraries and CSS files don't need to be re-requested, downloaded or processed. This can save a considerable amount of time and bandwidth.

Will I be able to deep link to a specific page?

Of course! Your application would be pretty worthless if you couldn't allow your visitors to link to a specific page on your site. The beauty of using this code is that the spwa-backbone and Backbone.js libraries both automatically handle the deep linking.

Will the browser's 'back button' work?

Of course it works! Just like the deep linking, Backbone.js and spwa-backbone handle everything necessary for the back button to work.

How do I get started?

It doesn't take much to get started with spwa-backbone.

1) The first step is to include the required libraries: jQuery, Underscore.js and Backbone.js. You can use the minified or un-minified versions of each library. It does not matter.

2) The second step is to include the spwa-backbone library.

3) The third step is to create and your content. Each page is enclosed in a script tag, similar to:

Each 'page' should have a different id attribute but you must include the '-template' suffix (note the hyphen). Another example of an id attribute would be 'about-template'. The 'home' page is shown by default if there is no page specified in the URL by hash tag.

4) Lastly, create your links. You'll naturally want to create links between your pages. You link to them using the following convention:


About

This would link us to the 'about-template' page. Notice that there is a hash tag and an exclamation point in the href. This let's us use the hash tag to change the page and the exclamation point to tell Google to index the page.

That's it!

It's very easy. You can create multiple pages and links very quickly. The library will do all the work and routing. Take a look at the example html file for a full example.

Lastly, the un-minified version of the spwa-backbone library is fully commented. If you are curious how the library works, take a look and if you read through the whole file, it should make sense. If something doesn't make sense or needs a better explanation, please don't hesitate to let me know.

If you have any questions, comments or requests, please leave a comment below.

Backbone.js + jQuery = Best OO Friends Example

Tue, 18 Jan 2011 02:03:00 -0400

Backbone.js + jQuery = Best OO Friends Example

Today we are going to dive deep into OO JavaScript programming using Backbone.js and jQuery.

This is going to be a detailed example. If you want to dive directly into the code, you can check out the repository on Github.

Before we dive into the code, check out the working example of the code: Backbone.js Example

Each of the files is heavily commented and should provide insight into what each major section of code is doing.

(Open the Backbone.js Sample to view the full text)

[More]

Detecting Java Browser Support Using jQuery

Wed, 01 Dec 2010 10:27:00 -0400

Today we're going to quickly look at detecting Java (not JavaScript) using jQuery. It is actually very simple using the jQuery Browser Plugin. Once you have the plugin loaded, it extends the $.browser object to give you the following:


$.browser.flash 	//Flash
$.browser.sl 		//Silverlight
$.browser.pdf 		//PDF format
$.browser.java 	//Java
$.browser.qtime 	//Quicktime
$.browser.wmp 		//Windows Media Player
$.browser.shk 		//Shockwave
$.browser.rp 		//Realplayer

As you can see, we gain more than just Java detection, but Java detection is the one we're looking for in this example. You can view a working example on this Java Detection Using jQuery page and the source code is naturally on github.

jQuery Templates with ColdFusion ORM and AJAX

Thu, 25 Nov 2010 01:55:00 -0400

In this post, we'll look at how to use the new jQuery templates in conjunction with ColdFusion and AJAX. If you haven't already, check out this previous post on using jQuery templates without AJAX. If you want to skip ahead, all of the files are on github (under clienttemplates) and the working examples can be found on this link. To keep things simple, we're going to use the cfartgallery datasource that comes with ColdFusion and we're going to use simple ORM. If you don't have the sample database installed, this example won't work, but you'll be able to get the idea. The first thing we're going to do is setup our Application.cfc so we can use ORM: Application.cfc:


component{
	// Application properties
	this.name = hash(getCurrentTemplatePath());
	this.sessionManagement = true;
	this.sessionTimeout = createTimeSpan(0,0,30,0);
	this.setClientCookies = true;
	this.datasource = "cfartgallery";
	this.clientManagement = true;
	
	this.ormenabled = "true";
	this.ormsettings = {
			  logSQL 			= false
			 ,dbcreate			= 'update'
	};
}

This is pretty straightforward Application.cfc and ORM. The important parts are setting the datasource and setting ormenabled to true. If you aren't familiar with ORM, you should view Introduction to ORM or ColdFusion ORM Presentation. The next step is to map our ORM object to the existing table: artists.cfc:


component	persistent		= true
			accessors		= true
			entityname		= 'artists'
			{

	property name='id' 				column='ARTISTID' 		generator='increment';
	property name='FIRSTNAME'; 
    property name='LASTNAME'; 
    property name='ADDRESS'; 
    property name='CITY'; 
    property name='STATE'; 
    property name='POSTALCODE'; 
    property name='EMAIL'; 
    property name='PHONE'; 
    property name='FAX'; 
    property name='thepassword'; 
}

This is the simplest implementation of this object since the datasource and table already exists. In the next step, we're going to setup our remote cfc call. This is where the power of ColdFusion ORM comes into play: remote.cfc:


component {
	remote string function getArtist(){
		return SerializeJSON(entityLoad('artists'));
	}
}

That's all that is required to load the entire artists table and serialize it to JSON, so we can return it in the AJAX call. Very simple. Lastly, we're going to repeat a lot of code from the previous jQuery templates post. I won't repost everything here but we'll look at the two key features we're using in this example. The first key feature is our actual ajax call. We're going to call our remote.cfc to get our JSON. Then we're going to invoke the jQuery template and append it to our empty div in ajax.cfm:

Lastly, we have our actual jQuery template. We get a little more advanced in this example and introduce an "if" conditional. This causes the phone and fax to only display if they exist in the data returned from our AJAX call. This is extremely powerful and allows us to use logic in our templates without complex JavaScript:

If you view the source code of the example or explore the code on github, you'll see there are a few other sections for formatting, including jQuery and the template JavaScript. Try running the code and let me know what you think.

Experiments in jQuery Templates with JSON

Wed, 17 Nov 2010 14:14:00 -0400

I've been wanting to work with the new jQuery templates plugin since I first read about it. It allows you to bring your views into jQuery and not rely on server-side languages to generate the html. This provides extreme flexibility and accelerates development. No longer do you need to loop over returned data and try to write your display in JavaScript. To illustrate this, I've put together a series of posts exploring different options. The first example we're going to look at doesn't require any ColdFusion or server-side scripting. You can view the jQuery template working example online. Be sure to view the source. There is no server-side processing going on. We're going to create a struct and then use it to populate our jQuery template. After including the jQuery and jQuery template JavaScript from the CDN, the first thing we're going to do is create our struct with a dataset we want to ultimately output:


	var bills = [
		{
			 description: 	'$1 1957 Silver Certificate' 
			,price: 		'10'
		}
		,{
			 description: 	'$2 1963 Federal Reserve' 
			,price: 		'50'
		}
		,{
			 description: 	'$100 1928 Gold Certificate' 
			,price: 		'50.65'
		}
	]

The next thing we're going to put together is the actual jQuery template. This is a snippet of code that contains 'variables', denoted by ${ VARNAME }, that will be replaced with the actual data:

Don't let the double $$ confuse you. I want to display the price, so the first $ is the money sign and the second is the beginning of the template. The last important line is the actual invocation of the template replacement code:


$('#billTemplate').tmpl(bills).appendTo('#myBills');

This tells jQuery to use our template, replace it with our data and then append it to the empty div. Lastly, we apply some CSS formatting and our standard HTML5 code. In the next post, we'll look at how to use ColdFusion to load the JSON dynamically. To view this working example, view jQuery template online or for the source, visit my Github. Full source:





	Simple Client Templates Example

How Unique is a UUID? Should we use them instead of auto-incrementing?

Wed, 10 Nov 2010 16:01:00 -0400

We had a discussion today about the uniqueness of UUIDs (or GUID). In case you didn't know, according to Wikipedia, a UUID is: "an identifier standard used in software construction, standardized by the Open Software Foundation (OSF) as part of the Distributed Computing Environment (DCE)." The uniqueness of a UUID is 1 2^¹²⁸. Now this doesn't really mean much to most people so the part I found particularly interesting is the uniqueness in terms we can try to understand. From Stackoverflow: "consider the observable universe, which contains about 5×10^22 stars; every star could then have 6.8×10^15 universally unique GUIDs." Wow. Here's another way to write the probability: 1 in 340,000,000,000,000,000,000,000,000,000,000,000,000 or "In other words, only after generating 1 billion UUIDs every second for the next 100 years, the probability of creating just one duplicate would be about 50%. The probability of one duplicate would be about 50% if every person on earth owns 600 million UUIDs." Stop and think about that for a second. This raises the question. Given the fact they basically are unique, should we use them for a primary key instead of auto-incrementing in a database? There are good reasons to use either as a primary key. Which do you use and why?

Using jQuery To Require EULA Checkbox

Tue, 02 Nov 2010 08:00:00 -0400

Today we had a requirement to have a EULA (End User License Agreement) checkbox checked before we could allow a user to click a download button. Let's look how we could do it with jQuery. (I'm going to skip the un-important or self explanatory code.) You can view the full example on this page.

While not required, this is going to make the button a little prettier when disabled.

In the HEADof our document, we're going to include jQuery off the Google CDN. You could use your own server/cdn or use code to prevent your site breaking if Google is unavailable. The next SCRIPT block is the real core of the functionality. We're setting up a click-binding that will fire every time the EULA checkbox is clicked. We then determine if it is "checked" and then disable or enable the button accordingly.


 I agree to the EULA

In this last section, we output the checkbox and the button. We set it to disabled by default and add a disabled class. You can view the full working example.