Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Justin Carmony

October 03, 2015
Tweet

More Decks by Justin Carmony

Other Decks in Technology

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

    [email protected]

    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: [email protected]
    Web: justincarmony.com
    Please Leave Feedback: https://joind.in/10809

    View Slide