Forem: Farhat Sharif

State Management in Software Development

Farhat Sharif — Wed, 05 Feb 2025 17:38:40 +0000

State management is the process of handling and maintaining the state (data) of an application across different components, user interactions, and system updates. State management ensures consistency, efficiency, and synchronization across the app. It is crucial in complex applications where multiple parts need to access and modify shared data.

Types of State in an Application

1. Local State (UI Component State)

Stored within a single component and affects only that component.

Examples:

Show and hide states of an element on a toggle button.
Form input:
- Title and content input given by a user on a "Create Post" page.
- The search term a user types in the search bar.

2. Global State (Application-Wide State)

Shared across multiple components or pages.

Examples:

A logged-in user's authentication state across different components or pages.
Cart items in an e-commerce app stored globally for access across components or pages.

3. Server State (Remote Data)

Data fetched from external sources like databases or APIs.

Examples:

User details fetched from an API on page load.
A blog list retrieved from database to display on the homepage.
Data stored in sessions on the server.

4. URL State (Routing & Navigation)

URL state is maintained in URL parameters and query strings. It reflects the current state of an application, directly in the browser's address bar. URL state can be used to influence the behavior or content of the page.

Examples:

A search term in query string example.com/products?search=laptop
(Displays products related to the search term "laptop")
Product Filtering: example.com/products?category=cameras&price_range=5000-15000
(Filters products by category and price range)
Current page number in pagination: example.com/posts?page=2
(Displays the second page of posts)
Specific product ID in route parameters: example.com/laptops/S239
(Displays details for the product with ID S239)

Approaches to State Management

Manual State Management
Using variables and functions within the application to track changes.

State Management Libraries
Tools that provide a structured way to manage state.

Backend State Management
Involves databases and caching mechanisms to maintain application state on the server.
Helps persist state across sessions and users.

Why Is State Management Important?

Well-structured state offers:
Consistency: Ensures different parts of the app use the same data.
Improved Performance: Updates only what’s needed while avoiding unnecessary re-renders or refreshes.
Scalability: Makes it easier to add new features without breaking existing logic.
Easier Debugging: Easier to track and fix issues.
Better Maintainability: Makes future modifications and feature additions simpler.

Collaborate using Pull Requests

Farhat Sharif — Thu, 26 Sep 2024 22:56:22 +0000

You’ve finished working on a feature/bugfix and want to
✦ Merge it into the main branch
✦ Notify the team members
✦ Get it reviewed by someone in the team

Pull Requests (PRs) are exactly what you need. They allow you to propose changes to a repository and invite others to review, discuss, and approve them before merging.

Here’s how a pull request works:

Push the changes from your local branch to a remote branch.
Open a PR from your branch (source) to the main branch (destination).
Team member (who is responsible for maintaining the project) reviews, suggests changes, or approves it.
Once approved, the reviewer/project maintainer merges the PR into main branch.

GitHub, Bitbucket, and other version control platforms provide user-friendly interfaces that make creating a PR easy and just a few clicks away. Simply click a button to start a new PR, select the source and destination branches, give your PR a title, add a description, and click the 'Create PR' button—it's that simple! 🎉

Your reviewer can leave comments and suggestions in the PR, and you'll receive notifications. You can then review the requested changes and update your code accordingly. Once the PR meets all requirements, the reviewer will merge it into the main branch. 🙌

From Changes to Safe Keeping: Git Stash

Farhat Sharif — Wed, 25 Sep 2024 22:16:47 +0000

✦ You’re working on a feature but need to switch branches without losing your work.
✦ You want to save your unfinished work temporarily to a separate place without committing it to your feature branch.

That’s where git stash helps! It lets you store your current changes and gives you a clean working directory, so you can switch tasks without losing any progress.

1. Stash changes:

Command: git stash
Description: Saves your local changes to a separate place and reverts your working directory to the last commit, allowing you to switch branches or work on something else.
Command: git stash push -m "stash message"
Store changes with message. Add a descriptive message so you can identify the work stored in the stash easily.

2. List saved stashes:

Command: git stash list
Description: Shows you a list of saved stashes which you can utilize again.

3. View Stashed Changes:

Command: git stash show stash@{n}
Description: View the changes stored in a specific stash. Stash are referenced by numbers. e.g. stash@{1}

4. Apply a specific stash:

To restore stashed changes you have two options:
a).
Command: git stash apply stash@{n}
Description: Apply the changes and leave a copy in the stash.

b).
Command: git stash pop stash@{n}
Description: Apply the changes and delete these changes from the stash.

If you don't use stash reference, you are working with the latest stash:
git stash apply
git stash pop

With git stash, you can save, view, and restore changes whenever needed. Perfect for switching tasks!

From Remote to Local: Git Clone

Farhat Sharif — Tue, 24 Sep 2024 20:34:16 +0000

✦ You've just joined a project and need a local copy of the entire codebase to start contributing. The project is hosted remotely, such as on GitHub, and you want to bring it onto your machine.
✦ You’re starting fresh on a new computer and need to grab the project code again which is hosted on Github.

That’s where the git clone command comes into play! It allows you to copy an entire remote repository onto your local machine, so you can start working on it.
Here’s how to clone a repository:

Command: git clone <remote_repository_url>
e.g. It will look like: git clone https://github.com/user/example-repository
Description: Creates a local copy of the remote repository on your machine.

Once cloned, you have a complete copy of the project with all its branches, commits, and files. Now you can start working in your own local environment, and push your changes later.

Keep Your Code in Sync: Git Pull

Farhat Sharif — Sun, 22 Sep 2024 06:35:12 +0000

✦ You’re working in collaboration and you need to make sure your local copy is up-to-date with what’s happening in the remote repository. e.g. Someone in the team has made updates to the main branch that you need to integrate before continuing your work. That’s where the git pull command steps in!

Command: git pull origin main
Description: This command fetches the latest updates from the remote repository's main branch and merges them into your local branch.
git pull combines two actions: fetching remote changes and merging them into your branch.
origin is the default name for the remote repository.
main refers to the branch you're pulling from.
Usually using the command as git pull is enough.

It’s a quick way to ensure you're working with the most current code, especially when collaborating with a team. Pulling latest code regularly prevents conflicts later on.

Git Branching

Farhat Sharif — Mon, 09 Sep 2024 15:05:22 +0000

✦ You've completed a feature in your project and starting on a new one. You don't want to mess up your fully functional and stable code. You need to build on the previous work, but you want to keep it separate and work carefree on the new feature.
✦ You're working in a team and every team member is working on a separate feature. Everyone needs to work independently.
✦ You're working on something that will take time to complete, in the meanwhile you have to do a bug fix.

That’s where Git branches come in handy! Branches allow you to experiment, develop new features or make changes in isolation without affecting your main codebase.

The master/main branch always contains the fully functional code. We create a new branch to work independently from the main branch. When the work is complete, we merge this branch into the main branch.

Let’s see how simple working with Git branches can be.

Create a New Branch:

git checkout -b feature-branch-name
Create and switch to a new branch.
Flag -b tells we're creating a new branch. The checkout command tells to switch to another branch.

Switch Branches:

git checkout branch-name

Merge Branches:

Once we’ve finished working on a branch, we merge it into our master/main branch with git merge command.
git checkout master
Switch to the master branch
git merge feature-branch-name
Merge changes from feature branch into master branch
Merging branches is also done by Pull Requests.

Delete a Branch:

After merging in the main branch, you can delete a branch.
git branch -d feature-branch-name

Common Categories of Git Branches
Git branches can be categorized based on their purpose, though the process to create them is always the same using the git checkout command.
Feature Branches: Used to develop new features.
Bugfix Branches: Used to fix specific bugs or issues.
Release Branches: Used to prepare for a major release.
Hotfix Branches: Used for urgent fixes to critical bugs in production.
We can prefix these categories in branch name (as per git branch naming conventions) to easily identify them. e.g. feature/add-login-page, bugfix/dashboard-display-error

Working with branches can improve the development process, keep the workflow smooth and maintain clean history in version control.

Path vs. Query Parameters: Choosing the Right Approach for API Requests

Farhat Sharif — Sun, 08 Sep 2024 13:23:35 +0000

When building web applications, sending data from frontend to the server is a fundamental task. There are two common methods for passing parameters, i.e. path parameters and query parameters.
Each method has distinct use and choosing the right one can improve the clarity and functionality of our API. Let's explore the difference and see when to use each approach.

1. Path Parameters

Path parameters are included directly in the URL path, separated by forward slash. For example, to fetch specific category of products, the frontend sends request:

const BACKEND_URL = "https://api.example.com/products/";
const category = "electronics";
this.http.get(BACKEND_URL + category);

category is the path parameter here. Backend route defined to capture this path parameter:

router.get("/:category", ProductsController.getAllProducts);

Use req.params.category in the controller method to retrieve the category parameter:

const productCategory = req.params.category;

When to Use:
Path parameters are ideal when the parameter represents a resource identifier, like category name or a product ID.
For example, https://example.com/products/electronics clearly identifies a category of products. This method creates clean and readable URLs.

2. Query Parameters

Query parameters are added to the URL after a question mark, separated by ampersand (if more than one). Query parameters can be passed as part of the query string:

const BACKEND_URL = "https://api.example.com/products/electronics"; 
// Using category as part of the backend url here, so that we can focus only on query parameters in this example
const queryParams = `?orderBy=price&direction=desc`;
this.http.get(BACKEND_URL + queryParams);

The backend route need no parameter since we are using query parameters:

router.get("", ProductsController.getAllProducts);

In the controller retrieve the parameter(s) from the query string:

const orderBy = req.query.orderBy;
const direction = req.query.direction;

When to Use:
Query parameters are suitable for searching, pagination or passing optional data. For example,
https://example.com/products/electronics?orderBy=price&direction=desc appends additional options to sort the results. This method is more flexible, allowing multiple parameters without altering the URL structure but the url can get longer and difficult to read.

Choosing the Right Method

Path Parameters: Use when the parameter is essential to identify the resource.
Query Parameters: Use when the parameter is optional or for filtering, sorting, or pagination.

Note: I have written code examples in simple JavaScript to make it easier to understand.

Essential Git Commands

Farhat Sharif — Fri, 06 Sep 2024 22:16:11 +0000

Once you have set up your git repository (as described in the previous post), here come the next steps. When you start using git, these are the steps you will find yourself doing frequently. Whenever you make changes to your project, these commands will help you manage the changes efficiently.

1. Check Your Files' Status:

Command: git status
Description: This command shows the current status of your repository. It lets you know which files have been modified, which are new, which are staged for commit and which aren’t.

2. Stage Your Changes for Commit

Command: git add <file_name> or git add .
Description: After editing or adding files, use the command to add the changes to the staging area. You can stage individual files by name or all changes at once by using git add . command.

3. Commit Your Changes

Command: git commit -m "commit message"
Description: Once the changes are staged, use git commit command to store them and include a descriptive message that explains the changes you made. Commit is like a snapshot of your repository's current state used to maintain history and track changes.

4. Push Your Changes to the Remote Repository

Command: git push
Description: After committing your changes, push them to your remote repository.
(You need to set the upstream branch once, which we have done in previous post. After that using git push will be enough.)

These simple commands will help streamline your workflow with git.

A Beginner's Guide to Git

Farhat Sharif — Thu, 05 Sep 2024 21:36:21 +0000

After seeing a beginner struggling with the use of Git, I planned to write this post to explain some basic git commands in a simple way. Here's a step-by-step guide on how to use Git. I have added a brief description with each command.

1. Initialize a Local Git Repository

Command: git init
Description: Initializes a new Git repository in the current directory.
From command line, switch into any directory which you want to turn into git repository; using cd <directory_path> and execute git init command there.
(It can be an existing project directory containing your code files or an empty directory where you plan to add your files.)

2. Create a Remote Repository

Go to GitHub or another Git hosting service and create a new repository.

3. Connect Local Repository to Remote Repository

Command: git remote add origin <remote_repository_url>
Description: Links your local repository to the remote repository on GitHub.
(Copy the URL of the newly created repository at github and use here.)

4. Add Files for Staging

Command: git add <fileName>
e.g. git add sampleFile.php
Description: Stages changes in file(s) for commit. Staging is the area where you group changes you've made to files, to include in the next commit.
If you have code changes in more than one files and want to commit all together. Use:
Command: git add .
Description: Stages all changes in all files for commit.

5. Commit Code Changes

Command: git commit -m "Your commit message"
e.g. git commit -m "Update xyz method"
Description: Permanently stores your staged changes in your local repository. Use a descriptive message to document what changes have been made.

6. Push Changes to Remote Repository

Command: git push -u origin <branch-name>
e.g. git push -u origin master
Description: This command sets the upstream branch and uploads your local commits to the remote repository's branch.
(More on branches in some next post.)

By following the above commands, you can successfully initialize a Git repository and upload your project from your local machine to GitHub.

Get to Know N of MEAN Stack

Farhat Sharif — Tue, 12 Jan 2021 15:10:48 +0000

Node.js

Node.js is a runtime environment to execute JavaScript code outside of a browser. Node.js is used to build and run the apps developed in JavaScript or any language that transpile to JavaScript.

Overview

Node.js allows JavaScript code to run outside of a browser context, i.e. running directly on a computer or server OS. It allows the backend APIs to communicate with the OS APIs such as file system libraries. It gives JavaScript the ability to act as a web server language.

Node.js is event-driven, i.e. flow of the program is based on user actions. So Node.js starts the server, performs the initial tasks, starts the event loop and then waits for the event to occur.

Node.js uses single threaded event loop to handle all the requests. Using the non-blocking I/O model, it comes up with the ability to handle a large number of concurrent requests without the need to manage thread concurrency.

Node.js provides access to an enormous number of reusable components through its package manager npm and enhances the developers’ power in this way.

Benefits

Node.js is:

Suitable for data-intensive apps.
Known for building efficient and highly scalable apps.
A good platform to serve real-time apps because of its great performance and reliable service.

Get to Know A of MEAN Stack

Farhat Sharif — Tue, 12 Jan 2021 15:08:24 +0000

Angular

Angular is a component based web application framework used to build efficient front-end solutions. Angular simplifies the ways of creating single-page client-side applications using HTML and TypeScript (a superset of JavaScript).

Overview

Angular app consists of module(s). Every module represents a particular functionality and organizes related components.

Components are the building blocks of an Angular app. Every component defines an angular view. Components use:

HTML templates to define the view part of the component. These templates contain Angular template syntax to alter the views dynamically according to the app logic, state and data.
Classes (written in TypeScript) to define components’ logic to handle data and functionality.
Component-specific styles for the UI design.

Then there are Services, i.e. classes used to define the functionality that is not associated with a view. Services can be injected into components with a mechanism known as dependency injection. Services are shared across components.

The TypeScript code is translated to JavaScript instructions by the framework’s compiler at build time. It brings all the efficiency associated with JavaScript to the Angular app.

Benefits

Angular supports highly scalable systems.
Angular produces high-performance apps.
Angular provides the ability to design accessible apps with Angular Material library, for people with visual or motor impairments.

Get to Know E of MEAN Stack

Farhat Sharif — Tue, 12 Jan 2021 15:05:59 +0000

Express

Express is a minimal web application framework for Node.js applications. It gives the ability to develop fundamental web application features quickly and easily. Express is used to build server-side applications.

Overview

Express provides the mechanisms to:

Create web server and server-side settings, e.g. port to use for connecting, database access, etc.

Write request handlers for HTTP request methods. These handlers can be required to read/write data from/to a database or many other tasks to satisfy the request and generate the response.

Add middleware functions to simplify common web development tasks during the request processing, e.g. file upload and storage, password hashing, routing, error handling, etc.

Benefits

The minimalist approach makes it easy to learn and easy to build APIs with Express.
Middleware based. Integrate/create as many components as you want to achieve different functionalities. Easy integration with third-party middleware.
Unopinionated framework. Flexible framework for the developers to choose suitable components to solve the problems or complete their tasks. Fewer restrictions on which components to use and how to use them together.