Web Dev

GraphQL vs. REST - a quick dive

How To Secure Your GraphQL API

Top 10 JavaScript CSV Parsers

What's the big deal with GitOps? A quick introduction

Cloud

Firebase vs. Digital Ocean App Platform vs. AWS Amplify  

Supabase vs. Firebase - which one is better?

Is Supabase your new Firebase alternative?

Getting Started With AWS Amplify

Frontend

What are CSS Modules and how to use it in React 

How modal dialogs work and how to add them to your React app

  Angular vs. React vs. Vue - A Quick Look

Aphinya Dechalert

First came DevOps. Then DevSecOps. Now, the latest 'it' thing is GitOps. While it may sound like another buzzword, its usage is rather useful. But what exactly is GitOps? Why does GitOps matter? Is GitOps just another trend, or is it something that you can leverage for your apps and software development processes?

## What is GitOps? 

There are two parts to GitOps - the `git` part, and the `Ops` side of things. In a nutshell, GitOps is a code-based infrastructure that relies on Git as a single source of truth. If this single source of truth changes, so does the deployed product. It also means that the app's infrastructure and systems are reproducible with the ability to create synchronous updates.  

GitOps is also a way of controlling the way systems are automatically created, updated, and deleted. You can use pull requests as part of the automated deployment processes to configure and set the infrastructure. 

The act of having a single source of truth and running everything from a centralized deployment resource may sound like the intuitive thing to do - it hasn't always been the case. 

## The concept of DevOps vs. reality

In reality, most systems are implemented via manual deployments with manual hardware management. This includes the task of connecting and provisioning machines, creating layers, and provisioning APIs with load balancers. This often involves large amounts of manual configuration work with various scripts living in different spaces. When an app is small, this method appears manageable. However, if the team composition changes through growth or system admins leaving, it can cause havoc by leaving knowledge gaps to create systems knowledge decay.

DevOps migrated this issue over to the developer. GitOps truly solves this issue through an enforced single source of truth. It allows the team to collectively version control the system, track and apply any systems modifications. Histories can be reviewed, which also gives the ability to audit and identify when security vulnerabilities, bugs, and any other issues are introduced.

At its core, GitOps is a method of implementing continuous deployment that requires minimal intervention once it's set up. This is the major difference between DevOps and GitOps. With DevOps, there is a process of tinkering and intervention involved to get things into production. GitOps, in contrast, involves only setting up the pipeline and ship code directly into different spaces once a code merge is approved. 

## How GitOps work

On the surface, GitOps is a simple concept. It's the process of centralizing your code, documentation, and infrastructure around a version control system (in our case, it is Git) so that it can be automated and deployed.

But how exactly do GitOps works?

Imagine that you have a project. Someone on the team does a pull request, edits the code, issues a merge request. Once the code is approved and the merge request is completed, the automated GitOps operator detects the change, another automater declares the change as operational, then it gets deployed. Once the pipeline is set up, there isn't a requirement for any manual intervention. 

## The good parts of GitOps

### Declarative system

The process of deploying code to infrastructure is often done through a series of steps. This can cause issues if the order generates a different set of responses that are divergent from the expected norm.

In contrast, GitOps relies on a series of *facts* to deploy. The app's declarations are stored and versioned in Git, and the order of *facts* implementation is not a vital part - only that the end result is what is stated and expected. This allows for cluster infrastructures to be deployed or rolled back with speed.

### System state versioning

Using Git as the single source of truth also means that versions are canonical. Rollbacks are simplified through a simple git `revert`, which is going back to the previous application state. Commits can be signed to enforce authorship and traceability for larger teams. 

### Approved changes automatically applied

Once the code is merged, changes will be automatically applied through triggers that implement the CI/CD workflows. This means that once your code is committed and merged to the target branch, there is no need to do anything else to deploy.

## The bad parts of GitOps

### Lack of secret management

It's unsafe to store secrets in Git repositories. Why? Because it extends the scope of accessibility to people and spaces that may not need it. The purpose of secrets is to create security layers and boundaries. If secrets such as private keys are exposed, it creates a vulnerability for your application. The security issue and scope of the breach also increase if the key is non-revocable. 

### Not designed for programmatic updates

Git is designed for manual editing and conflict resolutions. This means that if you have an app that requires frequent updates, Git would be unsuitable especially if updates are occurring in parallel and by multiple parties. Git's linear processes are great for smaller teams but can cause issues if multiple teams are working on the same repository and branches. 

### Struggles with complexity

As your teams and environments grow, so do the number of GitOps repositories and application environments required to be supported. This means that every repository requires access rights configuration, management, and maintenance. As the complexity and number of Git repositories grow, so does the time spent on creating automation and provisioning of GitOps repositories. 

## Wrapping up 

GitOps is loved by smaller projects and startups because of the agility it can bring to a project. While it's being touted as 'the next big thing' in automation, GitOps is more a natural progression towards decoupling the developer from infrastructure work. 

The aim of DevOps and GitOps are the same - to help the developer deploy apps as quickly and with minimal friction. As new products, services, and ideas becomes available, so do the techniques of achieving this. GitOps is one of the multiple ways a developer can achieve automated deployment. If you're already using git, making updates to your app becomes a streamlined process that doesn't require any additional manual deployments once the pipeline is set up. 

CSV - love them or hate them, they are part of many businesses and how they operate. These comma-separated values come in the form of a text file with a specific format that allows for data to be translated into a tabulated structure when imported into spreadsheet software and apps such as Excel and Google Sheets. These table-based reports are often used by analysts, accountants, commercial, and marketing to view, add, and manipulate. 

As developers, a majority of us work primarily with JSON, making CSV an incompatible dataset. We cannot easily filter it in its raw form or hook into the data the way we can with JSON.

This is where JavaScript CSV parsers come in. For JavaScript-based apps, CSV parsers are bridging libraries that translate tabular data into JSON compatible formats. 

Here are the top 10 free JavaScript CSV parsers that you can use for your next (or current) project that contains comma-separated values.

## 1. fast-csv

[`fast-csv`](https://www.npmjs.com/package/fast-csv) is a CSV parser and formatter that combines two other popular packages ([`@fast-csv/format`](https://c2fo.io/fast-csv/docs/formatting/getting-started) and [`@fast-csv/parse`](https://c2fo.io/fast-csv/docs/parsing/getting-started)) together to form a single package for node.js. It has grown dramatically over the past few years from 0 to approximately 153k downloads per week. `fast-csv` is also actively maintained with monthly updates and great documentation.

Features of `fast-csv` include CSV formatting, parsing, flexible formatting, and parsing options. 

To install `fast-csv`, use the following command:

```nginx
npm i -S fast-csv
```

## 2. xlsx - SheetJS

[`xlsx`](https://sheetjs.com/) , also known as `SheetJS`, ranks as one of the most popular JavaScript CSV parsers. However, it is not a completely 'free' library but more a freemium starter library with options to upgrade to a pro version for commercial support. 

The free version is intensely popular with more than a quarter-million downloads each week and over 100 contributors to the library. The documentation is not as extensive as `fast-csv` but adequate enough to get you started and do what you need.

`xlsx` also comes demo directories that give sample implementation into major frameworks and libraries such as Angular, Ionic, knockout, meteor, React, React Native, Vue, and nodeJS. 

To install `xlsx`, use the following command:

```nginx
npm install xlsx
```

## 3. papaparse

[`papaparse`](https://www.papaparse.com/) is an MIT license and open-sourced CSV parser library with great documentation and easy-to-use implementations. It has zero dependencies and can work as a stand-alone library that is able to parse CSV files directly in a local environment or stream larger files. 

There is also the ability to pause, resume, and abort data transfers and CSV parsing, convert numbers and booleans into types. `papaparse` was created with NodeJS in mind, allowing for readable streams instead of just accepting data via a file.

To install `papaparse`, use the following command:

```nginx
npm install papaparse
```

## 4. json-2-csv

It's one thing to go from CSV to JSON - but what about JSON to CSV? The ability to export CSV can be achieved with [`json-2-csv`](https://github.com/mrodrig/json-2-csv) library that lets you convert JSON and CSV data in both directions.

`json-2-csv` also supports sub-documents, custom ordering of columns, and the ability to re-generate JSON documents that were used to generate the CSV. Its ability to handle nesting is fairly extensive and function.

To install `json-2-csv`, use the following command:

```nginx
npm install json-2-csv
```

## 5. csvtojson

[`csvtojson`](https://github.com/Keyang/node-csvtojson) is a library that is modular and comprehensive in its handling of CSV. The library is to parse CSV to JSON or column arrays. In addition to being a library, it can also be used as a command line tool or directly in the browser for quick and targeted parsing.

`csvtojson` is built on `bluebird` (a promise library), `lodash` (utility library), and `strip-bom` (a UTF-8 byte order mark from a string) in order to deliver streaming capabilities and enable asynchronous integrations. 

To install `csvtojson`, use the following command:

```nginx
npm install csvtojson
```

## 6. csv-parser

[`csv-parser`](https://github.com/mafintosh/csv-parser)  is a library that lets you convert CSV to JSON at the rate of around 90,000 rows per second. It also has the ability to convert CSV to JSON via the command line using `csv-parser [filename?] [options]`

The library is MIT licensed and is downloaded at the rate of approximately 100k per week. With the help of [browserify](https://browserify.org/), `csv-parser` can also be used in the browser. 

To install `csv-parser`, use the following command:

```nginx
npm install csv-parser
```

## 7. csv

[`csv`](https://csv.js.org/) is a collection of packages that can be used as stand-alone implementations or together based on the requirements. `csv` is the umbrella package that contains four other packages. 

To install `csv`, use the following command:

```nginx
npm install csv
```

The above will also install the following (which can be installed as separate packages if not everything is required):

- [csv-generate](https://csv.js.org/generate/) - a flexible CSV string and JavaScript objects generator. To install `csv-generate`, use the following command:

    ```nginx
    npm install csv-generate
    ```

- [csv-parse](https://csv.js.org/parse/) - a reader that allows your app to read CSV strings, buffers, and write objects and arrays. To install `csv-parse`, use the following command:

    ```nginx
    npm install csv-parse
    ```

- [csv-stringify](https://csv.js.org/stringify/) - a stringifier that converts records into CSV text. To install `csv-stringify`, use the following command:

    ```nginx
    npm install csv-stringify
    ```

- [stream-transform](https://csv.js.org/transform/)`- a simple object transformation framework for nodeJS. To install `stream-transform`, use the following command:

  ```nginx
  npm install stream-transform
  ```

## 8. nest-csv-parser

[`nest-csv-parser`](https://github.com/mCzolko/nest-csv-parser) is a [csv-parser](https://github.com/mafintosh/csv-parser) wrapper NestJS. This means that all the features and functionality available in `csv-parser` will also be available in `nest-csv-parser`. Using `nest-csv-parser` is generally straightforward and all you have to do is import the module into your NestJS project. 

To install `nest-csv-parser`, use the following command:

```nginx
npm i nest-csv-parser
```

## 9. ya-csv

[`ya-csv`](https://github.com/koles/ya-csv) is a low-key event based CSV parser created to process large CSV streams. It is designed with zero dependencies, making it highly performant and unreliant on other libraries to make it work. With `ya-csv`, you can also configure the separators, quote and escape characters as required.

To install `ya-csv`, use the following command:

```nginx
npm i ya-csv
```

## 10. skipper-csv

[`skipper-csv`](https://github.com/hammady/skipper-csv) is a CSV parser adapter created to receive upstreams. It also supports multipart file uploads and starts parsing the CSV as soon as the first chunks are ready. This means that you don't have to wait for the upload to finish before you start parsing - resulting in saved time and faster data parsing.

To install `skipper-csv`, use the following command:

```nginx
npm i skipper-csv
```

## Which JavaScript CSV parser is the best?

Based on popularity, downloads and GitHub stars, [fast-csv](https://www.npmjs.com/package/fast-csv),  [xlsx - SheetJS](https://sheetjs.com/), [papaparse](https://www.papaparse.com/), and [json-2-csv](https://github.com/mrodrig/json-2-csv) are the most popular. These top four libraries make up the majority of downloads and comes to a combined 2+ million downloads and installs.

However, [csvtojson](https://github.com/Keyang/node-csvtojson), [csv-parser](https://github.com/mafintosh/csv-parser)  and [csv](https://csv.js.org/) also make good contenders for the 'best JavaScript CSV parser' title. 

The final three libraries on this list - [nest-csv-parser](https://github.com/mCzolko/nest-csv-parser), [ya-csv](https://github.com/koles/ya-csv), and [skipper-csv](https://github.com/hammady/skipper-csv) - are solid libraries but they haven't been updated in the last year. However, it doesn't make them bad libraries. It might just mean that they are stable enough to not warrant an update. Overall, the best JavaScript CSV parser is the one that works best with your project. 




Chameera Dulanga

# Getting Started With AWS Amplify 

[AWS Amplify](https://aws.amazon.com/amplify/) is a set of tools and services offered through Amazon Web Services to help developers build and deploy web and mobile applications in the cloud. 

![amplify-sandbox.png](https://res.cloudinary.com/layercode/image/upload/v1637780102/amplify_sandbox_ef0468e6a3.png)


It supports major frameworks and languages like JavaScript, React, Angular, Vue, Android, iOS, React Native, Flutter and can be easily integrated with other AWS services. On the surface, it looks like a new service. However, if we dig into it, AWS Amplify is a repackaged set of tools and services that are already available within the AWS ecosystem. 

The perk of this is that the services are more likely to work with each other seamlessly as they are under the same ecosystem of service offerings. All the services and tools packaged and marketed under the AWS Amplify umbrella can be categorized under three umbrellas: develop, deliver, and manage. Here is a rundown of each category and what they encompass. 

### Develop with AWS Amplify

![awsamplify-console.png](https://res.cloudinary.com/layercode/image/upload/v1637780152/awsamplify_console_bf63bf665d.png)


The tools and apps available under AWS Amplify develop track are geared at providing developers with services and tools that are often associated with fullstack web and mobile apps.  It includes services such as authentication, storage (via S3), APIs through GraphQL and REST support, cloud functions, AWS-based analytics consoles, push notifications, and AI/ML integrations. 

### Deliver with AWS Amplify

![awsamplify-deliver.png](https://res.cloudinary.com/layercode/image/upload/v1637780183/awsamplify_deliver_0883581f07.png)

The *deliver* portion of AWS Amplify focuses on delivering and hosting static web applications. You can easily connect Git repositories for deployments, configure custom build settings and deploy applications to any CDN within a few minutes. Deliver services includes CI/CD, monitoring, custom domain integrations, PR Previews, and cloud hosting capabilities. 

### Manage with AWS Amplify

![awsamplify-manage.png](https://res.cloudinary.com/layercode/image/upload/v1637780237/awsamplify_manage_baac647871.png)

When it comes to software development, there's more to it than just putting it in the cloud. Managing your app with AWS Amplify involves user accessibility, management, and content controls. 

## Getting started with AWS Amplify

Here's a quick guide on how to get started with AWS Amplify. In this mini-tutorial, we will cover the following actions:

- How to connect a code repository to AWS Amplify
- How to select your branch for deployment
- How to configure AWS Amplify build commands
- How to handle multiple environments
- How to add custom domains to your AWS Amplify app

### How to connect a code repository to AWS Amplify

To connect AWS Amplify to your code repository, you need an AWS account. You also need to log into the AWS console and select [Amplify](https://console.aws.amazon.com/amplify/home?region=us-east-1#/) from the service list.

![awsamplify-config.png](https://res.cloudinary.com/layercode/image/upload/v1637780291/awsamplify_config_71921904fe.png)


Then select **Get Started** under the **Deliver** track, and you will be redirected to a new page. There you can select the Git provider of your codebase and connect the repository with Amplify.

![awsamplify-getstarted.png](https://res.cloudinary.com/layercode/image/upload/v1637780326/awsamplify_getstarted_cf1fc053bc.png)


After selecting, you will be asked to authorize Amplify to access your repository, and you will be redirected to the next page.

### How to select your branch for deployment

To select your branch, select the repository and branch you need to deploy.

![awsamplify-github.png](https://res.cloudinary.com/layercode/image/upload/v1637780351/awsamplify_github_783a976df8.png)


It is always a good practice to maintain separate environments for development, testing, and production servers. In my example, I will only deploy my `dev` branch.

Similarly, we can deploy test and production branches. Amplify will use them to build, deploy and host independent environments.

### How to configure AWS Amplify build commands

By default, Amplify provides a template for build configuration. Here is the space where you can go through the build  template commands as necessary.  

![awsamplify-configbuild.png](https://res.cloudinary.com/layercode/image/upload/v1637780402/awsamplify_configbuild_b5ea4abbf4.png)


Once completed, you can click on **continue**, review all the settings and deploy the application.

![awsamplify-build.png](https://res.cloudinary.com/layercode/image/upload/v1637780458/awsamplify_build_2130943013.png)


It will take a few minutes to complete. By default, Amplify will use its ***amplifyapp.com\*** domain to host the application.

If you have a custom domain, you can also integrate it with Amplify. 

### How to handle multiple environments

Most software development teams maintain several environments for development, testing and production purposes. Here is how we can use Amplify to maintain separate deployment pipelines for these environments.

Besides, after deploying the first branch, you can click on the Connect Branch button and continue the process again from Step 2 to deploy multiple branches as you wish.

![awsamplify-multiplebranches.png](https://res.cloudinary.com/layercode/image/upload/v1637780494/awsamplify_multiplebranches_1935a3be0e.png)

You can see all the deployments in the Amplify console as shown above, and each of them will have unique URLs prefixed with the branch name.

### How to add custom domains to your AWS Amplify app

Amplify provides options to integrate custom domains with hosted applications. You need to create a hosted zone for your custom domain. This can be achieved through [AWS Route 53](https://aws.amazon.com/route53/). 

#### Creating a Hosted Zone with AWS Route 53

Route 53 can be found through the AWS service list in the navigation bar. There, you will find an option to create a hosted zone. After that, you will be redirected to a page like below where you need to enter domain name, type and a description.

![awsamplify-hostedzones.png](https://res.cloudinary.com/layercode/image/upload/v1637780529/awsamplify_hostedzones_e5521978fa.png)


The hosted zone will be created within a few seconds, and then you need to copy **value/Route traffic** values from the nameserver (NS) record to your domain providers dashboard.

***Note:\*** *Make sure that you don’t copy the last full stop in the URLs.*

![awsamplify-route.png](https://res.cloudinary.com/layercode/image/upload/v1637780571/awsamplify_route_6921b3dd18.png)


#### Configuring the Custom Domain

Now we can map the custom domain to Amplify. First, you need to go back to Amplify console and select the Domain management option in the left sidebar.

![awsamplify-customdomains.png](https://res.cloudinary.com/layercode/image/upload/v1637780614/awsamplify_customdomains_49bff53a25.png)

Then, click the **Add domain** button. There, you will be able to select the URL configured from Route 53. After choosing the correct domain, click the **Configure domain** button.

![awsamplify-routes2.png](https://res.cloudinary.com/layercode/image/upload/v1637780645/awsamplify_routes2_56f751e3f4.png)


After that, you will see an option to configure the subdomains. There, you can select the branches and add custom subdomains as you prefer.

![awsamplify-routes3.png](https://res.cloudinary.com/layercode/image/upload/v1637780666/awsamplify_routes3_23f0bb4ef4.png)


After saving the changes, Amplify will create a new SSL certificate for your domain using the [Amazon certificate manager ](https://aws.amazon.com/certificate-manager/). This will be renewed automatically upon expiry, so there is no need to manually do it. 

![awsamplify-routes4.png](https://res.cloudinary.com/layercode/image/upload/v1637780703/awsamplify_routes4_d0a3b23ea3.png)

That’s basically it. You have successfully created a continuous deployment pipeline for 3 environments and integrated them to a custom domain into your AWS Amplify app.

## AWS Amplify is great for starter apps

AWS Amplify is a full packaged cloud platform that includes everything you might need for your app. In a way, it is comparable to [Google's Firebase and Digital Ocean's App Platform](https://layercode.com/community/firebas-vs-digitalocean-aws). 

The idea behind AWS Amplify is that you start on the platform and it manages cloud infrastructure for you at a competitive price. It uses currently Amazon Web Services offerings but makes it easier to navigate through the myriad of offerings they currently have. This means frontend, backend, database, security and authentication are packaged to work together in a seamless manner.






At the foundation of every web app, there is a collection of JavaScript frameworks and libraries. [Angular](https://angular.io/), [React](https://reactjs.org/), and [Vue](https://vuejs.org/) is the most talked-about and used JavaScript structures currently deployed across different types of projects, businesses, and organizations.

While at its core, Angular, React, and Vue is essentially JavaScript, vanilla JavaScript is not the easiest to deal with when views and frontend data management start to grow. In a nutshell, Angular, React, and Vue offers a structured way to communicate code between developers, organize views, and connect them up in a manageable and repeatable process.

## Let's start with Angular

Angular as we currently know it started out its life as something completely different. The structure, the cohesion, and the way things communicate with each other looked more like React in design with its own distinctive Angular-esque `{{curly brackets}}`.

Two-way binding used to be available until developers learned the hard way that multi-directional data communication is hard to manage over time. As the application and its data grew, so did the complexity and potential nodes of support that needs to be monitored. In the current form of Angular, they've adopted unidirectional data binding, which means that data can only be inherited from a parent-to-child direction and not the other. 

In addition to this, a module's separation of concern is split between three different files - the module, the HTML, and the CSS. This means that data, its logical processes, and views are physically separated. 

## What about React?

React has exploded in popularity over the years. In part, it is a lot easier to pick up than Angular. When it comes to React, the setup is minimal and each component is contained to the smallest visual and functionality set possible.

Then it just becomes one big jigsaw task of composing your views and linking up everything via `props` injections. While you can do this in Angular, the way React is structured makes it much easier for beginners and veterans of code to perform. 

From an implementation point of view, React is easy to pick up, integrate into current projects, and highly modular - if it is correctly written.

Unlike Angular, where structure is required and pre-baked into the framework, React's freedoms do come with a series of costs. New developers (especially those who are also new to code in general) are more likely to create tightly coupled architectures. Data management and code modularization can easily be abused. 

Despite this, the ecosystem of React developers is also growing at a faster rate due to the number of starter free courses pushed by major code learning spaces such as Free Code Camp, Code Academy, and HarvardX. As a result, more developers are talking about React, resulting in more resources due to the strong and constantly growing community. With over [2 million GitHub repositories](https://github.com/search?q=react) that are related to React in some form, React is bigger than [Angular (840k)](https://github.com/search?q=angular) and [Vue (644k)](https://github.com/search?q=vue).

## Where does Vue fit in with the Angular vs. React debate?

Vue is an interesting one. In a way, it can be seen as a fork of Angular.js, pruned and trimmed to only contain the good and favorite bits. It came out three years after Angular.js' debut and three years before Angular's architectural framework rewrite.

Over the years, it has grown into its stand-alone JavaScript framework sued for building user interfaces and single-page applications. Syntactically, it is very much like Angular.js but with better scoping controls and easier routing implementations. Templating is achieved through a series of components that can be modularized and injected with properties for data sharing and flow through.

It is much more lightweight than Angular but a little beefier than React when it comes to size. In part, this is because React is a library with a focus on UI rendering rather than data management. Similar to React and its relationship with Redux, Vue also has a flux-inspired centralized state management system called Vuex. The most challenging aspect of frontend development is maintaining the growing data needs by applications and their functionalities.

## Which framework/library should you use?

React is popular because it's easy to pick up and robust to use. However, Angular and Vue should not be disregarded as they both have their technical merits. 

To decide which framework or library you should use for your project, there are a few things that need to be considered:

- **size of community for ongoing support and learning resources**
  - React has the biggest community, followed by Angular, and then Vue. 
- **speed of delivery required** 
  - Angular has the biggest learning curve because it is a full framework that comes with a kitchen sink full of pre-written modules, extensions, and add-ons. React is minimal in terms of bundled APIs but has a strong open-source community. Vue is highly supported, despite it being the smallest in the comparison.
- **current team knowledge, strengths, and weaknesses** 
  - This is possible the deal breaker. If your team are Angular developers, then it might make sense to stick to Angular. If your team is an ad-hoc eclectic collection of skills, React or Vue may be the better option due to the smaller learning curve. Angular requires time investment to learn. React and Vue requires structural discipline, which can work well for seasoned developers who have strengths in other programming languages such as Java and C++.

Over time, as developers, we also become biased towards what we know. It doesn't hurt to dive into alternative frameworks and libraries. At the foundation of most frontend frameworks and library is JavaScript. Methodologies and ideas can be cross-pollinated for a more robust implementation of your app. The more you know, the easier and faster it is you can create connections based on your features and app requirements. 

Isuri Devindi

UI patterns is what makes the web what it is. It is a collection of repeated elements, arranged in ways that are aesthetically pleasing to the eye, optimized for different screen sizes and targeted at creating a positive user experience.

Modal dialogs is a popular user inter user interface pattern to display additional information without moving to another page. However, it can also affect the user experience (UX) if not implemented correctly.

But what exactly are modal dialogs? In a nutshell, modal dialogs are like popups that occurs when an action is required before the user is able to proceed to the next step. 

Here is a quick rundown on when to use modals, how to implement modals in React and libraries that you can use for faster development. 

## When Should We Use Modals?

Modals can be helpful to display information while keeping the screen in its current state. Here are some typical places that modals are used:

1. **When the user’s attention is needed immediately —** If the user’s session has expired and has to sign in again.
2. **To display warnings about a user’s action that has severe consequences or is difficult to reverse —** When the user is about to deactivate the account.
3. **When the user’s input is needed to complete a task —** To subscribe to a newsletter, the user is required to enter the email address.
4. **Show additional information about something on the parent page —** To display a calendar event in more detail.

While modals are great, they should be used sparingly to prevent a negative user experience. Too many modals that doesn't require immediate action can reduce a user's positive response. 

## When to Avoid Using Modals

It's easy to use modals as part of your app's flow. However, too many modals can result in additional and unecessary clicks or taps, and a diversion of attention from what the user may actually be searching for. Here are scenarios where modals can hinder rather than enhance a user's experience.

### 1. To show error, wait, or success states

Modals are not effective for displaying user input errors, loading status, or success messages because they block the parent screen. Instead, it’s better to use them as a part of the user input.


### 2. System-initiated Modals for promotional purposes

System-initiated Modals interrupt the user’s current task and force them into doing a specific action. Modern-day users dismiss such uninvited Modal windows instinctively. Therefore, it is less effective to use them for promotional purposes.

![modals-2.png](https://res.cloudinary.com/layercode/image/upload/v1636906776/modals_2_38e1b2a0fc.png)

### 3. Modals in mobile devices

Mobile screen real estate is minimal, meaning that all elements on the page needs to be curated based on priority. It is often difficult for users to view and manipulate the modal window. In addition to this, users also might be dealing with other UI elements such as a keyboard and nested scrollbars. In short, it is best to avoid modals on mobile devices.

## Best practices to implement the Modal

Here is a user experience best practice guideline when it comes to implementing modals.  

### Make the dismiss control visible to the user

A good Modal should always be user-initiated. At the same time, the user should have the ability to close the Modal when needed. Some of the methods to implement this functionality are,

- Add explicit ‘Close’ / ‘X’ / ‘Cancel’ button.
- Support clicks outside the Modal Window to close it.
- Use keyboard accessible control (Escape key) to close the window.

2. Ensure users understand what they need to do, using a descriptive title.

### Give clear context on the Modal functionality using a proper title, indicating what’s expected from the user

Prioritize the content and size the window appropriately.

A Modal window must contain only the essential information and actions with a minimum number of sentences. If the content requires a scrollbar, it’s better to use a regular page instead of a Modal.

### Put the Modal window on focus

Some methods that can be used to highlight the Modal window are as follows.

- Put the Modal directly in the user’s line of sight. It’s better to position the Modal at the top half of the page.
- Ensure that the Modal is visually distinct from the background page. As shown in the above figure, darkening the window’s background will help the user understand the Modal is located above the parent content and cannot interact with the parent content.

### Avoid nested Modals

To avoid visual complexity, it’s always best to prevent Modals that trigger another Modal window.

## Building Modals in React

In React, the whole application is treated as one large component with many child components. Therefore, components can be deeply nested even in a simple application. This happens due to the way how the virtual DOM is structured. So, you might find it challenging to render modals conventionally even with the help of some CSS tricks.

However, with the introduction of [Portals](https://reactjs.org/docs/portals.html) in React 16, we can easily render modals into a DOM node outside the parent component’s DOM hierarchy.

Here is how to implement a simple modal window in React using Portals and some best practices to enhance the UX.
![modals-3.gif](https://res.cloudinary.com/layercode/image/upload/v1636906775/modals_3_c5c10feb06.gif)

Here is a quick rundown of the above screenshot.

1. **Modal.js** — File containing the modal component.
2. **App.js** — File containing the main App component from which will call the Modal
3. **Modal.css** — File containing the styles applied to Modal


Here is the implementation code for `Modal.js`: 

```javascript
import React,{useEffect} from "react";
import ReactDOM from "react-dom";
import '../Modal.css';

const Modal =props=>{
  
    const closeOnEsc = (e) =>{
        if((e.charCode||e.keyCode)===27){
            props.close();
        }
    }

    useEffect(()=>{
        document.body.addEventListener('keydown',closeOnEsc);
        return function cleanup(){
            document.body.removeEventListener('keydown',closeOnEsc)
        }
    },[])
    
  
    return (
      props.open? ReactDOM.createPortal(
        <div className = 'modal'>
            <div className = 'content'>
                <div className = 'modal-header'>
                    <h4 className = 'modal-title'>Modal component</h4>
                </div>
                
                <div className = 'modal-body'>
                    Add the content here
                
                </div>
                <div className = 'modal-footer'>
                    <button onClick= {props.close}>Close</button>
                </div>
            </div>
             
        </div>,document.body):null
    );
  }


export default  Modal;
```

This functional component takes two props:

1. `open`— Indicates whether to render the modal.
2. `close` — Hides the modal by invoking the `handleClose()` function in App.js.

Here is the styles used for `Modal.css`. This is the basic layout and for demonstration purposes only.

```javascript
.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 
 
}
.content {
  width: 500px;
  background-color: white;
  padding: 20px;
  border: 2px solid black;
  border-radius: 20px;
  margin: auto;
  text-align: center;
}

.modal-body{
  padding: 10px;
}
```

The Modal component can be used within `App.js` as shown below.

```javascript
import { useState } from 'react';
import Modal from './components/Modal';

function App() {
  const [open, setOpen] = useState(false);
  function handleClose(){
    setOpen (false);
  }
  function handleOpen(){
    setOpen(true);
  }
  return (
    <div className="App">
     <button className="button" onClick={handleOpen}>Open Modal</button>
     <Modal open = {open} close = {handleClose}/>
    </div>
  );
}

export default App;
```
Now, you have a simple, reusable Modal with minimal code and no required dependencies.

## Alternative Libraries for React Modals

Implementing the basic functionalities of a Modal is relatively straightforward. But it can take a bit of effort to enhance the UI and UX if we implement them from scratch. Fortunately, there are plenty of libraries that can help you to build better UIs with customizations. Here are three that you can use instead of building your own.

### 1. Dialog component from Material UI

MUI [dialog](https://mui.com/components/dialogs/) provides implementation guides to a wide range of Modals. They vary from basic Modals with less content to Modals requiring user inputs and different transitions.

![modals-5.png](https://res.cloudinary.com/layercode/image/upload/v1636906775/modals_5_8a73abb834.png)


They are also easily customizable as per the functional requirements. The well-written [documentation](https://mui.com/components/dialogs/) provides examples for some of the most common Modals, making the developers’ work much more manageable.

### 2. react-modal-video

We can render and display videos inside a modal component using the [react-modal-video](https://appleple.github.io/react-modal-video/) package without navigating to a separate page to view the video.

The video sources supported are YouTube, Vimeo, custom resources and can be configured for native video playback functionalities. In addition, the Modal can be configured for various animation transitions and is accessible for keyboard navigation and screen readers.

![modals-06](D:\GitHub\the-work\01 Clients\Damien\Edits\Enlear\01\modals-06.gif)
![modals-06.gif](https://res.cloudinary.com/layercode/image/upload/v1636906778/modals_06_9161e12f6a.gif)

### 3. Rodal

[Rodal ](https://github.com/chenjiahan/rodal)is one of the few open-source React Modals with a focus on animations. It supports nine different animation types and a list of props inclined towards controlling the animated behavior, such as the duration.

![modals-07.gif](https://res.cloudinary.com/layercode/image/upload/v1636906777/modals_07_269aee70e9.gif)

## Wrap up

Modals interrupts the user flow and demands attention. While they are great for compulsory tasks such as logging in again after an expired session, they should be used with care and sparingly. Too many modals can end up annoying the user and build up a negative user experience. 

GraphQL is becoming a staple in standardizing APIs for many enterprise-level applications. It gives frontend developers a single entry point and the ability to create filters on only the data they need. The flexibility of GraphQL allows developers to shorten the development cycle, become more flexible with the content they require, and adapt to the needs of a requested feature.

But how secure is GraphQL? Is GraphQL better than REST? and what are the techniques that prevent vulnerabilities from being exploited in GraphQL?

## Quick introduction to GraphQL

GraphQL works by providing a single interface for clients to query data without the need of a backend developer customizing every API required. The process flow works with the requesting interface describing the data it needs and GraphQL giving back only the relevant data. 

For example, the backend may descript the data as per below:

```
type Product {
  name: String
  price: Double
  description: String
  stock: Number
}
```

The caller may only need the name and the price. With a traditional API, the `description` field would also get sent in the payload. This unnecessarily increases the package size and additional queries required to get the data. However, with GraphQL, you can specify and request only what you need.

```
{
  product(name: "banana"){
    price
  }
}
```

 Your expected returned result may look something like this:

```
{
  "product": {
    "price": 2.99
  }
}
```

In a nutshell, GraphQL is a more efficient way of querying data. It is also a more flexible way for developers to build APIs, especially when all the requirements are not clearly documented, or the business requires constant pivoting and the backend needs to be able to cope with the required changes.

## How Secure Is GraphQL?

Everything has a certain degree of insecurity, based on how it is implemented. A barebones and basic implementation of GraphQL can lead to exploitation through Denial of Service (DoS) attacks, SQL injections, and Langsec issues. These exploitations can lead to larger than necessary costs of infrastructure and data compromises.

So how do you mitigate these potential issues?

### Query Timeouts

One way is to set query timeouts. This sets the maximum time limit allowed for each query. This prevents overly large queries from being performed and causing potential lock-ups in the database. 

To achieve this, GraphQL query depth needs to be implemented. This is because when an attack occurs, the attacker is not looking for information. They are looking to submit a request for the most expensive data package available. 

### GraphQL Query Nesting

In GraphQL, the more nesting there is in a query, the higher the data loads and cost associated with generating the result for the query. This can overload your server, databases, and network -- resulting in potential chain effect data denials to other parts of your application. When there is no limit on nesting in GraphQL, this is called an unbounded query. With enough nesting depth, a DoS attack lock up your GraphQL server.

So how is deep nesting achieved in GraphQL? One method is through a method called Cyclical Queries. For example, you have a `Musician` type that has a list of `Songs`, which allows for `Musician` to be retrieved. This is because `Musician` and `Songs` have many to many kind of relationship. In GraphQL, it's easy to create a continuous cyclical query that, in a way, queries itself.

```graphql
# cyclical query
# depth: 8+
query cyclical {
  musician(id: "xyz") {
    songs {
      musician {
        songs {
          musician {
            songs {
              musician {
                ... {
                  ... # more deep nesting!
                }
              }
            }
          }
        }
      }
    }
  }
}
      
```

To prevent this from occurring, inline and named fragments can be implemented. This will limit the query depth to one and reject any queries based on depth.

This is different from how we would usually use GraphQL, which is often through inline and named fragments. 

```graphql
# inline fragment
# depth: 1
query inlineShallow {
  musicians
  ... on Query {
    songs
  }
}

# named fragment
# depth: 1
query namedShallow {
  ... namedFragment
}

fragment namedFragment on Query {
  songs
}
```

But a malicious user does not care about effectiveness and efficiency. What they care about is bringing your GraphQL server down by making the most expensive query. This is where `Maximum Query Depth` comes in.

With `Maximum Query Depth`, a GraphQL server is set to reject anything that goes beyond a set depth.

### Setting GraphQL Depth Limits

To set GraphQL depth limits, you can use `graphql-depth-limit`, which is an additional module that you can use. This is because Apollo GraphQL currently does not have a built-in query depth limit. To do this, you will need to install `graphql-depth-limit` via `npm` and then `import` it into your project.

Here is how to install and add it to your `package.json`.

```npm
npm i graphql-depth-limit
```

Here is how you can use it in your `node.js` backend application.

```nodejs
import depthLimit from 'graphql-depth-limit'
import express from 'express'
import graphqlHTTP from 'express-graphql'
import schema from './schema'

const app = express()

const DepthLimitRule = depthLimit(
  3,
  { ignore: [ 'whatever', 'trusted' ] },
  depths => console.log(depths)
)

const graphqlMiddleware = graphqlHTTP({
  schema,
  validationRules: [
    DepthLimitRule,
  ],
})

app.use('/graphql', graphqlHTTP((req, res) => ({
  graphqlMiddleware
})))
```

In the code above, anything beyond a depth of 3 will be rejected. This is set in the first argument under `const DepthLimitRule` inside `depthLimit()`. The second argument inside `depthLimit()` tells your application what to do with the ignored fields.

When the depth limit is exceeded, the application will throw an error that looks something like this:

```nodejs
{
  "errors": [
    {
      "message": "'cyclical' exceeds max... depth of 4",
      "locations": [
        {
          "line": ...,
          "column": ...
        }
      ]
    }
  ]
}
     
```

### Dealing with Query Complexity

Cyclical queries make for potentially endless nesting. However, it is not the only technique that can lock up a GraphQL server. Some fields in the schema are more expensive to compute than others and this is due to complexity.

Complexity is based on the number of arguments expected to be returned and the computing power required to query them. Take a look at the example below:

```
query simple {
  musician(id: "xyz") {      # complexity: 1
    songs(first: 10) {      # complexity: 10
      title               # complexity: 1
    }
  }
}
          
```

To total complexity score for the above query is 12. While `musician` and `title` are simple returns, there are `10` instances of `songs` to be returned. The more items required and available to be returned, the higher the complexity.

This can be applied to other data types where there is a one-to-many relationship such as catalogs of things. For example, an author may have hundreds of posts, or a single micro-investment portfolio with more than half a thousand investments across multiple countries, EFTs, and indexes. While GraphQL can be efficient at getting the data, it can be costly if the complexity is not managed.

### Limiting GraphQL Query Complexity

To limit GraphQL query complexity, `graphql-validation-complexity` module can be used. To do this, you can install it via `npm` and `import` it into your `node.js` project as per the code sample below.

To install `graphql-validation-complexity`:

```
npm i graphql-validation-complexity
```

How to implement the GraphQL complexity validation package:

```
import { createComplexityLimitRule } from 'graphql-validation-complexity'
import express from 'express'
import graphqlHTTP from 'express-graphql'
import schema from './schema'

const app = express()

const ComplexityLimitRule = createComplexityLimitRule(1000, {
  scalarCost: 1,
  objectCost: 10, // Default is 0.
  listFactor: 20, // Default is 10.
})

const graphqlMiddleware = graphqlHTTP({
  schema,
  validationRules: [
    ComplexityLimitRule,
  ],
})

app.use('/graphql', graphqlHTTP((req, res) => ({
  graphqlMiddleware
})))
```

Here is one way to calculate the cost of a query:

```
const expensiveField = {
  type: ExpensiveItem,
  getCost: () => 60,
};

const expensiveList = {
  type: new GraphQLList(MyItem),
  getCostFactor: () => 100,
};
```

Alternatively, you can set your GraphQL definition to limit the cost:

```
type CustomCostItem {
  expensiveField: ExpensiveItem @cost(value: 50)
  expensiveList: [MyItem] @costFactor(value: 100)
}
          
```

## Wrap up: Is GraphQL better than REST?

In a way, the immutability of a REST API mitigates the two issues expanded on above. This is because the client is limited to the requirements of the REST API. In contrast, GraphQL offers up flexibility by giving the client the ability to set their own query parameters.

This leads to the question - is GraphQL better than REST? The quick answer to this is that it depends on the situation. For development speed and agility, GraphQL is something that is being advocated by many big names including AWS, Google, and Microsoft, in addition to other big companies like Shopify, Netflix, Twitter, Facebook, Instagram, and even the New York Times.

When it comes to security, GraphQL is still a new area and with low vulnerability awareness within the community. There are other security techniques that you can explore further such as whitelisting queries, persistence, throttling, and GraphQL endpoints, that can help reduce your application's vulnerability against attacks.

Nevertheless, the ideas behind GraphQL, its implementation, and general benefits from it have the potential to supercharge your backend through faster development and create query flexibility that is not available with a standard REST API development.













Learn the foundations

Web Dev

GraphQL vs. REST - a quick dive

How To Secure Your GraphQL API

Cloud

Firebase vs. Digital Ocean App Platform vs. AWS Amplify

Is Supabase your new Firebase alternative?

Frontend

What are CSS Modules and how to use it in React

How modal dialogs work and how to add them to your React app

Tags

Latest Posts

What's the big deal with GitOps? A quick introduction

Top 10 JavaScript CSV Parsers

Getting Started With AWS Amplify

Angular vs. React vs. Vue - A Quick Look

How modal dialogs work and how to add them to your React app

How To Secure Your GraphQL API