HOW WE ARE BUILDING CHAT BY JING KJELDSEN 
 CTO AND CO-FOUNDER OF KONSUS 

WHY DO WE NEED A CHAT? 

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 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 

CHALLENGE 1: 
 COMPONENTS SHARE DATA 5 

CHALLENGE 2: DANGER OF LARGE, TANGLED COMPONENTS AND SPAGHETTI-CODE 6 Go to -> <- Go to Go to -> <- Go to Go to -> 

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 

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?) 

SHORT INTRODUCTION TO FUNCTIONAL PROGRAMMING 

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 

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 

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 

WHAT IS FUNCTIONAL PROGRAMMING 1 3 Functional programming is a style of programming 
 that emphasises "first-class" functions that are "pure". 

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 

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 

LET’S BUILD THE CHAT! 1 6 

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
 

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 

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,
 }
 

CHAT REDUCERS 2 0 

LOG IN ACTION 2 1 

LOG IN REDUCER 2 2 

TOPBAR COMPONENT 2 3 

CHAT ACTIONS 2 4 

CHAT ACTIONS 2 5 

CHAT ACTIONS 2 6 

CHAT REDUCERS 2 7 

CHAT REDUCERS 2 8 

REACT COMPONENT 2 9 

CHALLENGE 3: REALTIME AND SYNC 3 0 

SOLUTION: REALTIME COMMUNICATION SOFTWARE BETWEEN SERVER AND CLIENT 3 1 A lot of alternatives, 
 here are some popular choices: Socket.io Firebase Pusher 

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 

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 

DEMO 

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 

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 

WE ARE HIRING: SEND AN EMAIL TO 
 [email protected]