Realtime Chat with ReactJS, Redux and Pusher | ReactJS Norway

In this talk, it was discussed how to build a Realtime-Chat from scratch with React, Redux, and Pusher.

Presenter: Jing Kjeldsen
=====================================================
Slides: https://speakerdeck.com/reactjsnorway/realtime-chat

Follow us

- ReactJS Norway's site: http://bit.ly/2ka4hC8 

- Facebook: http://bit.ly/2kxmHxW 

- Instagram: http://bit.ly/2kpysnJ 

- Twitter: http://bit.ly/2kaehvl 

- Youtube: https://youtu.be/Uj7UquL4gVc

Sponsored by Stooic Labs (http://bit.ly/2oTE4dF)
Organizer: Domenico Solazzo (http://bit.ly/2jRxj8j)

Transcript

1. HOW WE ARE BUILDING CHAT BY JING KJELDSEN 
 CTO AND CO-FOUNDER OF KONSUS
2. WHY DO WE NEED A CHAT?
3. 3 PROBLEM: 40% OF PROFESSIONALS’ TIME CAN BE OUTSOURCED, BUT IS NOT Large consultancies and banks have had their own solutions since mid-90s The time is right for a solution for everyone else 2018 1995
4. 4 THE WINDOW OF OPPORTUNITY:
 SPEED AND CONVENIENCE Setup Cost Management time Time to start / turnaround time Manual HIGH PRICE LOW PRICE $500B In-house Immediate start 12hr turnaround Full volume flexibility No setup cost FRICTION SPEED / CONVENIENCE $62B Graphic Design Agencies $429B Temp Staffing Agencies $443B Traditional Outsourcing $10B Online Marketplaces
5. CHALLENGE 1: 
 COMPONENTS SHARE DATA 5
6. CHALLENGE 2: DANGER OF LARGE, TANGLED COMPONENTS AND SPAGHETTI-CODE 6 Go to -> <- Go to Go to -> <- Go to Go to ->
7. SOLUTION: WE NEED A STRUCTURED 
 WAY TO HANDLE THIS 7 Use a global state manager A lot of alternatives, 
 here are some popular choices: Redux MobX Apollo/ Falcor Relay/ GraphQL
8. OUR CHOICE: 8 REDUX Easy to debug, very testable Can get started right away, without building a GraphQL/Falcor server Huge community and ecosystem Server-rendering Functional 
 (What is that?)
9. SHORT INTRODUCTION TO FUNCTIONAL PROGRAMMING
10. WHAT IS A PURE FUNCTION 1 0 Given the same inputs, always returns the same output, does not modify the input and has no side- effects
11. EXAMPLES OF PURE FUNCTIONS 1 1 • sin(x), cos(x), add(x,y)
 • addToList(list, obj){
 return [].concat(list, [obj])
 }
 • changeAge(person, age){
 var person1 = clone(person)
 person1.age = age;
 return person1;
 } • alert(x)
 • addToList(list, obj){
 notify();
 list.push(obj);
 return list;
 }
 • changeAge(person, age){
 person.age = age;
 return person;
 } Not pure Pure
12. THE DANGER WITH NOT PURE FUNCTION 1 2 Very hard to reason about the code.
 Where is the variable? • function inpure(y){
 Return x+y;
 } • x=3
 inpure(1)=4
 
 x=5
 inpure(1)=6
13. WHAT IS FUNCTIONAL PROGRAMMING 1 3 Functional programming is a style of programming 
 that emphasises "first-class" functions that are "pure".
14. WHY FUNCTIONAL PROGRAMMING? 1 4 Easier to reason. No unknown states that create bugs 1 Pure functions make it easier to test 2 Easier to reason because of no side-effects 3 Cleaner code 4 action(prevState, props) = newState
15. INTRODUCTION TO 1 5 REDUX • The global state all the data
 • Actions are pure functions made by sending commands to the dispatcher with parameters
 • Reducers are pure functions containing the 
 function transition from previousState to nextState
 • Middleware allows actions to returns functions. 
 The middleware can be used to delay the dispatch 
 of an action
 • Dispatcher executes action
 • View gets the state from props, and renders the data ACTIONS API VIEW MIDDLEWARES DISPATCHER STORE REDUCER STATE R R R
16. LET’S BUILD THE CHAT! 1 6
17. BACKEND API 1 7 • loadThreads(userId)
 SELECT t.*, 
 (SELECT * from Message m where m.threadId = t.id ORDER by DATE DESC as lastMessage) 
 FROM Thread t where t.user.id = $userId ORDER BY DATE DESC;
 • loadMessages(threadId, $userId)
 SELECT * from Message m where m.threadId = $threadId and userId=$userId ORDER by DATE DESC as lastMessage
 • sendMessage(message)
 INSERT (message, me=”me”, to=”me”) into Message INSERT (message, me=”me” to=”receiver”) into Message

18. DATA-STRUCTURE FOR REDUX STATE 1 8 LoggedInUser ROOT Message Thread Id: number,
 name: string id: number,
 group: array{ id: number, name: string}
 lastMessage: Message.id, id: number,
 timestamp: date
 from: {id: number, name:string}
 to: {id: number, name:string}
 threadId: number
 message: string
19. FORMAT OF THE STATE 1 9 We want the message and thread to be a map from id to the object. 
 
 { 
 message: {
 1: Message1,
 2: Message2,
 3: Message3,
 }, 
 thread: {
 3: Thread3,
 6: Thread6,
 }

20. CHAT REDUCERS 2 0
21. LOG IN ACTION 2 1
22. LOG IN REDUCER 2 2
23. TOPBAR COMPONENT 2 3
24. CHAT ACTIONS 2 4
25. CHAT ACTIONS 2 5
26. CHAT ACTIONS 2 6
27. CHAT REDUCERS 2 7
28. CHAT REDUCERS 2 8
29. REACT COMPONENT 2 9
30. CHALLENGE 3: REALTIME AND SYNC 3 0
31. SOLUTION: REALTIME COMMUNICATION SOFTWARE BETWEEN SERVER AND CLIENT 3 1 A lot of alternatives, 
 here are some popular choices: Socket.io Firebase Pusher
32. OUR CHOICE - 3 2 PUSHER Scalability and uptime is hard. With socket.io you have to configure this yourself 1 Device-compatibility: Fallback to Flash and long-fetching 2 Efficient, only download the necessary 3 Single source of truth - our datastore. No data scattered around 4 Built-in security 5
33. IMPLEMENTATION 3 3 • Old school MIRC: 
 Subscribing to chat-rooms • New Facebook/Whatsapp style: • For each user, create a user- notification channel. • Whenever someone sends a message, emit the message to everyone in the channel. • At login: dispatch NEW_MESSAGE with the payload
34. DEMO
35. NEXT STEPS 3 5 Typing: Extend the user-notifications with types:
 {type: START_TYPING, threadId: number, user: User}
 {type: STOP_TYPING, threadId: number, user: User}
 {type: SEEN, messageId: number} Add pagination of threads and messages Security using cookies Add file-uploader/ smileys / sounds effects etc
36. AVAILABLE ON GITHUB 3 6 https://github.com/jingtra/konsus-chat
 
 Inspiration:
 https://github.com/davezuko/react-redux-starter-kit https://github.com/d6u/redux-chat
37. WE ARE HIRING: SEND AN EMAIL TO 
 JING@KONSUS.COM