A brief discussion on event-driven development in JS and Nodejs

Event-driven and publish-subscribe
How is event-driven programming used in JavaScript in the browser?
Subjects and Observers in Browsers
How does event-driven programming work in Node.js?
Understanding EventEmitter
Other examples of observer/publish-subscribe in JavaScript
Summarize

Event-driven and publish-subscribe

Event-driven architecture is built on a common pattern in software development known as the publish-subscribe or observer pattern.

In an event-driven architecture, there are at least two participants: the subject and the observer.

A subject acts like an FM radio, broadcasting to observers who are interested in listening to what the subject has to say.

There may be only one observer or a hundred, it doesn't matter, as long as the subject has some messages to broadcast.

Keep in mind that event-driven, publish-subscribe, and the observer pattern are not the same thing in practice, but ideally they use the same approach: one entity broadcasts a message and other entities listen for it.

The publish-subscribe pattern is as old as me. It began to be theorized around 1987, and the Observer pattern appeared in the 1994 book "Design Patterns" written by the "Gang of Four".

How is event-driven programming used in JavaScript in the browser?

With the help of an engine, JavaScript can run in your browser.

The most popular JavaScript engines are V8 used by Google Chrome and Node.js, SpiderMonkey used by Firefox, and JavaScriptCore used by Safari/WebKit.

Based on the rich environment, the JavaScript engine enhances the language and also provides an event-driven JavaScript platform.

In fact, JavaScript in the browser can interact with HTML elements, which are event emitters, that is, objects that can send events.

Consider this simple example, an HTML document with a button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What means "event-driven" in JavaScript?</title>
</head>
<body>
<div>
    <button id="subscribe">SUBSCRIBE</button>
</div>
</body>
</html>

Without JavaScript, the button would be lifeless. Now HTML buttons are elements of type HTMLButtonElement, and like all HTML elements, they are connected to EventTarget - the common ancestor of every HTML element.

Event targets in browsers are objects that are able to emit events: they are the subjects in the observer pattern.

A bit confusing? Remember: the theme is FM radio, so any HTML element acts like a radio station.

In a moment you will see who the observer is.

Subjects and Observers in Browsers

If the HTML element is the subject, then who is the observer? Any JavaScript function registered as a listener can react to events in the browser.

To select an HTML element using JavaScript:

const btn = document.getElementById('subscribe');

And register the listener using addEventListener:

const btn = document.getElementById('subscribe');
btn.addEventListener("click", function () {
    console.log("Button clicked");
});

Here "click" is the event, the button is the subject, or sender, and the function is the listener, or observer.

To recap:

HTML elements are event emitters.

Functions registered as listeners in JavaScript are observers.

All of these components make up a small event-driven architecture. To test the code save the following HTML content to a file (or try it on Codepen), click the button, and check your browser console:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What means "event-driven" in JavaScript?</title>
</head>
<body>
<div>
    <button id="subscribe">SUBSCRIBE</button>
</div>
</body>
<script>
    const btn = document.getElementById('subscribe');
    btn.addEventListener("click", function () {
        console.log("Button clicked");
    });
</script>
</html>

In the next section, you will see the same concept used for Node.js.

How does event-driven programming work in Node.js?

Node.js is a JavaScript environment based on the V8 engine that runs outside the browser (command line tools and server-side).

Most of the work you do in Node.js is event-based. There is always a sender object and some observers listening for messages.

In Node.js, there aren't any HTML elements, so most events come from processes, interactions with the network, files, and so on.

Every event emitter in Node.js has a method called on which takes at least two arguments:

The name of the event to listen for
Listener Function

Let's take a practical example. Take a look at this simple Node.js server:

const net = require("net");
const server = net.createServer().listen(8081, "127.0.0.1");
server.on("listening", function () {
  console.log("Server listening!");
});
server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});

This code creates a server listening on port 8081 on localhost. On the server object, we call the on method to register two listener functions.

The listening event is fired immediately after the server starts, and the connection event is fired when a client connects to 127.0.0.1:8081 (try it!).

In this example, server is the event sender, the subject. Listener functions, on the other hand, are observers.

But where do those on methods come from?

Understanding EventEmitter

All event-driven modules in Node.js extend a root class called EventEmitter. In our previous example, the network server from the net module used EventEmitter.

EventEmitter in Node.js has two basic methods: on and emit.

If you want to correspond to the browser, then you can think of EventEmitter as any HTML element that can emit events.

To listen for events in the browser, call addEventListener on the subject object:

const btn = document.getElementById('subscribe');
btn.addEventListener("click", function () {
    console.log("Button clicked");
});

In contrast, in Node.js we have on:

// omit
server.on("listening", () => {
  console.log("Server listening!");
});
// omit

To be precise, there is also an addListener method on EventEmitter. on is its alias.

EventEmitter also has an emit method, which is useful when you broadcast custom events (messages).

If you want to use EventEmitter, import it from the "events" module and emit events:

const EventEmitter = require("events");
const emitter = new EventEmitter();
emitter.on("customEvent", () => console.log("Got event!"));
emitter.emit("customEvent");

Run the code with Node.js and you will see “Got event” in the console.

Other examples of observer/publish-subscribe in JavaScript

JavaScript has no native support for observer objects, but there are proposals to add them to the language.

RxJS is a library that brings the observer pattern to JavaScript.

Redux is an implementation of the publish-subscribe pattern in JavaScript. This is a very nice event emitter where changes in state are distributed to all listening observers.

Modern browsers come with the Intersection Observer API, which is another example of the observer pattern.

Socket.IO is a library that makes heavy use of events.

Summarize

Hope you learned something new from this article. You learn a lot of terminology, but it all comes down to a pattern invented about 30 years ago: publish-subscribe.

This pattern, also known as observer, is the basis of the event-driven architecture we use today in JavaScript and Node.js.

Once again, event-driven, publish-subscribe, and observer patterns are not identical: event-driven architectures are built on top of publish-subscribe, and the observer pattern is richer than DOM and Node.js events.

But they are all members of the same family.

The above is a brief discussion of the details of event-driven in JS and Nodejs. For more information about event-driven in JS and Nodejs, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

How to use native JS to implement touch sliding monitoring events
Detailed explanation of JavaScript WebAPI, DOM, events and operation element examples
Detailed Analysis of Event Bubbling Mechanism in JavaScript
Analysis of the event loop mechanism of js
Detailed explanation of JS browser event model
Summary of event handling in Vue.js front-end framework
Detailed explanation of using javascript to handle common events
JavaScript event loop case study

<<: MySQL SQL statement analysis and query optimization detailed explanation

>>: Complete steps for deploying a front-end and back-end separated nginx configuration