JavaScript and JSON Essentials

Sai S Sriparasa, Bruno Joseph D'mello

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781788628761
• Edition: 2
• Topic: Informatique
• Subtopic: Développement Web

Use JSON for building web applications with technologies like HTML, JavaScript, Angular, Node.js, Hapi.js, Kafka, socket.io, MongoDB, Gulp.js, and handlebar.js, and others formats like GEOJSON, JSON-LD, MessagePack, and BSON.

Key Features

• Use JSON with trending technologies like Angular, Hapi.js, MongoDB, Kafka, and Socket.io
• Debug, validate, and format JSON using developer toolkits, JSONLint, and JSON Editor Online
• Explore other JSON formats like GeoJSON, JSON-LD, BSON, and MessagePack

Book Description

JSON is an established and standard format used to exchange data. This book shows how JSON plays different roles in full web development through examples. By the end of this book, you'll have a new perspective on providing solutions for your applications and handling their complexities.

After establishing a strong basic foundation with JSON, you'll learn to build frontend apps by creating a carousel. Next, you'll learn to implement JSON with Angular 5, Node.js, template embedding, and composer.json in PHP. This book will also help you implement Hapi.js (known for its JSON-configurable architecture) for server-side scripting.

You'll learn to implement JSON for real-time apps using Kafka, as well as how to implement JSON for a task runner, and for MongoDB BSON storage. The book ends with some case studies on JSON formats to help you sharpen your creativity by exploring futuristic JSON implementations. By the end of the book, you'll be up and running with all the essential features of JSON and JavaScript and able to build fast, scalable, and efficient web applications.

What you will learn

• Use JSON to store metadata for dependency managers, package managers, configuration managers, and metadata stores
• Handle asynchronous behavior in applications using callbacks, promises, generators, and async-await functions
• Use JSON for Angular 5, Node.js, Gulp.js, and Hapi.js
• Implement JSON as BSON in MongoDB
• Make use of JSON in developing automation scripts
• Implement JSON for realtime using socket.io and distributed systems using Kafka

Who this book is for

If you're a web developer with a basic understanding of JavaScript and want to write JSON data, integrate it with RESTful APIs to create faster and scalable applications, this book is for you.

JSON for Real-Time and Distributed Data

Until now, we have worked on RESTful http API endpoints as sources of data communication between the client and server. An http request has proved to be the best way to have reliable data availability. The only hurdle can be the response time if there are some issues with network latency. What if we don't want to wait for the server response to be received, or we need the data to be received in real time? Consider the scenario of some simple messaging activity with some product bot, or a screen cast for a presentation that is delivered to workplace staff from home. The only criteria for success in this case is the data availability on time and its correctness. One web technology protocol that provides real-time solutions to such scenarios is WebSocket.

Another important thing we hear a lot about is the distributed system. Once a web application is deployed and live, somewhere down the line we need to scale our network resources for data consistency and increase the quality of communication between the distant nodes. In such scenarios, distributed system solutions serve the purpose of managing data over the network. In this chapter, we are going to learn about Apache Kafka, which provides a scalable stream-processing system.

Here is an overview of the topics covered in this chapter:

• Real-time communication using JSON with Socket.IO
• Setting up the Socket.IO server and its clients
• Introduction to distributed systems using JSON with Apache Kafka
• Installing Apache and implementing the distributed system concepts in a real-time application

Using JSON with Socket.IO

Setting up the Socket.IO server is simple. Here is the procedure to implement a real-time server that provides a continuous HTTP handshake, and continues to listen to requests via the Socket.IO framework.

We are going to demonstrate the implementation of JSON for real-time via a pinboard app. Any anonymous user who connects to the real-time server joins the session, and can view the pinboard and add whatever thoughts or whatever else that they like.

We are going to divide our application into two phases :

1. Designing the board
2. Implementing the real-time functionality via the Socket.IO library

Designing the board

In this phase, we are going to design a web interface through which our user can add or view the pins on the board. Remember how in Chapter 7, Alternate Implementations of JSON, we learned about template embedding? We are going to use a similar technique for our pinboard. So, let's start by creating a template file called index.html.js and inserting the following HTML elements:

//index.html.js
module.exports = `
<!DOCTYPE html>
<html>
 <head>
 <title>Pin board</title>
 </head>
 <style>
 body{
 background-color: #CCB;
 }
 .card {
 /* Add shadows to create the "card" effect */
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 transition: 0.3s;
 width: 30%;
 background-color:white;
 float: left;
 margin: 5px;
 }
 .card:hover {
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }

 .container {
 padding: 2px 16px;
 }
 h4{
 text-align: right;
 }
 textarea{
 border: 0; padding: 10px; width: 90%; margin-right: .5%;
 float: left;
 width : 60%;
 }
 input{
 float : left;
 width : 15%;
 padding: 15px;
 }
 button{
 padding: 15px;
 float: left;
 width : 20%;
 }
 </style>
 <body>
 <textarea autocomplete="off" id="textData"></textarea><button 
 id="postButton">Post</button>
 <div class="collection">
 <div class="card">
 <div class="container">
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </p>
 <h4><b>John Doe</b></h4>
 </div>
 </div>
 </div>
 </body>
</html>
`;

The preceding template contains all the UI elements required for our pinboard app. In the preceding code, we exported a simple string that consists of all the HTML, with textarea as the input element, the button with text Post as the action element, and the collection class, which will hold the new pins or cards on the board. Moving further, let's set up the server so that we can render the template at the browser's request.

Setting up the Socket.IO server

The WebSocket implementation is wrapped and handled with an amazing library called Socket.IO. It is not just a library, but a framework that provides so many more features than just a library. Moving on, let's install Socket.IO using the following command:

npm install socket.io --save

Now, we need to render the template in the browser upon a request to the node server. To do so, add the following snippet to our app.js:

const templateData = require('./index.html');
const server = require('http').createServer((req, res) => {
 res.setHeader('content-type', 'text/html');
 res.end(templateData);
});
const io = require('socket.io')(server);
io.on('connection', function(client) {
 client.on('disconnect', function() {
 console.log('user disconnected');
 });
 console.log("connected to realtime data server");
});
server.listen(3400);

Before going ahead with an explanation of preceding code, let's check whether our server provides the required view when we browse for http://localhost:3400. Here is the output:

How Socket.IO works

Let's walk through the code line by line. We imported the index.html.js template, which is a simple node module that exports string-based HTML data. Then, we created an HTTP server to handle the HTTP request and response via a web browser or any other client that renders an HTML view.

We created a real-time server by passing an instance of the server to the required Socket.IO library. Socket.IO is the crude library for our real-time app. It provides a wrapper to WebSocket. WebSocket is a protocol that performs a continuous communication handshake over TCP (transmission control protocol).

To put it into simple terms, once the client establishes the connection to the WebSocket server, the client doesn't have to make a specific request to get particular data each time. Once the first request for a connection is established, the client can receive continuous data with respect to time (looping and emitting) and any other event triggers. The client or server just needs to trigger an event for passing the data and listen via a callback to receive the data. This event model is leveraged using the pubsub (publish-subscribe) pattern, or to be more specific, using listeners. In the preceding code, we have two listeners: conn...