Thinking metrics on React apps

Transcript

1. Thinking
   metrics on

   React apps
   @jcemer
   

   View Slide

2. I work on
   GloboPlay.

   globo.com
   

   View Slide

3. View Slide

4. View Slide

5. React Router 2.0
   & Server side
   render & Client
   side user login
   

   View Slide

6. 1. How can we 

   track our traffic
   with Google
   Analytics?
   

   View Slide

7. location={this.props.location} />
   

   View Slide

8. @PureRender
   class PageView extends Component {
   static propTypes = {
   location: PropTypes.object.isRequired
   }
   componentDidMount() {
   const { action, state } = this.props.location
   trackPageView(action, state)
   }
   componentDidUpdate() { /* */ }
   }
   

   View Slide

9. 2. How can we 

   analyse custom
   data?
   

   View Slide

10. Global
    metrics data:

    user account info
    & app version
    

    View Slide

11. data={{ appVersion: "2.3" }} />
    

    View Slide

12. function handleStateChangeOnClient(vars) {
    setMetricsDataLayer(vars)
    }
    export default withSideEffect(
    reducePropsToState,
    handleStateChangeOnClient
    )(DocumentMetrics)
    https://github.com/
    gaearon/react-side-effect
    

    View Slide

13. 3. How can we
    track the user
    navigation flow?
    

    View Slide

14. Playlist
    Recommendation
    

    View Slide

15. Component
    metrics:

    playlist or

    other lists
    

    View Slide

16. 
    
    
    is a list of
    
    is a list of
    

    View Slide

17. 
    
    metrics="playlist" />
    is a list of
    metrics="recommendation" />
    is a list of
    

    View Slide

18. 
    
    
    https://facebook.github.io/
    react/docs/context.html
    

    View Slide

19. class Video extends Component {
    static contextTypes = {
    linkMetrics: PropTypes.object
    }
    render() {
    const state = {
    metrics: this.context.linkMetrics
    }
    return /* ... */
    }
    }
    

    View Slide

20. * redux should be 

    an option too
    

    View Slide

21. Components
    React side effect
    Context
    

    View Slide

22. Thank you!
    @jcemer
    

    View Slide