Building Realtime Apps Using React.js and Pusher

ManilaJS meet up May 8, 2015

Transcript

1. Building Realtime Apps Using React.js and Pusher
2. What We’ve Built
3. Chat
4. Whiteboard
5. How can apps REACT to PUSHES?
6. React Component Life Cycle
7. getDefaultProps getInitialState componentWillMount componentDidMount Initialization shouldComponentUpdate componentWillUpdate componentDidUpdate Update render componentWillUnmount unmount Destroy
8. getDefaultProps getInitialState componentWillMount componentDidMount Initialization render Input Data
9. getDefaultProps getInitialState componentWillMount componentDidMount shouldComponentUpdate componentWillUpdate componentDidUpdate Initialization Update render Data from User
10. In Code
11. In Code
12. Adding Realtime Components
13. Polling
14. Polling • client connects to server periodically (e.g. every 30s, 1min, etc) to get updates • updates can be delayed • unnecessary server calls when there are no changes • update occurrences happen at fixed intervals
15. getDefaultProps getInitialState componentWillMount componentDidMount shouldComponentUpdate componentWillUpdate componentDidUpdate Initialization Update render Data from User Server
16. Push Notifications
17. Push Notifications • server sends notification to client when updates are available • updates are up-to-date • no unnecessary server calls • update occurrences happen at different intervals
18. getDefaultProps getInitialState componentWillMount componentDidMount shouldComponentUpdate componentWillUpdate componentDidUpdate Initialization Update render Data from User unmount componentWillUnmount Destroy
19. Listening to Pusher Events
20. Create Pusher Application This can be done in pusher.com. Sign up is free!
21. Subscribe to Channel and Listen to Events
22. Subscribe to Channel and Listen to Events
23. Public (channel-name) no restrictions in joining channels ! Private (private-channel-name) requires user authentication before joining channel Pusher Channel Types
24. Presence (presence-channel-name) requires user authentication before joining channel can access info about channel members can directly trigger events on other clients ! Pusher Channel Types
25. Triggering Events
26. Triggering Events Pusher server triggers events about channel subscription, etc. ! Your app’s API server can trigger any event, in any channel within the application (when app credentials are set correctly)
28. Triggering Events Pusher’s debug console can trigger any event, in any channel within the application (for debug purposes)! From other clients (using presence channels) triggers client events (client-event-name) that other clients subscribed to the channel can receive.
29. Demo
31. • Events are sometimes triggered when component is not mounted. • More errors happen as users have more interaction with a page. • Situation of other users must also be considered. • Difficult to debug. • Difficult to test.