DEV Community: Pratik Tiwari

Understanding Memory Management in Rust

Pratik Tiwari — Tue, 11 Mar 2025 19:14:47 +0000

Memory management is a critical aspect of software development. It ensures that applications use memory efficiently and avoid common issues like memory leaks, dangling pointers, and crashes. In this blog, we’ll explore how JavaScript, C++, and Rust handle memory management, and why it matters.

What Is Memory Management?

Memory management is the process of allocating and deallocating memory in a computer system. It’s especially important when working with RAM (Random Access Memory).

RAM is volatile memory: It loses its contents when the power is turned off.
All the applications you run on your computer are stored in RAM while they’re active.

Efficient memory management ensures that systems run smoothly and resources aren’t wasted.

Memory Management Across Programming Languages

JavaScript: Automatic Garbage Collection

JavaScript handles memory management through an automatic garbage collector. This means developers don’t need to explicitly allocate or free memory; the language takes care of it. Here’s an example:

function add(x, y) {
  const sum = x + y;
  return sum;
}

The variable sum is stored in stack memory, a temporary storage location in RAM.
Once the function returns, the memory is automatically deallocated by the garbage collector.

This process minimizes common memory issues like dangling pointers and memory leaks, but it can make JavaScript slower because the garbage collector periodically scans and cleans up memory.

C and C++: Manual Memory Management

In C and C++, developers are responsible for manually managing memory. This involves:

Allocating memory using functions like malloc or new.
Deallocating memory using functions like free or delete.

While this approach gives you fine-grained control, it also makes the code more error-prone. Common pitfalls include:

Memory leaks: Forgetting to free allocated memory.
Dangling pointers: Referencing memory that has already been freed.

The learning curve for C++ is steep, and writing safe code requires careful attention to detail.

Rust: Ownership and Safety

Rust takes a unique and modern approach to memory management through its ownership model, which ensures both safety and efficiency. Let’s break this down step by step:

Ownership: The Core Concept

In Rust, ownership means that each piece of data has a single "owner," which is typically a variable. Ownership comes with specific rules:

Each value has one owner: For example, if a string is assigned to a variable, that variable "owns" the string.
Ownership can be transferred: If you assign the string to another variable, the ownership moves, and the previous variable loses access.
Memory is freed when the owner goes out of scope: Rust automatically deallocates memory for the data when its owner stops being used.

Here’s an example to illustrate ownership:

fn main() {
    let s1 = String::from("hello"); // s1 owns the string "hello"
    let s2 = s1; // Ownership moves to s2; s1 is no longer valid
    println!("{}", s2); // Works fine
    // println!("{}", s1); // Error: s1 is no longer valid
}

By enforcing these rules, Rust prevents issues like double-free errors or invalid memory access.

Borrowing and References: Temporary Access

Sometimes, you don’t want to transfer ownership but instead temporarily use the data. This is where borrowing comes in:

Borrowing allows you to create references to data without transferring ownership.
References can be either immutable (read-only) or mutable (read-and-write).

Immutable Reference Example:

fn main() {
    let s = String::from("hello");
    let len = calculate_length(&s); // Borrowing `s` as an immutable reference
    println!("The length of '{}' is {}.", s, len); // `s` is still valid
}

fn calculate_length(s: &String) -> usize {
    s.len() // Read-only access to `s`
}

Mutable Reference Example:

fn main() {
    let mut s = String::from("hello");
    change(&mut s); // Borrowing `s` as a mutable reference
    println!("{}", s); // "hello, world"
}

fn change(s: &mut String) {
    s.push_str(", world"); // Modifying `s`
}

Rust ensures you don’t mix mutable and immutable references, preventing conflicts.

Lifetimes: Ensuring Valid References

Lifetimes in Rust define how long references are valid. Rust uses a concept called "borrow checker" to ensure references never outlive the data they point to. This prevents dangling references, which occur when memory is accessed after being freed.

Example of a dangling reference:

fn main() {
    let r; // Declare a reference
    {
        let x = 5; // `x` is created
        r = &x; // `r` borrows `x`
    } // `x` goes out of scope and is dropped
    // println!("{}", r); // Error: `r` points to invalid memory
}

Rust detects this problem at compile time, ensuring your program is safe to run.

No Garbage Collector, Only Guarantees

Unlike languages like JavaScript, which rely on a garbage collector (a process that scans and frees unused memory), Rust doesn’t need one. Instead:

Rust enforces ownership rules at compile time.
This makes Rust efficient (no garbage collection overhead) and safe (prevents memory bugs).

Why Ownership Matters

Rust’s ownership model:

Eliminates common bugs like memory leaks and dangling pointers.
Ensures efficient memory usage without needing a garbage collector.
Provides compile-time guarantees about memory safety, allowing developers to write reliable high-performance code.

By mastering ownership, you unlock the full potential of Rust for building safe and efficient applications.

Mutability in Rust

By default, variables in Rust are immutable, meaning their value cannot change after being assigned. This helps prevent bugs and makes code easier to understand.

To make a variable mutable, you use the mut keyword:

let mut y = 10;
y = 15;
println!("Mutable y: {}", y);

This is different from JavaScript, where even a const variable can reference mutable data:

const x = [1, 2, 3];
x.push(4);
console.log(x); // Output: [1, 2, 3, 4]

In JavaScript, const only makes the reference immutable, not the data it points to.

Conclusion

Each language approaches memory management differently:

JavaScript simplifies memory management with automatic garbage collection, making it beginner-friendly but sometimes less efficient.
C++ provides full control but comes with a steep learning curve and potential pitfalls.
Rust strikes a balance between safety and performance with its innovative ownership model.

Choosing the right tool for the job depends on your project’s needs and your expertise. Understanding memory management helps you write better, more efficient code.

Solidity 101: A Starter Guide

Pratik Tiwari — Fri, 13 Oct 2023 15:32:51 +0000

Solidity 101: A Starter Guide

Datatypes
1. Elementary Types
  - Boolean
  - Integer
  - Address
  - Bytes
2. Complex Types
  - Arrays
  - Structs
  - Enums
3. Special Types
  - Mappings
  - Function Types
4. Storage vs Memory Datatypes vs Calldata
Contracts
1. Definition
2. Events
3. Scopes
  - Public
  - Internal
  - Private
  - External
4. Inheritance
5. Cross contract calls
  - Interface calls
6. Modifiers
Gas Optimzation Techniques
1. Use Appropriate Data Types
2. Use events for output data
3. Short-Circuiting in Conditions
4. Loops and Large Data Structures
5. Use Libraries and Delegatecall
Payabale
Withdraw
Resources

Datatypes

Elementary Types

Boolean

Utilised for logical operations. Two possible values: true and false.

bool isTrue = true;

Integer

Supports both signed (int) and unsigned (uint) integers.

int256 a = -10;
uint256 b = 10;

Address

Used to store ethereum addresses. These addresses are link the bank account number for your bank account.

address public owner;

Bytes

Fixed-size byte arrays ranging from byte1 to byte2.

bytes32 hash = "abc";

Complex Types

Arrays

can be either fixed-size or dynamic.

uint256[] public numbers;

Structs

Structures (also called structs) are a way to group several related variables into one place.

struct Person {
    string name;
    uint age;
}

Enums

Enumeration types for creating custom types with a finite set of values.

enum State { Created, Locked, Inactive }

Special Types

Mappings

Key-value storage Structures

mappings(addresses => uint) public balances;

Function Types

These are first-class citizens in solidity. allowing for higher-order functions.

function (uint256) external returns (bool) myFunction;

Storage vs Memory Datatypes

Understanding the distinction between storage and memory data types is crucial for efficient and secure smart contract development. These two data locations serve different purposes and have different cost implications in terms of gas usage.

Characteristics

Persistent: Data stored in storage persists between function calls and transactions. Changes to storage are very costly in terms of gas.
Blockchain State: Storage variables are part of the contract's state, and thus, they are written to the Ethereum blockchain.

Usage

State variables are by default storage variables.
Explicitly, the storage keyword can be used in function arguments, although this is rarely done due to high gas costs.

Memory Data Types

Characteristics:

-   Temporary: Memory variables only exist during the execution of a function. Once the function execution is complete, the data stored in memory is erased.
-   Lower Gas Costs: Reading from and writing to memory is generally less costly than storage operations.

Usage:

-   Local variables within functions can be declared with the `memory` keyword.
-   Function arguments can also be explicitly set to `memory`.

Example:

pragma solidity ^0.8.0;

    contract MemoryExample {
        function memoryFunction() public pure returns (uint256) {
            uint256[] memory memoryArray = new uint256[](3);
            memoryArray[0] = 1;
            memoryArray[1] = 2;
            memoryArray[2] = 3;
            return memoryArray[1];  // Returns 2
        }
    }

Storage Data Types

Characteristics:

Persistent: Unlike memory variables, storage variables persist between function calls and transactions. The data is stored directly on the Ethereum blockchain.
Higher Gas Costs: Any operation that alters the state of storage variables incurs a higher gas fee compared to operations on memory variables. This is due to the permanent nature of storage and the broader impact it has on the Ethereum network.

Usage:

State Variables: By default, variables declared at the contract level are storage variables. They represent the contract's state and exist for the life of the contract.
Explicit Keyword: Although rarely used, the storage keyword can explicitly mark certain local variables, generally in the context of referencing or aliasing state variables.

Example:

pragma solidity ^0.8.0;

contract StorageExample {
    // State variable stored on the blockchain
    uint256 public storageVariable;

    // Constructor to initialize the state variable
    constructor(uint256 _initialValue) {
        storageVariable = _initialValue;
    }

    // Function to update the state variable
    function setStorageVariable(uint256 _value) public {
        storageVariable = _value;
    }

    // Function to get the state variable
    function getStorageVariable() public view returns (uint256) {
        return storageVariable;
    }
}

Calldata

Characteristics:

-   Immutable: `Calldata` is a read-only data location.
-   External Functions: Only applicable for `external` function arguments.
-   Lowest Cost: Reading from `calldata` is cheaper than from `memory` or `storage`.

Usage:

-   Used in `external` function arguments to signify that the data should not be modified and will be kept in the transaction's calldata.

Example:

pragma solidity ^0.8.0;

    contract CalldataExample {
        function calldataFunction(uint256[] calldata data) external pure returns (uint256) {
            return data.length;
        }
    }

Comparative Analysis

Aspect	Storage	Memory	Calldata
Lifetime	Persistent	Temporary	Function call
Cost	High (Gas)	Lower (Gas)	Lowest (Gas)
Mutability	Mutable	Mutable	Immutable
Location	Blockchain State	Function Scope	Transaction

Contracts

Definition

A contract in Solidity is a collection of code and data that resides at a specific address on the Ethereum blockchain. It serves as the fundamental building block for creating decentralized applications.

contract SimpleContract {
    // your logic here 
}

it can have methods, state variables, modifiers, events etc.

contract ComplexContract {
    uint256 public stateVariable;

    modifier onlyOwner() {
        // Modifier code
        _;
    }

    event LogData(uint256 data);

    function doSomething() public onlyOwner {
        emit LogData(stateVariable);
    }
}

Events

In Solidity, events are a crucial feature that facilitates communication between smart contracts and their external consumers, such as decentralized applications (dApps). Events provide a logging mechanism that allows for the storage of arguments in the transaction logs—a component of the Ethereum blockchain. This feature is particularly valuable for external clients that may need to "listen" for specific occurrences within a smart contract.

event LogData(uint indexed id, string message);

Emiting Events

emit LogData(1, "This is a message");

Example

pragma solidity ^0.8.0;

contract EventExample {
    event LogChange(string oldValue, string newValue);

    string public data;

    function setData(string memory _data) public {
        emit LogChange(data, _data);
        data = _data;
    }
}

Scopes

Global Scopes

At the global scope, you can declare contracts, import other contracts or libraries, and define custom data types like structs and enums.

import "./AnotherContract.sol";

contract GlobalScopeExample {
    // Code and data go here
}

Contracts Scopes

Within a contract, you can define state variables, functions, modifiers, and events. These elements are accessible based on their visibility modifiers (public, internal, private, external).

Public

The public modifier allows the widest level of accessibility. Functions marked as public can be called both internally within the contract and externally by other contracts or external actors. For state variables, Solidity automatically generates a getter function when they are marked as public.

pragma solidity ^0.8.0;

contract PublicExample {
    uint256 public stateVariable;

    function publicFunction() public returns (uint256) {
        return stateVariable;
    }
}

Internal

The internal modifier restricts access to the current contract and derived contracts (i.e., contracts that inherit from it). Functions and state variables marked as internal cannot be accessed by external contracts or external actors.

pragma solidity ^0.8.0;

contract InternalExample {
    uint256 internal stateVariable;

    function internalFunction() internal returns (uint256) {
        return stateVariable;
    }
}

Private

The private modifier imposes the most restrictive level of access. Functions and state variables marked as private can only be accessed within the contract where they are defined. Even derived contracts cannot access private members of their base contracts.

pragma solidity ^0.8.0;

contract PrivateExample {
    uint256 private stateVariable;

    function privateFunction() private returns (uint256) {
        return stateVariable;
    }
}

External

The external modifier is similar to public, but it restricts the function to only be callable from outside the contract. Functions marked as external cannot be called internally within the contract, except using this.functionName().

pragma solidity ^0.8.0;

contract ExternalExample {
    function externalFunction() external pure returns (string memory) {
        return "This function can only be called externally.";
    }
}

Inheritance

In Solidity, inheritance is a powerful feature that allows for the creation of new contracts based on existing ones. This concept enables code reusability, a hierarchical structure of contracts, and the development of complex decentralized applications with modular components. Understanding inheritance is essential for achieving a high level of technical competence in Solidity.

pragma solidity ^0.8.0;

contract ParentContract {
    function parentFunction() public pure returns (string memory) {
        return "This is from the parent contract";
    }
}

contract ChildContract is ParentContract {
    function childFunction() public pure returns (string memory) {
        return parentFunction();
    }
}

Cross contracts calls

Interface calls

Interfaces provide a way to define the functions of the external contract, offering a more modular approach.

pragma solidity ^0.8.0;

interface IContractA {
    function foo() external pure returns (string memory);
}

contract ContractB {
    IContractA contractA;

    // why use external here? 
    // Since constructors are only executed once, any logic or state initialization placed in the constructor does not incur repeated gas costs. This is more efficient than initializing or setting these variables in separate transactions after deployment.

    constructor(address _contractA) external {
        contractA = IContractA(_contractA);
    }

    function callFoo() public view returns (string memory) {
        return contractA.foo();
    }
}

Modifiers

Think it as a middleware in web2 world.

In Solidity, modifiers are a powerful feature that allows for the modification of function behavior in a reusable and clean manner. They are often used to simplify code, enhance readability, and manage permissions or conditions that must be met before a function can execute. Understanding the role and utility of modifiers is pivotal for anyone aiming to achieve a high level of technical competence in smart contract development.

modifier onlyOwner() {
    require(msg.sender == owner, "You are not the owner");
    _;
}

Usage in Functions

Modifiers are appended to function signatures and modify the function's behavior. Multiple modifiers can be used, and they are executed in the order in which they appear.

function doSomething() public onlyOwner {
    // Function logic here
}

Example

Here's a simple example demonstrating the use of a modifier for access control:

pragma solidity ^0.8.0;

contract ModifierExample {
    address public owner;

    modifier onlyOwner() {
        require(msg.sender == owner, "You are not the owner");
        _;
    }

    constructor() {
        owner = msg.sender;
    }

    function setOwner(address _newOwner) public onlyOwner {
        owner = _newOwner;
    }
}

In this example, the onlyOwner modifier ensures that only the contract's owner can change the owner address. The setOwner function uses this modifier to restrict access.

Gas Optimzation Techniques

Use Appropriate Data Types

Use uint256 for Arithmetic: The EVM is optimised for 256-bit arithmetic, making uint256 often more gas-efficient than smaller integer types like uint8 or uint16.
Use bytes1 to bytes32 for Small Data: Fixed-size byte arrays are more gas-efficient than their dynamic bytes counterpart.

// Prefer uint256 for arithmetic
uint256 public counter;

// Use bytes32 for fixed-size byte arrays
bytes32 public fixedHash;

Using calldata as an arguments when you know the arguments arent changing as it is stored in different read only memory which is very gas efficient.
If the change doesnt need to be propograted use memory as it cost efficent in comparison to storage which changes are propograted to the whole contract.
Optimizing on space complexity over time complexity. Suppose you have a function which iterates over a array and returns a sum. You can also store this sum whenever a value is addded and create a variable in the contract for the same. But suppose the function is just a view function you dont have much incentive to save on time complexity because any which ways the gas is not used for a view function computing and gas is used to store the variable. Hence compromising on the time compleixity here makes more sense to save on the gas.

Use Events for Output Data

Log Events Instead of Return: For data that doesn't need to be immediately used in transactions, consider using events. They are cheaper than storing data.

solidityCopy code

event DataEvent(uint256 data);

function doSomething() public {
    // ... logic
    emit DataEvent(42);
}

Short-Circuiting in Conditionals

Order Conditions Wisely: In if and require statements, place the most likely-to-fail conditions first. This takes advantage of short-circuiting to save gas.

require(isValid && (msg.sender == owner), "Condition failed");

Loops and Large data Structures

Avoid Infinite Loops: Always ensure that loops have a termination condition.
Use Pagination for Large Data Sets: When dealing with large data structures, consider implementing pagination to read/write data in chunks.

// Pagination example
function getElements(uint256 start, uint256 end) public view returns (uint256[] memory) {
    uint256[] memory elements = new uint256[](end - start);
    for (uint256 i = start; i < end; i++) {
        elements[i - start] = someLargeArray[i];
    }
    return elements;
}

Use Libraries and Delegatecall

se Libraries for Reusable Logic: Code that is reused across multiple contracts can be placed in a library, reducing the deployment and runtime gas costs.
Use delegatecall Carefully: This low-level function allows for more gas-efficient logic
execution but should be used cautiously due to its complexity and potential securit risks.

// Using a library function
using SafeMath for uint256;

uint256 public value;

function increment(uint256 _value) public {
    value = value.add(_value);
}

Payable

In Solidity, the payable keyword is used to enable a function or a contract to receive Ether. This feature is crucial for the development of financial applications and other smart contracts that involve monetary transactions. Understanding the payable modifier is essential for anyone aiming to achieve a high level of technical competence in smart contract development.

function deposit() public payable {
    // Function logic here
}

Example

pragma solidity ^0.8.0;

contract PayableExample {
    uint256 public balance;

    function deposit() public payable {
        balance += msg.value;
    }

    function getBalance() public view returns (uint256) {
        return address(this).balance;
    }
}

Withdraw

In Solidity, withdraw functions are a critical component of smart contracts that handle Ether transactions. These functions facilitate the secure transfer of Ether from a contract to an external address. Understanding the design patterns and security considerations for implementing withdraw functions is essential for anyone aiming to achieve a high level of technical competence in smart contract development.

Think of it as a function to get out the eths by the contract maker to his or someone elses address

Security: Withdraw functions must be carefully designed to prevent vulnerabilities such as reentrancy attacks.

Gas Efficiency: Efficiently coded withdraw functions can minimize gas costs, making the contract more economical to use.

Access Control: Usually, withdraw functions incorporate access control mechanisms to ensure that only authorized addresses can withdraw funds.

function withdraw(uint256 amount) public {
    require(amount <= balances[msg.sender], "Insufficient balance");
    payable(msg.sender).transfer(amount);
    balances[msg.sender] -= amount;
}

Example

pragma solidity ^0.8.0;

contract WithdrawExample {
    mapping(address => uint256) public balances;

    function deposit() public payable {
        balances[msg.sender] += msg.value;
    }

    function withdraw(uint256 amount) public {
        require(balances[msg.sender] >= amount, "Insufficient balance");

        // Securely perform the transfer
        (bool success, ) = msg.sender.call{value: amount}("");
        require(success, "Withdrawal failed");

        // Update state after the transfer
        balances[msg.sender] -= amount;
    }
}

In this example, the withdraw function first checks whether the caller has a sufficient balance. It then uses a low-level .call method to perform the transfer, which is currently recommended over .transfer or .send to mitigate certain types of reentrancy attacks. Finally, it updates the balance mapping to reflect the withdrawal.

Resources

Mono Respositories in JS/TS. What? Why? and How? (with Nx)

Pratik Tiwari — Sat, 28 Jan 2023 07:38:35 +0000

What are Mono Repositories?

A monorepo is a type of software development strategy where all of a project's code is stored in a single repository (or "repo") instead of being split across multiple repos. This means that all of a project's code, including different components or modules, is stored in the same place. This can make it easier for developers to work on multiple parts of a project at the same time, and can also make it easier to manage and organize the code.

In the context of JavaScript and TypeScript (JS/TS) applications, using a monorepo can make it easier to manage and organize the various packages and dependencies that make up a project. For example, if you're building a React or Node.js application, you might have several different components or modules that make up the application, such as a login page, a dashboard, and a settings page.

With a monorepo, all of these different components and modules can be stored in the same repository, which can make it easier for developers to work on multiple parts of the project at the same time. Additionally, it can make it easier to manage and update the various dependencies that are used across the different components and modules, since they are all stored in the same place.

It also can have advantages when it comes to building and testing of the application. For example, you can set up scripts that run tests across all the packages at once, or that build the entire application at once. This can save a lot of time, especially as the number of packages and modules in the application grows.

Overall, a monorepo can be a powerful tool for managing and organizing the various parts of a JS/TS application, and can make it easier for developers to work together on a project.

When using a monorepo, there are several things that can be shared across different parts of the project:

Code: All of the code for a project, including different components or modules, can be stored in the same repository. This makes it easy for developers to work on multiple parts of the project at the same time and also makes it easy to manage and organize the code.
Dependencies: A monorepo can make it easier to manage and update the various dependencies that are used across different components and modules. For example, if you have a package that is used by multiple parts of the project, you can update it in one place and it will be updated everywhere it's used.
Build and test scripts: A monorepo can make it easy to set up scripts that build and test the entire application at once, or that run tests across all the packages at once. This can save a lot of time, especially as the number of packages and modules in the application grows.
Collaboration: With a monorepo, all developers can work on the same codebase and it's easy to see all the changes that are being made. This can help to improve collaboration and make it easier to keep track of what is being worked on.
Versioning: Monorepo also allows to version all packages at once, so that if any package is updated, the version of the whole monorepo will be updated as well.
Deployment: With monorepo, it becomes easy to deploy different parts of the application to different environments, since all the code is stored in the same repository.

It's worth noting that while a monorepo can provide many benefits, it also has its own set of challenges, such as managing the size of the codebase and keeping track of the different dependencies.

Why should you use a Monorepo setup?

You should use a monorepo if it aligns with your project's specific needs and goals. Some reasons to use a monorepo include:

Improved code organization: With all of the code for a project stored in the same repository, it can make it easier to manage and organize the code, especially as the project grows in size and complexity.
Better collaboration: A monorepo allows all developers to work on the same codebase, which can make it easier to keep track of what is being worked on and who is working on what.
Simplified dependency management: A monorepo can make it easier to manage and update the various dependencies that are used across different components and modules.
Speed: Monorepo allows to build, test and deploy all packages at once, which can save a lot of time and effort.
Versioning: Monorepo also allows to version all packages at once, so that if any package is updated, the version of the whole monorepo will be updated as well.

Additionally, if you have a large and complex application, with a lot of inter-dependencies between different packages, a monorepo can make it easier to manage and maintain the codebase over time.

It's important to note that while a monorepo can provide many benefits, it also has its own set of challenges and it's important to weigh the advantages and disadvantages before deciding whether or not to use a monorepo.

Disadvantages of using a Monorepo Setup

Some disadvantages of using a monorepo include:

Increased complexity: Managing a monorepo can be more complex than managing multiple smaller repositories, especially as the number of packages and modules in the project grows.
Large codebase: Monorepo can become very large and difficult to navigate, which can make it more challenging for developers to find the code they need.
Build time: Build time can become longer as the number of packages and modules in the project increases.
Limited isolation: With monorepo, it can be more difficult to isolate different parts of the application, which can make it more challenging to deploy different parts of the application to different environments.
Limited scalability: Monorepo can be less scalable as the number of packages and modules in the project grows, which can make it more difficult to manage and maintain the codebase over time.
Limited flexibility: Monorepo may not be suitable for certain types of projects, such as projects with multiple teams working on different parts of the codebase, and projects with large number of contributors.
Limited privacy: Monorepo's usually have all the codebase in a single repository, so it may become difficult to restrict access to certain parts of the codebase.

It's also worth noting that with monorepo, it becomes difficult to separate the concerns of different parts of the application, so it can become a problem when trying to reuse some parts of the codebase in other projects.

How to create Monorepo?

Manual Process

It is also possible to create a monorepo without using a third-party tool like Lerna or NX. Here are the steps to create a monorepo manually:

Create a new directory for your monorepo:

mkdir my-monorepo

Change into the new directory:

cd my-monorepo

Create a new package.json file:

npm init -y

Create a new directory for your packages:

mkdir packages

Change into the packages directory:

cd packages

Create a new package inside the packages directory:

npm init -y

Repeat step 6 for each additional package you want to add to the monorepo.
Add the package's names in the main package.json 'workspaces' field.

Now you have a monorepo set up with multiple packages inside the packages directory. You can now develop and manage these packages together as a single repository.

Note that without a tool like Nx or Lerna, you will need to manually manage dependencies, versioning and publishing of the packages.

Create with Nx

Nx is a set of extensible dev tools for monorepos that helps developers create and manage large-scale, full-stack web applications.

To create a monorepo using Nx and a React app inside it, you can use the following commands:

Install the Nx CLI globally:

npm install -g @nrwl/cli

Create a new Nx workspace:

npx create-nx-workspace myworkspace

In this you will be propmpted with option like Package-based Monorepo, Integrated Monorepo or Standalone. Select Package based here and continue.

To know more about the option please visit this link from the offical documentation of Nx - docs

Change into the new workspace directory:

cd myworkspace

Create a new React app inside the workspace:

nx generate @nrwl/react:app myapp

Run the app:

nx run myapp:serve

Example and explaination of Monorepo

GitHub - nrwl/nx-examples: Example repo for Nx workspace

This is a example of how a monorepo would look like you can think app folder as different apps you have and libs folder consisting of common code/repositories you have like common components, utils etc etc.

Another complex and good example is Nextjs - here

References

Intro to Nx

No BS TS #32 - Monorepos with NX

Monorepos - How the Pros Scale Huge Software Projects // Turborepo vs Nx

What is monorepo? (and should you use it?) - Semaphore

Understanding React's UI Rendering Process (understanding virtual dom in depth)

Pratik Tiwari — Sat, 27 Nov 2021 16:04:38 +0000

Before getting started let's discuss this basic question.

What does react do?

React allows you to write maintainable and performant code by using the concept of components. Components allow you to focus on describing the UI you want. rather than focusing on the details of how the UI actually gets inserted into the page.

Simple Component using JSX

This component internally returns a react entity called elements which kind of looks like this.

It's just a plain object. Let's understand the properties one after another.

type
The type property is a string reference to the HTML tag. React internally calls it a Component Element.
When we do import main from "../components/main" the name of the component becomes the type that is imported.
key
Used to uniquely identify elements among siblings.
This is created when we are manually creating a bunch of children's i.e when we map through the array and render a bunch of components with different data. We use a key while rendering those and hence the key is substituted to this property.
Example

this.state.data.map((item,i) => <li key={i}>Test</li>)

ref
ref is reference to a actual DOM node. If you ever have used the create ref function or the useRef hook that's where this values end up.
$$typeof
This is actually a safety feature. Its values are always a symbol. What is a symbol?
So if you have a compromised server that you are making an API call and you get back some data and you try to render it through your components. React will straight up reject that.
Props
In our case, we just had 1 child that is an h1 hence type is an h1. key and ref are null
And its children was a text string with "look ma!" and with id title.
Children can be an object or array of an objects.

Review

So writing to DOM and rendering DOM is a very expensive task. This is where react comes in.
This object and its children that is known as virtual dom.
Is it really expensive to write to the dom but its really easy to generate these objects and they can do it super fast.

Reconciliation.

Reconciliation is the process through which React updates the DOM. When a component's state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component.
React creates a tree of elements every time the render function is called. So to be efficient we need a way to tell what's the difference between the DOM and the virtual DOM so that we are only changing the Elements in the DOM that needs to be changed.
Reconciliation houses the diffing algorithm to understand what part of the DOM needs to be replaced.

Example:

Suppose we have a list of product list and we clicked to get one individual product.
As we clicked the element product list goes away hence it's also removed from the DOM.
There is a difference between the native DOM element and the component element.

Reconciliation - DOM element:

Over here as the DOM element class name is changed. React find the DOM node and update the class name and nothing else and it will recurse on any children if there are any.

Reconciliation- Component element:

React updates the prop of the underlying component instance to match the new element. And the render method is called. The diff algorithm recurses on the old result and the new result until the end of the tree.

Reconciliation - Children

In this scenario reacts goes and see for the first and element and checks in the old result both are the same and hence moves to next the next again same now when it moves to next it sees third these were not present in the DOM before hence react appends it to the DOM.

What if we change the sequence?

Over here we see the sequence the older items are there is just we have added a new DOM node and changed the sequence but react doesn't understand this. It goes and sees the first node is changed and remove the previous DOM node that is star wars and replace it with Spaceballs similarly for the second and sees the third has been added hence adding the third one.
Here we see we are rendering all of the elements again and again but we can save these things with keys.

over here it has keys with it now lets see what happens if we append 1 DOM element to the beginning of this unordered list.

Now react goes down the tree and sees key best has start wars which was already present, second best with star trek is also present but actual best with spaceballs was not present and it as been added hence we will add that to the DOM node.

Rendering

so here the render function of the React DOM is responsible for creating the react virtual DOM create the element tree which we discussed in the beginning and add that to the actual DOM.
FYI react and react dom is two different library hence react work is just to do the diffing part not anything more than that. React DOM creates the virtual DOM and append to the actual DOM.

React Fiber

The actual render happens with react fiber.
React fiber sits between the the element and the DOM node and inserts the element to the DOM node.

Conclusion:

We write a component.
We get a component instance.
Its has state it takes props it computes it.
Then it generates a tree of elements. That tree of element is our virtual dom.
And with that the reconciliation process starts.
Then its handed of to the rendering process.
Then the react DOM takes it and actually generates the DOM node with React fiber.

Reference:

https://www.youtube.com/watch?v=i793Qm6kv3U

Extra Materials to learn from about the topic:

An Introduction to React Fiber - The Algorithm Behind React

ReactJS Reconciliation - GeeksforGeeks

Why Golang ?

Pratik Tiwari — Sat, 11 Sep 2021 12:28:39 +0000

Recently I have been exposed to golang considering the radical popularity of the language and talks about how it is very efficient in building microservices. I have been learning about microservices and wanted to experience golang as the syntax is comparatively easier and very similar to javascript.

But the question is understanding why go? This article answers the question. I have understood this question and have taken references from various sources to answer this question precisely.

Open Source and Simple

I think it is really very important for a language to be open source in order for the dev community to be indulged actively in the growth of the language and also to interact with it and contribute.

It has a clean syntax. It's a function programming-based language hence people coming from javascript have a very easy time learning it. Also as the syntax is easy it's easier for new dev and people to be onboarded on the projects and start working on them.

It is easy to learn, concise, expressive, and readable.

Fast

Go is compiled to machine code, it will naturally outperform languages that are interpreted or have virtual runtimes. Go programs also compile extremely fast, and the resulting binary is very small.

Golang can boast speeds of close to four times quicker than its interpreted and dynamic friends. That said, very little can touch C++ (and most C languages) when it comes to speed. All of the time spent coding and compiling pays off here.

Concurrency

Golang has efficient concurrency, like C, C++, Java, and at the same time concurrency in Go is done much easier thanks to goroutines, channels, and garbage collection.

What is concurrency?

Concurrency is the capability to deal with lots of things at once. It's best explained with an example.

Let's consider a person jogging. During his morning jog, let's say his shoelaces become untied. Now the person stops running, ties his shoelaces, and then starts running again. This is a classic example of concurrency. The person is capable of handling both running and tying shoelaces, that is the person is able to deal with lots of things at once :)

Concurrency is not parallelism. In case you are confused between them go through this article in the reference to understand that in deep.

Additional References:

Understanding Concurrency in Go (Golang) | golangbot.com

Goroutines - Concurrency in Golang | golangbot.com

Concurrency in Go is SO EASY! - Go / Golang Concurrency Tutorial

Garbage collector

A form of automatic memory management that has a significant influence on performance and helps to make concurrency more efficient.

want to understand garbage collection in deep?

An overview of memory management in Go

Fewer Bugs

Since it is a compiled language, with very strict typization, and it is statically typed, developers have to be more accurate and attentive, so the code is neater and safer.

Conclusion

So concluding GO is really scalable due to goroutines(concurrency).

It is performance efficient. Go developers have said that Go shows the same characteristics of C and C++ in terms of speed and performance, which is really good. Also due to its amazing memory management, this also plays an important role in performance.

And top of all these it has a simple syntax and GO community is growing exponentially.

Hence it becomes an amazing backend technology for dev and companies who are open to incorporate the new tech.

Start/stop Upgrade/downgrade EC2 instances with lambda functions

Pratik Tiwari — Sun, 15 Aug 2021 11:09:07 +0000

Lambda functions are one of the most common services by AWS that comes really in handy. One of the very useful applications is the automation of starting/stopping and upgrading these instances.

Example.

You want to start instances for a failover you can use the start and stop instances using lambda function by triggering the function use cloud watch alarm.

You want to scale up (vertically) an instance when it has a CPU utilization of more than some amount or has more traffic.
If you want to start and stop a dev instance in the night and you want to automate this process you can use a cloud watch event with a corn job to this.

It has more and endless application

Enough of all talk let’s get into it.

Create an IAM role with a policy that has full access for lambda. (IMPORTANT)
After Role is created create a lambda function with python 3.8 and use the role that you created above.
Use this code for the lambda function:

Start Instances:

import boto3 region = 'us-west-1' instances = ['i-12345cb6de4f78g9h', 'i-08ce9b2d7eccf6d26'] ec2 = boto3.client('ec2', region_name=region) def lambda_handler(event, context): ec2.stop_instances(InstanceIds=instances) print('stopped your instances: ' + str(instances))

Stop Instances:

import boto3 region = 'us-west-1' instances = ['i-12345cb6de4f78g9h', 'i-08ce9b2d7eccf6d26'] ec2 = boto3.client('ec2', region_name=region) def lambda_handler(event, context): ec2.start_instances(InstanceIds=instances) print('started your instances: ' + str(instances))

Upgrade/downgrade(modify)

import boto3 ec2 = boto3.client('ec2') instance_id = 'i-05ca5f05f965b3a4b' ec2.stop_instances(InstanceIds=[instance_id]) waiter=ec2.get_waiter('instance_stopped') waiter.wait(InstanceIds=[instance_id]) ec2.modify_instance_attribute(InstanceId=instance_id, Attribute='instanceType', Value='t2.small') ec2.start_instances(InstanceIds=[instance_id]) print("instances modified and started")

Reference

Official AWS documentation:
https://aws.amazon.com/premiumsupport/knowledge-center/start-stop-lambda-cloudwatch/
Video explanation:
https://www.youtube.com/watch?v=oISuE16pGFQ

Javascript concept handbook for interviews

Pratik Tiwari — Sat, 14 Aug 2021 17:44:07 +0000

This series of questions and answers is all you need for all the concept and theory-based questions for your javascript interviews.

Various resources have been used for the reference of the answers of the following question and are mentioned as well for further reference.

Various forms/places you can get this blog.

PDF: https://drive.google.com/file/d/1MzoN4QZsSTOAY8naHCAQM47OTVlhe2E9/view?usp=sharing

Notion:
https://pratiktiwari.notion.site/Javascript-Questions-debadba90cf44b508f6553c444243945

DEV Community: Pratik Tiwari

Understanding Memory Management in Rust

What Is Memory Management?

Memory Management Across Programming Languages

JavaScript: Automatic Garbage Collection

C and C++: Manual Memory Management

Rust: Ownership and Safety

Ownership: The Core Concept

Borrowing and References: Temporary Access

Lifetimes: Ensuring Valid References

No Garbage Collector, Only Guarantees

Why Ownership Matters

Mutability in Rust

Conclusion

Solidity 101: A Starter Guide

Solidity 101: A Starter Guide

Table of Contents

Datatypes

Elementary Types

Boolean

Integer

Address

Bytes

Complex Types

Arrays

Structs

Enums

Special Types

Mappings

Function Types

Storage vs Memory Datatypes

Characteristics

Usage

Memory Data Types

Storage Data Types

Characteristics:

Usage:

Example:

Calldata

Comparative Analysis

Contracts

Definition

Events

Scopes

Global Scopes

Contracts Scopes

Public

Internal

Private

External

Inheritance

Cross contracts calls

Interface calls

Modifiers

Usage in Functions

Example

Gas Optimzation Techniques

Use Appropriate Data Types

Use Events for Output Data

Short-Circuiting in Conditionals

Loops and Large data Structures

Use Libraries and Delegatecall

Payable

Example

Withdraw

Example

Resources

Mono Respositories in JS/TS. What? Why? and How? (with Nx)

What are Mono Repositories?

Why should you use a Monorepo setup?

Disadvantages of using a Monorepo Setup

How to create Monorepo?

Manual Process

Create with Nx

Example and explaination of Monorepo

References

Understanding React's UI Rendering Process (understanding virtual dom in depth)

Simple Component using JSX

Review

Reconciliation.