DEV Community: farajshuaib

Understanding the Mediator Pattern and CQRS with dart_mediatR

farajshuaib — Sat, 31 Aug 2024 16:19:51 +0000

Introduction

In the world of software design patterns, the Mediator Pattern and CQRS (Command Query Responsibility Segregation) are powerful tools that help manage complex interactions and improve the scalability of applications. This article will explore these concepts and how they are implemented in Flutter using the dart_mediatR package.

What is the Mediator Pattern?

The Mediator Pattern is a behavioral design pattern that facilitates communication between different parts of an application. It centralizes complex communications and control logic, ensuring that components are loosely coupled and only communicate through the mediator.

Key Benefits:

Decoupling Components: Components communicate indirectly through the mediator.
Simplified Communication: Reduces dependencies between components.
Improved Maintainability: Easier to manage and scale.

Common use cases for the Mediator Pattern in Flutter applications

Decoupling Widgets

Problem: Widgets need to communicate with each other without creating tight dependencies.
Solution: Use a mediator to handle interactions, allowing widgets to remain unaware of each other and only communicate through the mediator.

Centralized Event Handling

Problem: Multiple parts of an application need to respond to the same event.
Solution: The mediator acts as an event dispatcher, ensuring that all interested parties are notified without direct coupling.

Complex Form Management

Problem: Forms with multiple fields where changes in one field affect others.
Solution: Use a mediator to manage the logic and interactions between form fields, centralizing validation and updates.

Modular Feature Integration

Problem: Integrating new features into an existing app without disrupting existing code.
Solution: Implement the mediator to allow new features to communicate with existing ones seamlessly.

State Management

Problem: Managing state changes and updates across different parts of an application.
Solution: Use a mediator to handle state changes, ensuring that all components receive necessary updates without direct dependencies.

Command and Query Handling

Problem: Executing commands and queries in a decoupled manner.
Solution: The mediator can manage commands and queries, routing them to the appropriate handlers and returning results.

Inter-Module Communication

Problem: Modules need to communicate without knowing each other's details.
Solution: Use a mediator to facilitate communication between modules, allowing them to remain independent and modular.
These use cases help maintain clean architecture, reduce dependencies, and improve maintainability in Flutter applications.

Implementing the Mediator Pattern with dart_mediatR

dart_mediatR simplifies the implementation of the Mediator Pattern in Flutter. It acts as a message broker, allowing different parts of an application to send and handle requests without direct dependencies.

Example:

import 'package:dart_mediatR/dart_mediatR.dart';

// Define a Request
class FetchDataRequest extends IRequest<String> {
  final String id;
  FetchDataRequest(this.id);
}

// Define a Handler
class FetchDataHandler extends IRequestHandler<FetchDataRequest, String> {
  @override
  Future<String> handle(FetchDataRequest request) async {
    // Fetch data logic
    return 'Data for ${request.id}';
  }
}

void main() {
  final mediator = Mediator();

  // Register Handler
  mediator.registerHandler<FetchDataRequest, String>(FetchDataHandler());

  // Send Request
  final result = mediator.send(FetchDataRequest('123'));
  print(result); // Output: Data for 123
}

What is CQRS?

Command Query Responsibility Segregation (CQRS) is a pattern that separates the read and write responsibilities of a data model. By splitting these concerns, applications can achieve more flexibility, scalability, and performance.

Key Benefits:

Scalability: Independently scale read and write operations.
Performance: Optimize read and write models separately.
Flexibility: Evolve models independently over time.

Implementing CQRS with dart_mediatR

Using CQRS in dart_mediatR involves defining commands for writes and queries for reads.

Example:


// Define a Command
class UpdateDataCommand extends ICommand {
  final String id;
  final String newData;
  UpdateDataCommand(this.id, this.newData);
}

// Define a Command Handler
class UpdateDataHandler extends ICommandHandler<UpdateDataCommand> {
  @override
  Future<void> handle(UpdateDataCommand command) async {
    // Update data logic
    print('Data updated for ${command.id}');
  }
}

// Define a Query
class GetDataQuery extends IQuery<String> {
  final String id;
  GetDataQuery(this.id);
}

// Define a Query Handler
class GetDataHandler extends IQueryHandler<GetDataQuery, String> {
  @override
  Future<String> handle(GetDataQuery query) async {
    // Retrieve data logic
    return 'Data for ${query.id}';
  }
}

void main() {
  final mediator = Mediator();

  // Register Command and Query Handlers
  mediator.registerHandler<UpdateDataCommand>(UpdateDataHandler());
  mediator.registerHandler<GetDataQuery, String>(GetDataHandler());

  // Send Command
  mediator.send(UpdateDataCommand('123', 'New Data'));

  // Send Query
  final data = mediator.send(GetDataQuery('123'));
  print(data); // Output: Data for 123
}

Conclusion

By leveraging the Mediator Pattern and CQRS in Flutter with dart_mediatR, you can build more modular, maintainable, and scalable applications. The separation of concerns allows for cleaner code architectures and easier evolution of your application over time.

Explore the dart_mediatR package today and start implementing these powerful patterns in your Flutter projects!

dependency injection in typescript using di-injectable library

farajshuaib — Sat, 29 Jun 2024 19:35:43 +0000

In this article, we’ll explore the concept of dependency injection in TypeScript and how it can revolutionize our software development process using di-injectable library.

What is Dependency Injection?

Dependency injection is a design pattern that allows us to decouple components by injecting their dependencies from external sources rather than creating them internally. This approach promotes loose coupling, reusability, and testability in our codebase.

Constructor Injection

Constructor injection is one of the most common forms of dependency injection. It involves injecting dependencies through a class’s constructor. Let’s consider an example:

class UserService {
  constructor(private userRepository: UserRepository) {}

  getUser(id: string) {
    return this.userRepository.getUserById(id);
  }
}

class UserRepository {
  getUserById(id: string) {
    // Retrieve user from the database
  }
}

const userRepository = new UserRepository();
const userService = new UserService(userRepository);

In the above example, the UserService class depends on the UserRepository class. By passing an instance of UserRepository through the constructor, we establish the dependency between the two classes. This approach allows for easy swapping of different implementations of UserRepository, making our code more flexible and extensible.

Benefits of Dependency Injection

By embracing dependency injection, we unlock several benefits that greatly enhance our codebase:

Loose Coupling
Dependency injection promotes loose coupling between components, as they depend on abstractions rather than concrete implementations. This enables us to swap out dependencies easily, facilitating code maintenance and scalability.
Reusability
With dependency injection, we can create components with minimal dependencies, making them highly reusable in different contexts. By injecting specific implementations of dependencies, we can tailor the behavior of a component without modifying its code.
Testability
Dependency injection greatly simplifies unit testing. By injecting mock or fake dependencies during testing, we can isolate components and verify their behavior independently. This leads to more reliable and maintainable test suites.
Flexibility and Extensibility
Using dependency injection allows us to add new features or change existing ones without modifying the core implementation. By injecting new dependencies or modifying existing ones, we can extend the functionality of our codebase without introducing breaking changes.

lets make dependency injection easier by using DI-injectable library

DI-injectable library is a simple Dependency Injection (DI) library for TypeScript supporting Singleton and Transient service lifetimes.

Installation

First, install the package via npm or yarn:


npm install injectable

yarn add injectable

Usage

Setting Up Services

Define Services: Create your service classes and use the @Injectable decorator and use ServiceLifetime enum to register your services as Singleton or Transient..
Resolve Services: Use the ServiceProvider to resolve instances of your services.

Example

Let's walk through a complete example.

Define Services Create some simple services and use the @Injectable decorator.

// src/services/logger.ts
import { Injectable } from 'di-injectable'; 

@Injectable(ServiceLifetime.Singleton)
export class Logger {
  log(message: string) {
    console.log(`Logger: ${message}`);
  }
}

// src/services/userService.ts
import { Injectable, Inject } from 'di-injectable';
import { Logger } from './logger';

@Injectable()
export class UserService {
  constructor(@Inject(Logger) private logger: Logger) {}

  getUser() {
    this.logger.log('Getting user...');
    return { id: 1, name: 'John Doe' };
  }
}

Resolve Services Use the ServiceProvider to resolve instances of your services.

// src/app.ts
import { ServiceProvider } from 'di-injectable';
import { UserService } from './services/userService';

const serviceProvider = new ServiceProvider();

const userService = serviceProvider.resolve<UserService>(UserService);
const user = userService.getUser();
console.log(user);

Explanation

Defining Services:
- The Logger service is a simple logger class.
- The UserService class depends on the Logger service. The @Inject decorator is used to inject the Logger service
- into the UserService constructor.
Registering Services:
- We register the Logger service as a Singleton, meaning only one instance of Logger will be created and shared.
- We register the UserService as a Transient by default, meaning a new instance of UserService will be created every time it is resolved.
Resolving Services:
- We create a ServiceProvider instance.
- We resolve an instance of UserService using the serviceProvider. The UserService will have the Logger instance injected into it due to the @Inject decorator.

Service Lifetimes

Singleton: Only one instance of the service is created and shared.
Transient: A new instance of the service is created every time it is requested.

API Reference

ServiceProvider:
- resolve<T>(token: any): T: Resolves an instance of the service.
- Injectable: Decorator to mark a class as injectable as register it.
- Inject: Decorator to inject dependencies into the constructor.

Conclusion

Dependency injection is a powerful technique that improves code maintainability, testability, and flexibility. By leveraging constructor or property injection, we can create loosely coupled components that are highly reusable and easy to test.

As software engineers, embracing dependency injection in our TypeScript projects empowers us to write cleaner, more modular, and robust code. It enhances the scalability of our applications, enables efficient collaboration between team members, and simplifies the introduction of new features or changes.

What's new in react 18, A Quick Overview

farajshuaib — Sat, 22 Jan 2022 13:30:52 +0000

ReactJS is an open-source JavaScript library that build to develop high-quality user interfaces for both online and mobile apps. In the JavaScript food chain, it is currently the most popular and widely utilised. React was chosen as the preferred JavaScript framework by developers who took part in StackOverflow’s “2020 Developer Survey.”

now react team announced the plan for the next version of React, alongside many of its upcoming features. There was also a release timeline, publicly available alpha, and even a Working Group dedicated to discussing and improving React 18.

Overall, a lot is going on with React, so let’s dive in and explore all the announcements with some additional details!

Let's see what are the new features

Automatic Batching
Start Transition
New Suspense SSR

Automatic Batching

Let first see what is batching?

Batching is grouping multiple state update into a single render to optimize the performance.

Batching occurs when React groups multiple updates together into a single render state for achieving better computational performance. This also prevented the components from rendering “Half-Finished” states where only one state variable was updated before, causing several bugs at times. However, React would not batch the updates every time and rather perform two independent batches. React 18 will be added with a performance improvement update, where it will automatically batch the updates, irrespective of origin, for both the application and the library code. The updates inside of timeouts, promises, or even native event handlers will be batched the same way as the updates inside of React events. This will add an out-of-the-box improvement to the rendering time and even better performance. With this issue addressed in React 18, it makes the batching process more efficient and consistent.

Let see this with a code example.

import { useState, useLayoutEffect } from "react";
import * as ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    console.log("=== click ===");
    setCount((prevCount) => prevCount + 1); // Does not re-render yet
    setFlag((prevFlag) => !prevFlag); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
      <LogEvents />
    </div>
  );
}

function LogEvents(props) {
  useLayoutEffect(() => {
    console.log("Commit");
  });
  console.log("Render");
  return null;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

We can see, The handleClick has two setState inside it. But when we click the Next button the component renders only a single time. You can see the log in console.
Batching already exists in React 17, But React used to batch update only for browser events, not for callbacks. Check the below code for more details

import { useState, useLayoutEffect } from "react";
import * as ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    console.log("=== click ===");
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these:
      setCount((prevCount) => prevCount + 1); // Causes a re-render
      setFlag((prevFlaf) => !prevFlaf); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
      <LogEvents />
    </div>
  );
}

function LogEvents(props) {
  useLayoutEffect(() => {
    console.log("Commit");
  });
  console.log("Render");
  return null;
}

function fetchSomething() {
  return new Promise((resolve) => setTimeout(resolve, 100));
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

We can see the component is rendered two times in the console when the Next button is clicked. React does not batch update inside promise, setTimeout or any other events. To overcome this Automatic Batching is added in React 18.

Automatic Batching performs batch updates in all events. So we get automatically a better performance compared to the older version of React.
So what we need to do for getting this better performance in our app?
Just update your react version to 18 (as of now 18 Alpha) and add createRoot to your ReactDom render like below

ReactDOM.createRoot(rootElement).render(<App />);

Start Transition

Start Transition classifies the state update into two types

Urgent Updates
Transition Updates (Slow Updates)

Start Transition mainly focus on the User Experience of the app. As updates inside transition run in the background slowly.

During interactions with the user interface for small actions like clicking a button or typing an input, page freezing may occur, disrupting the workflow. In React 18, a new API known as startTransition has been introduced that helps keep the app responsive even during large screen updates. The API substantially improves the user interactions by marking specific movements as “transitions ”. This allows for React to be informed about which updates are important and which are not. Transitions here are interrupted by urgent updates, and the prior irrelevant transitions are dismissed. This enables the UI to ignore secondary updates that might be slower in nature. startTransition moves the updates to the background, consisting of either complex processing or slowed data fetching due to network connectivity.

You can further understand this through a real-world example.

import { startTransition } from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

setSearchQuery will be interrupted If an urgent update like user interaction events comes in.

React provide a hook for transition with isPending

import { useTransition } from 'react';
const [isPending, startTransition] = useTransition();

isPending can be used to show the loading state to the user. If the transition is in progress.

React recommends using Transition for remote data and large data updates in UI.

New Suspense SSR

This feature is for rendering react components in the server. Now suspense supported for server-side rendering also.

so what's SSR means !

Server-side rendering, also known as SSR, is a component that lets you generate HTML from React components directly on the server and share the HTML with users. Users can see a preview of the page through SSR even before the javascript bundle presents loads and runs. But sometimes, the javascript on the backend takes a long time to get processed, and the time taken is known as Hydrating Time. React 18 will include architectural improvements to the React SSR’s performance. The new update will allow Streaming HTML directly on the server, i.e., the server sends pieces of components as they get rendered using another component known as Suspense, which decides which parts of the application might take longer to load and what shall be rendered directly. Using a selective hydration method, components that are wrapped with Suspense will not block hydration anymore. Every ready component will start hydrating once the browser gets both its content and javascript code.

typing effect using css only

farajshuaib — Tue, 04 Jan 2022 21:14:24 +0000

In this article, you’ll learn how to make your website’s text dynamic and more engaging using typewriter effects in pure CSS.

The typewriter effect involves text being revealed gradually, as if it’s being typed before your eyes.

Adding typewriter effects to chunks of your text can help engage your website’s visitors and keep them interested in reading further. The typewriter effect can be used for many purposes, such as making engaging landing pages, call-to-action elements, personal websites, and code demonstrations

The Typewriter Effect Is Easy to Create

The typewriter effect is easy to make, and all you’ll need in order to make sense of this tutorial is a basic knowledge of CSS and CSS animations.

Here’s the way the typewriter effect is going to work:

The typewriter animation is going to reveal our text element by changing its width from 0 to 100%, step by step, using the CSS steps() function.
A blink animation is going to animate the cursor that “types out” the text.

Creating the Web Page for Our Typing Effect

Let’s first create the web page for our typewriter demo. It will include a <div> container for our typewriter text with a class of typing:

Styling the Container for the Typewriter Text

Now that we have the layout of the web page, let’s style the <div> with the “typing” class:

Note that, in order for the typewriter effect to work, we’ve added the following:

"overflow: hidden;" to make sure the text content isn’t revealed until the typing effect has started.
"border-right: "0.15em solid #999", to create the typewriter cursor.

Making the Reveal-text Animation

The typewriter animation is going to create the effect of the text inside the typing element being typed out, letter by letter. We’ll use the @keyframes CSS animation rule:

As you can see, all this animation does is change an element’s width from 0 to 100%.

Now, we’ll include this animation in our typing class ...

Adding Steps to Achieve a Typewriter Effect

So far, our text is revealed, but in a smooth way that doesn’t reveal the text letter by letter. This is a start, but obviously it’s not what a typewriter effect looks like.

To make this animation reveal our text element letter by letter, or in steps, the way a typewriter would, we need to split the typing animation included by the typing class into steps in order for it to look like it’s being typed out. This is where the steps() CSS function comes in:

As you can see, we’ve split the typing animation into 40 steps using the CSS steps() function. This is what we see now: