Building Single-Page jQuery Applications With ColdFusion

1. Ben Nadel

   

   • Chief Software Engineer, Epicenter Consulting
   • Author of The Blog of Ben Nadel (www.bennadel.com)
   • Adobe Community Expert
   • Adobe Certified ColdFusion Developer
   • Co-Manager New York ColdFusion User Group
   • ColdFusion, XHTML, CSS, jQuery Developer

2. Not Your Typical jQuery + ColdFusion Presentation

   • Single-page application architecture
   • ColdFusion as a webservice
   • Javascript MVC architecture
   • jQuery as the core framework

3. What jQuery Conference 2009 Taught Me

   • I don't know nearly enough!
   • Applications are getting much more rich
   • Best server-side practices are moving to the client
   • Not enough information on Javascript architecture

   
   

4. I'm Still Learning This Stuff

   • A lot of what you see here was designed for this presentation
   • Not here to show you "the way" - just new ideas

5. jQuery + ColdFusion = AwesomeContacts

   
   

   • ColdFusion / jQuery / JSON Database
   • View demo

6. Application Architecture (mostly)

   
   

7. Part I: jQuery

8. jQuery Overview

   • Index page is the application
   • Application.js is the framework (like Application.cfc)
   • Application monitors changes in URL hash (#/event)
     • ex. #/contacts/
     • ex. #/contacts/edit/123
   • Controllers map hash-changes to event handlers
   • Controllers can delegate control to Model or Views

9. jQuery Framework Architecture / Work Flow

   
   

10. Quick Aside: Self-Executing Function Block

    
    

11. Application.js Is An Object Factory

    • Manages class instantiation and singleton storage
    • Need to tell Application.js about your classes:
      • application.addController( instance );
      • application.addModel( instance | class );
      • application.addView( instance | class );
    • Can ask Application.js for classes and instances:
      • application.getModel( className [, [ arguments ] ] );
      • application.getView( className [, [ arguments ] ] );

12. Adding Controllers

    
    

13. Adding Models (and Views)

    
    

14. Code Demo

    • Show the jQuery code

15. What Else Is Out There?

    • Sammy
    • JavascriptMVC
    • SproutCore
    • PureMVC (for Javascript)
    • TrimPath Junction
    • JamalMVC
    • Claypool

16. I Don't Have Your Server-Side Technology!

    • Want to play?
    • Don't have ColdFusion / Ruby / PHP / Python / etc?
    • Swap Model for "static" fun and testing (no server required)
    • contact_service.js --» contact_service_static.js

17. Part II: ColdFusion

18. ColdFusion Overview

    • Everything passes through Application.cfc
    • CFM + Remote CFC Requests
    • HTML + TEXT + WDDX + JSON + JSONP + SOAP

19. ColdFusion Request Architecture / Work Flow

    
    

20. Why OnCFCRequest()?

    • You can handle CFC requests in Application.cfc
    • ColdFusion 9 is adding this method to the application framework
    • Cache remote CFCs
    • Properly handle API errors
    • Return more data formats (JSONP, custom XML)

21. Code Demo

    • Show the ColdFusion code
    • Show the SOAP invocation

22. Thank You For Listening

    • Ben Nadel
    • Blog: http://www.bennadel.com
    • Email: ben@bennadel.com
    • Ask Ben: http://www.bennadel.com/ask-ben
    • Consulting: http://www.epicenterconsulting.com