Building Real-time Apps with React, Socket.io, and RethinkDB

This course will teach you how to develop real-time applications using React, Node.js, Socket.io, and RethinkDB in a manner that will make the knowledge transferable to any other real-time stack.
Course info
Rating
(33)
Level
Intermediate
Updated
Oct 23, 2017
Duration
1h 52m
Table of contents
Description
Course info
Rating
(33)
Level
Intermediate
Updated
Oct 23, 2017
Duration
1h 52m
Description

Think about your favorite apps that you use on a daily basis. Chances are that most, if not all, will have some form of real-time functionality. This also means that you, as a developer, will benefit from learning how to build real-time features for the products that you work on. In this course, Building Real-time Apps with React, Socket.io, and RethinkDB, you'll get a solid introduction to the stack used in the course, but more importantly, the patterns required to build real-time apps. First, you'll acquaint yourself with Socket.io and how to get it connected to a component in React. Next, you'll learn how you can use RethinkDB for data persistence and publish/subscribe. Finally, you'll explore how you can handle failover scenarios when dealing with a real-time stack. When you're finished this course, you'll have a solid understanding of the patterns involved when working on a real-time stack and how to overcome common real-time challenges.

About the author
About the author

In his day job Hendrik is a full stack coder from Cape Town. For a large part of his career he worked with .NET, but the last few years he spent most of his time with JavaScript.

More from the author
React Native: Getting Started
Beginner
1h 49m
Jun 20, 2018
Using Redux to Manage State in Angular
Intermediate
1h 21m
Mar 20, 2017
More courses by Hendrik Swanepoel
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Hendrik Swanepoel, and welcome to my course, Building Real-time Apps with React, Socket. IO, and RethinkDB. I am a software engineer at InVision. Real-time functionality is getting more and more prevalent in today's society. You're already using a multitude of apps with real-time features on a daily basis, so why not learn how to build it yourself? In this course, we're going to go over the basics of Socket. IO programming, see how to connect React components to WebSockets, install and use RethinkDB as a persistence tier and a way to scale WebSockets over multiple servers, and we'll cover common failure scenarios and how to recover from them. By the end of this course, you'll know the common patterns and pitfalls with real-time programming and how to overcome them. Before beginning the course, you should be familiar with Node. js and React. I hope you'll join me on this journey to learn how to build real-time apps with the Building Real-time Apps with React, Socket. IO, and RethinkDB course, at Pluralsight.

Getting Started
In this course, you'll learn how to combine React, Node. js, Socket. IO, RxJS, and RethinkDB into a real-time stack. If your focus is predominantly on the back end, you'll find the front- end code easy enough to follow along. Conversely, if your expertise lies on the front end, you'll be able to use this course to better understand what's involved in building real-time apps. The goal of this course is not to become an expert in any of the technologies in the stack, but rather for you to learn how they can work in concert to achieve close to real-time behavior on your project. You'll also learn how to think about scaling your stack, as well as handle failure scenarios. You will leverage the power of the stack and let it do a lot of heavy lifting for you. For example, even though you'll been building a collaborative drawing app that can be scaled horizontally with full failover capabilities, all the server-side code will reside in a single file with less than 100 lines of code. And even though our client will handle it gracefully when it loses a connection to the service, our React code will be super lean. You won't use any advance tooling like Redux, for example. This course has been designed so that all you need to follow along is a rudimentary understanding of React and Node. js.

Building the Real-time Drawing Component
In this module, you'll use what you've learned in the previous module to build the functionality to load up a drawing that the user can draw on and see other people drawing on it in real time. You'll do this by publishing lines that the user draws to the socket server, which will store it to RethinkDB. The updates to the drawings will flow over RethinkDB queries over websockets onto the React drawing component. The drawing component is actually already part of your project package. json file. I coded it up especially for this course. It's quite simple, and I wouldn't advise that you would try and use it out in the wild. You'll just plug it into the app and connect it up to the server. You'll also start using RxJS in this module in order to batch up the lines being synced to the React Drawing component. RxJS works really, really well when you have to work with streams of events, which is exactly what you have in your drawing app. To follow along with this module, you can start from the folder 4_load_drawing in the repository that you cloned earlier. Remember to stop the services you already have running and to install the npm modules for both the server and client code before starting it up again. Let's get started.

Making the App Robust
This module will take you through some key scenarios that you'll need to handle when building real-time systems like this one. Because real-time systems are really chatty, meaning they send loads of messages back and forth, you need to cater for interruption of connections and service going down. You'll learn how to code up the client so that it reconnects to the server when it loses its connection or when the server it was connected to goes down. Not only will a client reconnect and download missed events, it will do so in such a way that it doesn't download events that it's already processed before. You'll even learn how to allow the user to keep on drawing while the connection is down and still have the data make its way to the server when it manages to reconnect to the server. If you'd like to work from a stable starting point for this module, you can cd into the 7_showing_connected_state folder as you did with all the other checkpoints throughout this course.