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
   

   View Slide

2. Me
   • Director of Engineering

   @ Deseret Digital Media
   • Utah PHP Usergroup

   President
   • I Make (and Break)

   Web Stuff (10+ years)
   • @JustinCarmony

   justin@justincarmony.com
   

   View Slide

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
   

   View Slide

4. • Never used React?
   • Tried it out once?
   • Use it regularly?
   Poll the Audience - React JS
   

   View Slide

5. • Rarely use it
   • jQuery?
   • Ember, Angular, Backbone?
   • Node?
   • ES6?
   Poll the Audience - JavaScript
   

   View Slide

6. Two Goals:
   #1 - Why React
   #2 - Go back Home / Work & Experiment
   Not a Deep Dive
   

   View Slide

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/
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. We Need a Feedback Form!
    

    View Slide

15. View Slide

16. ✓
    

    View Slide

17. Boss Hrm…
    

    View Slide

18. Disable unless there is at least
    something in the feedback texture
    

    View Slide

19. “I can do that” dev
    

    View Slide

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

    View Slide

21. ✓
    

    View Slide

22. Boss
    

    View Slide

23. View Slide

24. Add a limit, show them how
    close they are to being over?
    

    View Slide

25. Dev: Ok, that isn’t too bad
    

    View Slide

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);
    });
    

    View Slide

27. ✓
    

    View Slide

28. Boss: Small Oversite
    

    View Slide

29. Ask for their email?
    

    View Slide

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

    View Slide

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);
    });
    

    View Slide

32. ✓
    

    View Slide

33. BUG!
    

    View Slide

34. View Slide

35. View Slide

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);
    

    View Slide

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);
    });
    

    View Slide

38. ✓
    

    View Slide

39. View Slide

40. –Johnny Appleseed
    Could we get a few more
    changes?
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. Next thing you know…
    

    View Slide

47. View Slide

48. How did we get here?!
    

    View Slide

49. Who has had a similar experience?
    

    View Slide

50. Why is this messy?
    

    View Slide

51. Events Change DOM
    

    View Slide

52. Events Changes
    Textarea Input Submit Button Disable / Enable
    

    View Slide

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
    

    View Slide

54. View Slide

55. So what do we do?
    

    View Slide

56. dramatic drum roll please…
    

    View Slide

57. View Slide

58. View Slide

59. Treat your App’s UI
    like an App
    

    View Slide

60. JavaScript UI
    Frameworks
    &
    Libraries
    

    View Slide

61. View Slide

62. Just the UI
    Think the “V” in MVC
    

    View Slide

63. One-way Data Binding
    

    View Slide

64. // Data Object
    var model = {
    value: "Hello";
    }
    
    
    Older Style “Two-Way Binding” (Angular, Ember, Backbone)
    

    View Slide

65. // Data Object
    var model = {
    value: "Hello";
    }
    
    
    One-Way Data “Binding”
    

    View Slide

66. // Data Object
    var model = {
    value: "Hello";
    }
    
    
    One-Way Data “Binding”
    “change” event
    

    View Slide

67. Result of One-Way Binding:
    Predictability
    

    View Slide

68. Virtual DOM
    

    View Slide

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
    

    View Slide

70. Using React
    Lets see how it actually work
    

    View Slide

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. :)
    

    View Slide

72. Components
    

    View Slide

73. What React Looks Like
    var React = require("react");
    var HelloWorld = React.createClass({
    render: function(){
    var conf = "PHPNW15";
    return (
    
    Hello {conf}!
    
    );
    }
    });
    module.exports = HelloWorld;
    

    View Slide

74. What React Looks Like
    var React = require("react");
    var HelloWorld = require("./HelloWorld");
    var domElement = document.getElementById('app');
    React.render(, domElement);
    

    View Slide

75. • A value you pass to a React Component
    • Immutable for the component.
    Properties (aka “Props”)
    

    View Slide

76. Props
    var React = require("react");
    var HelloWorld = require("./HelloWorld");
    var domElement = document.getElementById('app');
    React.render(, domElement);
    

    View Slide

77. Props
    var HelloWorld = React.createClass({
    getDefaultProps: function(){
    return {
    conf: "Ski PHP 2015"
    };
    },
    render: function(){
    return (
    
    Hello {this.props.conf}!
    
    );
    }
    });
    

    View Slide

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
    

    View Slide

79. I’m Insane,
    Lets Do Some Live Coding
    

    View Slide

80. Implementing in
    Your Project
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

83. Flux
    Application Architecture for UIs
    https://facebook.github.io/flux/docs/overview.html
    

    View Slide

84. Dispatcher
    Action View
    Store
    Action
    

    View Slide

85. • Reflux - My Current Recommendation
    • Redux - Newer, Supports “Isomorphic”
    • Roll your own simple flux architecture.
    Flux Libraries
    

    View Slide

86. Single Page App
    

    View Slide

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
    

    View Slide

88. Isomorphic
    

    View Slide

89. Final Thoughts
    

    View Slide

90. Props before State
    

    View Slide

91. Level up your
    JavaScript Knowlege
    

    View Slide

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

    View Slide

93. Start out
    Small & Simple
    

    View Slide

94. Questions?
    

    View Slide

95. Thank You
    Twitter: @JustinCarmony
    Email: justin@justincarmony.com
    Web: justincarmony.com
    Please Leave Feedback: https://joind.in/10809
    

    View Slide