Level up your front-end skills- going beyond cold fusion’s ui tags
Level-up your front-end skills:
Going beyond ColdFusion’s UI
Presented by Abram Adams
Things we’ll cover
● How to
o know what CF stuff to stay away from
o replace CFFORM
o AJAX without CFAJAXPROXY
o add modals without CFWINDOW
o add tab controls without CFLAYOUT
● General good practices for refactoring CFML
out of your UI
Things we won’t
● What is the best JS/CSS library for “X”
● How MVC works (at least not in detail)
● Why SublimeText is the BEST IDE KNOWN
TO HUMANKIND - Yeah, you read it right…
I. D. Freakin E.
● Advanced UX Design
Ok, But Why?
● CFML is a SERVER SIDE language.
● Security (have to expose CFIDE, outdated dependencies)
● Page Size ( CF generated code is not minified, nor
modular. You get everything )
● Vendor/Version Lock-in
● Performance ( CFML Engineers aren’t necessarily good
JS/Web developers )
● Pigeonholed skillset - Using JS/HTML/CSS alternatives
makes you more valuable as web developer
● Directly Invoke CFC Methods via AJAX
Non-CFAjaxProxy Example ( Demo1 )
From Adobe Docs: “Creates a pop-up window
in the browser. Does not create a separate
browser pop-up instance.”
Non-CFWindow Example ( Demo2 )
From Adobe Docs: “Creates a region of its
container (such as the browser window or a
cflayoutarea tag) with a specific layout
behavior: a bordered area, a horizontal or
vertically arranged box, or a tabbed
Non-CFLayout Example ( Demo3 )
● Data Binding
Non-CFForm Example ( Demo 4 )
Just because it’s bad to use the built-in UI
stuff doesn’t mean that the problems they try
to solve don’t exist.
● Forms (data binding, validation, custom
● UX controls (tabs, pop-ups, calendar
Best (or half-way decent)
Practices for Refactoring
Sometimes, Less is More
Less “Tags” that is. Become a “5-tagger”!
● Embrace cfscript - it will make your
exploration in other languages much more
● Views should be the only place you have CF
*I know, <= CF10 doesn’t have full script
parity, so what.
Future-Proof Your Code
Some Architecture Designs to Consider:
● Traditional Request/Response with Pure
HTML/CSS/JS front-end, pure CFML back-end
● Single Page App - Pure HTML/CSS/JS front-
end, pure CFML back-end.
● Hybrid web app - Initial HTML rendered via
CFML (initial data/state), AJAX to change state
and interact with server between requests.
Going Beyond ColdFusion’s UI Tags
Why - Security, Vendor Lock-in, Pigeonholed
● Ditch ALL of the CF UI crap
● Explore Native HTML/CSS, or JS libraries to
use instead (then wrap the markup in a
Custom Tag if desired)
● Restrict use of CFML Tags to Views only.
(And use a Framework!)
Future proofing your apps.
Examples of CF-UI alternatives - From the experts
Simple UI Widgets
Place to “play” around with CFScript (or most any CFML really)
● http://trycf.com, http://cflive.net
IRC freenode.net channel ##ColdFusion