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

Forget What You Know

Forget What You Know

Just React things...

Christopher Pitt

September 22, 2016
Tweet

More Decks by Christopher Pitt

Other Decks in Programming

Transcript

  1. FORGET WHAT YOU KNOW

    View Slide

  2. WHAT I LEARNED ABOUT REACT
    THOUGH I MOSTLY DO SERVER-SIDE
    AND A LITTLE BIT OF "WELL THAT WORKS WELL ENOUGH" JAVASCRIPT

    View Slide

  3. View Slide

  4. const $issues = $(".issues")
    $.ajax({
    "url": "https://api.github.com/repos/facebook/react/issues",
    "success": function(issues) {
    issues.forEach(function(issue) {
    $issues.append(`

    ${issue.title}
    ${issue.body}

    `)
    })
    }
    })

    View Slide

  5. $issues.on("click", ".title", function(e) {
    const $title = $(this)
    $title.parent(".issue").toggleClass("highlight")
    $title.siblings(".extract").toggle()
    })

    View Slide

  6. View Slide

  7. "success": function(issues) {
    issues.forEach(function(issue) {
    $issues.append(`

    ${issue.title}
    hide
    ${issue.body}

    `)
    })
    }

    View Slide

  8. let hidden = []
    $issues.on("click", ".hide", function(e) {
    const $hide = $(this)
    const id = $hide.data("id")
    hidden.includes(id) || hidden.push(id)
    });

    View Slide

  9. $.ajax({
    "url": "https://api.github.com/repos/facebook/react/issues",
    "success": function(issues) {
    issues.forEach(function(issue) {
    $issues.append(`...`)
    })
    }
    })

    View Slide

  10. const render = function(issues) {
    $issues.empty()
    issues
    .filter(function(issue) {
    return ! hidden.includes(issue.id)
    })
    .forEach(function(issue) {
    $issues.append(`...`)
    })
    }

    View Slide

  11. const fetch = function() {
    $.ajax({
    "url": "https://api.github.com/repos/facebook/react/issues",
    "success": render
    })
    }
    fetch()

    View Slide

  12. let hidden = []
    try {
    hidden = JSON.parse(localStorage["hidden"])
    } catch (e) {
    console.warn("could not load hidden ids from local storage")
    }

    View Slide

  13. $issues.on("click", ".hide", function(e) {
    const $hide = $(this)
    const id = $hide.data("id")
    hidden.includes(id) || hidden.push(id)
    localStorage["hidden"] = JSON.stringify(hidden)
    fetch()
    });

    View Slide

  14. OTHER THINGS WE COULD IMPROVE...

    View Slide

  15. IMPERATIVE CODE
    ▸ make ajax request
    ▸ render list of items
    ▸ do a thing on click
    ▸ persist ui state for refresh

    View Slide

  16. IMPERATIVE CODE
    this is how to make
    things look like I want

    View Slide

  17. DECLARATIVE CODE
    this is what I want things to
    look like given any state

    View Slide



  18. {{ issue.title }}
    hide
    {{ issue.body }}


    View Slide

  19. const Issues = ({ issues }) => {
    return (

    {issues.forEach((issue, key) => {
    if (!issue.visible) {
    return
    }
    return
    })

    )
    }

    View Slide

  20. class Issues extends React.Component {
    render() {
    return (

    {this.props.issues.forEach((issue, key) => {
    if (!issue.visible) {
    return
    }
    return
    })

    )
    }
    }

    View Slide

  21. WHY IS DECLARATIVE CODE SOMETIMES BETTER?

    View Slide

  22. REACT IS SCARY

    View Slide

  23. USE FUNCTIONS INSTEAD OF CLASSES WHERE POSSIBLE

    View Slide

  24. class Issues extends React.Component {
    componentWillMount() {
    // do something before the component mounts
    }
    componentWillReceiveProps() {
    // do something after the component mounts
    }
    shouldComponentUpdate() {
    // return false if the component shouldn't re-render
    }
    }

    View Slide

  25. class Issues extends React.Component {
    constructor(...params) {
    super(...params)
    this.state = {
    "text": "...list issues",
    }
    }
    async componentDidMount() {
    const response = await fetch("http://codepen.io/assertchris/pen/rrjKPN.css")
    const text = await response.text()
    this.setState({
    ...this.state,
    "length": text.length,
    })
    }
    render() {
    if (this.state.length) {
    return { this.state.text } ! { this.state.length }
    }
    return { this.state.text }
    }
    }

    View Slide

  26. USE IMMUTABLE DATA WHERE POSSIBLE

    View Slide

  27. this.setState({
    ...this.state,
    "length": text.length,
    })
    return [
    ...items,
    "new item",
    ]

    View Slide

  28. let state1 = Immutable.Map({
    "text": "...list items",
    "length": 0,
    })
    let state2 = map1.set("length", 43)
    state1.get("length") // 0
    state2.get("length") // 43
    state1.equals(state2) // false

    View Slide

  29. https://facebook.github.io/immutable-js

    View Slide

  30. YOU DON'T ALWAYS NEED FLUX OR REDUX OR REFLUX...

    View Slide

  31. https://medium.com/@dan_abramov/
    you-might-not-need-redux-be46360cf367

    View Slide

  32. USE SERVICE LOCATION FOR PLUGIN ARCHITECTURE

    View Slide

  33. // ...the code you write !
    import { Ioc } from "adonis-fold"
    import { hiddenReducer, highlightedReducer } from "path/to/core"
    Ioc.bind("reducers", function() {
    return [
    hiddenReducer,
    highlightedReducer,
    ]
    })

    View Slide

  34. // ...the code others write !
    import { Ioc } from "adonis-fold"
    import { pluginReducer } from "path/to/plugin"
    const previous = Ioc.use("reducers")
    Ioc.bind("reducers", function() {
    return [
    ...previous,
    pluginReducer,
    ]
    })

    View Slide

  35. const Issues = (props) => {
    const globals = Ioc.use("global-issues")
    if (globals.length) {
    return (

    { renderGlobalIssues(globals) }
    { renderIssues(props.issues) }

    )
    }
    return (

    { renderIssues(props.issues) }

    )
    }

    View Slide

  36. http://adonisjs.com/docs/3.0/overview#ioc-container

    View Slide

  37. https://www.amazon.com/dp/B01BSTEDJ0

    View Slide

  38. Thanks
    https://speakerdeck.com/chrispitt/forget-what-you-know
    @assertchris

    View Slide