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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  8. We Need a Feedback Form!

    View full-size slide

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

    View full-size slide

  10. “I can do that” dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. $('#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 full-size slide

  15. Boss: Small Oversite

    View full-size slide

  16. Ask for their email?

    View full-size slide

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

    View full-size slide

  18. $('#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 full-size slide

  19. $('#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 full-size slide

  20. $('#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 full-size slide

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

    View full-size slide

  22. Next thing you know…

    View full-size slide

  23. How did we get here?!

    View full-size slide

  24. Who has had a similar experience?

    View full-size slide

  25. Why is this messy?

    View full-size slide

  26. Events Change DOM

    View full-size slide

  27. Events Changes
    Textarea Input Submit Button Disable / Enable

    View full-size slide

  28. 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 full-size slide

  29. So what do we do?

    View full-size slide

  30. dramatic drum roll please…

    View full-size slide

  31. Treat your App’s UI
    like an App

    View full-size slide

  32. JavaScript UI
    Frameworks
    &
    Libraries

    View full-size slide

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

    View full-size slide

  34. One-way Data Binding

    View full-size slide

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


    Older Style “Two-Way Binding” (Angular, Ember, Backbone)

    View full-size slide

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


    One-Way Data “Binding”

    View full-size slide

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


    One-Way Data “Binding”
    “change” event

    View full-size slide

  38. Result of One-Way Binding:
    Predictability

    View full-size slide

  39. 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 full-size slide

  40. Using React
    Lets see how it actually work

    View full-size slide

  41. 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 full-size slide

  42. What React Looks Like
    var React = require("react");
    var HelloWorld = React.createClass({
    render: function(){
    var conf = "PHPNW15";
    return (

    Hello {conf}!

    );
    }
    });
    module.exports = HelloWorld;

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Props
    var HelloWorld = React.createClass({
    getDefaultProps: function(){
    return {
    conf: "Ski PHP 2015"
    };
    },
    render: function(){
    return (

    Hello {this.props.conf}!

    );
    }
    });

    View full-size slide

  47. • 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 full-size slide

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

    View full-size slide

  49. Implementing in
    Your Project

    View full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

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

    View full-size slide

  53. Dispatcher
    Action View
    Store
    Action

    View full-size slide

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

    View full-size slide

  55. Single Page App

    View full-size slide

  56. • 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 full-size slide

  57. Final Thoughts

    View full-size slide

  58. Props before State

    View full-size slide

  59. Level up your
    JavaScript Knowlege

    View full-size slide

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

    View full-size slide

  61. Start out
    Small & Simple

    View full-size slide

  62. Thank You
    Twitter: @JustinCarmony
    Email: [email protected]
    Web: justincarmony.com
    Please Leave Feedback: https://joind.in/10809

    View full-size slide