I recently built a search form, pulling data from an Elasticsearch index to  display search results. I wanted to explain the concept, my goals, and the outcome. This is a basic example of using Elastic for searching, and through this exercise I feel more comfortable tackling more complex use cases in the future.

Below is an example index seen in ElasticVue chrome extension (https://elasticvue.com/). ID's and other data points are blocked to protect the data, but the general structure of the index is still visible. In this example, we can see there is a list of contracts that each have an ID, a CreatedByContactID, a BillingContact, and a BillingContactID.

Let's say this search allows us to input a contact ID, and we want to see the contracts that have a CreatedByContactID or BillingContactID with this value, and we also want to filter any results based on other input criteria, such as a billing contact name and a contract ID (the _id field).

To do this filtering and data extraction from the index, we'll construct a boolean query (https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-bool-query.html), which will allow specifying many different types of fields that we want to search on.

The scoring assigned for this query (aka the calculated relevance of the result) favors matches within the must clause. I can also add filters to this boolean query, although these will not affect the score of the documents returned.

I built a sample form in React as a UI for the searching. Suppose this is my form, and my React application takes in values for each of the fields specified. Within my app, I can take these values and build a query to search the records in my index.

Without going to deep into the infrastructure, I can construct my query in Typescript using an Elasticsearch client (https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html) to make search calls to the existing Elasticsearch index I connect to.

Simply put, this client provides a ".search()" method I will be calling with the constructed query to bring data back to my UI.

Because my query will check on two fields for the same value, I plan to add a multi-match query that checks two fields on the index for the same value. For this particular multi_match, I specified a cross_fields type because I want the input contact ID to check either of the contact fields for that ID. Because I place this multi_match within a 'must' query, these fields must match the id specified and will contribute to the score of the documents returned.

The extra filters will be added to my elastic query simply as filters to search on. These filters must appear in the documents to be returned, and as mentioned earlier, these filters will not contribute to the calculated score of the results.

First, I can build an array of search filters that will be passed back to the query that we will pass into the Elastic client. Each filter has a term and a value to search on.

To add the filters (the ID and Billing Contact), I can push elements to the array.

I can construct the multi-match 'must' fields array similarly.

Assuming we have an existing elasticSearchClient built (please see Elasticsearch documentation to learn how to construct a client for searching), we can pass all of our specifications in and hopefully get back some data from the index.

The output of this code should match the query I outlined at the top of this article. I can use the results in my application and present them back to the user, who will hopefully be seeing the contracts they expected :)

Overall, I learned a lot about constructing queries based on an Elastic index and how to pull out the data I need. I hope this was informative and painted a clearer picture of the concept of constructing boolean queries with bool, must, filter and multi_match queries, especially for those newer to Elasticsearch. I can see how this would be beneficial for quick access to large sets of data and I'm excited to play around more with Elasticsearch.

Thanks for reading and as always feel free to share any thoughts!

Using an Elasticsearch client with Typescript and React to search for data

One day, I decided to incorporate modern path aliases in my TypeScript project. I didn't expect it would be such a challenging journey! You are welcome to read the details ⏬

Attempt #5: Custom Conditions to the Rescue


Update TypeScript Configuration
Update Vitest Configuration
Other Tools

Subpath imports are a native feature in Node.js that allows to define aliases for internal paths in a codebase.

You can set up a subpath import to simplify this to:

In TypeScript, there is an older way for setting up aliases via paths option. Although it works fine for TypeScript itself, the problem is that Node.js is not aware of this config. You need to use third party packages to run compiled code (tsconfig-paths, tsc-alias).

Great news is that since v4.8 TypeScript added support for subpath imports. While the concept sounds straightforward, integrating subpath imports in my test project was tricky. I'll walk through all the issues step by step and share the final solution. Let's start.

src and test contain the source code and unit tests respectively

tsconfig.json for type-checking the entire project

tsconfig.build.json for compiling the source code from src into the dist directory

vitest.config.mts for running unit tests with vitest

Initially, this project does not use subpath imports. src/index.ts uses relative path to import constant from utils:

In the test directory there is also import of utils by relative path:

There are a few npm scripts in package.json, that successfully run in the initial project state:

I will use these commands as a checklist to ensure everything works after setting up subpath imports.

Also, I will check in VSCode that CMD / CTRL + click on utils import navigates to the file contents.

My first step was to follow the samples from Node.js documentation. I've added an imports field to the package.json and set alias for the src directory.

and used that alias in src/index.ts and test/index.spec.ts:

After making these changes, all commands worked except the npm start, which failed with the following error:

The problem occurred because Node.js was looking for the utils.js in the src directory instead of the dist directory. Since the project is meant to run from the dist directory, Node.js couldn’t find the required file.

To fix this, I adjusted the imports field in package.json to point to the dist directory instead of src:

Initially, this change seemed to work. However, once I deleted the dist directory, everything got broken! VSCode could no longer find the #utils.js module, and TypeScript showed an error:

The root cause was that TypeScript and VSCode couldn’t resolve the alias because the files in the dist directory are missing.

A chicken-and-egg problem - source files refer compiled files to get compiled files 🤪

To address that issue TypeScript documentation recommends setting the rootDir and outDir options in tsconfig.json.

I've added the rootDir and outDir options:

The idea here is following: when TypeScript knows the source and destination directories of compiled files, it can re-map import aliases to the source location.

In my case, #utils.js will be first resolved to ./dist/utils.js and then re-mapped to ./src/utils.ts.

However, when I ran tsc, TypeScript threw the following error:

To resolve this, I had to narrow the include option to src/**/*.ts:

The downside - now TypeScript config is applied only to src directory and files in test are excluded. VSCode could no longer resolve click on #utils.js import in the test directory, and vitest throws an error:

The first potential solution was to point rootDir to "." instead of src to cover the entire project:

However, that also didn’t help. When I ran tsc, TypeScript still complained:

Now the reason was different. When rootDir was set to ".", TypeScript replicated whole project structure inside the dist directory, resulting in:

But the imports field in package.json pointed to dist/utils.js, not dist/src/utils.js.

Okey. I've adjusted the imports field to point to dist/src:

This change allowed tsc to work correctly, and VSCode could now navigate to utils.js in src.

However, when I tried to build the project with npm run build, I've got an error:

The issue was that tsconfig.build.json still had rootDir pointed to src. I've updated rootDir to "." in tsconfig.build.ts as well:

Now, TypeScript is happy, and I could compile and build the project! 🎉
Yes, it introduced extra nesting inside the dist directory. Previously, the dist directory looked like this:

Not a big deal, I'm ready to accept that!

It's because only TypeScript is aware of the rootDir and outDir re-mapping. All other tools, like Vitest, didn’t recognize the mapping, leading to runtime errors when trying to resolve the #utils.js from the test directory.

I was stuck. I was going to give up on those mysterious subpath imports and return to TypeScript path aliases. But after reading more documentation and GitHub issues, I found a solution!

Attempt #5: Custom Conditions to the Rescue

According to Node.js docs, you can map single import alias to several locations via object:

Keys of that object are called conditions. There are built-in conditions like default, require or import, but also there can be any custom string, defined by user.

I've modified the imports field in package.json to include a custom condition my-package-dev pointing to src and kept default condition pointing to dist:

So, there are two ways for resolving # imports:

my-package-dev - tells Node.js to resolve paths from the src directory when condition is enabled (during development)

default - fallback option to resolve paths from the dist directory when no specific condition is provided

Note: I intentionally named my condition my-package-dev, not just dev. This is important for library authors. If your consumers run their project with dev condition, your package in node_modules will consider that condition as well and will try to resolve files from src! If you develop end users app, you can use dev or development as a condition name.

Now I need to let TypeScript know about my custom condition.  Luckily, tsconfig.json provides a customConditions option for that. I've reverted all the changes made in the previous steps and added customConditions field:

With this setup, TypeScript correctly resolves subpath imports from the src directory even without rootDir and outDir options. VSCode also correctly navigates to utils.ts location.

Vitest also supports providing custom conditions. I've set resolve.conditions in vitest.config.mts:

After this change, vitest was resolving files from src directory ensuring I check actual code during tests:

For other tools, you should check their documentation on custom conditions support. I've tried to run my project with tsx. As it supports all Node.js flags, I've just provided custom condition via -C flag:

I can recommend a comprehensive overview of subpath imports support in different tools and IDEs.

It was a challenging journey to setup subpath imports. Especially when ensuring compatibility across the development flow, testing tools, IDE support and production run 😜

However, the result is successful, and the final setup is not something very complex. I'm confident, subpath imports will eventually become a default way for aliasing in Node.js projects. I hope this article saves you time!

I've published a final working example on GitHub, you are welcome to check it out. Thanks for reading and happy coding! ❤️

Setting up Subpath Import Aliases in a TypeScript Project

When building modern web applications, forms often become a critical part of the user experience. Whether it's gathering user data, providing a multi-step wizard, or building an interactive survey, the challenge of creating dynamic and responsive forms can quickly become overwhelming. Enter Formity, an npm package that takes the pain out of form creation in React.

Formity is an advanced form-building package designed to help React developers create dynamic, multi-step forms with ease. What makes Formity stand out from other form libraries is its ability to adapt the form's questions based on the user's previous answers. This powerful feature allows developers to create highly personalized and interactive forms without getting bogged down in complex conditional logic or unwieldy code.

The standout feature of Formity is its dynamic nature. Imagine you're building a multi-step form where each step asks a series of questions, and the next step's questions depend entirely on the answers provided in the previous step. Formity makes this not only possible but also straightforward.

For example, suppose you're building a customer survey where you want to ask follow-up questions based on the user's initial responses. With Formity, you can easily define your form's structure in JSON, specifying which questions should appear under what conditions. This level of flexibility is a game-changer for developers looking to create complex, interactive forms without writing an extensive amount of custom code.

Ready to give Formity a try? Head over to formity.app to get started. You can find detailed documentation, examples, and everything you need to integrate Formity into your next React project.

Building dynamic forms doesn’t have to be a headache. With Formity, you can create powerful, interactive forms that respond to your users' needs, all while keeping your code clean and maintainable. Check out formity.app and see how it can revolutionize your form-building process.

Creating Dynamic, Multi-Step Forms in React with Formity

Have you had seen an application in your computer where you need to upload a file? And instead of clicking it you just open your folder and drag and drop it in the place and i suddenly accepts it?

And now that you are a making your project you want to implement it but how?

Making the input 
When making an input make sure to have label in it, Because the label is the one who are gonna be seen and we are gonna hide the input in this tutorial

Make sure that the input has a hidden as a prop if you want the labels to be used and now show the inputs

Design The Label
if you want to have some sort of design then you can go design the label or even the input if it does not contain hidden in your code

this is my design and yes im bad at designing LOL

handleFileChange - This is Responsible for the onChange Event of the files even though its hidden. this is what you will use as default without drag and drop.

handleDrop - This is Responsible for the drop files by the users.

handleDragOver -This is Responsible for preventing the default behaviour of the web when you drop files in the input.

This 3 function is necessary for handling the file input of the user whether they use click and just pick the files or Drag and Drop.

Lets now use the function in label and input

onDragOver and Will use handleDragOver function

onDrop and will use the handleDrop function

onChange and will use handleFileChange function

Conclusion
   You probably see this kind of features in most application as it is now requirement for application because of how easy it is to implement and also how it can make your website more user friendly this features is great it is both easy and necessary for all web application that will handle file and also photos.

I hope you learn something new and i hope this article helps you

How to make your website have Drag and Drop Files

Introduction
I have always been fascinated about how things work, imagine my surprise when i started learning about frontend technologies and development. I got to see how websites and applications were built from start to near finish. These websites and applications looked so intricate, interactive and virtually stunning, knowing that they were just 'bare bones' before they got to that point still amazes me. We will be looking at frontend technologies and we will be juxtaposing two of those technologies for better understanding. Before that:

Prerequisites
You will need knowledge of the following concepts:

What is a Frontend Technology?
Frontend technology are those tools, frameworks, libraries, and languages used to create the user interface (UI) and user experience (UX) of a web application or website. This covers everything that users interact with directly in their web browsers, including layouts, designs, graphics, text, and interactive elements.
Here are a list of those various frontend technologies and a brief description about them:

CSS (Cascading Style Sheets): Used to describe the presentation and layout of web pages. It describes how elements or content should be rendered on screen, on paper, in speech, or on other media.

JavaScript: A programming language that is used to add interactivity to a web application or website.

TypeScript: A superset of JavaScript that adds static typing to the language, improving code quality and maintainability.

React : A JavaScript library for building user interfaces, maintained by Facebook.

Angular: A platform and framework for building single-page client applications using HTML and TypeScript, maintained by Google.

Vue.js: A progressive JavaScript framework used to build user interfaces and single-page applications.

Svelte: A modern JavaScript framework that compiles components into highly efficient imperative code that directly manipulates the DOM.

Ember.js: A framework for creating ambitious web applications by providing a comprehensive solution that includes everything from routing to state management.

Backbone.js: A lightweight JavaScript library that provides the minimal structure needed for web applications by including models, views, collections, and routers.

Sass (Syntactically Awesome Stylesheets): A CSS preprocessor that allows you to use variables, nested rules, mixins, and more, to keep your stylesheets well-organized and easy to maintain.

Less: Another CSS preprocessor that extends CSS with dynamic behavior such as variables, mixins, and functions.

Bootstrap: A popular CSS framework that provides a collection of CSS and JavaScript tools for creating responsive and mobile-first web projects.

Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.

Bulma: A modern CSS framework based on Flexbox.

Webpack: A module bundler that takes modules with dependencies and generates static assets representing those modules.

Gulp: A task runner that uses Node.js streams to automate tasks such as minification, compilation, and testing.

Grunt: A JavaScript task runner that automates repetitive tasks like minification, compilation, and linting.

Parcel: A fast, zero-configuration web application bundler.

npm (Node Package Manager):The default package manager for Node.js, used to install and manage JavaScript packages.

Yarn: A package manager that doubles down as project manager, used for managing project dependencies.

Git: A distributed version control system for tracking changes in source code during software development.

GitHub: A web-based platform that uses Git for version control and provides a collaborative environment for developers.

Jest: A delightful JavaScript testing framework with a focus on simplicity.

Mocha: A JavaScript test framework running on Node.js, featuring browser support, asynchronous testing, and more.

Chai: A BDD/TDD assertion library for Node.js and the browser.

Cypress: A next-generation front end testing tool built for the modern web.

Selenium: A portable framework for testing web applications.

Visual Studio Code: A free, open-source code editor developed by Microsoft.

Sublime Text: A sophisticated text editor for code, markup, and prose.

Atom: A hackable text editor for the 21st century, developed by GitHub.

WebStorm: A powerful IDE for modern JavaScript development by JetBrains.

Understanding and mastering these frontend technologies can significantly enhance your ability to build robust, interactive, and visually appealing web applications. As a beginner, always start with the basics - HTML, CSS, and JavaScript before moving on to more advanced frameworks and tools. Going further, we will be looking at the differences between Javascript and Typescript.

Javascript vs Typescript: A beginner's guide

JavaScript (JS) and TypeScript (TS) are both essential technologies for frontend development. Understanding their similarities and differences is crucial for building robust, interactive, and visually appealing web applications and sites.

JavaScript is a programming language that is widely used for web development to create interactive elements within web browsers. It is used to manipulate the DOM, handle events, create animations, and make asynchronous requests (AJAX) to servers. JavaScript is dynamically typed; meaning variable types are determined at runtime, which offers great flexibility but can lead to errors that are hard to debug. For example:

Pervasive/Ubiquity: Javascript is supported by all modern web browsers. It can be used on all modern web browsers.

Community: Javascript has a large community with plenty of libraries and frameworks (like React, Angular, Vue).

Versatile: Javascript can be used for both client-side and server-side (Node.js) programming.

Error-Prone: Javascript is dynamically typed. Dynamic typing can lead to runtime errors.

Complexity: As projects grow, maintaining JavaScript code can become complex without proper structure and discipline.

TypeScript is a superset of JavaScript that adds static typing and other features to the language. It is designed to develop large applications and transcompiles to JavaScript. TypeScript introduces static types, which allows developers to catch errors at compile-time rather than runtime. For example:

Type Safety: Catches type-related errors during development, reducing runtime errors.

Readability: Improves code readability and maintainability with type annotations.

Tooling: Better support for modern IDEs with autocompletion, refactoring, and navigation.

Learning Curve: Requires learning new concepts if you're coming from JavaScript.

Compilation: Needs to be compiled to JavaScript, adding an extra build step.

What are the differences between Javascript and Typescript

JavaScript is dynamically typed which means that the data type of a variable is determined during runtime. This flexibility can sometimes lead to unexpected errors. Conversely, TypeScript is statically typed which ensures that the data type of a variable is determined at compile time, making TypeScript codes safer and less prone to errors. TypeScript sometimes requires explicit type definitions or uses type inference.

JavaScript, as a dynamically typed language, only detects errors at runtime, which can lead to runtime failures that are harder to debug. TypeScript, being a statically typed language, catches errors during the compile time, making it easier to identify and fix issues early in the development cycle.

JavaScript code is executed directly by web browsers or Node.js without the need for prior compilation. In contrast, TypeScript code must be compiled into JavaScript before it can be executed, which adds an extra step in the development process while enhancing code reliability and error checking.

JavaScript, while powerful, does not inherently provide all the necessary tooling for modern development, as it has evolved developers have created list of tools to improve the development process. TypeScript offers enhanced tooling capabilities such as autocompletion, better tooling, type checking and safety, improved code and more.

JavaScript is faster to write due to less strict rules, and is suitable for quick prototyping. TypeScript on the other hand, may take more time upfront but it results in more robust and maintainable code, especially for large-scale applications.

JavaScript is good for quick Prototyping, like when you need to quickly test ideas and build small applications. It is well-suited for small to medium-sized projects due to its simplicity and flexibility. Typescript on the other hand is used for large projects. It is used when working on large codebases where maintainability and readability are key. It is also also used for team projects or in teams, to ensure consistent code quality and prevent type-related bugs. Many modern frameworks like Angular use TypeScript, and using it can enhance the development experience.

At HNG, React is the Framework(frontend technology)used extensively, React is a Javascript framework that is used to build fast and interactive user interfaces, it is also efficient and flexible. The ability to integrate React with other technologies and frameworks means that it can adapt to a wide range of things, from simple web applications to complex applications. It was first developed by Facebook in 2011.

What is HNG?
HNG is a global internship program that focuses on training young individuals in software development. Participants are given real-world projects to work on and are mentored by industry professionals.

How does the HNG Internship program works?

It is my first experience with HNG and i am exhilarated because i will be challenging myself , so it is both exhilarating and daunting opportunity at the same time. I am also a bit new to React but i have built a couple of things with it. I am looking forward to contributing in no little way to the growth of HNG using the little knowledge i have of React, while also improving on my React skills. I expect to become a part of a team, contribute actively on that team, collaborate with others, build upon my existing knowledge and skills, among other things. Back to how the HNG internship works, To relive your curiosity visit HNG Internship and HNG Hire for more information.

Javascript vs Typescript: The Battle of Frontend Technologies.

Hey there, fellow color enthusiasts! Today, I’m thrilled to introduce you to a vibrant online world that’s sure to ignite your creative spark — colors.azillik.com. This virtual haven is not just a website; it’s a palette of possibilities waiting to be explored.

Explore in-depth

Discover the power of color with colors.azillik! Explore hues in RGB, HEX, CMYK, and HSL. Easily export images, copy CSS and codes, and share with a click. This user-friendly platform lets you deep dive into color details, empowering your creative journey. Unleash your imagination and share your brilliance with the world!

Explore endless color variations at colors.azillik.com/shuffle-swatch. This dynamic tool allows you to generate and experiment with diverse color palettes, perfect for design projects, digital creations, or finding inspiration. With a simple interface and real-time results, unleash your creativity and discover the endless possibilities within the vibrant world of color.

Transform your creativity with colors.azillik’s Image to Colors tool. Simply upload an image, and watch as it extracts a stunning color palette, unlocking a spectrum of possibilities. From design projects to personal inspiration, this feature turns visuals into vibrant color stories with just a click. Explore the magic now!

colors.azillik.com/variation offers a spectrum of creative possibilities with Complementary, Triadic, Tetradic, Compound, Monochrome, and Analogous color variations with HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, LUV, and HWB color. Whether you’re a designer seeking harmony or an artist exploring contrasts, easily manipulate colors in real-time for dynamic and visually striking palettes that enhance your projects.

On colors.azillik.com/color-shades, users delve into a kaleidoscope of color shades, exploring the nuanced spectrum of a chosen hue. The interactive platform empowers creativity, allowing instant real-time adjustments to saturation, brightness, and contrast. Each shade is accompanied by precise hex codes and RGB values, ensuring seamless integration into digital projects.

With the color melody of Analogous Swatch, Complementary Match, Split Complementary, Triadic Color, Tetradic Color, and Square Color, With Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, and Achromatomaly Sight Synthesizer of this space serves as an invaluable tool for designers, artists, and enthusiasts, providing an immersive experience where color becomes a canvas for expression and inspiration of better font and background color with many color and with similar color comparison. Discover the richness of shades and amplify your creative palette on Color Shades at colors.azillik.com.

Embrace the Spectrum
Colors are pivotal in our lives, influencing our moods, perceptions, and even decisions. At Azillik | Color Swatches, you’re not just choosing colors; you’re embarking on a journey through a vast spectrum of hues, shades, and tones. Whether you’re a designer seeking the perfect palette for your next project or someone looking to infuse life into their surroundings, this website has something for everyone.

The Art of Inspiration
One of the standout features of Azillik | Color Swatches is its ability to inspire. The curated color combinations are more than just visually pleasing; they’re a testament to the artistry of color harmonies. Each combination is meticulously crafted to evoke emotions, tell stories, and set the tone for any creative endeavor. With a simple click, you can transport yourself into a world where colors aren’t just seen but felt.

User-Friendly Interface
Navigating through Azillik | Color Swatches is as smooth as blending your favorite colors on a canvas. The user-friendly interface ensures that whether you’re a seasoned designer or a first-time visitor, you can easily find what you’re looking for. The intuitive layout allows you to explore different color palettes, save favorites, and create unique combinations.

Tools for Creativity
colors.azillik goes beyond being a mere color library; it’s a toolbox for unleashing your creativity. The website offers a range of tools and resources to help you experiment with colors, understand color psychology, and elevate your design game. From hex codes for digital projects to RGB values for print, this platform equips you with everything you need to bring your visions to life.

Community of Creatives
What’s an artistic journey without companions? Azillik | Color Swatches fosters a community of creatives who share a passion for colors. Connect with like-minded individuals, exchange ideas, and draw inspiration from the diverse perspectives within this vibrant community. Whether you’re a seasoned professional or a budding artist, there’s always room for you in this colorful gathering.

Conclusion
In a world that often seems black and white, Azillik | Color Swatches adds a splash of color to your digital canvas. It’s not just a website; it’s an invitation to explore, create, and connect. So, whether you’re designing a website, redecorating your home, or simply looking for inspiration, dive into the world of Azillik | Color Swatches and let your creativity run wild. Your masterpiece awaits!

Exploring Creative Color Palettes on Azillik Colors

In the previously article of this series I covered about the Observer Pattern. Today, I want to share with you the Publisher and Subscriber pattern, or the PubSub for the closest friends. I highly recommend reading and understanding the Observer Pattern before continuing this quest.

The PubSub Pattern is a messaging pattern that promotes loose coupling and scalability. This pattern revolves around dispatching messages from publishers to an unspecified number of subscribers or listeners, thereby promoting a many-to-many dependency between objects.

Let’s consider a chat group application. The Pub/Sub system can handle the sending and receiving of messages efficiently:

When a chat window is opened, it subscribes to an event, such as  newMessage.

This is done using pubsub.subscribe("newMessage", callback). The callback function is what will be executed when a new message is published to the newMessage event. In this case, the callback logs the new message and updates the chat UI.

When a user sends a message, it is published to the newMessage event using pubsub.publish("newMessage", messageData). All chat windows subscribed to the newMessage topic will have their callback functions executed with the new message as the argument.

When a user sends a message, it's published to the newMessage event using pubsub.publish("newMessage", messageData). All chat windows subscribed to the newMessage topic will have their callback functions executed with the new message as the argument.

In this way, the Pub/Sub system allows for the decoupling of chat windows (subscribers) and message senders (publishers). The chat windows don't need to know about who sends messages (like we saw on the previously post about the observer pattern), they just need to know what to do when a message is received.

Similarly, message senders don’t need to know who will receive the messages; they just need to send messages to the right topic.

To construct a PubSub system, we need to maintain a record of events or 'topics' and their respective subscribers. This can be done with a simple JavaScript object. When a new message is published, we look up the associated subscribers and execute their callback functions. This allows for a dynamic and flexible system where publishers and subscribers can be added or removed at runtime.

The PubSub class has a static events property, which is an object that will store all the events (or topics) and their corresponding subscribers (callback functions).

The subscribe method is used to register a new subscriber for a given event. It takes an event name and a callback function as arguments. If the event does not exist yet, it initializes it as an empty array in the events object. Then, it adds the callback function into the array of callbacks for the given event.

The publish method is used to publish new data to an event. It takes an event name and the data to be published as arguments. If the event does not exist or there are no subscribers for this event, it simply returns and does nothing. If there are subscribers, it calls each subscriber's callback function, passing the published data as an argument.

In the context of a chat application, the subscribe method would be used to register a new chat window that should receive new messages, and the publish method would be used to send a new message to all chat windows that have subscribed to receive new messages.

You can read more about how to use the publish and subscribe method across devices with the article: Understanding and implementing Event-Driven Communication in Front-End Development.

This is an important part of the architectural of a software development, and yet, in the majority of cases, not the business core of what you are building. Creating a reliable and scalable PubSub system that syncs data between different instances of our application can be challenging.

We are in 2024, meaning that there is already a solution to it: the Real-time Data Engine tools, specifically the SuperViz SDK. It offers a real-time collaboration and communication SDK and API, designed for developers building real-time web applications.

Using SuperViz you can create a room with several participants that when publishing an event it will be broadcasted to all the participants in the room that are accessing it through different devices and networks. This means that any updates made by one participant will be reflected in real time across all devices, providing a seamless and collaborative experience.

SuperViz provides the infrastructure necessary to build real-time, collaborative applications. This includes the ability to also catch this events on your backend using webhooks, and as well to publish an event with a simple HTTP Request, to name a few features.

Please let me know in the comments what other design patterns you would like to learn about, and don’t forget to share your knowledge!

Design Pattern #4 - Publisher/Subscriber Pattern

The following is a tale of how we discovered and fixed a variety of reliability and performance issues in our Node.js application that were caused by Node.js event loop lag.

We are Trigger.dev, a background job platform with no timeouts for TypeScript developers. Check us out on GitHub and give us a ⭐

At around 11pm local time (10pm UTC) on Thursday June 20, we were alerted to some issues in our production services powering the Trigger.dev cloud, as some of our dashboard/API instances started crashing.

Blogs