Live Demo: Collaborative Stickies
In this tutorial, you will be shown how to use PubNub to build a real-time collaborative web app using React.js, which lets you manipulate the DOM very efficiently, and the next generation of JavaScript, ES6.
I have created two versions of the same Stickie Note app: the one I hosted on this CodePen uses CDN-hosted versions of React, and another is on GitHub, using package managers. In this tutorial, I use the “lite” version of the latter. I will walk through how to build the app, using all the goodies: npm, webpack, Babel for JSX, and ES6!
Prerequisites
To follow along, you'll need:
- basic understanding of React
- working knowledge of the npm package manager to download, install, and manage dependencies
- working knowledge of the webpack module builder, to bundle JavaScript and other assets for the browser (it works similar to grunt or gulp)
- Node.js and npm installed on your machine
This tutorial doesn’t cover how to get started with React. However, you can learn more from many other excellent Envato Tuts+ tutorials.
What You Are Going to Do
You are going to build a simple web app using PubNub now. PubNub is a Data Stream Network (DSN) that provides a global infrastructure which allows you to build and scale real-time apps and IoT devices easily. Here, you will create shareable “stickie notes”. This is the app’s user-flow:
- A user logs in.
- As soon as the user enters a name, the app retrieves the last 50 notes, if any.
- The user types something on the stickie pad, and hits the return key to submit.
- The new stickie note appears along with the other notes on your browser, as well as every other browser of all users who are currently online.
Now, let’s get started!
Installing Packages
In your app’s directory, run
npm init to set up your package.json file, and then install these modules.
Install webpack module builder, which compiles, concatenates, minifies, and compresses static assets for the front-end:
$ npm install webpack --save-dev
Install React, React DOM, and CSS animation add-ons:
$ npm install react react-dom react-addons-css-transition-group --save
Install Babel to use JSX and ES6. We’re going to write with ES6 (ES 2015), which is next-generation JavaScript, with the help of Babel, a compiler:
$ sudo npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save
Install PubNub for real-time communication:
$ npm install pubnub --save
Configure the App Structure and Web Server
Create your app structure similar to this:
01
02
03
04
05
06
07
08
09
10
11
| ├── /app│ ├── app.jsx│ ├── stickie.jsx│ ├── stickieList.jsx├── /dist├── /css├── /images├── /node_modules├── index.html├── package.json└── webpack.config.js |
And configure webpack.config.js:
1
2
3
4
5
6
7
| var webpack = require('webpack');module.exports = { entry: './app/app.jsx', output: {path: './dist', filename: 'bundle.js'}, watch: true, module: {...}} |
See the entire config file on this GitHub repo.
Basically, you are setting an entry file (top-level file) and the output destination where all your js (and .jsx) files will be built into a single file, after you run the webpack command. Also, by setting
watch: true, you ensure that webpack will watch your file changes and rebuild your output file automatically.Creating the index.html File
Include the script bundle.js in your index.html file:
01
02
03
04
05
06
07
08
09
10
11
12
| <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Collaborative Stickies</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <section id="container"></section> <script src="dist/bundle.js"></script> </body></html> |
Also, notice the element with an
id=”container” in the body. This is where your React app will be inserted.Running Webpack Dev Server
You can run your dev server with the command,
$ ./node_modules/.bin/webpack-dev-server
Or you can set it up in your package.json by adding this line:
1
2
3
| "scripts": { "start": "webpack-dev-server"}, |
So that you can run the server with the
npm start command instead.
In your browser, go to http://localhost:8080/webpack-dev-server/, and you should see your application (a blank HTML page thus far) running there.
Create React Components With ES6
Open up a new app.jsx file under the app directory, as you configured for an entry point in your webpack.config.js. As you can see from the file extension, we are going to use the JSX JavaScript syntax extension.
First, import the modules and files that are required for app.jsx:
1
2
3
4
| import React from 'react';import ReactDOM from 'react-dom';import StickieList from './stickieList';import 'pubnub'; |
The import statement, newly introduced in ES6, is used to import functions, objects or primitives that have been exported from an external module or script.
Then define a class,
CollabStickies, which extends the React.Component class, using this ES6 class declaration. This is equivalent to the React.createClassmethod with ES5:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
| class CollabStickies extends React.Component { constructor(props) { super(props); this.state = { stickieList: [] } } componentWillMount() { … // will explain later }... render() { return ( |
); }}
In the constructor function, you are setting the initial state of this mutable data, the
stickieList array. We will update the array each time we get a new stickie note, using this.setState().
In the render function, use JSX to define HTML template-like virtual DOM elements. In this case, the custom components
StickieWritable andStickieList are included. You can pass the mutable props and states to the components to use. We are going to define them later.
When you build the app, Babel will transpile all this ES6 and JSX syntax into ES5 that browsers can render just fine.
Rendering the DOM Node With Data Binding
With
ReactDOM.render(), which comes with the react-dom package, render theCollabStickies component on the DOM node in your HTML.
1
2
3
4
| ReactDOM.render( document.getElementById('container')); |
Here, you notice the username and color
props. This data is used for theCollabStickies component and is passed to its child components.
The values should be obtained from the user login; however, to simplify the app for this exercise, let’s just use a simple
window.prompt() to get a username, and then give a random color of stickie notes when the app is loaded.
1
2
3
4
| var username = window.prompt('Your name');const colors = ['yellow', 'pink', 'green', 'blue', 'purple'];var color = colors[~~(Math.random() * colors.length)]; |
Although I am using the browser-native prompt dialog here, in reality, I recommend you create another UI component with login functions, or use the third-party dialog box component. There are many reusable components you can find, such as Elemental UI’s Modal, and Material UI’s Dialog.
Using PubNub for Collaboration
Now, you are going to use PubNub to make the app collaborative.
PubNub is a globally distributed data stream network that allows you to build real-time applications easily. Its core feature, pub/sub, sends and receives data between multiple users simultaneously.
In this app, anybody who “logged in” can post messages on stickie notes and share them with other users.
To use PubNub in your app, make sure that the pubnub module has been installed and imported in the top of your file.
Initializing PubNub
First, you need to initialize it to create an instance of the Pubnub object. You need your API keys during the instantiation, so please sign up to PubNub to get your own keys.
01
02
03
04
05
06
07
08
09
10
11
| const publish_key = 'pub-c-1d17120...'; // your pub keyconst subscribe_key = 'sub-c-85bdc...'; // your sub keyconst pubnub = require('pubnub').init({ publish_key : publish_key, subscribe_key : subscribe_key, ssl: true, uuid: username});const channel = 'stickie-notes'; |
Here, you are assigning the username obtained from the “login” process as a
uuid, unique identifier. (In this exercise, we take any string entered by a user as an uuid, but in reality, you need a real login system so that each uuid is actually unique, with no duplications!)
Also, notice I am using the ES6
const declaration, instead of var for these global constant values. In ES6 a const acts as a read-only variable and represents a constant reference to a value. In the later example, you will also see the newly introduced let, which is a block scope local variable.Subscribing to Messages
To create the sharable notes app, you are going to use PubNub's
publish()method to send your note to everybody, while subscribe() lets other users receive all the notes. The subscribe() method is called automatically every time somebody publishes a new note.
In your React app, let’s call the
subscribe() within componentWillMount(), which is invoked immediately before the initial rendering occurs in the app lifecycle.
1
2
3
4
5
6
7
8
| componentWillMount() { pubnub.subscribe({ channel: channel, restore: true, connect: () => this.connect(), message: (m) => this.success(m) });} |
The subscribe method is asynchronous, and when each operation is successfully completed, the
message callback is called. At the callback, let’s update the stickie note list by setting the state of the stickieList array, which was defined in the constructor at the beginning.
In React, modifying your data with
setState automatically updates the view.
1
2
3
4
| success(m) { let newList = [m].concat(this.state.stickieList); this.setState({stickieList: newList});} |
We are creating the view (a UI component) later.
In the subscribe callbacks, you probably have noticed the funny-looking syntax with arrows,
=>. This is called arrow functions, which has a shorter syntax than the ES5 function expressions. Also, this expression lexically binds thethis value. Again, with Babel, we can leverage all the ES6 awesomeness!
Also, we are using the optional
connect callback to the subscribe method to retrieve “history”. This will fetch past data when the connection to PubNub is established for the first time.
01
02
03
04
05
06
07
08
09
10
11
12
13
| connect() { pubnub.history({ channel: channel, count: 50, callback: (m) => { m[0].reverse(); for (var v of m[0]) { let newList = this.state.stickieList.concat(v); this.setState({stickieList: newList}); } } });} |
The
history() is a part of PubNub’s Storage and Playback feature, and in this case, it fetches the last 50 messages from PubNub. At the success callback, update the view by setting the state of the stickieList array here too.Publishing Messages
Let’s create a class,
StickieWritable. It is a stickie note component that takes a user input.
It renders like this:
1
2
3
4
5
6
7
| render() { return ( |
Comments
Post a Comment