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

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

42e57550044496027f9a3a4303f13362?s=128

Justin Carmony

October 03, 2015
Tweet

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/

  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. We Need a Feedback Form!

  15. None
  16. Boss Hrm…

  17. Disable unless there is at least something in the feedback

    texture
  18. “I can do that” dev

  19. $('#feedback-textarea').on("input", function(){ if($(this).val().length > 0) { $('#feedback-button').prop("disable", false); } else

    { $('#feedback-button').prop("disable", true); } });
  20. Boss

  21. None
  22. Add a limit, show them how close they are to

    being over?
  23. Dev: Ok, that isn’t too bad

  24. $('#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); });
  25. Boss: Small Oversite

  26. Ask for their email?

  27. –Johnny Appleseed Dev: Shouldn’t be too hard?

  28. $('#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); });
  29. BUG!

  30. None
  31. None
  32. $('#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);
  33. $('#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); });
  34. None
  35. –Johnny Appleseed Could we get a few more changes?

  36. None
  37. None
  38. None
  39. None
  40. None
  41. Next thing you know…

  42. None
  43. How did we get here?!

  44. Who has had a similar experience?

  45. Why is this messy?

  46. Events Change DOM

  47. Events Changes Textarea Input Submit Button Disable / Enable

  48. 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
  49. None
  50. So what do we do?

  51. dramatic drum roll please…

  52. None
  53. None
  54. Treat your App’s UI like an App

  55. JavaScript UI Frameworks & Libraries

  56. None
  57. Just the UI Think the “V” in MVC

  58. One-way Data Binding

  59. // Data Object var model = { value: "Hello"; }

    <!-- HTML Text Input --> <input type="text" value="Hello" /> Older Style “Two-Way Binding” (Angular, Ember, Backbone)
  60. // Data Object var model = { value: "Hello"; }

    <!-- HTML Text Input --> <input type="text" value="Hello" /> One-Way Data “Binding”
  61. // Data Object var model = { value: "Hello"; }

    <!-- HTML Text Input --> <input type="text" value="Hello" /> One-Way Data “Binding” “change” event
  62. Result of One-Way Binding: Predictability

  63. Virtual DOM

  64. 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
  65. Using React Lets see how it actually work

  66. WARNING! You might see some JavaScript stuff you’ve never seen

    before. I promise to explain it, don’t get hung up on it. :)
  67. Components

  68. 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;
  69. What React Looks Like var React = require("react"); var HelloWorld

    = require("./HelloWorld"); var domElement = document.getElementById('app'); React.render(<HelloWorld />, domElement);
  70. • A value you pass to a React Component •

    Immutable for the component. Properties (aka “Props”)
  71. Props var React = require("react"); var HelloWorld = require("./HelloWorld"); var

    domElement = document.getElementById('app'); React.render(<HelloWorld conf=“PHPNW15” />, domElement);
  72. 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> ); } });
  73. • 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
  74. I’m Insane, Lets Do Some Live Coding

  75. Implementing in Your Project

  76. 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.
  77. 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.
  78. Flux Application Architecture for UIs https://facebook.github.io/flux/docs/overview.html

  79. Dispatcher Action View Store Action

  80. • Reflux - My Current Recommendation • Redux - Newer,

    Supports “Isomorphic” • Roll your own simple flux architecture. Flux Libraries
  81. Single Page App

  82. • 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
  83. Isomorphic

  84. Final Thoughts

  85. Props before State

  86. Level up your JavaScript Knowlege

  87. React is pretty Stable Everything else: lots of churn

  88. Start out Small & Simple

  89. Questions?

  90. Thank You Twitter: @JustinCarmony Email: justin@justincarmony.com Web: justincarmony.com Please Leave

    Feedback: https://joind.in/10809