Writing Interactive User Interfaces with PHP & React.js - PHPNW15

Have you heard of React.js but not sure where to start? Are your web UIs getting complicated and hard to maintain? Come learn about React.js, and JS library that was designed to make great user interfaces. We'll cover how to setup your environment to build React.js components. We'll talk about breaking out reusable components and organizing your code to make it manageable. We'll then show some examples of the differences between states & props and when to use them. We'll give a brief introduction to Flux, and share all the great resources for using React to help after the talk. Learn why websites like Facebook and Instagram use React to deliver a great experience, regardless of complexity. Learn how to take ReactJS and implement it into your existing PHP applications.

Joind.in: http://joind.in/15433

Transcript

1. Writing Interactive User Interfaces with PHP & React.js Justin Carmony - PHPNW15 @JustinCarmony Feedback - https://joind.in/15433
2. Me • Director of Engineering
 @ Deseret Digital Media • Utah PHP Usergroup
 President • I Make (and Break)
 Web Stuff (10+ years) • @JustinCarmony
 justin@justincarmony.com
3. 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
4. • Never used React? • Tried it out once? • Use it regularly? Poll the Audience - React JS
5. • Rarely use it • jQuery? • Ember, Angular, Backbone? • Node? • ES6? Poll the Audience - JavaScript
6. Two Goals: #1 - Why React #2 - Go back Home / Work & Experiment Not a Deep Dive
7. 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/
14. We Need a Feedback Form!
16. ✓
17. Boss Hrm…
18. Disable unless there is at least something in the feedback texture
19. “I can do that” dev
20. $('#feedback-textarea').on("input", function(){ if($(this).val().length > 0) { $('#feedback-button').prop("disable", false); } else { $('#feedback-button').prop("disable", true); } });
21. ✓
22. Boss
24. Add a limit, show them how close they are to being over?
25. Dev: Ok, that isn’t too bad
26. $('#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); });
27. ✓
28. Boss: Small Oversite
29. Ask for their email?
30. –Johnny Appleseed Dev: Shouldn’t be too hard?
31. $('#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); });
32. ✓
33. BUG!
36. $('#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);
37. $('#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); });
38. ✓
40. –Johnny Appleseed Could we get a few more changes?
46. Next thing you know…
48. How did we get here?!
49. Who has had a similar experience?
50. Why is this messy?
51. Events Change DOM
52. Events Changes Textarea Input Submit Button Disable / Enable
53. 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
55. So what do we do?
56. dramatic drum roll please…
59. Treat your App’s UI like an App
60. JavaScript UI Frameworks & Libraries
62. Just the UI Think the “V” in MVC
63. One-way Data Binding
64. // Data Object var model = { value: "Hello"; } <!-- HTML Text Input --> <input type="text" value="Hello" /> Older Style “Two-Way Binding” (Angular, Ember, Backbone)
65. // Data Object var model = { value: "Hello"; } <!-- HTML Text Input --> <input type="text" value="Hello" /> One-Way Data “Binding”
66. // Data Object var model = { value: "Hello"; } <!-- HTML Text Input --> <input type="text" value="Hello" /> One-Way Data “Binding” “change” event
67. Result of One-Way Binding: Predictability
68. Virtual DOM
69. 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
70. Using React Lets see how it actually work
71. WARNING! You might see some JavaScript stuff you’ve never seen before. I promise to explain it, don’t get hung up on it. :)
72. Components
73. What React Looks Like var React = require("react"); var HelloWorld = React.createClass({ render: function(){ var conf = "PHPNW15"; return ( <div class="hello"> <h1>Hello {conf}!</h1> </div> ); } }); module.exports = HelloWorld;
74. What React Looks Like var React = require("react"); var HelloWorld = require("./HelloWorld"); var domElement = document.getElementById('app'); React.render(<HelloWorld />, domElement);
75. • A value you pass to a React Component • Immutable for the component. Properties (aka “Props”)
76. Props var React = require("react"); var HelloWorld = require("./HelloWorld"); var domElement = document.getElementById('app'); React.render(<HelloWorld conf=“PHPNW15” />, domElement);
77. Props var HelloWorld = React.createClass({ getDefaultProps: function(){ return { conf: "Ski PHP 2015" }; }, render: function(){ return ( <div class="hello"> <h1>Hello {this.props.conf}!</h1> </div> ); } });
78. • 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
79. I’m Insane, Lets Do Some Live Coding
80. Implementing in Your Project
81. 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.
82. 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.
83. Flux Application Architecture for UIs https://facebook.github.io/flux/docs/overview.html
84. Dispatcher Action View Store Action
85. • Reflux - My Current Recommendation • Redux - Newer, Supports “Isomorphic” • Roll your own simple flux architecture. Flux Libraries
86. Single Page App
87. • 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
88. Isomorphic
89. Final Thoughts
90. Props before State
91. Level up your JavaScript Knowlege
92. React is pretty Stable Everything else: lots of churn
93. Start out Small & Simple
94. Questions?
95. Thank You Twitter: @JustinCarmony Email: justin@justincarmony.com Web: justincarmony.com Please Leave Feedback: https://joind.in/10809