
## Intro

React knows nothing about the dom, it's just a JavaScript library to manage components and states, and returns VDOM. And this is the idea behind React, learn once, write anywhere. ReactDOM generates the html on the screen from the VDOM

![The difference betweeen React and ReactDOM](/posts/build-react-custom-renderer-part-1/image1.png)

That explains a lot, if you take a look at a react native, it uses the same react library we use for web, just a different renderer, which is `react-native`. Also if you know `@react-three/fiber` it’s a React renderer for Three,js

The VDOM is a javascript object like this

```js
{
	type: “div”,
	props: {
		className: ‘container’,
		children: “... other elements”
		… etc
	}
}
```

## React Reconciler

It's a library build by React team to make the process of creating custom react renderer easier! It doesn't have a lot of docs and it's not stable but I will cover the basics in this article. For more info check the [repo on Github](https://github.com/facebook/react/tree/main/packages/react-reconciler).

## Rendering mode

The reconciler has 2 different rendering modes
Mutation mode
Persistent mode

Mutation mode is used when the target environment UI is mutable like DOM where we can change a specific property of a specific element without rerender the whole page, persistent mode is when the target environment creates a new version of the UI with any updates. It's more efficient when you're dealing with mobile platforms for example.

## Let’s build our custom renderer

Let’s create the render function for our renderer, and create a new file, for example `custom-renderer.js`:

```js
import ReactReconciler from "react-reconciler";

const reconciler = ReactReconciler({
  // ... configuration options ...
});

const render = (element, container) => {
  // ... implementation ...
};

export default render;
```

Let’s explain them one by one, a good way to understand the `ReactReconciler()` by starting with these empty configuration functions like this:

```js
const reconciler = ReactReconciler({
  // ... configuration options ...
  supportsMutation: true,
  createInstance(type, props) {
    console.log({ type: type, props: props });
  },
  createTextInstance: () => null,
  getRootHostContext: () => null,
  getChildHostContext: () => null,
  shouldSetTextContent: () => null,
  prepareForCommit: () => null,
  clearContainer: () => null,
  resetAfterCommit: () => null,
  appendInitialChild: () => null,
  appendChildToContainer: () => null,
  finalizeInitialChildren: () => null,
  removeChildFromContainer: () => null,
});
```

We will explore what each option does in this article
`supportsMutation` is to enable the mutation mode, and we gonna just print what’s in the VDom in the console in `createInstance`

For the render function:

```js
const render = (element, container) => {
  // ... implementation ...
  let root = reconciler.createContainer(container, false, false);
  reconciler.updateContainer(element, root, null, null);
};
```

First we created the `root` and we update the root when the `reconciler` gets changes from react

> **Note:** The `false, false` and `null, null` is for concurrent mode and server-side hydration

In the `main.js` or `index.js` we gonna replace the `ReactDOM` with our `render` function

![Use our custom render function instead.](/posts/build-react-custom-renderer-part-1/image5.png)

And now we can see the vdom in the console

![The vdom in the console](/posts/build-react-custom-renderer-part-1/image2.png)

### Render the VDOM on the screen

Let’s remove the console.log on `createInstance` method and render something:

```javascript
createInstance(type, props) {
   const element = document.createElement(type);
   Object.keys(props).forEach((prop) => {
     // Filter out non-HTML attributes like:
     if (!["children", "onClick", "key"].includes(prop)) {
       // Appends each html attribute to the element
       element[prop] = props[prop];
     }
   });
   // return the HTML element
   return element;
 },
```

### `createTextInstance` method

React calls this method from the renderer when there is a raw text in the JSX like “Hello world” in the example:

```jsx
<div className="App">
  <h1>Hello world</h1>
</div>
```

For our simple DOM renderer, we don’t need so much, just append this text in the DOM

```javascript
createTextInstance: (text) => document.createTextNode(text);
```

For now, we created the instances but we didn’t attach them to any container or parent in the DOM

### Append children to the DOM

There are 3 methos that react calls in different situations to append children in the DOM `appendChild`, `appendInitialChild` and `appendChildToCotainer` and they’re pretty similar

```javascript
{
    // ...
    appendChild: (parent, child) => parent.appendChild(child),
    appendInitialChild: (parent, child) => parent.appendChild(child),
    appendChildToContainer: (parent, child) => parent.appendChild(child),
    // ...
}
```

![Append children to the DOM](/posts/build-react-custom-renderer-part-1/image4.png)

## Custom elements

We are controlling the render function for react now and we can create our own elements now, for example I wanna create a `<redHeading>` element and it returns a red h1 element

```jsx
<redHeading>Hello world from our Custom Renderer</redHeading>
```

And we can resolve this in our createInstance method in the reconciler

```javascript
createInstance(type, props) {
   if(type === "redHeading") {
     const element = document.createElement("h1");
     element.style.color = "red";
     return element;
   }
 // …etc
}
```

![Custom elements](/posts/build-react-custom-renderer-part-1/image3.png)

Woohoo 🎉

Stay tuned for the next part where we gonna add events and more features to our custom renderer🔥


React knows nothing about the dom, it’s just a JavaScript library to manage components and states, and returns VDOM. And this is the idea behind React, learn once, write anywhere. ReactDOM generates the html on the screen from the VDOM

Build a React Custom Renderer


## Intro

WebSockets are interesting, they are a different kind of connection than the HTTP we used. They're being used in many products like Firebase, Supabase, and DynamoDB to provide a live connection between the server and the browser/app.

One of the most popular libraries for WebSockets is [Socket.io](https://socket.io/), almost every tutorial out there is using it but as a perfectionist person, I care a lot about the bundle size in the apps I build. When I took a look

![Socket.io bundle size](/posts/javascript-websockets-in-browser-and-server/socket-io-bundle-size.png)

As you see, it's 69kb!!!!
Yup this is a lot, especially if you know that WebSockets are natively supported in JavaScript in your browser. And from that point, I started to dive deep to know more about what are WebSockets and how they work!

## What are WebSockets?

WebSockets are a protocol that allows for full-duplex communication between a client and a server. This means that both the client and the server can send messages to each other at any time. This is different from HTTP, which is a request-response protocol. In HTTP, the client sends a request to the server and the server responds to the client. In WebSockets, the client and server can send messages to each other at any time.

## How WebSockets work?

WebSockets are **dual** connections, they connect between 2 parties, the client and the server. The client opens a connection to the server.

![WebSockets connection server to one browser](/posts/javascript-websockets-in-browser-and-server/websockets-solo.jpeg)

## Challenge with WebSockets

As I mentioned above, native WebSockets only connect 2 devices with each other, it doesn't support transferring data between multiple clients. Let me explain it with a visual example:

![WebSockets connection server to many browsers](/posts/javascript-websockets-in-browser-and-server/websockets-multi.jpeg)

In the example above, we have one server connected to 2 browsers A and B, both browsers are connected to the same websocket on the server!

Now if browser A sends a message to the server, only the server can read the message and browser B won't receive it!

So to solve this problem we need to make a server like a router that gets the message from browser A and sends it to browser B and vice versa.

Also, if the server wants to send a message to both browsers, it has to send it to each browser separately.

## Let's code

Before we begin, Here is the [GitHub repo](https://github.com/markshenouda/websockets-chat-app-nodejs) for the project, it contains the code for the server and the client.

So in this tutorial we will build a simple Express.js server with one simple HTML page that will connect to the server and send messages to each other.

### Server

First, create a new folder and run `npm init -y` to create a new package.json file.

Then we need to install Express.js:

```bash
npm i express
```

Also we need to add the WebSockets module to Node.js:

```bash
npm i ws
```

That all packages we need for the backend.

### Simple Express.js server

Let's start with a simple "Hello world!" Express.js server:

```js
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(3000, () => {
  console.log(`Example app listening on port 3000`);
});
```

Now we can run the server with `node index.js` and open `http://localhost:3000` in the browser.

![Hello world!](/posts/javascript-websockets-in-browser-and-server/hello-world.png)

### WebSockets

Now let's add WebSockets to the server, we need to import the `ws` module and create a new WebSocket server.

We can make it a standalone server running on a separate port like this:

```js
const WebSocket = require("ws");

const wss = new WebSocket.Server({ port: 8080 });
```

Or we can make it a part of the Express.js server, I will make it a part of the Express.js server.

```javascript
const express = require("express");
const app = express();
const http = require("http");
const server = http.createServer(app);
const WebSocket = require("ws");

const wss = new WebSocket.Server({ server });

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(3000, () => {
  console.log(`Example app listening on port 3000`);
});
```

So now we have a WebSocket server running on port 3000 as a part of the Express.js server.

### Front end

We will use a simple HTML page as our frontend as a very simple client, of course you can use your favorite framework like React, Vue, or Angular, but I just wanna make you focus on the WebSockets part.

I created a simple HTML page with a text input and a button to send messages to the server and some styles (feel free to steal them from my [GitHub repo](https://github.com/markshenouda/websockets-chat-app-nodejs/blob/main/index.html) 😅 or make your own)

![Frontend](/posts/javascript-websockets-in-browser-and-server/frontend.png)

So as I mentioned before, JavaScript already has a native WebSocket API, so we can use it to connect to the server.

```js
const socket = new WebSocket("ws://localhost:3000");
```

Now we can send messages to the server using the `send` method:

```js
socket.send("Hello from the browser!");
```

And we can listen to messages from the server using the `onmessage` event:

```js
socket.onmessage = (event) => {
  console.log(event.data);
};
```

or using event listeners:

```js
socket.addEventListener("message", (event) => {
  console.log(event.data);
});
```

### Receiving messages in the server

Now we need to listen to messages from the client in the server, we can do that using the `on` method:

```js
wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    console.log("received: %s", message);
  });
});
```

Now if we run the server and open the page in the browser, we can see the message in the server console:

![Server console](/posts/javascript-websockets-in-browser-and-server/server-console.png)

### Sending messages from the server

Now we need to send messages from the server to the client, we can do that using the `send` method:

```js
wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    ws.send(`Hello, you sent -> ${message}`);
  });
});
```

and we can receive these messages in the browser by listening to the `onmessage` event:

```js
socket.onmessage = (event) => {
  console.log(event.data);
};
```

### Sending messages between the clients

Now we need to send messages to all clients, we can do that using the `clients` method

With WebSockets we only can send messages to the same client, so we need to loop over all clients and send the message to each one except the sender.

```js
wss.on("connection", (ws) => {
  ws.on("message", (message) => {
    wss.clients.forEach((client) => {
      if (client !== ws) {
        client.send(message, { binary: false });
      }
    });
  });
});
```

> Note: I used the `binary: false` option to send the message as a string, by default it will send it as a binary data.

Now if we open the page in two tabs, we can see that the message is sent to both tabs:

Demo video:

![Send to all clients](/posts/javascript-websockets-in-browser-and-server/send-to-all-clients.gif)

Congratulations! You just built a simple chat app using WebSockets 🥳🎉

---

## Extras

### Sending messages to a specific client

If we need to send messages to a specific client, we can do that using the `id` property of the client.

```js
wss.on("connection", (ws) => {
  ws.id = Math.random();
  ws.on("message", (message) => {
    wss.clients.forEach((client) => {
      if (client.id === message) {
        client.send("Hello from the server!");
      }
    });
  });
});
```

### Sending messages to a specific group of clients (channels/rooms)

We can send messages to a specific group of clients by using for example `group` property of the client.

```js
wss.on("connection", (ws) => {
  ws.group = "group1";
  ws.on("message", (message) => {
    wss.clients.forEach((client) => {
      if (client.group === message) {
        client.send("Hello from the server!");
      }
    });
  });
});
```

### Sending messages to a specific client using the client's IP address

We can send messages to a specific client using the client's IP address, we can get the client's IP address from the `socket` object.

```js
wss.on("connection", (ws, socket) => {
  ws.ip = socket.remoteAddress;
  ws.on("message", (message) => {
    wss.clients.forEach((client) => {
      if (client.ip === message) {
        client.send("Hello from the server!");
      }
    });
  });
});
```

## Conclusion

In this article, we learned how to use WebSockets in the browser and the server, we built a simple chat app using WebSockets.

I hope you enjoyed this article, if you have any questions or suggestions, please leave a comment below.

## References

- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
- [WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)
- [WebSocket Server API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocketServer)
- [WebSocket on MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
- [WebSocket on Wikipedia](https://en.wikipedia.org/wiki/WebSocket)
- [ws on npm](https://www.npmjs.com/package/ws)


Learn how to use WebSockets in the browser and server with JavaScript.

JavaScript WebSockets in Browser and Server with Examples


## Intro

Google Analytics is a great tool to collect and analyze data from websites and mobile apps to help companies and teams grow. It's free and easy to use and has many excellent features like real-time overviews and reports. Today we will learn how to integrate it with Next.js one of the best web frameworks recently to get the best benefit of both.

## Setup a Google Analytics account

First of all, you should have a [Gmail Account](https://mail.google.com/), if you don't have on create one before jumping to the next step.

Go to [Google Analytics Dashboard](https://analytics.google.com/).

If this is the first time to log into Google Analytics Dashboard, you will see this screen, click on “start measuring” and create account and property

![Google Analytics Home page](/posts/setup-google-analytics-for-nextjs/1.png)

If you already have an account, go to “Admin” on the sidebar.

![Google Analytics Dashboard](/posts/setup-google-analytics-for-nextjs/2.png)

After creating the account and property, you should see this screen.

![New property](/posts/setup-google-analytics-for-nextjs/3.png)

All that we need from this screen is the measurement id.

## Setup Google Analytics for Next.js

In your project folder, find the file `pages/_app.js` and we need to import the `<Script />` component.

```js
import Script from "next/script";
```

and then add the following code to the JSX:

```jsx
<Script
  src="https://www.googletagmanager.com/gtag/js?id=YOUR_MEASUREMENT_ID"
  strategy="afterInteractive"
/>

<Script id="google-analytics" strategy="afterInteractive">
  {
    `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'YOUR_MEASUREMENT_ID');
    `;
  }
</Script>
```

That's it, congratulations! You can now start measuring your website with Google Analytics 🎉


Google Analytics is a great tool to collect and analyze data from websites and mobile apps to help companies and teams grow. It's free and easy to use and has many excellent features like real-time overviews and reports. Today we will learn how to integrate it with Next.js one of the best web frameworks recently to get the best benefit of both.

Mark
Codes

Build a React Custom Renderer

JavaScript WebSockets in Browser and Server with Examples

Setup Google Analytics for Next.js website

Mark Codes

Build a React Custom Renderer

JavaScript WebSockets in Browser and Server with Examples

Setup Google Analytics for Next.js website

Mark
Codes