Slide 1
Slide 1 text
Writing Interactive User Interfaces
with PHP & React.js
Justin Carmony - PHPNW15
@JustinCarmony
Feedback - https://joind.in/15433
Slide 2
Slide 2 text
Me
• Director of Engineering
@ Deseret Digital Media
• Utah PHP Usergroup
President
• I Make (and Break)
Web Stuff (10+ years)
• @JustinCarmony
[email protected]
Slide 3
Slide 3 text
This
Presentation
• Slides Posted Online
• Feel free to ask on-topic
question during presentation
• Q&A Session At the End
• Feel free to ask me any
questions afterwards
Slide 4
Slide 4 text
• Never used React?
• Tried it out once?
• Use it regularly?
Poll the Audience - React JS
Slide 5
Slide 5 text
• Rarely use it
• jQuery?
• Ember, Angular, Backbone?
• Node?
• ES6?
Poll the Audience - JavaScript
Slide 6
Slide 6 text
Two Goals:
#1 - Why React
#2 - Go back Home / Work & Experiment
Not a Deep Dive
Slide 7
Slide 7 text
Let’s Start With
A Story!
Hat-Tip to Shu Uesugi
http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
We Need a Feedback Form!
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
✓
Slide 17
Slide 17 text
Boss Hrm…
Slide 18
Slide 18 text
Disable unless there is at least
something in the feedback texture
Slide 19
Slide 19 text
“I can do that” dev
Slide 20
Slide 20 text
$('#feedback-textarea').on("input", function(){
if($(this).val().length > 0)
{
$('#feedback-button').prop("disable", false);
}
else
{
$('#feedback-button').prop("disable", true);
}
});
Slide 21
Slide 21 text
✓
Slide 22
Slide 22 text
Boss
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Add a limit, show them how
close they are to being over?
Slide 25
Slide 25 text
Dev: Ok, that isn’t too bad
Slide 26
Slide 26 text
$('#feedback-textarea').on("input", function(){
if($(this).val().length > 0)
{
$('#feedback-button').prop("disable", false);
}
else
{
$('#feedback-button').prop("disable", true);
}
$('#feedback-character-count').html($(this).val().length);
});
Slide 27
Slide 27 text
✓
Slide 28
Slide 28 text
Boss: Small Oversite
Slide 29
Slide 29 text
Ask for their email?
Slide 30
Slide 30 text
–Johnny Appleseed
Dev: Shouldn’t be too hard?
Slide 31
Slide 31 text
$('#feedback-textarea').on("input", function(){
if($(this).val().length > 0 && $('#feedback-email').val().length > 0)
{
$('#feedback-button').prop("disable", false);
}
else
{
$('#feedback-button').prop("disable", true);
}
$('#feedback-character-count').html($(this).val().length);
});
Slide 32
Slide 32 text
✓
Slide 33
Slide 33 text
BUG!
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
$('#feedback-email').on("input", function(){
if($('#feedback-textarea').val().length > 0 && $('#feedback-
email').val().length > 0)
{
$('#feedback-button').prop("disable", false);
}
else
{
$('#feedback-button').prop("disable", true);
}
$('#feedback-character-count').html($(this).val().length);
});
$('#feedback-textarea').on("input", function(){
if($('#feedback-textarea').val().length > 0 && $('#feedback-
email').val().length > 0)
{
$('#feedback-button').prop("disable", false);
Slide 37
Slide 37 text
$('#feedback-button').prop("disable", true);
}
$('#feedback-character-count').html($(this).val().length);
});
$('#feedback-textarea').on("input", function(){
if($('#feedback-textarea').val().length > 0 && $('#feedback-
email').val().length > 0)
{
$('#feedback-button').prop("disable", false);
}
else
{
$('#feedback-button').prop("disable", true);
}
$('#feedback-character-count').html($(this).val().length);
});
Slide 38
Slide 38 text
✓
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
–Johnny Appleseed
Could we get a few more
changes?
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Next thing you know…
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
How did we get here?!
Slide 49
Slide 49 text
Who has had a similar experience?
Slide 50
Slide 50 text
Why is this messy?
Slide 51
Slide 51 text
Events Change DOM
Slide 52
Slide 52 text
Events Changes
Textarea Input Submit Button Disable / Enable
Slide 53
Slide 53 text
Events Changes
Textarea Input Submit Button Disable / Enable
Email Text Input Character Counter String
Character Counter Color
File Upload Success
File Upload Error
Submit Start
Submit Result
Feedback Status String
Feedback Status Color
Uploaded File Details
Form Area Style
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
So what do we do?
Slide 56
Slide 56 text
dramatic drum roll please…
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Treat your App’s UI
like an App
Slide 60
Slide 60 text
JavaScript UI
Frameworks
&
Libraries
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Just the UI
Think the “V” in MVC
Slide 63
Slide 63 text
One-way Data Binding
Slide 64
Slide 64 text
// Data Object
var model = {
value: "Hello";
}
Older Style “Two-Way Binding” (Angular, Ember, Backbone)
Slide 65
Slide 65 text
// Data Object
var model = {
value: "Hello";
}
One-Way Data “Binding”
Slide 66
Slide 66 text
// Data Object
var model = {
value: "Hello";
}
One-Way Data “Binding”
“change” event
Slide 67
Slide 67 text
Result of One-Way Binding:
Predictability
Slide 68
Slide 68 text
Virtual DOM
Slide 69
Slide 69 text
Events Changes
Textarea Input Submit Button Disable / Enable
Email Text Input Character Counter String
Character Counter Color
File Upload Success
File Upload Error
Submit Start
Submit Result
Feedback Status String
Feedback Status Color
Uploaded File Details
Form Area Style
STATE
Slide 70
Slide 70 text
Using React
Lets see how it actually work
Slide 71
Slide 71 text
WARNING!
You might see some JavaScript stuff
you’ve never seen before.
I promise to explain it, don’t get hung up on it. :)
Slide 72
Slide 72 text
Components
Slide 73
Slide 73 text
What React Looks Like
var React = require("react");
var HelloWorld = React.createClass({
render: function(){
var conf = "PHPNW15";
return (
);
}
});
module.exports = HelloWorld;
Hello {conf}!
Slide 74
Slide 74 text
What React Looks Like
var React = require("react");
var HelloWorld = require("./HelloWorld");
var domElement = document.getElementById('app');
React.render(, domElement);
Slide 75
Slide 75 text
• A value you pass to a React Component
• Immutable for the component.
Properties (aka “Props”)
Slide 76
Slide 76 text
Props
var React = require("react");
var HelloWorld = require("./HelloWorld");
var domElement = document.getElementById('app');
React.render(, domElement);
Slide 77
Slide 77 text
Props
var HelloWorld = React.createClass({
getDefaultProps: function(){
return {
conf: "Ski PHP 2015"
};
},
render: function(){
return (
);
}
});
Hello {this.props.conf}!
Slide 78
Slide 78 text
• Mutable Internal Data Object for a Component
• Set new state via this.setState({ key: “val” });
• Component re-renders itself and all children when changed.
State
Slide 79
Slide 79 text
I’m Insane,
Lets Do Some Live Coding
Slide 80
Slide 80 text
Implementing in
Your Project
Slide 81
Slide 81 text
Tools
• NPM - Install React & Other Tools
• webpack - compile & bundle JS
• babel - translate JSX to
JavaScript
as well as ES6 Support
• React Developer Tools - Chrome
extension for inspecting React
components.
Slide 82
Slide 82 text
Strategy
• Get NPM / webpack / babel setup
in your project.
• Add webpack to your build
process.
• Add webpack endpoints for the JS
code you write.
• Have your PHP View drop data on
the page with JSON.
• Have your view call “React.render”
with the component & data you
need.
Slide 83
Slide 83 text
Flux
Application Architecture for UIs
https://facebook.github.io/flux/docs/overview.html
Slide 84
Slide 84 text
Dispatcher
Action View
Store
Action
Slide 85
Slide 85 text
• Reflux - My Current Recommendation
• Redux - Newer, Supports “Isomorphic”
• Roll your own simple flux architecture.
Flux Libraries
Slide 86
Slide 86 text
Single Page App
Slide 87
Slide 87 text
• More complicated than just making portions of your site interactive.
• Create RESTful APIs (reuse your logic to fetch data for your views)
• Render HTML Head & Body with a single Div
• Use Flux framework to fetch data.
• Use react-router for handling Routing, URL Changes, etc.
Single Page Apps - Strategy
Slide 88
Slide 88 text
Isomorphic
Slide 89
Slide 89 text
Final Thoughts
Slide 90
Slide 90 text
Props before State
Slide 91
Slide 91 text
Level up your
JavaScript Knowlege
Slide 92
Slide 92 text
React is pretty Stable
Everything else: lots of churn
Slide 93
Slide 93 text
Start out
Small & Simple
Slide 94
Slide 94 text
Questions?
Slide 95
Slide 95 text
Thank You
Twitter: @JustinCarmony
Email: [email protected]
Web: justincarmony.com
Please Leave Feedback: https://joind.in/10809