Changes to SacInteractive

Hi everyone,

I'd like to tell everyone about some changes coming to SacInteractive (formerly SacCFUG)...

After running SacCFUG for a zillion years (and helping me turn it into SacInteractive), Seth has decided to step down from the co-manager role. I cannot express how much I am grateful for all the years Seth ran the group by himself, and then brought me in to be co-manager. I learned a metric ton from him over those years and am quite thankful for everything he did.

My friend Jon Nutting will be coming in to be the new co-manager, along with me. Jon and I have done several projects together in the past; he has a tremendous design / development background and I'm really looking forward to working with him on the SacInteractive as well. He's already very excited, and we've begun discussing ideas for new topics, new logo design and other improvements to the group.

We're canceling the July meeting so Jon and I can focus on some behind the scenes things, but we should be back on track in August.

Any questions, just ask. I'm looking forward to all the things we have in store for SacInteractive!

Nolan and Jon

SacInteractive: Open Design: Free Open-Source Tools for the Designer

This Tuesday night at SacInteractive, Jon Nutting will be presenting on "Open Design: Free Open-Source Tools for the Designer"

The description is like so:
Jon Nutting (Ai Instructor & self-proclaimed new-media extraordinaire), will walk you through the process of his self-imposed challenge to use open-source software for the creation of a professional 3D logo. Start leveraging the power of Inkscape, GIMP, Blender 3D, and Google Fonts...all for Free!

We meet at HackerLab, the meeting starts at 6:30, it's FREE and open to the public. Hope to see you there!


CF Objective Recap and Highlights

It's Saturday afternoon, I'm at the airport, that must mean CF Objective is officially over. Overall I think the conference was a great success and was run more smoothly than last year (which was the first year at this location). Wifi was excellent throughout the entire conference (both the hotel wifi and the conference specific wifi). Hotel staff were incredibly friendly and helpful. Food was as good as one could hope for from conference food.

The keynote presentation sparked some good conversation over lunch about how we can improve diversity in the web development community. It got beyond just "well the door is open if someone wants to walk in" and quickly moved to "we need to help people thru the door, go out and find people and be more proactive in helping to include anyone that wants to get into programming". I was initially a little disappointed in the keynote talk, as my interpretation of the title ("Redesigning the Interface: Making Software Development Make Sense to Everyone") was that she'd be discussing new techniques for UI/UX work, or something along those lines. However after the lunchtime discussion, I no longer had any quips.

Other highlights for me included...

1) Jason Dean's talk on JavaScript – I learned a metric ton about various nuances in the language. Jason always has great slide decks and regular doses of humour thrown into his presentations. This one was no exception.

2) Sharon DiOrio's talk on Angular JS – I've seen several demos on Angular. Sharon's was very straight forward and easy to follow. Based on the session description, I was worried this talk would require more Angular experience than I've had thus far, but she started at the beginning and kept my interest the entire time.

3) Kai Koenig's talk on "The JVM Is Your Friend" – I've seen variations of this talk a few times. I've always gotten lost. Kai's talk was the magic one that made a few topics finally "click" for me. I'm no longer scared of the JVM arguments I didn't previously understand. :)

Doing the speaker evals was a bit of a challenge this year because they all HAD to be done via a mobile app. Personally I prefer to type my evals on a real laptop keyboard (as I type much faster than way). I suspect this affected both the number of evals done, and the quality of feedback included in each eval. I spoke with the conference staff a little, and I understand this was a technical "limitation" with how things were set up. Hopefully next year we can do evals both via the mobile app and website.

I've blogged notes from all the sessions I attended. I ended up skipping a few presos to spend more time warming up before my I gave my presentations. Both of my talks seemed to go well, though I haven't seen the evals yet; perhaps I just jinxed myself. :)

Thanks everyone for attending both my sessions. If anyone runs a user group and would like me to give those talks, just drop me a line.

Thanks to the CF.Objective staff for putting together yet another excellent conference. Until next year...


CF Objective Notes - Developing Single Page Apps (SPA) with ColdFusion and Angular

Developing Single Page Apps (SPA) with ColdFusion and Angular
Mike Collins

quick understanding of angularJS
walkthru key features and main components of an angular JS app
learn about CF RESTful svcs w/ angular
walk thru a DEMO app

Adapts and extends HTML
key features
-2 day data binding
synchronizes model data and views
filters for client side data
http / ajax call features

follows MVC
loose coupling between presentation, data, and logic components.

A complete client side java script solution
managed by a dev team at Google

it's a "complete framework"
data binding, mvc, routing, history, templates, etc.

popularity in AngularJS is going up, near top of "popular JS frameworks" lists

browser support
all the major browsers
1.3 (beta) will be dropping IE8 support – download either stable or bleeding age versions from here
optionan add-on modules
angular-animage – enable animation support
angular-route – routing and deep linking services and directives

works well with others – jquery, bootstrap, CF, html5, phonegap, etc.

key features--
#1 thing. As you make your 1st request, there is a compilation step, reads your scripts, looks at binding, creates event listeners, etc.

2-day data binding
ngRoute – ngView
NG-repeat directives
$http service
$http interceptor feature
Form Processing
built in form CSS classes
ng-show directive

simple app

view plain print about
1<scirpt src="angularmin.js"></script>
3<div ng-app>
4name: <input type="text" ng-model="name" />
5Welcome to angular: {{name}}

that's a "hello world" Angular app

controllers --
view plain print about
1playerApp.controller( 'mainController', function($scope){
2$scope.message = 'I am the home page';

View page brought in under this controller – home.cfm
view plain print about
1<div class="jumbotron text-center">
2<h1>home page</h1>
Angular Filters
(for bringing down arrays of data from a cfquery as JSON, etc)

first define the filter for a data listing
view plain print about
1<tr ng-repeat="p in playerList | filter:search | orderBy:'playerfirstname'" ng-click="getPlayer("
2    <td>{{p.playerfirstname | uppercase </td>

ngRoute Module –
write a config to tell angular when we go to a link, what we want to happen

view plain print about
1ngModel sample
2$scope.player = {};
3$scope.player['securitytoken'] = '';
4$scope.player['playerage'] = 14;
5$scope.player['playergender'] = 'Boy';


when I want to pass this to the server all I need to pass is "player", angular will serialize that to JSON and pass the whole thing up to the server

angular forms--
built in css classes
-ng-valid, ng-invalid, ng-pristine, ng dirty

built in validations
-url, email, max, maxlength, min, minlength, number, pattern, required

input properties
-$valid, $invalid, $pristine, $dirty
-$error{} - contains filed data for all invalid fields


Angular form code--
view plain print about
1<form name="angForm">
3<input .. ng-mode='player.agreement' value={{player.agreement}}' ng-required='1==1'>
4<button ng-click="
submitForm()" ng-show="angForm.$valid" />

$http service
can encapsulate this into factories, services, etc
$http caching
$http interceptors
$http headers
great for security
$http security
built in json vulnerability protection
built in XSRF protection

$http post to CF RESTful API
view plain print about
1$scope.updatePlayer = function()
5    $http.post9'/rest/playerSvc/updatePlayer?callback=JSON_CALLBACK', $scope.player).success( function(data, status)
6{ ... }
8.error( function(data, status) {
9... error code ...

Angular and CF working together--
what can CF do to make the client side better?
ColdFusion RESTful API
makes it easy to integrate into any client side JS frameworks
easy to create an API

seed applications with initial loading of data
provide yoru dynamic view pages
backend integration to JDBC, LDAP, web services, email. PDF, JSON, etc
improve security w/ encrypted request tokens
code generation of angularjs apps
example forms

Coldfusion restful features
RESTful Function signatures
registering and refreshing CFCs
serializing JSON and consuming JSON in your CFCs

creating a RESTful coomponent
view plain print about
1<cfcomponent rest=true" restpath="playerService">
2<cffunction name-="
getPlayer" access="remote" httpmethod="get" restpath="getPlayer/{playerID}" returntype="any" productes="application/json">
3<cfargument name="
playerID" required="true" restargsource="Path" type="numeric" />

there's a lot built into how cffunction and cfargument work together to make building the API seamless.

REST components
it is it's ow servlet
comes in a different way than a normal CFC
onRequestStart will see the request
onRequest will NOT
OnError is nOT called (bug)
OnCFCRequest will NOT see the request
it has a different "request path" than a regular http request
only visible in onRequestStart

need to "register" your REST components in either CF admin or via the Admin API
or in App.cfc
this.restsettings.cfclocation="./, /rest, /foo";
this.restsettings.skipcfcwitherror = true;
...have to "refresh" the rest files if you change them (via CF admin)

RESTful CFC post Example
view plain print about
1<cffunction name="newPlayer" access="remote" httpmethod="POST" restpath="newPlayer" returnformat="json">
2<cfargulent name="playerData"> <!--- JSON --->
6<cfset jsondata = deserializeJSON( arguments.playerData ) />
ColdFusion 11 JSON improvements
to basically deal w/ the JS frameworks like angular
data type preservation
case preservation
added "struct" as new Query Format
custom serializer
(select *) returns all uppercase keys. So keep that in mind if using select *

think of them like custom tags with stuff between the "open and close tags"
can wrap anything you like and anyone can use that "tag"

working w/ client side data
angular likes to keep data on the client
concurrency becomes an issue if people are all pushing data back and forth and if someone's client has dirty/old data
services to help
-firebase, GoInstant
Sockets, HTML5 web sockets

building in security
custom request tokens
angular $http interceptors

team development processing
another benefit
once you an api
front end can code to the api while back-end fills in the details
parallel development

-simulates a back end, to mock back-end communication

CF Objective Notes - Creating Services for Modern Web Applications

Creating Services for Modern Web Applications
Mike Nimer

in a simpler time, server side rendering
request / response model
server side rendering is dead (unless you need a static site for search engine spiders)

modern web apps
single pages apps
data loading via ajax
client side logic
client side routing

but can't move EVERYTHING to the client
still need server for data storage, email, encryption, etc
in the world of CF, need to think of our apps as CFCs

connect these via REST or Web Sockets
REST – Representational State Transfer
Roy Thomas Fielding wrote a dissertation on this (he's an architect at Adobe now)

REST Constraints

Uniform interface
the url means something. It points to an item
client server
servers are not concerted with the ui OR the USER STATE
servers and clients may also be replaced and developed independently

if you have an AGREED UPON interface between client and server code, you can link them up pretty seamlessly with minimal time needed to test between the 2

each request from any client contains ALL the info necessary to serve the request
might still put in caching/optimization, but the app still basically gets back all the data it needs

have to assume that the browser is going to cache a lot
if you don't want it to, you have to explicitly tell it not to

Layered System
client shouldn't KNOW it's not hitting the database directly, that there are 5 layers in between, etc

Code on Demand (optional in REST)
the ability to return "executable code" via REST

Evolution of REST
Martin Fowler "The Richardson Maturity Model"
Level 0 – the swamp of POX
call a URL, get back XML
url is just an end point
access="remote" in CF

level 1
Unique URL for each resource
but only use "get" or "post"
cfcomponent rest ="true" in CF
UPDATE and DELETE – those verbs are still in the URL. That's what we want to get past

Level 2
this is where people say "i'm using a proper REST service"
correct usage of verbs

and hopefully they're using correct status codes
this is "machine to machine"
need to give as much correct info as possible

REST URL design
keep in mind "verbs are bad"
nouns are good
okay: /jobhistory
not okay: /getupdatehistory

URLS have implicit hierarchy
URLS represent a resource
Use HTTP method to figure out what to do with it (update, delete, etc)

uses POST
post friendship/users/

uses end points
level 0

GET: /user/{id}
POST: /user/{id}
...all use SAME url

non resources

GET /search?q=
GET /translate?from={...}&to={..}

CF Admin REST settings
create a path to where the CFCs are
it will parse all the CFCs, parse them into Java Rest Services
(if you change something you have to redo this step, it doesn't automatically happen. Have to recompile.)

REST Status Codes
important b/c this is "machine to machine"
200 = OK
201 = created, don't need to return the whole object if I just need to know it's done, can just return 201 code
202 – accepted "i got it, I'm working on it. Don't freak out, you can show the progress bar now"
303- you need to go somewhere else. Everything is ok but you're in the wrong place
400 – you put something badly formatted in the url
405 – you used "get" and should have used "delete", etc (there's another verb to "ask what's available")
406 – you requested json and all I can return is XML, etc
409 – conflict. Someone saved this record before you did. Client should then show some sort of UI update so the user knows what to do.
412 – precondition failed
415 – unsupported media time. You posted an MPEG and I don't know what to do with it
500 – the ultimate lazy response. Server: "i don't know what to tell you about what went wrong" Cross your fingers and hope you can debug it.

Level 3 – Hypermedia
the one nobody understands
"self documenting service"
services return info about what else can be done
"get me this user" also returns "how to update the user, how to promote him, how to fire him" etc
client looks for these extra links to find 'what else can I do?'
machine to machine – so on-line user docs don't count for this
have to document how you're returning things in your api

view plain print about
1<link rel="self" 'href="http://example/userService/user/123">
3<link rel="
http://example/usersService/user/123" >

if clients are driven this way, you can add/remove stuff from your API and none of the clients will break.

Twitter search API does this
you get a "next_results" back so yo don't have to do any work to figure out the query string for "page 2" in the search results
if you don't have a "previous" in the response, you're on page 1

More Entries

Recent Comments

CF Objective Recap and Highlights
Jason Dean said: Thanks, Nolan! [More]

CF Objective Notes - What's a Pull Request? (Contributing to Open Source)
Brad Wood said: Thanks for posting your notes! Here the full slide deck too... [More]

Things I Learned While Teaching Java (part 2)
Nolan Erck said: I'm aware that it's in the Java spc, I just don't like it. I... [More]

CF Objective Recap and Highlights
Jason Dean said: Thanks, Nolan! [More]

CF Objective Notes - What's a Pull Request? (Contributing to Open Source)
Brad Wood said: Thanks for posting your notes! Here the full slide deck too... [More]

Things I Learned While Teaching Java (part 2)
Nolan Erck said: I'm aware that it's in the Java spc, I just don't like it. I... [More]

BlogCFC was created by Raymond Camden. This blog is running version 5.9.7. Contact Blog Owner