I'm @robashton

You may remember...

"You have Ruined Javascript"

"Working for free"

And generally

These days

I've got a (real) job

(Erlang, 100% remote \o/)

I am not trying to sell you anything

So anyway

Enough about me

Let's talk about JS or something

What I am not going to talk about

The over-engineered mess that is AngularJS

The morality of framework-pushing for cash

The confused messes I've seen made with EmberJS

The sunken cost fallacy as applied to framework adoption

Coffeescript

Semi-colons

Enterprise bullshit

What I will talk about

How we use React and NPM for great good

Goals

Keep control over entry points

Pick and choose libraries for features

Fast rendering of views

Testable UI code

 

 

(when absolutely strictly necessary which is almost never so there)

Ability for my "non-js-focused" developers to get stuff done *today*

Before React

(demo)

Before React

• NPM + ALL THE MODULES
• Mustache or whatever for view rendering
• No API to learn, just the DOM + Mustache.Render

So why React?

Speed

Directness

 

(just the DOM)

Simplicity

Enforced data-flow conventions

Data flow in React

Props

(demo)

Config

Events

State

(demo)

Props

• Pass configuration into a component
• Configuration can be presentation values
• Configuration could be event handlers

State

• For holding internal values
• Should be avoided
• Triggers re-renders on setState

Hierarchy

(demo)

Props

Props

Props

Props

State

APP

Application Structure

Our applications

• app.js
• Makefile
• package.json
• single folder per feature

Our applications

React

app.js

features

Danger Zone

Relative includes

.../.../.../../something.js

Nested folders

 

/my/folder/brings/the/boys/to/the/yard

jQuery

(etc)

State

getDomNode

How has it worked out?

I Left A C Programmer With A ReactJS UI For Three Months And You Will Never Guess What Happened

Nothing - the code was great!

So remember

Friends don't let friends use Angular

(Seriously, stop it)

 

 

 

(That's my closing slide, @robashton)