DEV Community: Arun Yadav

Part 01 - Clean Architecture Overview

Arun Yadav — Mon, 06 Feb 2023 11:58:40 +0000

Clean Architecture: Maintainable, Testable, and Scalable Applications

Originally Posted on: https://www.arunyadav.in/codehacks/blogs/post/20/part-01-clean-architecture-overview

In software development, creating a well-designed and organized application is crucial for success. Clean Architecture is a software design principle that can help you achieve this goal by separating an application into distinct parts. This makes it easier to maintain, test, and scale the application over time.

The main idea behind Clean Architecture is to keep the business logic of an application isolated from external factors, such as presentation, infrastructure, and persistence. This separation of concerns makes it easier to change and maintain the application, as well as test it without affecting other parts of the code.

Clean Architecture consists of several circles or layers, each with a specific responsibility. The innermost circle is the business logic, which is the core of the application. This layer is isolated from external factors and communicates with other layers through well-defined interfaces. The business logic should not depend on the outer layers, and instead should rely on abstractions.

The next layer is the interface adapters, which are responsible for converting data between the business logic and the outer layers. This layer includes things like presentation logic, data access, and infrastructure.

Finally, the outer layer is the frameworks and drivers, which are responsible for providing external services to the application. This layer includes things like databases, web servers, and operating systems.

Let's understand by Onion View

The flow of dependencies in the diagram moves towards the center. The centermost point is referred to as the Application Core, which acts as the nucleus of the diagram and is not dependent on any other layers. The entities and interfaces occupy the central position while domain services, which provide implementation to the central interfaces, surround them. The UI and Infrastructure layers, located on the exterior, are both dependent on the Application Core.

Let's understand by Horizontal View

In the clean architecture, the direction of solid arrows indicates compile-time dependencies, while the dashed arrow signifies a dependency that only exists at runtime. The UI layer interacts with the interfaces specified in the Application Core during compilation, without having knowledge of the concrete implementations in the Infrastructure layer. At runtime, these implementations become necessary for the operation of the app, and must be connected to the Application Core interfaces through dependency injection.

Let's understand by ASP.NET Core architecture diagram following Clean Architecture.

Support For Docker

Here is forked Gihub https://github.com/engg-aruny/CleanArchitecture

Organizing code in Clean Architecture

Application Core types

Entities (business model classes that are persisted)
Aggregates (groups of entities)
Interfaces/Contracts
Domain Services
Specifications
Custom Exceptions and Guard Clauses
Domain Events and Handlers
Behaviours
Mappers

Infrastructure Types

Identity Services
File Storage
Queue Storage
Payment Services
Third-party services
Notifications
Email Services
Sms Services

UI Layer

Controllers
Custom Filters
Custom Middleware
Views
ViewModels
Startup

Persistence Types

Data Context
Repositories
Data Seeding
Data Migrations
Caching

Domain Types

Domain Entities
Domain Events
Value Objects
Aggregates
Enums
Constants

Here is the diagram of all types into layers

Source from https://medium.com/dotnet-hub/clean-architecture-with-dotnet-and-dotnet-core-aspnetcore-overview-introduction-getting-started-ec922e53bb97

References

What are the essential skills of a .NET developer?

Arun Yadav — Thu, 02 Feb 2023 15:30:12 +0000

Originally Posted: https://www.arunyadav.in/codehacks/blogs/post/21/what-are-the-essential-skills-of-a-net-developer

“Having a constant positive attitude is key…”

General Prospective for looking .Net Developer

A .Net developer must include proficiency in C# and .Net framework, and knowledge of web development technologies such as HTML, CSS, and Javascript with database management. He/She must understand the Agile development process, with some level of a good level of understanding of source control.
Debugging is also an essential skill i.e. someone who has attention to detail to examine their code for errors, and fix it accordingly. Also, be prepared that things might not work the first time around (see positive attitude above).
Additionally, great .NET developers are often self-driven and self-motivated so they don’t need a boss to hand hold them through the development process.
Doesn’t Chase the Hottest New Tech Stack
Do They Know Their Limits?

Means, always seeking help and advice from other developers who have accomplished something similar to the project at hand.

Business looking Prospective for looking .Net Developer

Listens to the customer.
Asks enough questions to know – and gets the customer to identify what they want to accomplish.
Explains what they’re going to do and answers customer questions in terms the customer can understand.
Doesn’t reinvent the wheel when there are existing scripts or tools to get things done.
Gives a reasonable (i.e., reasonably accurate) estimate of the cost and time to do a project.
Gets the project done on time.
Alerts the customer if it will go significantly over budget – and tells them why.

Essentials tech skills

Proficiency in C# and the .NET Framework
Web Development Technologies
Database management and SQL
Software Development Principles
Agile Methodologies
Version Control Systems
Problem-solving and Teamwork

Some of the best-skilled .NET developers couldn’t do things alone. As mentioned many times in this article, collaboration and teamwork is important. Moreover, to smooth and sharpen your top .NET developer skills, one should also show proactiveness and continuous learning in development.

How to Create SEO-Friendly URLs in angular?

Arun Yadav — Thu, 02 Feb 2023 15:22:05 +0000

Originally Posted: https://www.arunyadav.in/codehacks/blogs/post/17/how-to-create-seofriendly-urls-in-angular

Summary

Search engines recognize hyphens as word separators, making it easier for them to understand the structure of the URL.

What do you mean by SEO-friendly URL?

SEO-friendly URLs (also known as "search engine friendly" URLs) are URLs that are structured in a way that makes them easy for search engines to understand and index. These URLs are designed to be both user-friendly and search-engine friendly by using clear, concise, and descriptive keywords.

What do you mean by SEO-friendly URL?

Some of the key characteristics of SEO-friendly URLs include:

Use of keywords in the URL: URLs that include relevant keywords are more likely to rank well in search engine results pages (SERPs).

Use of hyphens to separate words: Search engines recognize hyphens as word separators, making it easier for them to understand the structure of the URL.

Short and concise URLs are easier for users to read and remember and more likely to be indexed by search engines.

Avoiding special characters: Special characters like question marks, ampersands, and equal signs can make URLs more difficult for search engines to understand.

How to make Angular SEO-friendly URLs?

Here is a stackblitz example

Here is a Github example

app.component.html

This code is an example of an HTML template for the ProductComponent in Angular. It displays two links, one labeled as "Best Practice - SEO friendly" and the other labeled as "Bad Practice - Not SEO friendly".

The first link is an anchor tag with the routerLink directive, which is used to navigate to a route in an Angular application. The routerLink directive is bound to the seoFrendlyUrl variable, which is a SEO-friendly URL that includes the product id and a hyphenated version of the product name. There is also an image of a dummy user next to the link and the text "Go to Product Detail" to indicate the purpose of the link.

The second link is an anchor tag with a click event bound to the goToProductDetail function. This function navigates to the product detail page using the router.navigate method, which takes an array of route parameters as its argument. However, this link is not SEO **friendly as it uses a JavaScript click event to navigate, and search engines **can't crawl it. The link also includes an image of a dummy user and the text "Go to Product Detail" to indicate the purpose of the link.

<p>product works!</p>
<h1>Both Example Works Similar</h1>

<!-- Best Practice - SEO frendly -->
<h2>Best Practice - SEO frendly</h2>
<a routerLink="{{seoFrendlyUrl}}">
    <img src="../../assets/img/dummy-user.jpg">
    Go to Product Detail
</a> &nbsp;


<!-- Bad Practice - Not SEO frendly -->
<h2>Bad Practice - Not SEO frendly</h2>
<a style="cursor: pointer;" (click)="goToProductDetail()">
    <img src="../../assets/img/dummy-user.jpg">
    Go to Product Detail
</a>

app.routing.module.ts

The routes constant is defined as an array of route configurations, where each configuration is an object that defines the path of the route and the component that will be displayed when the route is navigated to. The routes defined here include 'home', 'about', 'products' and 'products/:id/:name'. The :id and :name are path parameters, they are dynamic segments of the url.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { ProductDetailComponent } from './product/product-detail/product-detail.component';
import { ProductComponent } from './product/product.component';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductComponent },
  { path: 'products/:id/:name', component: ProductDetailComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

This code is an example of a ProductComponent in an Angular application. The component is responsible for displaying product details, including the product name and an SEO-friendly URL. (Notice browser)

The seoFrendlyUrl variable with a string that includes the product id and a hyphenated version of the product name. The goToProductDetail function is used to navigate to the product detail page using the router.navigate method, which takes an array of route parameters as its argument. The getHyphenatedString function is used to format the product name into an SEO-friendly format by replacing certain characters, removing spaces, and converting it to lowercase.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  productName = "fake blush, glow and sheet (mask)";
  seoFrendlyUrl: string | undefined;


  constructor(private readonly router: Router) { }


  ngOnInit(): void {
    this.seoFrendlyUrl = `/products/2/${this.getHyphenatedString()}`
  }


  goToProductDetail() {
    this.router.navigate(["products", 2, this.getHyphenatedString()])
  }


  getHyphenatedString() {
    let limitedTitle = this.productName.substring(0, 100);
    let hyphenatedString = limitedTitle
      .replace(",", "")
      .replace(/[^\w\s]/gi, '')
      .replace(/[\(\)]/g, '')
      .replace(/\s+/g, '-')
      .toLowerCase();
    return hyphenatedString;
  }
}

Output

Notice: products/2/fake-blush-glow-and-sheet-mask

Here is a stackblitz example

Here is a Github example

Screenshot of sample example

Overall this code is showing the difference between an SEO-friendly link and a non-SEO-friendly link, The SEO-friendly link uses the routerLink directive, which allows search engines to crawl the link and index the corresponding page, while the non-SEO-friendly link uses a JavaScript click event to navigate, which search engines can't crawl.

Build your own Dockerfile, Image, and Container

Arun Yadav — Mon, 16 Jan 2023 10:16:38 +0000

Follow me in my blogs website (https://www.arunyadav.in/blogs)

Linux containers are the way to build a self-contained environment that includes software, libraries, and other tools. This guide describes how to build a docker image that you can use for the running container.

Prerequisite
Follow the previous article if you need to understand "What is Docker?"

Install Docker on Windows

Once installation is finished and your environment setup is completed.

An image contains all the software you need to run within your container. Container images can be stored locally on your machine, as well as in a container registry. There are public registries, such as Docker Hub, or private registries such as ACR (Azure Container Registries).

You can pull existing images from the docker hub or private registries using docker pull

In the following example, we will pull an image from the public Docker Hub repository and run the actual container.

#First, we will pull an image
docker pull docker/whalesay
#We can then look at which images are stored locally
docker images
#Then we will run our container
docker run docker/whalesay cowsay boo

Following is the command output

Let's look at what happing behind the scene.

Docker first pulled your image in multiple parts and stored it locally on the machine it was running on.
When you run the actual application, it used that local image to start a container.
If we look at the command in detail, you will see that docker pull took in a single parameter, docker/whalesay. if you don't provide a private container registry, Docker will look into the public Docker Hub for images.
The docker run command took in a couple of arguments, first docker/whalesay, which is the reference to the image. The next two arguments, cowsay boo, are the commands that were passed to the running container to execute

In the previous example, you saw that it is possible to run a container without building an image first. however, it is very common in the practical world that you will want to build an image first. To do this, you use a Dockerfile.

Docker images can be created using a special file format called a “Dockerfile”. This file has commands that allow you to:

use a pre-existing Docker image as a base
add files to the image
run installation commands
set environment variables

In the next example, you will build a custom Docker Image. This custom image will display inspirational quotes in the whale output.

FROM docker/whalesay:latest
RUN apt-get -y -qq update
RUN apt-get install -qq -y fortunes
CMD /usr/games/fortune -a | cowsay

Let's look at what happing behind the scene.

The first line will instruct Docker on which image to use as a source/base image for this new image.
The next two steps are commands that are run to add new functionality to our image
- In this case, update your apt repository and install an application called fortunes. The fortunes application is a small command-line tool that generates inspirational quotes. We will use that to include quotes in the output rather than user input.
Finally, the CMD command tells Docker which command to execute when a container based on this image is run.

_You typically save a Dockerfile in a file called Dockerfile, without an extension. _

To build an image and point it to the Dockerfile you created.
docker build -t smartwhale .

You will now see Docker execute a number of steps

To run your container
docker run smartwhale

Following is the command output with inspirational quotes and if you run the container multiple times, you will see different quotes appear.

That concludes our overview and demo of containers. In this section, you started with an existing container image and launched it on the machine. Afterward, you took that a step further and built your own container image, then started containers using that image. You have now learned what it takes to build and run a container.

Thanks for reading!

Do you know nginx, lets talk about?

Arun Yadav — Sat, 03 Apr 2021 13:03:13 +0000

Follow me on Twitter

What is nginx

Nginx, pronounced like “engine-ex”, is an open-source web server that, since its initial success as a web server, is now also used as a reverse proxy, HTTP cache, and load balancer.

How Does Nginx Work

Nginx is built to offer low memory usage and high concurrency. Rather than creating new processes for each web request, Nginx uses an asynchronous, event-driven approach where requests are handled in a single thread.

With Nginx, one master process can control multiple worker processes. The master maintains the worker processes, while the workers do the actual processing. Because Nginx is asynchronous, each request can be executed by the worker concurrently without blocking other requests.

Installing Node on Ubuntu

Executing the following bash commands will setup NodeJS and npm on your Ubuntu machine:

sudo apt-get update 
sudo apt-get install nodejs 
sudo apt-get install nodejs-legacy 
sudo apt-get install npm

Installing NGINX on Ubuntu

sudo apt-get update 
sudo apt-get install nginx

Serving Static Contents

Let’s start simple and first, we will use NGINX to serve a static website in our first demo.

Configuring NGINX

Configuration files can be found on /etc/nginx/. NGINX comes with a default site config file and we can open it using nano:

sudo nano /etc/nginx/sites-available/default

We will not change anything in this file yet but if we do, we have to restart the NGINX server afterward to make these changes take effect.

sudo service nginx restart

In this post, we saw how to serve static web applications using NGINX. Follow me on Twitter