Level up your front-end skills- going beyond cold fusion’s ui tags

Level-up your front-end skills: Going beyond ColdFusion’s UI

<tags>

Presented by Abram Adamsaadams@cfxchange.com

http://trycf.com@Abram_Adams

https://github.com/abramadams

Things we’ll cover

● Why● How to

o know what CF stuff to stay away fromo replace CFFORMo AJAX without CFAJAXPROXYo add modals without CFWINDOWo 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● Advanced JavaScript

WHY

ColdFusion is Great

But...

What CF stuff to stay away from

Anything that generates

Client Side code!

HOW

Don’t take fences down unless you understand why they were put there.

How’d we get all that crap in our code anyway?

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

<CFAjaxProxy>

● Directly Invoke CFC Methods via AJAX

Non-CFAjaxProxy Example ( Demo1 )

<CFWindow>

From Adobe Docs: “Creates a pop-up window in the browser. Does not create a separate browser pop-up instance.”

Non-CFWindow Example ( Demo2 )

<CFLayout>

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

Non-CFLayout Example ( Demo3 )

<CFApplet>

<CFForm>

● Validation● Calendar● Data Binding

Non-CFForm Example ( Demo 4 )

Useful Links

Validationhttp://parsleyjs.org/doc/examples/simple.htmlhttp://www.validatethis.org/Date Pickerhttp://www.eyecon.ro/bootstrap-datepicker/All things http://getbootstrap.com/http://themeforest.net/http://www.wufoo.com/html5/types/6-color.html

<CF(UI.*)>

Remove, Immediately:cfajaximport, cfajaxproxy, cfapplet, cfcalendar, cfcol, cfdiv, cfform, cfgrid, cfgridcolumn, cfgridrow, cfgridupdate, cflayout, cflayoutarea, cfmediaplayer, cfmenu, cfmenuitem, cfmessagebox, cfpod, cfpop, cfprogressbar, cfreport, cfreportparam, cfselect, cfslider, cftable, cftextarea, cftooltip, cftree, cftreeitem, cfupdate, cfwindow

Avoid and Plan to Remove:cfchart, cfchartdata, cfchartseries, cflogin, cfloginuser, cflogout

<Custom Tags>

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 controls etc…)

● UX controls (tabs, pop-ups, calendar widgets, etc..)

● Charts● etc….

Best (or half-way decent)

Practices for Refactoring UI

Sometimes, Less is More

Less “Tags” that is. Become a “5-tagger”!

● Embrace cfscript - it will make your exploration in other languages much more subtle.

● Views should be the only place you have CF tags *

*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 - Summary

Why - Security, Vendor Lock-in, Pigeonholed skillset.

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

Resources

Examples of CF-UI alternatives - From the expertshttps://github.com/cfjedimaster/ColdFusion-UI-the-Right-WayForm Validationhttp://parsleyjs.org/http://www.validatethis.org/Simple UI Widgetshttp://getbootstrap.com/http://jqueryui.com/http://harvesthq.github.io/chosen/Place to “play” around with CFScript (or most any CFML really)

● http://trycf.com, http://cflive.netIRC freenode.net channel ##ColdFusion

Abram Adamsaadams@cfxchange.com

@Abram_Adamshttps://github.com/abramadams