Whenever we work in the arena of web development, we try to simplify our solutions as much as possible to make them more usable and easier to develop. "Serverless" concepts and realtime stores exemplify such simplification. These ideas improve how we work, reduce boilerplate code, and most importantly assure peace of mind to the developer.
This article will exhibit the simplicity of using stdlib and deepstreamHub to build a clock application. The clock will retrieve time information from the server, then relay it to the browser for rendering.
stdlib is an implementation of the "serverless" concept. As commonly mistaken, "serverless" does not mean "no servers;" it just means that we don't have to handle the server details and operations to be productive. Taking the "serverless" route, a developer can write functions that deploy and result in an API endpoint. You can read more about serverless technology on its Wikipedia page
Now its time to set everything up using our favorite tool -- if you guessed npm* (Node Package Manager), you are correct. Before that though, you need to create an stdlib account that links you to functions/services that you will need down the line.
Once your account has been created, use npm to install the CLI (Command Line Interface) tool for interacting with your account. The CLI tool simplifies creating, running, and deploying functions:
1npm install lib.cli -g
You need to create a workspace. A workspace is a directory in which a group of functions registered under a given user live. Creating a workspace is as simple as making a directory:
1mkdir your-workspace-name
In your workspace, initialize stdlib by authenticating with the credentials you created while signing up:
1lib init
Right now, your machine has been mapped to your account. You can then create a new service/function and hope to sync with your stdlib server:
1lib create clock
This creates a directory named clock
which contains a main
folder that contains your function. The index.js
file contains a boilerplate function that you can run to see an example of how stdlib works:
1lib http
The above command will serve your function locally at localhost:8170
by default.
stdlib is capable of converting your functions to API endpoints. Although this feature is organizationally handy for users and developers alike, "endpoints need to be static". Which means that stdlib's API endpoints are problematic if you need to send some realtime data. With deepstream, however, realtime data transfer has never been easier. We will use deepstream's PubSub feature to emit realtime events from our stdlib function.
You will need to create a free deepstreamHub account which generates an API key to interact with the server.
First, let's install deepstream client on to our clock
function:
1npm install --save deepstream.io-client-js
Import deepstream to main/index.js
:
1const ds = require("deepstream.io-client-js");
Create a deepstream instance with the deepstreamHub URL and log in as anonymous to start communicating with the sever:
1const ds = require("deepstream.io-client-js");
2
3module.exports = (params, callback) => {
4 const client = ds("<APP-URL>").login();
5 callback(null, "hello world");
6};
You can start emitting events through the object represented by the client
variable. We are building a clock, therefore, the best way to emit events at intervals is to use the setInterval
method:
1const ds = require("deepstream.io-client-js");
2const moment = require("moment");
3
4module.exports = (params, callback) => {
5 const client = ds("<APP-URL>").login();
6 setInterval(() => {
7 client.event.emit("time", moment().format("MMMM Do YYYY, h:mm:ss a"));
8 }, 1000);
9
10 callback(null, "hello world");
11};
We've also imported moment
to help us format time. An example format would look like the following:
1May 1st 2017, 7:26:39 AM
Right now, at the /clock
route, our logic emits a realtime data via web socket. We can consume this realtime data from anywhere as long as we have the connection URL from deepstream.
We can do this by importing deepstream from CDN (Content Delivery Network), logging in, and logging the emitted events to the console:
1<html>
2
3 <body>
4
5 <script src="https://code.deepstreamhub.com/js/2.x/deepstream.min.js"></script>
6 <script>
7 var client = deepstream('APP-URL')
8
9 client.login()
10
11 client.event.subscribe('time', time => {
12 console.debug(time)
13 })
14 </script>
15 </body>
16</html>
Rather than emitting, we subscribe to the time
event and log the payload whenever the event gets emitted:
We can display the time in the browser instead of printing it to the console:
1var client = deepstream("APP-URL");
2
3client.login();
4
5var timeP = document.getElementById("time");
6client.event.subscribe("time", time => {
7 timeP.innerHTML = time;
8});
Hopefully, you have a learned a quicker way to build realtime (and static) web apps. The clock example is basic, but should help you if you're dealing with a more complex project. Realtime data stores and serverless ideology have unimaginable powers that you can harness to make your applications more reliable and flat-out cooler.
Thanks for reading!