DEV Community: Hssan Bouzlima

[Boost]

Hssan Bouzlima — Mon, 09 Dec 2024 12:36:19 +0000

Building a chat app: Chatrooms with Nodejs Websockets and Vue (PART 1)

Hssan Bouzlima ・ Mar 4

#node #webdev #docker #javascript

Building a chat app: Chatrooms with Nodejs websockets and Vue (PART 2)

Hssan Bouzlima — Mon, 11 Mar 2024 09:36:31 +0000

Welcome to PART 2 🤗. This part covers the frontend of the chatroom application.

The main features of this application are:

Creating an account
Creating a room
Joining a room
Chatting in public rooms
Chatting in private room
Search connected users
Get typing status
Update profile (full name and avatar)
Destroy a room

Unfortunately, I can't discuss all the code, I will focus on some areas. If you find something unclear or missing, feel free to comment. All the code is available on Github.

Project structure
Slots?
Input validation
Auth guard
Sockets
Composables
Load messages
Private chat
Profile

Project structure

For easy maintainability, I chose to split my folders as follows:

Folder	Role
Views	Vue components used in routes
Components	Vue components used in views
Interfaces	Data types
Store	State management
Composables	Implement composables
Listeners	Set up websockets
API	URLs and methods to communicate with apis
Plugins	Set up third party libraries

Create a room, join a room and create an account: Slots

From a UI perspective, these different views are similar.

However, they fulfill different purposes:

Create room: username + room name to make a create room post request.
Join room: username + room code to make a join room post request.
Create account: username + full name to a make create account post request.

Same UI, different logic, so I opt for slots.
A shared view contains common UI, and inside, it uses slot to dynamically detain different forms according to where the route is.



// join route: join page
 <sharedView>
   <template v-slot:content>
     // join room form
   </template>
 </sharedView>

Input validation

Input validation is made with vee-validate and yup
Vee-validate is based on useForm composable, it handles errors and form submission Yup in the other hand, takes care of schema validation.



// create account validation
import { useForm } from 'vee-validate';
import * as yup from 'yup'
import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isLoading, error, execute } = useAxios()
const { errors, handleSubmit, defineField } = useForm({
    validationSchema: yup.object({
        username: yup.string().required('Username is required').min(5),
        fullName: yup.string().required('Fullname is required'),
    }),
});
const [username] = defineField('username');
const [fullName] = defineField('fullName');
const onSubmit = handleSubmit(async () => {
// http request
})

Auth guard

One of the design choices is to handle authenticated users on the server side: cookie session
Then, once a user joins a room, he gets a session cookie, and we store user information in the user store. Whenever he visits a new route, we check the user's existence in store if he is not, we ask the server if that user is authenticated. This is done through an is-auth post request to the server to check that cookie's validity. Otherwise, he gets redirected to join page.

Sockets

As I mentioned, I used socket-io to handle the websocket connection.
I put our socket setup in a separate folder. Configured as follows:



import { io } from 'socket.io-client'
const socketUrl = import.meta.env.VITE_API_URL
const socket = io(socketUrl, { withCredentials: true, transports: ['websocket'] })
export default socket

withCredentials: true to make websocket connection with cookie and transports: websocket.

I prefer websocket over polling for performance reasons, since websocket relies on a single TCP connection the whole session.
Initially, our websocket will try to connect automatically. However, if a user is not yet authenticated, the server will disconnect. The moment a user joins a room, we connect manually to the server again.



// connect socket if a user joins successfully
const onSubmit = handleSubmit(async () => {
    await joinRoom({ username: username.value, roomCode: roomCode.value })
    if (userStore.user) {
        await router.push({ path: 'chat' })
        socket.connect()
    }
})

When a user leaves, we disconnect that socket.



socket.disconnect()

State management

For data used app-wide, a state management tool saves a lot of headaches: Pinia
In the Vue community, there are a lot of misconceptions about pinia and composables: Why pinia over simple composable?
It is confusing a little bit with the setup store. But they are totally different.
Composables do not do so much when we deal with the global state. With every instantiation, a new state is created, which of course we do not want.
Pinia is also integrated with Vue dev tools, which are crucial in debugging.
Back to our chat app, the store will be beneficial to share state and to add socket listeners and emitters as recommended in socket-io docs.

Chatrooms store

Message: Message list, message emitter and listener.
Connected users: Connected user list, connected users listeners and emitters.
Typing users: Users currently typing, user typing listeners and emitters.
User: Current connected user.



// Example: connectedUsers store
import { ref } from 'vue'
import type { IUser } from '@/interfaces/User'
import socket from '@/listeners/socket'
import { defineStore } from 'pinia'
export const useConnectedUsers = defineStore('connectedUsers', () => {
  const connectedUsers = ref<IUser[]>([])

  const bindConnectedUsersEvent = () => {
    socket.off('user:join')
    socket.off('user:leave')
    socket.on('user:join', (data) => {
      connectedUsers.value = data
    })
    socket.on('user:leave', (data) => {
      connectedUsers.value = data
    })
  }
  return { connectedUsers, bindConnectedUsersEvent }
})

Composables

I choose composables whenever I want to encapsulate/reuse business logic. Even though some logic could be used only in one component, I prefer moving it into a separate composable.

Room manager: Room listeners, emitters and related functions (Join, create, leave).
Profile update: Business logic related to user profile update.
Private message: Private messages listeners, emitters and private messages state.

In addition to composables we implemented, we used the VueUse library to take advantage of several amazing ready-to-use composables:

useAxios: responsible for http requests.
useScroll: handle scoll state and trigger message load.
useDateFormat: format message date.

Load messages

Messages should be loaded once a user joins a room. However, it is inefficient to load all messages all at once.

Load strategy

Our API handles that, by asking for a list value. This list specifies which slices should be returned, if there are any.
For example, if list=1 and our API returns 20 messages by list, then we should get messages from 0 to 19.
In addition to the list value, we should specify the number of messages to skip, these messages are the number of messages sent in live discussions, otherwise, we get redundant messages.
As the user scrolls up, at a certain threshold, load-next-messages triggers, list value increments, and next messages is triggered.
This process ends either when a user stops scrolling up or when we display all messages. This is achieved when the API returns lastList= true along with messages.

One last important point here: do not forget to use flex-column-reverse so the scroll starts from the bottom.

Private chat

This is a special chat room where just two users chat privately. Only two users in the same chat could join a private chat.
A private chat is created when a user clicks on another user from connected list and redirected to private room:
router.push({ path: chat/private/${idUser} }).

The moment a private chat room is rendered, a unique room name is created from the combination of these two users usernames, and then their sockets join that room.



// function to generate private room name
export function privateChatGenerator(sender: string, receiver: string) {
  return [sender, receiver].sort().join('')
}

// ChatPrivateMain.vue  

const userStore = useUser()
const {joinPrivateEmitter} =usePrivateMessages()
const connectedUserStore = useConnectedUsers()
const userId = router.currentRoute.value.params['idUser'] as string
const chatWith = connectedUserStore.connectedUsers.find((u) => u.userId === userId)
const privateChatName = privateChatGenerator(chatWith?.userName!, userStore.user?.userName!)
bindPrivateMessagesEvents()

onBeforeMount(() => {
    if (!chatWith)
        router.push({ path: '/chat' })
})
onMounted(() => {
    joinPrivateEmitter(privateChatName)
})

//joinPrivateEmitter
const joinPrivateEmitter = (privateChatName: string) => {
    socket.emit('user-private:join', privateChatName)
  }

Profile

A user is characterized by a username, a full name, and an avatar.
Users can change their full name and avatar at any time. Profile update composable is responsible for that.

Deployment

Usually, I deploy frontend apps on vercel. Unfortunately, it seems vercel does not support websockets connection. They only support libraries like Ably. Then I moved to render. Sadly, with free instance, they spin down the service that goes 15 minutes without receiving inbound traffic 🥱.
To deploy on render, you should just link your Github project. With every push, a new deployment is triggered.

It's live !🥳

And that's it, this is our chatrooms app join me there!

In these two parts, I try not to copy and paste too much code and focus on the important ideas. My strategy was to cover concepts rather than specific functions or code. I hope all areas are clear. If you think I missed some points or there are some vague topics, comment below.
Frontend repository
Backend repository
I would appreciate it if you could star the repositories 😊

If you like this type of post, let me know 🙏

Building a chat app: Chatrooms with Nodejs Websockets and Vue (PART 1)

Hssan Bouzlima — Mon, 04 Mar 2024 07:57:43 +0000

Hello! This is the first post in the series. Here is my app, where I share my apps. I'm going to share with you How I made a chat application from scratch. Chat rooms ! Let's dive into it.

The main features of this application are:

Creating an account
Creating a room
Joining a room
Chatting in public rooms
Chatting in private room
Search connected users
Get typing status
Update profile (full name and avatar)
Destroy a room

Unfortunately, I can't discuss all the code, I will focus on some areas. If you find something unclear or missing feel free to comment. All the code is available on Github.

In this first part we will discuss backend side, next part will be dedicated to frontend side.

Project structure
Local environment
Some features
Scalability
Logging
Deployment

Project structure:

For easy maintainability, I choose to split my folders/files as follows:

Folder/File	Role
index.js	Entrypoint
Server.js	Server setup (DB connect, routes, middlewares)
Config	Contains distinct environment variables related to each environment
Logger	Setup logging library
Middlewares	Functions used in express, can either end the request or call next middleware
Controllers	Similar to middlewares, except they can only end a request. With that being said, they exist either in the end of express router or they used uniquely in a route
Routes	Different express routers
Listeners	Socket listeners
Utils	Isolated functions not related to req/res cycle
Database	Database instance: Mongodb
Models	Representing our DB documents. An instance of a model is a document
Dockerfile	App image
Docker-compose	Run multi container app (Nodejs,Mongo,redis)

Local environment:

I configured an env file for each environment, development.js is used by default.



const env = process.env.NODE_ENV || "development";
if (env === "development") {
  envConfig = require("./development");
} else {
  envConfig = require("./production");
}

To set up a dev environment, I used Docker and docker-compose to run different dependencies. When using nodemon with Docker, don't forget to add --legacy--watch to be able to modify your code and restart the server automatically. With this setup, you need only Docker installed on your machine to be able to run this app locally! Docker magic.

Dev architecture

Why Redis? Figure out the scalability section

Features

In this part, we will talk about the Auth strategy, chat, and how we manage assets.

Auth strategy

To be able to connect, you need to create a user account, where you specify your unique username and full name. Once you create an account, you can join a room.

Create a room

You are allowed to create a room only if you have a user account. Once this condition is met, you specify your username as well as a room name in a post request. If it succeeds, a room code (UUID) is generated for you and can be shared with whoever you want to join you in a room.



module.exports.createRoom = async (req, res) => {
  const { roomName, userName } = req.body;
  const roomCode = uuid.v4();
  const createdBy = await user.findOne({ userName });
  if (createdBy && roomCode) {
    const doc = await chatRoom.create({ roomName, roomCode, createdBy });
    if (doc) res.status(201).send(roomCode);
    else res.status(404).send("Error creating a room");
  } else res.status(404).send("Error creating a room");
};

In that condition, you are considered an admin, so you can destroy that room anytime you want, and all messages shared in that room are going to be deleted. This is done through mongoose post hook



chatRoomSchema.post("findOneAndDelete", async (doc) => {
  if (doc._id) {
    const roomId = doc._id;
    await messageShema.deleteMany({ receiver: roomId });
  }
});

Join a room

Given that you have a room code, you send a post request specifying your username and room code. The server checks this information, if it is valid, a cookie session is created, and consequently, you are allowed to chat.
A cookie session is created with JWT containing a combination of user and room information.

Join room req/res

Therefore, further requests will automatically send that cookie to the server. A special middleware protect.middleware.js checks the validity of the cookie. If it is valid, this middleware will attach the decoded token (user and room information) to the request.

Cookie

Cookies are characterized by many attributes.
In our case, since we want to use a session cookie, we do not specify the expires attribute. Secure attribute to send only the cookie over HTTPS, and httpOnly to prevent access to the cookie from JavaScript. SameSite is none since our API and server are completely in different domains.



const options= { httpOnly:true, secure: true, sameSite: "none"};

With this configuration, our cookie is vulnerable to CSRF where the server can't distinguish whether the request was made intentionally or not. To mitigate that, we used Double submit cookie pattern. In addition to sending a session cookie, the server also sends a CSRF token cookie with a UUID value.



const csrfToken = signToken(uuid.v4(), xsrfSecret);
      res.cookie(xsrfTokenName, csrfToken, {
        sameSite: "none",
        secure: true,
        httpOnly:false
      });

For further requests, that token will be attached to the header req.headers["x-xsrf-token"] and the server checks if that token is valid or not, along the session cookie.



const protect = (req, res, next) => {
  const authToken = req.cookies[authTokenName];
  const csrfToken = req.headers["x-xsrf-token"];
  if (authToken && csrfToken) {
    const userInfo = verifyToken(authToken, authTokenKey);
    const isValid = verifyToken(csrfToken, xsrfSecret);
    if (userInfo && isValid) {
      req.userInfo = userInfo;
      next();
    } else res.status(401).end("You are not authorized");
  } else res.status(401).end("You are not authorized");
};

Chat

The core of the chat part is the socket.io module. We set up our socket server in a separate folder called listeners. Where we specified socket middleware, chat-room, private room, utils and created the websocket server as well.
Chat is based on the room concept of socket-io. Where multiple sockets belong to the same room, receive/emit events related to that room.
Join a room: socket.join('some room')
In our app and for public rooms, the room is represented by its unique code which is generated at the moment it is created. Private rooms are technically similar to public rooms, except, they hold only two sockets, and the room identifier is generated from the frontend when two users of the same public room decide to chat.

listeners/index.js

This is the socket entrypoint where the server is set up, and various listeners are called. The setup is done through a function that will be called in server.js when we get our express server instance.



// listeners/index.js: setup function
module.exports = async(server)=> {
const io = new Server(server, {
    cors: {
      origin: envConfig.originUrl,
      credentials: true,
    },
  });
  io.use(socketMiddleware);
}

socket middleware

It is triggered only for the first socket connection. This middleware ensures that a user is authorized to chat. A user is considered authorized if a socket contains a valid cookie header (created while joining a room). Once it is validated, this middleware attaches user data to the socket (It will be used later).



//socket.middleware.js

  module.exports = (socket, next) => {
  const cookie = socket.handshake.headers.cookie;
  if (cookie) {
    const authToken = cookie
      .split(";")
      .find((v) => v.includes(`${authTokenName}=`))
      ?.split(`${authTokenName}=`)[1];
    const userInfo = authToken
      ? verifyToken(authToken, authTokenKey)
      : undefined;
    if (userInfo) {
      socket.data = userInfo;
      next();
    } else {
      socket.disconnect();
      next(new Error("Invalid"));
    }
  } else {
    socket.disconnect();
    next(new Error("Invalid"));
  }
};

register event listeners

After surpassing the middleware, different listeners get registered to manage emitting/receiving socket events. socket.room-handler.js for events related to the public room, and socket.private-habdler.js for events related to the private room. Automatically, a user joins a public room.



// listeners/index.js: inside setup function
io.on("connection", async (socket) => {
    try {
// emitters and listeners of public room
      await registerRoomHandler(io, socket); 
// emitters and listeners of private room
      await registerPrivateHandler(io, socket);
    } catch (err) {
      logger.error(err);
    }
  });

To join a private room, where a user can chat privately with an individual user belonging to the same room, a special event must be triggered.



// inside socket.private-handler
socket.on("user-private:join", joinPrivate);

This event must contain a unique chat room name generated from the frontend.



// inside socket.private-handler
const joinPrivate = (privateChatName) => {
    socket.join(privateChatName);
  };

connected users

One of the features is the ability to see connected users in the same room. socket-io provides us with a special function, fetchSockets. This method returns all connected users to the same room.



    const sockets = await io.in(roomCode).fetchSockets();

However, in our app, a user is allowed to connect from multiple devices, so a connected user can have multiple sockets at the same time. Then, the result returned from fetchSockets needs to be filtered out according to user data attached to the socket (this data is added to the socket middleware in the first connection).



const uniqueSockets = sockets
      .filter((socket, index) => sockets.findIndex(({ data }) => 
       data.userId==socket.data.userId)==index)
      .map((sockets) => sockets.data);

Asset management

Users in the app can add an avatar image to be displayed in the UI. To handle multipart-form data, multer middleware is used.



const multer = require("multer");
const storage = multer.memoryStorage();
const upload = multer({ storage });
module.exports = upload;

Then, cloudinary middleware handles that file, uploads it, and then we store the related avatar URL inside the database.



module.exports.saveAvatar = async (req, res, next) => {
  if (req.file) {
    const b64 = Buffer.from(req.file.buffer).toString("base64");
    let dataURI = "data:" + req.file.mimetype + ";base64," + b64;
    const response = await cloudinary.uploader.upload(dataURI, {
      resource_type: "auto",
    });
    if (response.secure_url) {
      req.avatar = response.secure_url;
      next();
    } else res.satus(501).send("Error while saving new avatar");
  } else next();
};

Then, we store that URL in our database.
The full route of the process become:



router.put(
  "/update",
  protect,
  upload.single("avatar"),
  asyncErrorHandler(saveAvatar),
  asyncErrorHandler(updateUser)
);

Scalability

With current implementation, the moment we need to scale horizontally, we may face a huge problem. Two users in the same room may connect to unrelated websocket servers. Therefore, the server can't notice any events sent/received from one user to another.
Socket-io provides us with a ready-to-use component called adapter which is responsible for broadcasting any event to all listening clients.
In this app, we used redis-adapter, and we set up a Redis server locally with a Docker image.

Scaling sockets

Logging

To keep track of logging events, we used winston logger which is a flexible library with a lot of configurations options.
In our chat app, it is configured to use different methods in different environments. In dev, logs are kept in the logs folder, while in prod, logs are made with the console.

Dev logging

Prod logging

Deployment

One of my favorite free cloud providers is render. I deployed our Node.js server there. For the database, I used mongoDB atlas and for the Redis server, I used redis lab.
Since our app is deployed under a public domain render and, for security reasons, CSRF token can not be read in the frontend the only solution is to create a custom domain in production. Do you know a workaround? Another strategy in this case to mitigate CSRF? Let me know.

And we are ready🔥

Our API are all set !
These were the most important parts, I guess, related to the development of the backend side of this application. Do not hesitate to inquire for additional information, offer suggestions or clarify any uncertainties.

The project is available on Github.
I would appreciate it if you could star the repository 😁

5 Git commands you should know 🚀

Hssan Bouzlima — Thu, 28 Dec 2023 17:58:25 +0000

In this article, I will discuss some useful git commands we may need in our day-to-day work. Git reset (soft and hard), revert, rebase, rebase -i and log.

To illustrate these different commands and for simplicity, I will use the same git project.

My example is very straightforward. I initialized a git project and added files from 1.txt to 10.txt, and each file is added in a separate git commit. 1.txt is in commit 1, 2.txt is in commit 2 and so on.

8d679fa (HEAD -> master) 10 e7535c7 9 916c4d5 8 eb15d0d 7 94669d1 6 8300f81 5 617590b 4 f0b1c87 3 a62c707 2 2ad16a7 1

Git reset.

Git reset is a powerful command when we have to remove something we did in a previous commit. There are two types of reset hard and soft.

soft:
We use a git soft when we want to remove a set of commits but unstage all the changes there. In other words, you still have these commit contents, but they are unstaged, so you have the choice to remove them or update them and stage them for a new commit.

Example:

git reset 8300f81 will unstage commits from 10 to 6, and the head is on the specified commit 8300f81

hard:
Reset hard does not offer the possibility to stage our reset changes; instead, it will remove the commits and all their content explicitly.

Example:

git reset 8300f81 --hard will remove commits from 10 to 6 and remove related content as well. The head is now on 8300f81.

git revert

Do not get confused by reset and revert, there are differences between them.
Imagine a situation where you make some changes, and then you figure out that these changes are worthless now, but you may need them in the future. What would you do?
You could revert them. Revert makes it possible to remove unwanted changes, but at the same time, it keeps the commit containing these changes. Revert creates automatically a revert commit that does not contain unwanted changes.

Example:

Given that you are not satisfied with commit 617590b and at the same time you want to keep it in history.
So you reverted that commit: git revert 617590b
It opens a terminal screen where you specify your revert message. Once done, the head will be on the new revert commit, and the old commit will remain in your git history.

e6371ff (HEAD -> master) Revert "4" 8d679fa 10 e7535c7 9 916c4d5 8 eb15d0d 7 94669d1 6 8300f81 5 617590b 4 f0b1c87 3 a62c707 2 2ad16a7 1

git rebase

Rebase is similar to merge, but it works differently. Instead of creating a merge commit, it "rewrites" history by changing the base of your branch from one commit to another. In this way, it maintains a flat history and eliminates ambiguity. The following is the most evident illustration that I have discovered illustrating the distinctions between Rebase and Merge.

Merge vs Rebase

git rebase -i

Interactive rebase is a magical command when it comes to making changes in git commit history, like editing commit messages, combining commits together, or removing a commit(Example below).
git rebase -i 8300f81 (commit 5). Will open your terminal with the commit list from commit 10 to commit 6. In front of each commit you can choose between multiple options like pick, reword, fixup, squash, drop. Once you are satisfied with your choice, the terminal will be closed automatically, and your changes will be applied.

Interactive rebase screen example

git log

This command gives you all your git commit history, commit hash and message. Useful to keep track of your project or whenever you need to use a commit hash in one of your git commands.
Multiple flags could be used with log like --oneline (for each line print a single commit), --all (all branches)

git log --oneline --all

Conclusion

Throughout the article, I tried to simplify what these different commands do and what their benefits are. I hope the examples are clear and help you choose the git command you need.

I think, in addition to the usual git commands (status, add, commit, pull and merge)reset, revert, log and rebase are handy for everyday work and make you more confident with git.

Thanks for reading !

Applying factory method pattern: Vuejs with firebase and supabase use case

Hssan Bouzlima — Sat, 26 Aug 2023 17:52:10 +0000

Imagine this scenario.
You are implementing a web application for several clients.
Each client wants to use a different backend service : firebase and supabase.
What would you do?

Implementing two versions of the same app, one to deal with firebase, the other with supabase?

What if a client changes his mind and wants to use another backend service: AWS amplify? Would you change the codebase one more time to fit this new requirement?
It does not make any sense.

Since this is an issue, our codebase should not rely on any specific backend service. Instead, the codebase must handle whatever backend service we need and, most importantly, be out of proportion to the number of backend services we may use.
That is to say, whenever we add or update a new backend service, it needs to be easy to integrate into our application with regard to time and complexity. This is achievable only when our implementation is based on abstraction rather than concretion.

Here is where design patterns and SOLID principles come in handy.

In this post, we will try to resolve this issue by applying the factory method pattern. It is not a unique solution, nor maybe a "must do" solution; it is rather an exploratory operation to discover its benefits in regard to this specific issue.

1-Factory Method pattern:

The factory method is a creational pattern, its primary task is to create objects with respect to a specific design. The method responsible for that is the "factory method", which belongs to a "factory class". Picking out this pattern is the best option when we don't know the object we want to instantiate until runtime.

For example, an object "Animal" won't be instantiated directly inside the client code instead, this will be delegated to the factory method :

createAnimal(){return new Animal()}
let's deep dive into this pattern. Below a UML class diagram for the factory method pattern:

UML class diagram of factory method pattern

Creator: It is an abstract class representing a factory class signature.

Creator1: A concrete implementation of the factory class contains a concrete factory method.

Product: In the factory method pattern, the product is our object to be instantiated. It is an interface representing our object signature.

Product1: A concrete implementation of the object.

You may notice that we can have multiple factories and products.

Then, how could this design be applied to my web application?

2-Factory method pattern in typescript:

In brief, my app (find your coach) is made to help users connect with coaches and send them mentorship requests.

I want my application to handle several backend services. Until now, I needed Supabase and Firebase.

Backend service choice will be done inside the .env variable VITE_APP_DB. According to this value, one of the backend services will be instantiated.

These services contain data about coaches and requests. My main tasks will be getting a list of coach, getting a list of requests and adding a request.

Design our specific use case

Below is a UML class diagram of the factory method pattern applied to our case.

UML class diagram of factory method pattern: find your coach application

At this level, we transformed a general factory method pattern design into a more specific case: find your coach app

Creator --> dbCreator

Creator1 --> concreteDbCreator

Product --> IDatabase

Product1 --> FirebaseDb

Product2 --> SupabaseDb

Code implementation:

Let's take one more step. Now we are going to implement our design!

IDatabase:

Signature to the required backend operations.

import type { Request } from '@/types/Request'

export interface IDataBase {
  getRequests(email: string): Promise<any>
  addRequest(data: Request): Promise<any>
  getCoaches(): Promise<any>
}

dbCreator:

Our factory class signature. A concrete creator should implement this class.

import type { IDataBase } from './IDataBase'
export abstract class DbCreator {
  //factory method
  public abstract createDb(dbType: string): IDataBase
}

FirebaseDb: (full code:FirebaseDb)

import{Database,getDatabase,ref,equalTo,query,get,
orderByChild
,set} from 'firebase/database'
import type { IDataBase } from './IDataBase'
import type { Coach } from '@/types/Coach'
import type { Request } from '@/types/Request'
import { initializeApp } from 'firebase/app'
const firebaseConfig = {}
export class FirebaseDb implements IDataBase {
  private db: Database
  constructor() {
    initializeApp(firebaseConfig)
    this.db = getDatabase()
  }
  getRequests(email: string) {//}
  addRequest(data: Request) {
    return set(ref(this.db, 'requests/' + data.time), data)
  }
  getCoaches() {}

SupabaseDb: (full code:SupabaseDb)

import { createClient } from '@supabase/supabase-js'
import type { IDataBase } from './IDataBase'
import type { Request } from '@/types/Request'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
export class SupabaseDb implements IDataBase {
  private supaBase
  constructor() {
    this.supaBase = createClient(supabaseUrl, supabaseKey)
  }
  getRequests(email: string) {}
  addRequest(data: Request) {  }
  getCoaches() {   }

Supabase and Firebase must implement IDatabase.

ConcreteDbCreator:

This is the core of the factory method pattern. Based on the dbType value, a particular backend service will be instantiated through if else statements.

import { DbCreator } from './DbCreator'
import { FirebaseDb } from './FirebaseDb'
import { SupabaseDb } from './SupabaseDb'

export class ConcreteDbCreator extends DbCreator {
  public createDb(dbType: string) {
    if (dbType === 'firebase') return new FirebaseDb()
    else return new SupabaseDb()
  }
}

Client code (main.ts):

In this context, client code is where our object is instantiated.
As mentioned above, the factory method is called with the dbType param obtained from .env file.

//
const appDB = import.meta.env.VITE_APP_DB
const appDataBase = new ConcreteDbCreator().createDb(appDB)
//

3-Inject a database instance into Vue:

So far, we have designed and implemented our pattern in typescript. The next step is to inject the database instance into vue to make it accessible across the application.

Vuejs comes up with a dependency injection mechanism to pass data from a parent component to a child: Provide/Inject.

We will use this mechanism to inject our database instance.
First provide()

app.provide('appDataBase', appDataBase)

Then inject it wherever we want.

  const appDataBase: IDataBase = inject('appDataBase')!

Dependency injection with Pinia

In find your coach app, I use Pinia for state management. Unfortunately, the Provide/Inject mechanism is not accepted in pinia store. Therefore, I need a different way to inject my database instance.

Yet, Pinia provides another way to use external properties by adding an attribute to pinia store object containing the required properties. This object must be wrapped inside markRaw().

pinia.use(({ store }) => {
  store.appDataBase = markRaw(appDataBase)
})

Then our database instance will be available through this inside the store.

import { defineStore } from 'pinia'
import type { Coach } from '@/types/Coach'

export const useCoachesStore = defineStore('coaches', {
  state: () => ({
    coaches: [] as Coach[],
  })
  actions: {
    fetchCoaches() {
      this.appDataBase
        .getCoaches()
        .then((data: Coach[]) => {
          data.forEach((coach: Coach) => {
            this.coaches.push(coach)
          })
        })
    },
  },
})

4-Notes:

You may wonder, why we don't use simply an interface and several services implementations, and instantiate the service we need since the database service will remain the same at runtime.

Applying the factory method pattern has mainly two benefits:

-Separation of concern: Choosing adequate service is the factory method job. The client code will remain unchangeable, whatever service we decide to use.

-Limit code modification and mistakes: Adding a new service requires only changing the .env variable, adding a concrete class and adding a new conditional statement. It is a standardized task.

5-Conclusion:

Throughout this post, we successfully implemented the factory method pattern to meet our application need for flexibility in choosing backend service.

This is done through the .env variable which specifies the backend type, and the factory method.

Now, we have the freedom to choose between firebase and supabase by just changing one variable!

Anytime we want to use another alternative, we have to follow these steps :

Create a concrete class of specified service. This concrete class must implement IDatabase interface
Add one more conditional statement in the factory method to instantiate this service according to the dbType param.
On any occasion we want to use this service, we just need to update the .env variable: VITE_APP_DB.

THANK you for taking the time to read this article.

Full project code

Vuejs composables: hands-on examples

Hssan Bouzlima — Tue, 15 Aug 2023 21:38:23 +0000

Composition API'S was introduced in vue from 2.7 version to replace options API'S.

On of These API's is Reactivity api ('ref' and 'reactive') to declare reactive state, instead of data function in option API.

This new API is the backbone of composables.

What are composables?

Composables are functions based on reactivity api following a specific structure making it possible for developers to separate stateful or stateless logic from components.

In addition, logic itself could be split in different composables and nested together to achieve a specific task on account of the fact that composables are 'malleable' through arguments.

Composables examples:

Composable have three major parts:

Internal state: Any state related to the function.
States that will be exposed must be reactive using 'ref' or 'reactive'.

Nevertheless, it is recommended to use 'ref' since it retains reactivity and enables destructuring in components straightforward compared to 'reactive'.

Manage state: A logic to apply when an action happens

Return state: Expose managed state

Composable returns an object with single value or multiple values, a value could be a method.

1. Basic composable

In the example below useIsUserActive is a composable to check if a user click somewhere in the page.
Basic composable example: useIsUserActive

Then imported and executed in vue component.
Basic composable example: useIsUserActive called in component

You may notice that composable name starts with use as it is the naming convention from vuejs team.

2.Composable with returned methods:

Let's see more sophisticated example: useTimer

This composable will act as a timer that we can control through different methods: start, pause and stop.

useTimer example

useTimer composable called in component

3.Composable with arguments:

Composable could be parametrized as the example below.

This composable is responsible for replacing spaces in strings with specific separator.
useFormatString example

useFormatString called in component

data and separator are the parameters.
watchEffect will be run whenever one of its dependencies change. Without watchEffect our function will run only the first time even though data or separator have been changed.
Its dependencies must be reactive to be capable of doing this job, for that reason data and separator must be a ref.
toValue is a function that returns either:

1.Normalized value of the source if that source is a ref.

2.Execute the function of the source and returns its value if
that source is a getter function.

3.Returns value of the source if that source is a normalized
value.

Composables advantages:

Let's use useTimer composable logic straight inside the component.



<script setup lang="ts">
import { ref } from "vue"

const timer = ref(0)
let myInterval: number

// start method
const start = () => {
  myInterval = setInterval(() => {
    timer.value = timer.value + 1
  }, 1000)
}

// pause method
const pause = () => {
  clearInterval(myInterval)
}

// stop method
const stop = () => {
  timer.value = 0
  clearInterval(myInterval)
}
</script>

<template>
  <main>
    {{ timer }}

    <button @click="start()">start</button>
    <button @click="pause()">pause</button>
    <button @click="stop()">stop</button>
  </main>
</template>

You will notice that the component does not care of timer state, then it does not make any sense for the component to have access to timer logic.
You will not be capable of reuse this logic unless you copy paste.
Imagine this component get bigger, it will be more difficult to debug.

As you may notice this technique will offer lighter components regarding components complexity and length. Besides easier debugging.

Conclusion:

Composables are the new way of reuse and encapsulate logic in vuejs application. They gain this power from composition api the thing that take vuejs application to another level.

Implementing composables, from personal use in several projects, won't cost neither ambiguity nor new layer of complexity compared to their advantages.

You find the examples above in my github: Github

switchMap, mergeMap, concatMap, and exhaustMap like you have never seen

Hssan Bouzlima — Sun, 05 Sep 2021 14:55:43 +0000

switchMap, mergeMap, concatMap and exhaustMap are rxjs flattening operatators.

They are considered as transformational operators since they transform an observable after applying a function, to a new observable.

They help us to avoid situation where we have to nest subscription and things get messy.

For example, when a user clicks a submit button (source observable), an http request is sent to the server (inner observable), then, we listen to the response.

A simpler example would be as follows :

The difference between them is based on the manner in which they act when the source observable emits while the inner subscription still in progress.

Imagine this user clicks the submit button, an http request is sent to the server, while we are waiting for a response he clicks again on the button.

What should inner observable do?🤔

cancels active subscription and starts new one?
maintains active subscription and ignores new one?
maintains active subscription and starts new one?

To anwser these questions and more, we will make things simpler.

We will imagine the source observable as client orders in restaurant, and, inner observable as a chef response to these orders.

👨‍🍳 🙋‍♂️

orders are observable of strings representing different client orders. 👨

prepareOrder will be the projection function, it takes an order as observable. After preparing the order (it takes random time ⏲️ ) it sends back a new observable (inner observable). 🍚

mergeMap 🤯

Result:

We get order 2, 3, 4, then 1.
It seems like mergeMap does not respect orders sequence !.

let's see what happens with this chef:

While he is preparing an order, he is also listening for new orders, when he gets one, he starts immediately treating the new order even the current one is not yet completed, then, he sends back the first that gets completed and so on.

He treats orders concurrently !

concatMap 😇

Result

We get orders in sequence 1, 2, 3, then 4.

Wow this chef respect orders sequence !

Even though order 4 took only 12 ms to be ready and order 1 took 685 ms, he responded to order 1 before order 4 !

What happens?

This chef listen to orders in sequence. While he is in the middle of preparing an order and new one comes, he takes note of this order (in buffer) to get back to it after finishing current order and so on.

exhaustMap 🙄

Result

This chef is so lazy, he responded only to the first order !

When he is preparing an order, he will ignore any order in meantime until he finishes the current one.

switchMap 😈

Result

He responded only to order 4 !

This chef is unkind ! When he is preparing an order and gets new one, he drops the current order and starts immediately preparing the new order.

Let's summarize:

How flattening operators would represent themselves if they were chefs?

-🤯mergeMap: I'm a hard worker, I can prepare multiple orders at the same time ! But I don't respect orders sequence.

-😇concatMap: I respect orders sequence! You will get your order as soon as I finish what I'm currently doing.

-🙄exhaustMap: I'm exhausted ! when I prepare an order, I won't listen to any other order.

-😈switchMap: I'm mean ! your order will be in trash if I receive new one.

That's it !

Hope this illustration makes it easier to understand these operators. And helps you choose the best operator that fits your use case.

You find more details in official rxjs docs and learnrxjs.io

Github
Linkedin

Intro to asynchrounous javascript: Promises - Async/await

Hssan Bouzlima — Tue, 31 Aug 2021 09:53:36 +0000

In javascript, the code is executed line by line while JS keeps track of the function being called with a call stack.

PROBLEM: 😡

As we mention, JS is single threaded, which means it can execute one commande at a time.

So, with that being said, if a line of code takes time to be executed, all the rest of code won't execute till this line finish. Which is the case for external api call.

Then, we want a way to run our code especially long tasks without blocking further code execution.

SOLUTION: 😃

We execute long running task in background without blocking the rest of code until we get back a result.

Promises:

From MDN:

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promises are simply javascript objects returned the moment we execute asynchrounous task.

This object holds mainly three properties:

onFulfilled: It contains the function to be executed in case of returned data

onRejected: It contains the function to be executed in case of error

value: Contains data returned by the asynchrounous task, that will be automatically in either onnFulfilled or onRejected function parameter.

onFulfilled/onRejected functions get notified when data or error returned, then one of them get added to the microtask queue waiting till call stack become empty and the global execution finishes running to be able to run.

OnFulfilled function is passed to the promise through .then(), onRejected is passed through .catch().

we note that .then() can hold both of them :

.then(onFulfill,onReject)

CREATE YOUR PROMISE:


  const createdPromise = new Promise((resolve, reject) => { 
    const x=10; 
    if(x==10)
    resolve("YAY!"); 
    else
    reject("FAIL!");
  });  

createdPromise.then(
(v) => console.log(v),  //YAY!
(err) => console.log(err)
)

We create a promise through Promise constructor to wrap a function and make it returns a promise. This function has two callbacks functions:

resolve: executed when what we were doing succeed
reject: when it fails

You can simulate asynchronous execution above by adding settimout function.

PROMISE EXECUTION:

function runningFor300MiliSeconds() {
  //
}
function runningFor200MiliSeconds() {
  //
}
runningFor300MiliSeconds();
const futureData = fetch("api-url"); // for 20 ms
futureData.then(
  (data) => console.log(data),
  (error) => console.log(error)
);
runningFor200Miliseconds();

Here in the call stack we have runningFor300MiliSeconds function running from 0 ms to 300 ms.

From 301 ms fetch function is called and returns a promise object (futureData).

From 302 ms runningFor200MiliSeconds function is added to the call stack and executed till 502 ms.

Meanwhile, in 321 ms futureData value is returned and onFulfilled function is added to the microtask queue waiting for the call stack to become empty.

In 502 ms runningFor200MiliSeconds finished running, the call stack is empty then, onFulfilled function get added to the call stack and executed.

Async/Await:

Async/await tries to simplify promises way of handling returned result, through elimating .then/.catch blocks.

async function foo() {
  try {
    const futureData = await fetch("api-url");
    console.log(futureData);
  } catch (err) {
    console.log(err);
  }
}  

// this code is similar to

const futureData = fetch("api-url");
futureData.then(
  (data) => console.log(data),
  (err) => console.log(err)
);

Asynchrounous Javascript :

Promises and async/await changed the way js works from single threaded blocking execution to non-blocking execution with the help of event loop and microtask queue.

Hope this quick article makes it easier for you to dig deeper into asynchronous javascript concepts and methods. 👏

✌️

Hssan Bouzlima Github
Hssan Bouzlima Linkedin

How to create a custom modal in angular

Hssan Bouzlima — Tue, 13 Jul 2021 17:32:48 +0000

I) Introduction

Modal is simply an interactive window that hides the principal page to provide the user options according to his action.

For example, given a list of items with a delete button for each row, when the user clicks the delete button, a modal appears requiring the user to either confirm his choice (delete item) or close the modal. As you may notice, modal interaction is a great choice since it offers a nice user experience.

In this quick tutorial, we will try to build a custom reusable modal with angular, which makes it easy to maintain and reuse.

II) Modal elements

To build this modal we need 3 main elements

Modal service which is responsible for creating/destroying modal.
Modal component containing modal information ( body, title, buttons ) and, it sends events to modalService ( confirm/close ).
Hosting component contains a reference to where the modal is going to appear and listen to modalService events. It does not know anything about the modal.

Modal service, Modal component, Home component interaction overview

NB: At the end of each section, you find the code associated with.

1)Modal service

Our service will hold 3 methods:

openModal : which is responsible for creating modal and add it to a specific component (hosting component).

closeModal : which is responsible for destroying modal, after the user clicks on the close button.

confirm : which is the event triggered when the user clicks on confirm button, it emits "confirm" to hosting component.

Our service will hold 2 private attributes:

componentRef : which keeps track of the modal created.

componentSubscriber : which is a subject returned after the modal created. it is responsible for sending events to the component holding the modal.

let's dig deep down in our methods:

openModal

openModal method will receive 3 parameters:

entry: which is the modal container (where the modal is going to appear) of type viewContainerRef.

Angular doc:

viewContainerRef represents a container where one or more views can be attached to a component.

modalTitle: which is the modal title.

modalBody: representing modal body.

The question here is how to create a modal component, and add it to the modal container ? 😳

entry ( viewContainerRef ) has a magic method called, createComponent. This method instantiate a component and add it to the viewContainerRef (entry). It takes a component factory and returns component instance, which gives us access to component instance and related objects.

But how to create a component factory from a component? 😕

Angular provides us a componentFactoryResolver class that takes a component and returns a componentFactory.

Angular doc:

componentFactoryResolver is a simple registry that maps Components to generated ComponentFactory classes that can be used to create instances of components.

ComponentFactory is the base class for a factory that can create a component dynamically. Instantiate a factory for a given type of component with resolveComponentFactory().

Great !! 😃

We injected this class ( ComponentFactoryResolver ) in service constructor, and we created a componentFactory ( factory ) in openModal method.

After modal instance created, we are able then to provide the modal by title input, body input, and subscribe to different output events ( closeMeEvent , confirmEvent ) to handle them in user interaction.

Then, in this method we return a subject as observable, this observable is useful to the hosting component to be notified of user interaction with the modal ( "confirm" ) to do specific logic.

closeModal :

This method is simple, it is responsible for destroying the modal and complete the subscriber. Hosting component is not concerned by this event.

confirm :

which is responsible for sending to the hosting component "confirm" and then close the modal



export class ModalService {
  private componentRef!: ComponentRef<ModalComponent>;
  private componentSubscriber!: Subject<string>;
  constructor(private resolver: ComponentFactoryResolver) {}

  openModal(entry: ViewContainerRef, modalTitle: string, modalBody: string) {
    let factory = this.resolver.resolveComponentFactory(ModalComponent);
    this.componentRef = entry.createComponent(factory);
    this.componentRef.instance.title = modalTitle;
    this.componentRef.instance.body = modalBody;
    this.componentRef.instance.closeMeEvent.subscribe(() => this.closeModal());
    this.componentRef.instance.confirmEvent.subscribe(() => this.confirm());
    this.componentSubscriber = new Subject<string>();
    return this.componentSubscriber.asObservable();
  }

  closeModal() {
    this.componentSubscriber.complete();
    this.componentRef.destroy();
  }

  confirm() {
    this.componentSubscriber.next('confirm');
    this.closeModal();
  }
}

ModalService.ts

2)Modal component

Our modal component is a simple angular component containing :
title : as @input()
body : as @input()
closeMeEvent: as @Output()
confirmEvent: as @Output()
closeMe : emitting closeMeEvent to modalService
confirm : emitting confirmEvent to modalService



export class ModalComponent implements OnInit, OnDestroy {
  constructor() {}

  @Input() title: string = '';
  @Input() body: string = '';
  @Output() closeMeEvent = new EventEmitter();
  @Output() confirmEvent = new EventEmitter();
  ngOnInit(): void {
    console.log('Modal init');
  }

  closeMe() {
    this.closeMeEvent.emit();
  }
  confirm() {
    this.confirmEvent.emit();
  } 

 ngOnDestroy(): void {
    console.log(' Modal destroyed');
  }

}

ModalComponent.ts

3)Hosting component

Hosting component, is the component where the modal is going to be created. Home component in our example.

This component must have a HTML reference element representing the modal container, and the event triggering modal creation ( createModal ).

The host component is responsible for providing modal service by viewContainerRef (entry). To get this view we use @viewChild decorator with the reference element specified in the view(#modal).

Angular doc:

@viewChild is a property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM

This component is responsible also for subscribing to modalService openModal to listen for events streams. If it receives "confirm", our logic will be executed.

That's it ! your modal is working fine. 💪



export class HomeComponent implements OnInit, OnDestroy {
  constructor(private modalService: ModalService) {}

  @ViewChild('modal', { read: ViewContainerRef })
  entry!: ViewContainerRef;
  sub!: Subscription;

  ngOnInit(): void {}
  createModal() {
    this.sub = this.modalService
      .openModal(this.entry, 'Are you sure ?', 'click confirm or close')
      .subscribe((v) => {
        //your logic
      });
  }
  ngOnDestroy(): void {
    if (this.sub) this.sub.unsubscribe();
  }
}

HomeComponent.ts



<button (click)="createModal()">Delete me</button>
<div #modal></div>

HomeComponent.html

III) Conclusion

In this tutorial, we proposed a general pattern of how to implement a modal in angular, which consists of three elements:modal component, modal service, and hosting component.

Hope it is clear and helpful. Comment below for any suggestions, clarification or issues.

Waiting for your feedback concerning this pattern ✌️.

You find full code in my github repo Angular reusable modal pattern

Javascript:Basic understanding of "THIS" binding

Hssan Bouzlima — Wed, 28 Apr 2021 21:46:18 +0000

Javascript this keyword has been always a source of trouble for developers, they are confused about how this value is resolved.

If you are one of these developers don't worry, this article will make it easier to understand how this mechanism works.

This Binding follows four main rules (Yes all this headache is about four rules) and a lexical this(arrow function) :

Default binding
Implicit binding
Explicit binding
New binding

Lexical this (has its own rule)

Let's see in details what are these four rules in details

1. Implicit binding

Given a function inside an object property, implicit binding says that the this for the function when it is called is the object itself.

function write(){
console.log(this.a)
}
var obj={
a:2,
write:write
}
obj.write()//2

In other words, in obj.write(), we are saying implicitly this = obj, therefore, this.a == obj.a.

2. Explicit binding

Is "forcing" this to take a specific value and this through apply(), call() and bind() functions. They take as first parameter an object to use as this value and a second one representing the function argument(s).

function write() {
  console.log(this.name);
}
write.call({ name: "HSSAN" }); // HSSAN

In this example, this = {name:"HSSAN"}, therefore, this.name == "HSSAN"

3. New binding

In my article Javascript classes: class, constructor, new, extends, super I discussed how new keyword works under the hood. Briefly, it creates an object, and this is bound to this newly created object, then, it gets returned.

function write(a){
this.a=a
 }
var writing=new write("hello");

console.log(writing.a);//hello

4. Default binding

When all the previous rules do not apply, this is bound to the global object. In strict mode it is bound to undefined.

Lexical this (arrow function)

Arrow function has a different approach of how to deal with this binding. In arrow function this is determined by lexical scope, in other words, where the function is declared determines this binding (enclosing scope where it inherits from).

this.name = "HSSAN";
this.skills = ["shoot"];
var player = {
  name: "Kane",
  skills: ["dribble", "pass", "shoot"],
  showSkills: () => { // this here is lexically inherited from player
    this.skills.forEach((skill) => {
      console.log(`${this.name} can ${skill}`);
    });
  },
};
player.showSkills(); //HSSAN can shoot

showSkills is an arrow function, so it inherits this from enclosing scope. Enclosing scope, in this case, is player object, which has global object as scope. Therefore our function will inherit global object for this binding.

What order to apply the rules when more of one is eligible?

We are going to demonstrate with concrete examples which rule has more precedence than others.

Explicit VS Implicit

var player={ 
       name:"Kane", 
       skills:["dribble","pass","shoot"],
       showSkills:function(){
         this.skills.forEach((skill)=>{
           console.log(`${this.name} can ${skill}`)
})
}
}
var func=player.showSkills.bind({name:"bale",skills:["shoot"]})
func()//bale can shoot

func() returns 'bale can shoot' so player binding gets ignored(implicit binding) to use instead explicit binding (In the example we used bind but it can be replaced also by call or apply).

With this simple example, we can say explicit binding has more precedence than implicit binding.

New VS Implicit

function getName(name)
{
this.x=name
}
const obj={name:getName}
const obj1 = new obj.name("Hssan");
console.log(obj.x)//undefined 
console.log(obj1.x)//hssan

obj.x has undefined value, in other words, x attribute did not get created in obj object, instead, a new object is created with x attribute (obj1 object). If we remove new keyword, the opposite will happen obj.x="hssan" and obj1 become undefined.

Accordingly, new binding has more precedence than implicit binding.

New VS Explicit

function getName(name){
this.name=name}
var obj={} 
var func=getName.bind(obj); 
func("Hssan");
console.log(obj.name); //Hssan 

const n=new getName("Bale"); 
console.log(n.name); //Bale
console.log(obj.name); //Hssan

In this demonstration, func is hard-bound against obj that's why obj.name has "hssan" value and new getName("Bale") did not change obj value, instead it creates and returns a new object with attribute name="Bale".

new has the ability to override hard-bound since it returns the new created object (n). For that reason, new Binding has more precedence than explicit binding.

Conclusion:

we have seen together different rules applied to know which value this is binding for.
Now let's summarize their order of precedence :

1) Is the function called with new ? if so, this is the object created by the function

2) Is the function called with call,apply or bind? this refers to the object passed in the argument

3) Is the function called with contextual object (object owner) ? this refer to the contextual object.

Hope this quick article makes this binding in javascript clearer and no longer a nightmare.

Basic input autocomplete with rxjs

Hssan Bouzlima — Sun, 21 Mar 2021 15:57:00 +0000

Autocomplete input text is one of the crucial features in web applications to provide better user experience

In this quick tutorial, we try to build an autocomplete text input using rxjs library.

Let's first generate an empty npm package

npm init -y

And we will add 3 pages :

index.html
style.css
index.js

You find full project in my github repo

This is index.html

<html> 
<head>
    <title>rxjs autocomplete</title>
  </head>
  <body>
    <div class="container">
      <div class="flex-container">
        <input
          type="text"
          class="form-control"
          placeholder="Search"
          id="text-input"
        />
        <ul class="list-group"></ul>
      </div>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

And now let's work on index.js

In this file, we will handle changes in text input and then send http request to the server and finally, we display results

First we are going to mock an API to be able to send HTTP requests according to the text typed and receive responses with the help of json-server.

npm i json-server

Then we create a db.json file with some data.

{
"Clubs":[
    {"name":"Everton","year":"1878"},
    {"name":"Fulham","year":"1879"},
    {"name":"Manchester city","year":"1880"},
    {"name":"Manchester united","year":"1878"},
    {"name":"Tottenham","year":"1882"},
    {"name":"Aston villa","year":"1874"},
    {"name":"Leeds united","year":"1919"}, 
    {"name":"Liverpool","year":"1892"},
    {"name":"Arsenal","year":"1886"}, 
    {"name":"Chelsea","year":"1905"}
]
}

In the package.json file, we add in the scripts tag this command

    "server": "json-server db.json --port 3000"

we are allowed then to run the server with:

npm run server

and the server is ready to handle requests.

Now let's move to the next part and install rxjs.

npm i rxjs

We take now the text input to be able to add an event listener to this element and this through fromEvent function (from rxjs) that emits events of a specific type (keyup) coming from the given target in our case text input element(inputTxt).

import { fromEvent} from "rxjs";
let inputTxt = document.getElementById("text-input");
let textChange$ = fromEvent(inputTxt, "keyup");

Now we are listening to inputTxt, whatever key is typed an event will be fired.

In autocomplete feature, usually, we don't send HTTP request for each character, in other words, we wait an amount of time to see if the user add another character to the input, also, we don't send similar requests in a row to get better performance.
Therefore we are going to use the pipe function to apply the required functionality to the observable stream.

map: returns an observable by applying a project function to each value emitted by the source observable. This allows us to retrieve from target event only text value

debounceTime: returns an observable that emits values after only a particular time span in ms has passed without another source emission.

distinctUntilChanged: returns an observable that emits values only if it is different from the previous one.

mergeMap: returns an observable that emits values by applying a specific function, it is the combination between mergeAll and map. The function to be applied in our case is the HTTP request made using fetch API that takes URL endpoint input and sends back a JSON response. Fetch function is called only if the value is not falsy else an empty array will be sent back.

Understanding map,mergeMap,switchMap,concatMap

import {
  debounceTime,
  map,
  distinctUntilChanged,
  mergeMap,
} from "rxjs/operators";
import { fromEvent, of } from "rxjs";

let autoSuggest$ = textChange$.pipe(
  map((e) => e.target.value),
  debounceTime(1000),
  distinctUntilChanged(),
  mergeMap((value) =>
    value ? fetch(url + value).then((response) => response.json()) : of([])
  )
);

Now let's handle this event by subscribing to textChanges$ observable.

autoSuggest$.subscribe((v) => {
  let list = document.getElementsByClassName("list-group")[0];
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
  for (let club of v) {
    let li = document.createElement("li");
    let textNode = document.createTextNode(club.name);
    li.setAttribute("class", "list-group-item list-group-item-primary");
    li.appendChild(textNode);
    list.appendChild(li);
  }
});

We removed first previous results, we created a li element, then we iterated through data and created a text node where club names will be displayed, this text node is added to the li element which is added also to the list element.

To be able to run this little project we need a bundling tool, one of the easiest to configure is Parcel.

Then we install parcel.

npm i parcel-bundler

and we added parcel command in script tag with project entry point which is index.html

"dev": "parcel index.html"

Then we can run input autocomplete, and don't forget to launch our JSON server

npm run server
npm run dev

Full github repo

How to iterate through objects in JAVASCRIPT ?

Hssan Bouzlima — Sat, 13 Mar 2021 10:41:22 +0000

Given an object range={a:1,b:2,c:3}
How can we iterate through this object?
It is not possible since objects are not iterable therefore we can't use for .. of loop and spread operator, and if we try, it gives us this error:

TypeError: Found non-callable @@iterator

When we use for .. of loop with objects, its @@iterator method is called. Yet, objects do not have a built-in iterator method like arrays and strings. Therefore, we need to implement the default iterator by ourselves.

To do that we need to add an attribute Symbol.iterator containing a function specifying how to iterate through this object which gets called when we iterate through the object and must return an iterator

Iterator is simply an object that contains a next() method that returns an object, this object has two attributes :

done: a boolean specifying if we reach the last value or not.
value: specifying the next value in the iteration.

And before that, we need to retrieve different values of objects with Object.values() to be returned and the length of object to check if we get to the last value and index specifying the current value.

The function is illustrated in the code below.

range[Symbol.iterator] = function () {
  let values = Object.values(this);
  let index = 0;
  let length = values.length;
  return {
    next: () => {
      return index < length
        ? { done: false, value: values[index++] }
        : { done: true, value: undefined };
    },
  };
};

Now we are able to iterate through this object through for .. of loop and spread operator.

console.log(...range); 
// 1 5 6 8 

for (let x of range) {
  console.log(x);
} 
//1
//5
//6
//8

More details:
Symbol.Iterator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator

Iterator protocol: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol

DEV Community: Hssan Bouzlima

[Boost]

Building a chat app: Chatrooms with Nodejs Websockets and Vue (PART 1)

Hssan Bouzlima ・ Mar 4

Building a chat app: Chatrooms with Nodejs websockets and Vue (PART 2)

Table of contents

Project structure

Create a room, join a room and create an account: Slots

Input validation

Auth guard

Sockets

State management

Composables

Load messages

Load strategy

Private chat

Profile

Deployment

It's live !🥳

Building a chat app: Chatrooms with Nodejs Websockets and Vue (PART 1)

Table of contents

Project structure:

Local environment:

Features

Auth strategy

Create a room

Join a room

Cookie

Chat

listeners/index.js

socket middleware

register event listeners

connected users

Asset management

Scalability

Logging

Deployment

And we are ready🔥

5 Git commands you should know 🚀

Git reset.

git revert

git rebase

git rebase -i

git log

Conclusion

Applying factory method pattern: Vuejs with firebase and supabase use case

1-Factory Method pattern:

2-Factory method pattern in typescript:

Design our specific use case

Code implementation:

3-Inject a database instance into Vue:

Dependency injection with Pinia

4-Notes:

5-Conclusion:

Vuejs composables: hands-on examples

What are composables?

Composables examples:

1. Basic composable

2.Composable with returned methods:

3.Composable with arguments:

Composables advantages:

Conclusion:

switchMap, mergeMap, concatMap, and exhaustMap like you have never seen

mergeMap 🤯

concatMap 😇

exhaustMap 🙄

switchMap 😈

Intro to asynchrounous javascript: Promises - Async/await

Promises:

CREATE YOUR PROMISE:

PROMISE EXECUTION:

Async/Await:

Asynchrounous Javascript :

How to create a custom modal in angular

I) Introduction

II) Modal elements

1)Modal service

openModal

closeModal :

confirm :