Forget What You Know

Just React things...

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