Skip to main content

React JS Portals

Portals


What are portals and why do we need another fancy terminology for a web app?

The need

In software development, be it in the server side development or client side development, the best practice that we follow is to identify and isolate the cross-cutting concerns and then use them in a separate library or package or module. This helps us test the implementation and also plug-in any newer version if the old version does need an upgrade and also to make them accessible at a global level.

HTML & Cross-Cutting Concerns

In the case of HTML, we have all been working in the rendering of the various elements in the DOM not worrying about the location of certain DOM elements and with the advent of many frameworks, we have got control on the logic and the rendering is taken care of by the framework (React, Angular etc..)

However, in case of HTML we have several components like dialogs, modals, alerts, info etc which we kind of duplicate across various HTML fragments (through components)

In order to centralize them and theme them and make them globally available, we need to find out their occurrences, study their patterns of usage and then apply the abstraction and bring them to the DOM in such a way that they can be invoked anywhere (by any component) thereby also maintaining the goodness of the implementations.

Worth of this effort

This effort is definitely worthwhile from the point of view of maintainability and clean code perspectives. We have better knowledge of how the components interact with each other and where components are used and how to use them

Not Clear?

Let's take a look at sample as given below. There is a web app which has dialogs to display information, warning or error messages to the end user from within components. The current implementation uses dialogs at the component level, meaning that if there are 5 components in a page, there will be different dialogs present for each component.



The diagram above shows the dialog component within the context of a user management component. Similar ones can be found within the customer / order like components that are used in the page.

We can make the dialog component central and have it a fixed location in the DOM so that any component can be able to leverage the dialog without owning them is a good to have feature, which is accomplished as below,


The above is achieved using React Portal which helps us to create a portal or port a component outside the component container so that it can be easily be used by any component.

In React, the "root" is the component container that contains all the rendered component DOM elements. The dialog is available outside of the root. However being outside of the root, are we still able to control the dialog, the answer is YES.

Portals

The portals help us identify such kind of components and have them outside the component boundary and be accessible.

The sample code to create a portal is to just elevate a component to a particular DOM element container



As shown above, we are creating an Overlay component inside the dialog DOM container so that it can be used as a portal.
The presence of the container divs in the DOM is as shown below in the index.html page

I will try to share the code in a github repository for reference. 

A well understood concept goes places rather than a solution for a specific problem :)

Happy Development.
Labels:

Comments

Post a Comment

Popular posts from this blog

User Authentication schemes in a Multi-Tenant SaaS Application

User Authentication in Multi-Tenant SaaS Apps Introduction We will cover few scenarios that we can follow to perform the user authentication in a Multi-Tenant SaaS application. Scenario 1 - Global Users Authentication with Tenancy and Tenant forwarding In this scheme, we have the SaaS Provider Authentication gateway that takes care of Authentication of the users by performing the following steps Tenant Identification User Authentication User Authorization Forwarding the user to the tenant application / tenant pages in the SaaS App This demands that the SaaS provider authentication gateway be a scalable microservice that can take care of the load across all tenants. The database partitioning (horizontal or other means) is left upto the SaaS provider Service. Scenario 2 - Global Tenant Identification and User Authentication forwarding   In the above scenario, the tenant identification happens on part of the SaaS provider Tenant Identification gateway. Post which, the
Post a Comment
Read more

Handling exceptions in the Executor service threads in Java

Introduction This is a continuation post on the exception handling strategies in the threads in Java. For Introduction, please read this post The second post is available here This post addresses the problem statement "How to use the exception handlers in the threads spawned by the Executor Service in Java?" Not all times, we will be using Thread  classes to run our threads because we have to manage a lot of the underlying logic for managing threads. There is ExecutorService in Java which comes to the rescue for the above problem. In the previous posts, we have discussed on how to handle the exceptions in plain threads. However, when using executor service, we do not create / manage threads, so how do we handle exception in this case. We have a ThreadFactory   as an argument which can be used to customize the way threads are created for use within the ExecutorService . The below snippet of code leverages this feature to illustrate the exception handling, wherein we create a
Post a Comment
Read more

Download CSV file using JavaScript fetch API

Downloading a CSV File from an API Using JavaScript Fetch API: A Step-by-Step Guide Introduction: Downloading files from an API is a common task in web development. This article walks you through the process of downloading a CSV file from an API using the Fetch API in JavaScript. We'll cover the basics of making API requests and handling file downloads, complete with a sample code snippet. Prerequisites: Ensure you have a basic understanding of JavaScript and web APIs. No additional libraries are required for this tutorial. Step 1: Creating the HTML Structure: Start by creating a simple HTML structure that includes a button to initiate the file download. <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > CSV File Download </ title > </ head > < body >
Post a Comment
Read more

SFTP and File Upload in SFTP using C# and Tamir. SShSharp

The right choice of SFTP Server for Windows OS Follow the following steps, 1. Download the server version from here . The application is here 2. Provide the Username, password and root path, i.e. the ftp destination. 3. The screen shot is given below for reference. 4. Now download the CoreFTP client from this link 5. The client settings will be as in this screen shot: 6. Now the code to upload files via SFTP will be as follows. //ip of the local machine and the username and password along with the file to be uploaded via SFTP. FileUploadUsingSftp("172.24.120.87", "ftpserveruser", "123456", @"D:\", @"Web.config"); private static void FileUploadUsingSftp(string FtpAddress, string FtpUserName, string FtpPassword, string FilePath, string FileName) { Sftp sftp = null; try { // Create instance for Sftp to upload given files using given credentials sf
2 comments
Read more

Async implementation in Blazor

Step-by-Step Guide to Achieving Async Flows in Blazor: 1. Understanding Asynchronous Programming: Before delving into Blazor-specific async flows, it's crucial to understand asynchronous programming concepts like async and await . Asynchronous operations help improve the responsiveness of your UI by not blocking the main thread. 2. Blazor Component Lifecycle: Blazor components have their lifecycle methods. The OnInitializedAsync , OnParametersSetAsync , and OnAfterRenderAsync methods allow you to implement asynchronous operations during various stages of a component's lifecycle. 3. Asynchronous API Calls: Performing asynchronous API calls is a common scenario in web applications. You can use HttpClient to make HTTP requests asynchronously. For example, fetching data from a remote server: @page "/fetchdata" @inject HttpClient Http @ if (forecasts == null ) { <p> < em > Loading... </ em > </ p > } else { <table>
Post a Comment
Read more