DEV Community: Mohammad Reza Rahimian Golkhandani

Implement Flutter BloC pattern in React

Mohammad Reza Rahimian Golkhandani — Sun, 28 Jan 2024 03:51:02 +0000

Last week, I faced an IT layoff. After the initial shock, I've embraced the silver lining—now I have more time for side projects and can sharpen my skills in Backend, Frontend, and Flutter. Working for companies often means focusing on projects, but this setback has humbly opened up a window for personal growth.

After a few years immersed in Flutter projects, I've discovered the joy and speed it brings to developing both mobile and web apps. Currently, I'm diving into a side project, using React.js for the web's frontend, Nest.js, MongoDb, and GraphQL for the backend, and Flutter for mobile applications. It's an exhilarating tech mix!

Implementing the BloC pattern I use in Flutter into React.js might raise eyebrows, but for me, it's about consistency and speed in developing applications for both web and mobile. Why not use Flutter for the web, you ask? Simple—it's not quite ready for content-based web applications.

Let the coding party begin! 🚀 First things first, let's lay the foundation with the base BloC class. But before we dive in, stepping into the world of reactive programming requires a trusty reactive object. We're keeping it smooth and easy by leveraging the rxjs package instead of reinventing the wheel with our observable objects. Let's roll! 😎💻

// bloc_basic.ts
import { BehaviorSubject, Observer } from "rxjs";

export abstract class Bloc<T> {
    private _state: BehaviorSubject<T>;
    constructor(initState: T) {
        this._state = new BehaviorSubject<T>(initState);
    }

    public get state(): T {
        return this._state.getValue();
    }

    private get $() {
        return this._state.asObservable();
    }


    emit(updatedState: T) {
        this._state.next(updatedState);
    }

    dispose() {
        this._state.complete();
    }

    listen(listener: Partial<Observer<T>> | ((value: T) => void)) {
        const observer = this.$.subscribe(listener);
        return () => observer.unsubscribe();
    }
}

This TypeScript code creates a class called Bloc, following the BloC pattern with "rxjs". It manages state using BehaviorSubject, and you can update the state with the emit method. The dispose method cleans up when needed. The listen method lets you watch for state changes easily. In short, it's a simple and effective way to handle state in applications.

Now that our BloC class is taking shape, let's add a dash of interactivity! We need a way to register the UI and keep tabs on state changes. Two key functions are on the menu for now: one to switch up the UI and another to listen and execute a function. This way, you can do more than just updating the UI – think notifications, and beyond! Let's make this BloC sizzle! 🔥💻

bloc_hooks.ts
import { useEffect, useState } from "react";
import { Bloc } from "./bloc_basic";


export const useBloc = <T>(bloc: Bloc<T>): T => {
    const [state, setState] = useState<T>(bloc.state);
    useEffect(() => {
        const unsubscribe = bloc.listen((val: T) => setState(val));

        return () => unsubscribe();
    }, [bloc]);

    return state;
}


export type BlocListenerFunction<T> = (state: T) => void;
export const useBlocListener = <T>(bloc: Bloc<T>, { listener }: { listener: BlocListenerFunction<T> }) => {
    useEffect(() => {
        const unsubscribe = bloc.listen((val: T) => listener(val));

        return () => unsubscribe();
    }, [bloc]);
}

The useBloc hook takes a BloC instance, sets up a state with its initial value, and automatically updates the state whenever the BloC changes. It ensures cleanup by unsubscribing when the component unmounts. The second hook, useBlocListener, is for more custom use cases, allowing you to specify a listener function to run when the BloC state changes. It, too, takes care of subscribing and unsubscribing to prevent memory leaks. Together, these hooks simplify integrating BloCs into React components.

We are almost done with basics, just a Widget,... eee, I mean Component to give us access to the state, so we can react and update UI if needed.

// bloc_components
import { Fragment, ReactNode } from "react";
import { useBloc } from "./bloc_hooks";
import { Bloc } from "./bloc_basic";


export type BlocBuilderFunction<T> = (state: T) => ReactNode;
export function BlocProvider<B extends Bloc<S>, S>({ bloc, builder }: { bloc: B, builder: BlocBuilderFunction<S> }) {
  const state = useBloc(bloc);
  return (
    <Fragment>
      {
        builder(state)
      }
    </Fragment>
  );
}

We are done with the basics. Now, let's create a small example, imagine we have a shopping list page, and we have a state that keeps track of the items and loading state.

//shopping_list_logic.ts

import { Bloc } from "../../utils/basic_bloc/bloc_basic";
import { ShoppingList, fakeShoppingLists } from "./models/shopping_list_model";

// To simulate a http call
const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));

// state of the page including loading and data state
export class ShoppingListState {
  items: ShoppingList[];
  isLoading: boolean = false;

  constructor(state: ShoppingListState) {
    this.items = state.items;
    this.isLoading = state.isLoading;
    return this;
  }

  static init(): ShoppingListState {
    return new ShoppingListState({
      items: [],
      isLoading: false,
    });
  }
};


// logic behind the page
export class ShoppingListBloc extends Bloc<ShoppingListState> {
  constructor() {
    super(ShoppingListState.init());
  }


  async loadData() {
    this.emit({
      ...this.state,
      isLoading: true,
    });

    await sleep(4000);

    this.emit({
      ...this.state,
      isLoading: false,
      items: fakeShoppingLists,
    })
  }
}

And the final component is to show the page and data.

import { CircularProgress, List } from "@mui/material";
import ShoppingListCard from "./components/shopping_list_card";
import { Fragment, useEffect } from "react";
import { BlocProvider } from "../../utils/basic_bloc/bloc_components";
import { ShoppingListBloc, ShoppingListState } from "./shopping_list_logic";
import { Center } from "../../utils/layout_components";
import { useSetTitle } from "../dashboard/dashboard_logic";


const bloc = new ShoppingListBloc();
export default function ShoppingListPage() {
  useEffect(() => {
    bloc.loadData();
    return;
  }, []);


  return (
    <Fragment>
      <BlocProvider<ShoppingListBloc, ShoppingListState>
        bloc={bloc}
        builder={(state) => {
          return <>
            {
              state.isLoading ?
                <Center>
                  <CircularProgress />
                </Center> :
                <List>
                  {state?.items.map((item, i) => (
                    <ShoppingListCard key={item.id + i} item={item} />
                  ))}
                </List>

            }
          </>
        }}
      ></BlocProvider>

    </Fragment>
  );
}

Just a heads up, there's room for more enhancements in the pipeline, like leveraging dependency injection for BloC creation or introducing an extra hook for comparative builders. As I gear up for my next side project straddling both Flutter and React, I'm committed to refining and updating the repo. Also, I'm exploring the addition of some useful layout Widgets. Let's keep things sharp and streamlined! 🛠️👨‍💻

Repo: https://github.com/golkhandani/shop_wise/tree/main/web

Write your own validator in less than 100 line!

Mohammad Reza Rahimian Golkhandani — Tue, 25 Aug 2020 10:13:15 +0000

Writing a validator is easy!

Base of a validator function is a traverse through object's properties.
Then you need to check your value with some basic if/else to validate input data.

The final validation schema will look like this:

const Schema = {
    'Username': 'Required|Alphabet|Min:3|Max:10',
    'Password': 'Required|Alphabet|Min:3|Max:10',
    'Profile': {
        'Age': 'Required|Numeric|Gt:17|Lt:99',
        'Sex': 'Required|In:Male,Female',
    }
}

Less talk more code, let's start with traverse function:

enum SchemaType {
    string,
    object,
    array
}
.
.
.
class Validator {

   private MainValidator(Schema:any, Data:any,Path?:string) {
        for (const key in Schema) {
            const Rule = Schema[key];
            const Node = (Path ? Path + "." : "") + key;
            const RuleData = Data ? Data[key] : {};
            const InputSchemaType:SchemaType | undefined = this.GetSchemaType(Rule);
            switch (InputSchemaType) {
                case SchemaType.object:
                    this.MainValidator(Rule, RuleData,key);
                    break;
                case SchemaType.array:
                    this.ArrayValidator(Rule[0],RuleData,key);
                    break;
                default:
                    this.InnerValidator(Rule, RuleData,Node);
                    break;
            }
        }
    }
.
.
.
    private GetSchemaType(Rule:any):SchemaType | undefined {
        if (typeof Rule === "string") {
            return SchemaType.string;
        }
        else if (typeof Rule === "object" && !Array.isArray(Rule)) 
        {
            return SchemaType.object;
        }
        else if (typeof Rule === "object" && Array.isArray(Rule)) 
        {
            return SchemaType.array;
        }
        else {
            return;
        }
    }
}

MainValidator method is the base of our validation then we need to define the branches of the tree, ArrayValidator and InnerValidator.

.
.
.
    private ArrayValidator(Rule:any, Data:any, key?:string) {
        let index = 0;
        do {
            this.MainValidator(Rule, Data[index] , key+"."+index);
            index++
        } while ((Data || []).length > index);

     }
.
.
.
    private InnerValidator(rules:any,value:any,Node:string) {
        const FnNameAndArgs = this.GetFnNameAndArgs(rules);
        for (let index = 0; index < FnNameAndArgs.length; index++) {
            const FnNameAndArg = FnNameAndArgs[index];
            const Result = this.Validators.get(FnNameAndArg.name)?.call(this,value,...FnNameAndArg.args)
            if(Result && !Result.isValid) {
                this.Errors.has(Node) ? 
                this.Errors.get(Node)?.push(Result.message) :
                this.Errors.set(Node,[Result.message]); 
            }
        }   
    }

When the branches reach to the leaf mean GetFnNameAndArgs method. You should have the real validator methods and a place to store them.

Also because we want to use string patterns in our schema we could have a Map of string -> function

.
.
.
    private Validators: Map<string,Function> = new Map();
    private GetFnNameAndArgs(rules: any) {
        return rules.split('|').map((item:any) => {
            const V = item.split(':');
            const name = V[0]; V.shift();
            return { name, args: V };
        });
    }

And finally a place to store Validation Errors

.
.
.
    private Errors: Map<string,string[]> = new Map();
.
.
.

To add any kind of validator function we simply use constructor

const Required = (value:any) => {
    if(value) {
        return {
            isValid: true,
        }
    } else {
        return {
            isValid: false,
            message:"Is Required"
        }
    }
}

class Validator {
    constructor() {
        this.Validators.set("Required", Required);
    }
...
}

And finally add an entry point for your class to do validation for input objects.


class Validator {
...
    Validate(Schema:any, Data:any){
        this.Errors = new Map<string,string[]>();
        this.MainValidator(Schema, Data);
        return this.Errors;
    }
...
}

Conclusion

Now you have a nice and clean validator, with some help of memoization we also can make it faster than many other validator in js world.

You can find the whole code here.

Writing a SAAS is not easy!

Mohammad Reza Rahimian Golkhandani — Mon, 17 Aug 2020 06:08:09 +0000

Focus SaaS

I have started A prefix in my github account named Focus to collect what I could find on web about rare topics or One-page learning for beginner level topics;

I began this series with focus_postgresql and I hope I can release more and more on this series;

focus_saas repo will look at some challenges and some technical strategies related to SaaS applications;

What the heck is a SaaS application?

Based on WIKIPEDIA: Software as a service (SaaS /sæs/[1]) (also known as subscribeware or rentware) is a software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted.
SaaS has become a common delivery model for many business applications, including office software, messaging software, payroll processing software, DBMS software, management software, CAD software, development software, gamification, virtualization,[5] accounting, collaboration, customer relationship management (CRM), management information systems (MIS), enterprise resource planning (ERP), invoicing, human resource management (HRM), talent acquisition, learning management systems, content management (CM), geographic information systems (GIS), and service desk management.[6] SaaS has been incorporated into the strategy of nearly all leading enterprise software companies.[7][8]

So basically it is a release strategy. However, there are tons of technical challenge related to this release method;

Challenges of SaaS Application

Business Perspective

Managing SaaS subscription lifecycle
A customizable system (Or top 5 business model with strict rules)
GDPR and HIPAA compliant

Technical Perspective

Managing multi-tenancy in different level
Finding best Architecture solution based on business perspective
Predict future changes that could affect on your Architecture
Designing database to fullfil security and isolation requirement
Implementing best deployment solution for zero downtime for all tenant

Architecture importance in SaaS applications

There are three different layer that result four different Architecture;

Infrastructure
Database
Application

1. Complete isolation

In this solution you deliver whole product from Infrastructure to application to your user;
Generally speaking, It's not the best solution for most businesses due to its costs;

Pros	Cons
Complete isolation from physical level	Costs, costs and costs for each new tenant (and it means more expensive subscriptions)
Full control of client load for better optimizations	Updating of application need much more work on operation and deployment level
Each client load only affect on its own business not others	Extra work in operation team to handle new clients
Predicable IO (network,db,logs,etc)	-
Easier customization of Application for specific tenant	-
Easier in early stages of development	-

This solution can be used with some other as a solution for Massive clients
like what Github, Microsoft or Amazon do for their enterprise level customers.

2. Infrastructure-tenancy

In this solution we use a shared infrastructure

Pros	Cons
Less cost in term of hardware	Shared Infrastructure means shared IO that could result lower Load capability
Easier to manage clients	Lower level of security that could be a drawback for some of your client
Doesn't need extra operation level works for setting up new system from scratch	Still need extra things for running application for new user
Easy customization of Application for specific tenant	-

3. Application-tenancy

In this solution only separated part of your product is the database layer;
This method has the best balance between cost/development and separation of sensitive data;

Pros	Cons
Easiest and fastest method from development perspective	Load of some bigger client could heavily affect on your other client
A good enough solution for startups	Controlling of database connection for each tenant handle in app

4. Shared-tenancy

In this method all layer of application are shared between all tenants;

Pros	Cons
Really low cost in terms of hardware	Could cause serious performance issue even in medium applications
-	could be difficult from technical perspective due to many level of access control and separation that should be handled in application layer
-	In some cases it could be in conflict with privacy rules in specially in european union
-	Could result security issues or cross tenant access

Most Important factors in choosing an Architecture are:

Scalability

Number of tenants.
Storage per-tenant.
Storage in aggregate.
Workload.

Tenant isolation

Data isolation
performance (whether one tenant's workload impacts others).
Per-tenant cost.

Development complexity

Changes to schema.
Changes to queries (required by the pattern).

Operational complexity

Monitoring and managing performance.
Schema management.
Restoring a tenant.
Disaster recovery.

Customizability: Ease of supporting schema customizations that are either tenant-specific or tenant class-specific.

As Microsoft says: The tenancy discussion is focused on the data layer. But consider for a moment the application layer. The application layer is treated as a monolithic entity. If you divide the application into many small components, your choice of tenancy model might change. You could treat some components differently than others regarding both tenancy and the storage technology or platform used.

Also its good to look at this comparison;

There are really good article about this section in
ibm and
selleo.com blog

Database importance in SaaS applications

There are four major database design in SaaS applications;

Server Instance per tenant
Database per tenant (single instance)
Table per tenant
Shared Table

1. Server Instance per tenant

Every tenant gets its own hardware for database instance and code will use different connection strings, no impact to SQL

Pros	Cons
Complete physical isolation of tenant data	Cost
Control of the DB instance size based on the load exerted by the tenant	DB schema updates is much more harder than other approaches
Can have customized DB schema	-
Easier to roll out tenant specific code release	-

2. Database per tenant

Every tenant gets his schema, but runs under the same physical database server

Pros	Cons
DB level isolation of tenant data	Cost
Control of the DB instance size based on the load exerted by the tenant	DB schema updates is much more harder than other approaches
Can have customized DB schema	making coordination of code changes harder if dedicated app servers talk to the db.
Easier to roll out tenant specific code release	Will hit the system file size limits

Depend on number of tenant it this method could be the best one or the worst one;

3. Table per tenant

User something like tenant_id as prefix for each table

To be honest this method not even worthy for review due to its critical performance issues;

*_ Storing 100 directory with 100-200 file per directory could result better performance than 100 _ 100-200 file all in one directory
and because how database systems store data (for example InnoDB engine store 1~3 file per DB) you should consider your number of predicted tenant in database design

4. Shared Table

Use tenant_id in each record;
Based on your project it could be the best solution if you be careful about all the indexing and security problems;

Pros	Cons
Easy to run cross queries	No db level isolation of tenant data
Easy to manage and apply schema updates	No option to support schema changes specific to a tenant
-	mbalance of tenants can adversely affect the DB performance, creating hotspots
-	Trust the developer to provide the additional where condition

It's good to see the discussion around this topic in stackoverflow also look at this

Conclusion

These are just doors to a whole new world and you have to consider many many other factors if you want to go through each one of them.
I am still looking for the best approach for my future SAAS product and if you have any comment I would be pleased to hear them.

Don't ever use LIMIT again!!!

Mohammad Reza Rahimian Golkhandani — Sun, 16 Aug 2020 08:22:32 +0000

Introduction

Working with LIMIT and OFFSET is one of the easiest way to create a paginated query. However it is not very performance friendly.
A better approach for a paginated query is using "cursor based" approach. In this article I have tried to compare both "cursor based" pagination and "offset based" to give a better understanding of them and find the best approach that fit our project.

What is the "Cursor based" pagination?

In this method instead of using OFFSET OR SKIP to scroll data to the last retrieved data a pointer to the last item is used for example user_id.
Usually this pointer is used as a condition in our query, like $gte in MongoDB or > in SQL;
In the following sections of this article, I will implement "cursor based" method in a table with 20000 row (MySQL).

To keep reading time short I will implement Mongodb version in separate article

Preparing test in MySQL

To do a comparison between different methods I will create 20000 row in a table.
Let's start wih creating database for our test.

CREATE DATABASE benchmark_pagination;
USE benchmark_pagination;

now create a table with 20000 row

CREATE TABLE users (
    user_id BINARY(16) PRIMARY KEY DEFAULT (UUID_TO_BIN(UUID())),
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    birth_date DATE,
    phone VARCHAR(50),
    password VARCHAR(50),
    INDEX (phone)
);
INSERT INTO users (first_name, last_name, birth_date, phone, password) values ('Hatty', 'Massenhove', '1998-06-19', '268-515-7621', 'mJOGJ36lAO');
.
.
.

Doing a simple select query for this table will result:

I use SQL_NO_CACHE to disable query cache layer for testing

SELECT SQL_NO_CACHE  BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
ORDER BY user_id ASC
LIMIT 10 OFFSET 10000

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	57.2 ms	98.53%	1	57.2 ms

6a48c2b8-ba91-11ea-9d0e-0242ac130004    Hatty       Massenhove
6a4ef217-ba91-11ea-9d0e-0242ac130004    Inga        Scoyles
6a536ef0-ba91-11ea-9d0e-0242ac130004    Kenyon      Della Scala
6a57c3bc-ba91-11ea-9d0e-0242ac130004    Devondra    Gosselin
6a5bf956-ba91-11ea-9d0e-0242ac130004    Corney      Perring     *
6a611955-ba91-11ea-9d0e-0242ac130004    Shina       Billo
6a65396f-ba91-11ea-9d0e-0242ac130004    Opalina     Kienle
6a6a08ad-ba91-11ea-9d0e-0242ac130004    Riobard     Godsmark
6a702fbe-ba91-11ea-9d0e-0242ac130004    Emalee      Ferrarini
6a748fba-ba91-11ea-9d0e-0242ac130004    Netta       Bellworthy

Look at above results as the base result for next two queries. First with LIMIT and OFFSET and second with Cursor Based method.

We use row with * as the last item for better understanding and comparison
First query and results:

SELECT SQL_NO_CACHE BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
ORDER BY user_id ASC
LIMIT 10 OFFSET 10005

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	55.1 ms	99.47%	1	55.1 ms

6a611955-ba91-11ea-9d0e-0242ac130004    Shina       Billo
6a65396f-ba91-11ea-9d0e-0242ac130004    Opalina     Kienle
6a6a08ad-ba91-11ea-9d0e-0242ac130004    Riobard     Godsmark
6a702fbe-ba91-11ea-9d0e-0242ac130004    Emalee      Ferrarini
6a748fba-ba91-11ea-9d0e-0242ac130004    Netta       Bellworthy
6a78f019-ba91-11ea-9d0e-0242ac130004    Cornelia    Perocci
6a7f6f72-ba91-11ea-9d0e-0242ac130004    Isabeau     Griss
6a83a96e-ba91-11ea-9d0e-0242ac130004    Hubie       Dawkes
6a87e9ea-ba91-11ea-9d0e-0242ac130004    Tabor       Royson
6a8dfb29-ba91-11ea-9d0e-0242ac130004    Izaak       Lombardo

Second query and results:

SELECT SQL_NO_CACHE BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
WHERE user_id > UUID_TO_BIN('6a5bf956-ba91-11ea-9d0e-0242ac130004')
ORDER BY user_id ASC
LIMIT 10

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	7.7 ms	86.66%	1	7.7 ms

Things to consider (Unique field)!

It is obvious that using cursor to find last item is significantly better in term of response time but there is a problem, what should I do if I had to ORDER BY first_name. Actually to do cursor baser pagination you should use a unique field for sorting, In our case user_id is a unique field so to do a select query with pagination with ORDER BY first_name we can do as follow:

Again a simple select query:

SELECT SQL_NO_CACHE BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
ORDER BY first_name ASC, user_id ASC
LIMIT 10 OFFSET 10000

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	59.7 ms	99.49%	1	59.7 ms

288fd856-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley
308ea632-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
5290078b-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley
57c98456-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
71daa45d-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley     *
78f70797-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
8b085688-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley
90709ac7-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
3955aab9-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
6301bd18-ba91-11ea-9d0e-0242ac130004    Jan     Semechik

Just like before we use this query's results as the base result for next two queries. First with LIMIT and OFFSET and second with Cursor Based method.

First query and results:

SELECT SQL_NO_CACHE BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
ORDER BY first_name ASC, user_id ASC
LIMIT 10 OFFSET 10005

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	57 ms	99.39%	1	57 ms

78f70797-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
8b085688-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley
90709ac7-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
3955aab9-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
6301bd18-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
8048650c-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
981ed0dc-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
25e93d81-ba91-11ea-9d0e-0242ac130004    Jana    Whitlow
342acad9-ba91-11ea-9d0e-0242ac130004    Jana    Aronstein
4e2e9f89-ba91-11ea-9d0e-0242ac130004    Jana    Whitlow

Second query and results:

SELECT SQL_NO_CACHE BIN_TO_UUID(user_id) AS user_id,first_name,last_name
FROM users
WHERE
first_name >= 'Jammie'
    AND (
        user_id > UUID_TO_BIN('71daa45d-ba91-11ea-9d0e-0242ac130004')
        OR
        first_name > 'Jammie'
    )
ORDER BY first_name ASC, user_id ASC
LIMIT 10

STATE	TOTAL_TIME	TIME_PERCENT	CALLS	TIME
Executing	10.7 ms	97.47%	1	10.7 ms

78f70797-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
8b085688-ba91-11ea-9d0e-0242ac130004    Jammie  Quigley
90709ac7-ba91-11ea-9d0e-0242ac130004    Jammie  Petrelli
3955aab9-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
6301bd18-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
8048650c-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
981ed0dc-ba91-11ea-9d0e-0242ac130004    Jan     Semechik
25e93d81-ba91-11ea-9d0e-0242ac130004    Jana    Whitlow
342acad9-ba91-11ea-9d0e-0242ac130004    Jana    Aronstein
4e2e9f89-ba91-11ea-9d0e-0242ac130004    Jana    Whitlow

Note

So basically using cursor based pagination in many sceneries is much faster than LIMIT/OFFSET pagination, but it is not good for all circumstances.
Some time the number of field that you have to sort is big that makes cursor query complex and some time your table has a few row and has a small growth rate.
In these cases using simple codes are good enough.

Conclusion

This article supposed to be a notice that there are better ways to do simple things with better performance. In real project you may face with some serious data or giant tables so it's good to search before using those simple ways.
I hope this article could help people like me to learn about new topic;