Hacking Real time Messaging with Firebase
- 7. As a developer I like writing code As a developer I like working with shiny technologies
- 8. I want to scale to one users
- 9. I want to control everything
- 13. ‣ Redis Server - free and open source ‣ PUB/SUB channels ‣ redis-cli - allows for interactive testing
- 14. •App Server •Front end application •Load Balancer (We need to scale..)
- 15. •Centralized logging (We need to solve bugs quickly) •Need stats because there is a lot of log data
- 16. And pretty soon…
- 18. …and of course
- 19. or maybe
- 21. Enter Firebase
- 23. •Free CDN and SSL •Easy auth •Free Tier •File Storage •Auto Magical Scaling
- 24. Etc…
- 25. Getting Started
- 26. Grab your config
- 27. Maybe set up some auth
- 28. And we have a real time messaging queue
- 31. In our project we’re going to use
- 32. This is what the demo, will be, hopefully…
- 33. Code
- 36. Return that id as part of a JSON response Every user that joins gets a unique id Real time magic
- 37. Increment the number of user claps Grab the user from the post data
- 40. We initialize the firebase connection
- 41. Create an auth object And use it to sign in generating a token
- 42. Get a reference to the db Give it some data Insert it into the firebase store
- 45. Actions for triggering store changes Static assets like images Components for rendering the UI Main entry point of the front end Folder for the reducers Routes folder for better modularization Saga folder containing sagas for side effects Folder where you have your store config
- 46. Large JavaScript apps are fun
- 47. Always pass in the store You can factor out the routes
- 48. And you can export them as lists which is pretty cool
- 49. When the component mounts we want to start listening to firebase Very plain component Some prop validation because we should
- 50. connect() the component Bind actions to component props
- 51. Actions, really basic not much going on here
- 52. Reducers, still does not seem like there is any real time magic
- 54. redux-saga redux-saga is a redux middleware for handling side-effects redux-saga is implemented using generator funcs. generator functions can be paused and resumed.
- 55. And now for the
- 56. We’re talking about Sagas This is where all the magic happens
- 57. UI API
- 59. It’s…Complicated
- 60. Import firebase because we want it Saga goodies for performing our actions
- 61. This is the firebase library in action Turn it off once you’re done
- 63. Create a channel Then dispatch changes…infinitely??
- 64. And then you wrap everything nicely in a root saga
- 66. DEMO