Level up your front-end skills- going beyond cold fusion’s ui tags
-
Upload
coldfusionconference -
Category
Software
-
view
202 -
download
0
description
Transcript of 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 [email protected]
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 [email protected]
@Abram_Adamshttps://github.com/abramadams