ColdFusion + ReactJS

Expanding Horizons through Interactivity Programming

“I’m a second-time tour guide!” - Minh Vo

Adobe ColdFusion Summit East 2019,

12:10PM
Washington DC
Preparing for the Trip
~ Overview, Build, Peruse ~
Don’t blink, you’re going to see unicorns…
Why are we exploring? Why expand horizons?
“Getting to the moon is not an extension of climbing a tree.”

Solutions to problems you want to solve may not exist in the realm of knowledge
you currently possess.

Technology ~ ground beneath us is ever-changing and cannibalizing!

What we think is right and true today, might not be tomorrow.

What is impossible today, might not be impossible tomorrow.

Exploring will keep us more aware so we can fail quickly and remain flexible.
What did we sign up for?
We’re going to explore a light-hearted example of Interactivity Programming

GOAL: Prove to you the ColdFusion + ReactJS combination is worth your time!

http://draftstudios.com/demo/
What is ReactJS?
JavaScript library in charge of front-end/client-side views.

● Sits where Flex used to sit.

● Does not handle back-end logic or databases = ColdFusion to the rescue.
● Composable - JSX (custom syntax) is tag-based (similar to CF Custom Tags)
○ gets “transpiled” back to vanilla JavaScript

<ComponentName prop1={value} prop2={function()} onWheel={wheelHandler()}

onClick={clickHandler()}>
<Child … /> {/* reference these children as this.props.children */}
</ComponentName>
Why is ReactJS being adopted?
1. Fundamental change in the way components (and web apps) should be built.
a. Introduced unidirectional data flow through props and state. View (what you see
on screen) is a pure function of the data!
i. If the data (properties and state) is consistent, the resulting view will always
be the same.
ii. Easier to reason about and debug!

2. Removes mundane, boilerplate, and configuration to allow you to focus on

rapid prototyping… thanks to create-react-app.

3. Extremely performant (fast) due to VirtualDOM.

VirtualDOM
Immediate-mode-rendering brought to the DOM. React keeps track of what’s in
the DOM for you and only re-renders what has changed since the last render
cycle.
What we’ll forego (that are actually important)?
● ReactJS vs. Vue vs. Angular vs. …
● Lifecycle Methods (we’ll only briefly cover constructor(), render(), and
componentDidMount() ~ similar to .ready())
● Service Workers (progressive apps that fail gracefully)
● React Router
● Redux / Flux / MobX / RxJS / ... (we’ll keep state-management Vanilla)
● Advanced Styling: SASS/LESS/CSS Modules
● Higher Order Components
● Server-Side Rendering
Now some more fun dry stuff...
Must be aware… background
npm

● Node.js Package Manager

○ Used for dependency management
○ Driven by /package.json file
○ Installs external libraries into project’s /node_modules directory
Must be aware...
create-react-app

● An npm package
● Wizard, pre-rigged, pre-configured starter app
○ Webpack (bundler)
○ Babel (compiler / “transpiler”)
○ Pre-selected /node_modules (utility libraries)
○ Dev server with live-reloading (also look into HMR)
○ Linter
○ Build process

● Sole reason we can forego so much technical detail

Must be aware...
directory structure

/
Note package.json
/node_modules
/src
Where .js/.jsx sits
App.css for now will go here as well
/public ~ specifically CF code and assets will go here
Notice that static .html and .css files here by default. Will be copied
/build
Must be aware… styling
css

● Absolute positioning, so we can abuse LEFT | TOP | RIGHT | BOTTOM style

assignments
● vh and vw units, I like them better than percentage units (% of what)
● display: flex
○ Mainly for auto-margins (centering Person) and flush alignment of assets
● In React, inline styling uses camel-case style={{backgroundColor: “skyblue”}}
○ Otherwise it’s probably in /src/App.css where we reference class with className=“style-class”
Must be aware...
React/JS-specific Stuff:

● Props and State: You can think of them as scopes, kinda.

○ Props ~ cfarguments
○ State ~ session or even application scope (if every application is a new component)

<ComponentName prop1={value} prop2={function()} onWheel={wheelHandler()}

onClick={clickHandler()}></ComponentName>

this.state = {
wealthy: false,
} (set in the constructor() function of a class)
Must be aware… animations
css animations

● transform(ations): translateX(), translateY(), rotate()

● transition(s): change properties over time - opacity, color
● animation: shorthand to peg a @keyframe to an element
○ Keyframes - like pages on a flipbook, at 1% {change opacity to .1}, 2% {change to .2…}
○ Steps(): modifier to set how many keyframes will render in the animation timeframe. Will use
to death for our vegas sprite-sheets.
Must be aware...
React/JS-specific Stuff:

● Updating state object since you probably want to modify it

this.setState({ wealthy: true });

● Events: Specifically onWheel() event, returning e.deltaY (-100 to 100)

<ComponentName arg1={value} arg2={eventHandler()}

onWheel={wheelHandler()} onClick={clickHandler()}></ComponentName>
Must be aware...
React/JS-specific Stuff:

● Ternary operators
○ && -> shorthand for if/then… { this.state.wealthy && beHappy(); }
○ condition ? true : false shorthand for if/else… { this.state.wealthy ? beHappy() : beSad() }
● Comments in JSX: {/* comments go here */}
● What are the curly brackets? {} = ## in CF
○ Evaluate your variables
● setTimeout(), setInterval(), requestAnimationFrame()
● ES6 (ECMA Script 2015 spec), specifically arrow function definitions
○ facing = (direction) => { return direction ? "forward" : "backward" }
○ defines and binds function to component’s scope (attach to class prototype)
Technical assumptions
General knowledge of how websites are. CF, JS, JSON, CSS familiarity will help!
75% ReactJS / 25% CF

● npm installed (v5.2+)

● create-react-app available | npx create-react-app
● React Developer Tools installed
● Commandbox is running CF2018 on :8080 serving
/draft-studios-website/build/* (`npm run build` inside /draft-studios-website first)
○ Component Cache: off
○ WebSockets on :8581 (default)
● create-react-app is running Webpack dev server on :3000 (default)
○ `npm <run> start`
Buildout (equivalent to draft-studios-rig repository)
Buildout:
$ npx create-react-app <app-name>
$ cd <app-name>
$ npm run start
Note: I realized in my presentation buildout I didn’t get to cover breaking our individual
<div> elements into their own separate components. This is an important concept and
can be confusing if you don’t know what to lookout for. Totally helps as you’re
navigating either draft-studios-rig or draft-studios-website repos.

To illuminate this, I’m adding the next three slides to supplement! - Minh
Breaking out components
/draft-studios-rig/src/Canvas.js is probably easiest example… note the import on
line 1, class Canvas extends Component and export default Canvas;
{this.props.children} also important--putting all nested <Parallax/> inside Canvas.
Breaking out components
/draft-studios-rig/src/Canvas.js could also be written like below, using functional
components (since you don’t need State, class assignment is unnecessary)! You
call these “pure” or “stateless” functions/components. Read this to understand.

import React from ‘react’;

const Canvas = (props) => {
return (
<div className=”Canvas” onWheel= {props.scroll} >
{props.children} {/* no this scope, we’re not in a class! */}
</div>
);
}
export default Canvas; // this code is functionally identical to last slide!
Breaking out components
/draft-studios-rig/src/App.js would then import Canvas (the default export):

And then use them like declarative tags (notice again <Parallax/> children):
Jump to draft-studios-rig code

● Add some buildings and clouds

● Change the floor height and color
● Go over handleWheel() event handler
Where do we go from here? Jump to the full repo!
You just showed me all JS, where’s CF?
Done - Parallax (clouds, buildings, trees)
Done - Scroll Handling (translating movement)

- Fetching JSON data from a ColdFusion CFC the regular way

- ColdFusion Web Sockets for real-time interactivity (world boss!)

Simple Animations (running, etc)

In the draft-studios-website repository you’ll find the code referenced in the next chunk of
slides. Please follow the directions on the repository’s README.md.
For prod deployment, run `npm run build` (look at package.json if you’re curious).
It will generate a /build directory which is what you’ll upload to your CF app directory.
Fetching data via CFC
CFC Setup: /draft-studios-website/public/services/ds.cfc

***NOTE*** use array notation here instead of dot for keeping case,
older CF upper-cases struct keys which can be an issue during SerializeJSON step
Fetching data via CFC - JS side
CFC Setup: /draft-studios-website/src/FetchColdFusionAssets.js

Trigger the fetch this way:

Fetching data via CFC - JS side
render() should then look like this, so as to react to this.state.json change:

It’s like looping through a collection/array of structs...

Fetching data via WebSockets - Channel Setup
WS Setup: /draft-studios-website/public/services/Application.cfc

***NOTE*** This registers an app name and a channel name so we can begin sending messages through it.

See Giancario Gomez’s presentation. He’s the master of this!

Make sure ColdFusion WebSockets are enabled and verify the port it’s running on.
Fetching data via WebSockets - CF side
WS Setup: /draft-studios-website/public/services/ds.cfc
Fetching data via WebSockets - CF side
WS Setup: /draft-studios-website/public/services/ds.cfc

Working with Queries!

Fetching data via WebSockets - JS side
WS Setup: /draft-studios-website/src/FetchColdFusionAssets.js
Fetching data via WebSockets - JS side
WS Setup: /draft-studios-website/src/FetchColdFusionAssets.js

Trigger the broadcast similar way:

Fetching data via WebSockets - JS side
render() should is actually the same, so as to react to this.state.json change:

It’s again like looping through a collection/array of structs...

ANIMATIONS!!! Hard one first.
/draft-studios-website/src/Person.js and /draft-studios-website/src/App.css

2x8 Grid a.k.a. Sprite Sheet

First row signifies animation frames going right

Second row going left

Two <div>’s
● one at the frame height and width with
overflow:hidden.
● bigger one is the entire sheet (ie: 400x800)!

Since Person.js’ animation needed to be state aware,

css alone won’t cut it!
ANIMATIONS!!! Easy one.
/draft-studios-website/src/App.js and /draft-studios-website/src/App.css

1x3 Sprite Sheet, One <div>

● Use step(3) css animation <see next slide>
ANIMATIONS!!! Easy one.
/draft-studios-website/src/App.js and /draft-studios-website/src/App.css

● Explicitly set className to div. Explicitly set width and height to single frame. Set background to
big image. Animation shorthand property set to @keyframe name. Easy peasey!
Let’s take a step back...

Hey, stop reading and pay attention!

Resources from this session
All found on http://draftstudios.com right at the top of the screen!
the world is vast and you
“

can’t possibly learn

everything…”
Thanks!
programmer
minh@draftstudios.com
www.draftstudios.com

illustrator
jimmy@draftstudios.com

HUGE THANKS to everyone

I’ve personally met at the
conference and the Adobe Staff!

You’re all so supportive!!! <3

Special thanks to Kishore and Elishia!
(´･ω･`) Sheila, Molly, and Jimmy!!