Level-up your front-end skills:
Going beyond ColdFusion’s UI
<tags>
Presented by Abram Adams
aadams@cfxchange.com
http://t...
Things we’ll cover
● Why
● How to
o know what CF stuff to stay away from
o replace CFFORM
o AJAX without CFAJAXPROXY
o add...
Things we won’t
● What is the best JS/CSS library for “X”
● How MVC works (at least not in detail)
● Why SublimeText is th...
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 g...
<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.”
...
<CFLayout>
From Adobe Docs: “Creates a region of its
container (such as the browser window or a
cflayoutarea tag) with a s...
<CFApplet>
<CFForm>
● Validation
● Calendar
● Data Binding
Non-CFForm Example ( Demo 4 )
Useful Links
Validation
http://parsleyjs.org/doc/examples/simple.html
http://www.validatethis.org/
Date Picker
http://www....
<CF(UI.*)>
Remove, Immediately:
cfajaximport, cfajaxproxy, cfapplet, cfcalendar,
cfcol, cfdiv, cfform, cfgrid, cfgridcolum...
<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 ex...
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 ot...
Future-Proof Your Code
Some Architecture Designs to Consider:
● Traditional Request/Response with Pure
HTML/CSS/JS front-e...
Going Beyond ColdFusion’s UI Tags
- Summary
Why - Security, Vendor Lock-in, Pigeonholed
skillset.
How -
● Ditch ALL of the...
Resources
Examples of CF-UI alternatives - From the experts
https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way
Fo...
Upcoming SlideShare
Loading in …5
×

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

637 views

Published on

Published in: Software, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
637
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Level-up your front-end skills: Going beyond ColdFusion’s UI <tags> Presented by Abram Adams aadams@cfxchange.com http://trycf.com @Abram_Adams https://github.com/abramadams
  2. 2. Things we’ll cover ● Why ● 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
  3. 3. 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
  4. 4. WHY
  5. 5. ColdFusion is Great But...
  6. 6. What CF stuff to stay away from Anything that generates Client Side code!
  7. 7. HOW
  8. 8. Don’t take fences down unless you understand why they were put there.
  9. 9. How’d we get all that crap in our code anyway?
  10. 10. 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
  11. 11. <CFAjaxProxy> ● Directly Invoke CFC Methods via AJAX Non-CFAjaxProxy Example ( Demo1 )
  12. 12. <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 )
  13. 13. <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 )
  14. 14. <CFApplet>
  15. 15. <CFForm> ● Validation ● Calendar ● Data Binding Non-CFForm Example ( Demo 4 )
  16. 16. Useful Links Validation http://parsleyjs.org/doc/examples/simple.html http://www.validatethis.org/ Date Picker http://www.eyecon.ro/bootstrap-datepicker/ All things http://getbootstrap.com/ http://themeforest.net/ http://www.wufoo.com/html5/types/6- color.html
  17. 17. <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
  18. 18. <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….
  19. 19. Best (or half-way decent) Practices for Refactoring UI
  20. 20. 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. Resources Examples of CF-UI alternatives - From the experts https://github.com/cfjedimaster/ColdFusion-UI-the-Right-Way Form Validation http://parsleyjs.org/ http://www.validatethis.org/ Simple UI Widgets http://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.net IRC freenode.net channel ##ColdFusion Abram Adams aadams@cfxchange.com @Abram_Adams https://github.com/abramadams

×