DEV Community: Ricardo Esteves

Zustand, When, how and why

Ricardo Esteves — Tue, 03 Sep 2024 12:03:10 +0000

Introduction to State Management
Understanding Zustand
Types of State
Getting Started with Zustand
Key Features of Zustand
Implementing Zustand
Zustand vs. Other State Management Solutions
System Design of Zustand
Persisting State with Zustand
Using Zustand Outside React Components
Real-World Examples
Conclusion
Tips: Handling Asynchronous Code with Zustand

1. Introduction to State Management

State management is a crucial aspect of modern web development, especially in complex applications. It involves handling the data that can change over time and ensuring that this data is consistently represented across the entire application. Effective state management leads to more predictable and maintainable applications.

2. Understanding Zustand

Zustand is a small, fast, and scalable state management solution for React applications. Created by Jared Palmer and Daishi Kato, Zustand offers a simple and intuitive API that makes state management less cumbersome compared to other solutions.

3. Types of State

Before diving deeper into Zustand, let's understand the different types of state in web applications:

Local State: State that is specific to a component and doesn't need to be shared with other parts of the application.
Global State: State that needs to be accessed and modified by multiple components across the application.
Remote State: State that represents data fetched from an external source, typically an API.

Zustand excels in managing both local and global state, and can be integrated with solutions for remote state management.

4. Getting Started with Zustand

To start using Zustand, first install it via npm, yarn or pnpm:

npm install zustand
# or
yarn add zustand
# or
pnpm add zustand

5. Key Features of Zustand

Zustand comes with several features that make it stand out:

Simplicity: Zustand has a minimal API, making it easy to learn and use.
No boilerplate: Unlike some other state management solutions, Zustand requires very little setup code.
Hooks-based: Zustand leverages React Hooks, making it feel native to modern React development.
TypeScript support: Zustand works great with TypeScript, providing excellent type inference.
Middleware support: Zustand allows you to extend its functionality through middleware.
Devtools support: Zustand integrates well with Redux DevTools for debugging.
Framework agnostic: While primarily used with React, Zustand can be used in any JavaScript environment.

6. Implementing Zustand

Let's look at a basic implementation of Zustand:

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

In this example, we create a store with a bears state and two actions to modify it. The BearCounter and Controls components can then access and modify the state using the useStore hook.

7. Zustand vs. Other State Management Solutions

Let's compare Zustand with other popular state management solutions:

Zustand vs. Redux

Pros of Zustand:

Simpler API with less boilerplate
No need for action creators or switch statements
Smaller bundle size

Cons:

Less established ecosystem
Fewer middleware options

Zustand vs. MobX

Pros of Zustand:

More straightforward, less magical API
Better performance for larger applications

Cons:

Less reactive by default
No computed values out of the box

Zustand vs. Recoil

Pros of Zustand:

Simpler mental model
Works outside of React

Cons:

Less granular reactivity
No built-in atom family concept

8. System Design of Zustand

Zustand's system design is based on a few key principles:

Single store: Zustand encourages the use of a single store for all application state.
Immutability: State updates are handled immutably, ensuring predictable behavior.
Subscriptions: Components subscribe to specific parts of the state, re-rendering only when those parts change.
Middleware: Zustand uses a middleware system for extending functionality.

This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.

9. Persisting State with Zustand

Zustand makes it easy to persist state, which is crucial for many applications. Here's an example using the persist middleware:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useStore = create(persist(
  (set, get) => ({
    fishes: 0,
    addAFish: () => set({ fishes: get().fishes + 1 }),
  }),
  {
    name: 'food-storage', // unique name
    getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
  }
))

This will automatically save the state to localStorage and rehydrate it when the app reloads.

10. Using Zustand Outside React Components

One of Zustand's strengths is that it can be used outside of React components. This is particularly useful for integrating with other parts of your application or for testing:

const { getState, setState } = useStore

// Getting state
console.log(getState().bears)

// Setting state
setState({ bears: 10 })

// Using actions
getState().increasePopulation()

11. Real-World Examples

Let's look at some real-world examples of using Zustand:

Authentication State

import { create } from 'zustand'

const useAuthStore = create((set) => ({
  user: null,
  isAuthenticated: false,
  login: (userData) => set({ user: userData, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}))

// Usage in a component
function LoginButton() {
  const { isAuthenticated, login, logout } = useAuthStore()

  const handleAuth = () => {
    if (isAuthenticated) {
      logout()
    } else {
      // Simulate login
      login({ id: 1, name: 'John Doe' })
    }
  }

  return (
    <button onClick={handleAuth}>
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  )
}

Shopping Cart

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) => set((state) => ({
    items: state.items.filter((item) => item.id !== itemId),
  })),
  clearCart: () => set({ items: [] }),
  total: 0,
  updateTotal: () => set((state) => ({
    total: state.items.reduce((sum, item) => sum + item.price, 0),
  })),
}))

// Usage in components
function CartSummary() {
  const { items, total, removeItem } = useCartStore()

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {item.name} - ${item.price}
          <button onClick={() => removeItem(item.id)}>Remove</button>
        </div>
      ))}
      <div>Total: ${total}</div>
    </div>
  )
}

Theme Switcher

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useThemeStore = create(persist(
  (set) => ({
    theme: 'light',
    toggleTheme: () => set((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    })),
  }),
  {
    name: 'theme-storage',
  }
))

// Usage in a component
function ThemeToggle() {
  const { theme, toggleTheme } = useThemeStore()

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  )
}

12. Conclusion

Zustand offers a refreshing approach to state management in React applications. Its simplicity, flexibility, and performance make it an excellent choice for both small and large projects. By reducing boilerplate and providing a straightforward API, Zustand allows developers to focus on building features rather than managing complex state logic.

While it may not have the extensive ecosystem of some older state management solutions, Zustand's design principles and ease of use make it a compelling option for modern React development. Its ability to work outside of React components and easy integration with persistence solutions further extend its utility.

For many React applications, Zustand strikes an excellent balance between simplicity and power, making it worth considering for your next project.

Bonus tips:

Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.

Let's talk a bit about that:

13. Handling Asynchronous Code with Zustand

One of Zustand's strengths is its simplicity in handling asynchronous operations without the need for additional middleware or complex setups. This makes it particularly easy to work with API calls, data fetching, and other asynchronous tasks.

How Zustand Handles Asynchronous Code

Zustand's approach to asynchronous code is straightforward:

Direct Integration: Asynchronous functions can be defined directly in the store.
No Special Syntax: You don't need to use special action creators or thunks.
State Updates: You can update the state within async functions using the set function.
Error Handling: Error states can be managed directly within the async functions.

Implementing Asynchronous Code

Here's an example of how to implement asynchronous code in Zustand:

import { create } from 'zustand'

const useUserStore = create((set) => ({
  user: null,
  isLoading: false,
  error: null,
  fetchUser: async (userId) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      const userData = await response.json();
      set({ user: userData, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
}));

// Usage in a component
function UserProfile({ userId }) {
  const { user, isLoading, error, fetchUser } = useUserStore();

  React.useEffect(() => {
    fetchUser(userId);
  }, [userId]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return null;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

In this example:

We define an async fetchUser function directly in the store.
The function manages loading and error states alongside the user data.
We use the set function to update the state at different points in the async operation.
In the component, we can use the store's state and actions as usual, with React hooks handling the component lifecycle.

Benefits of Zustand's Approach to Async Code

Simplicity: No need for additional middleware or complex action creators.
Flexibility: You can structure your async logic however you prefer.
Readability: Async operations are defined close to the relevant state.
Easy Testing: Async functions can be easily unit tested.

Comparison with Other Solutions

Unlike Redux, which often requires middleware like Redux Thunk or Redux Saga for handling async operations, Zustand's approach is much more straightforward. This simplicity can lead to less boilerplate and a gentler learning curve, especially for developers new to state management.

MobX and Recoil also offer ways to handle async operations, but Zustand's approach might be considered more intuitive due to its direct use of async/await syntax without additional abstractions.

In conclusion for async

Zustand's handling of asynchronous code exemplifies its philosophy of simplicity and flexibility. By allowing developers to write async functions directly in the store without special syntax or middleware, Zustand makes it easy to manage complex state operations while keeping the codebase clean and readable.

This approach to async code, combined with Zustand's other features like its small bundle size and easy setup, makes it an excellent choice for projects of all sizes, particularly those that involve significant asynchronous state management.

Hope this "kinda guide" was useful and insightful for any of you that's thinking on how to manage your global application state.
Thank you and Happy coding.

Have a look on my website at https://www.ricardogesteves.com

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

Prepare Yourself for a Systems Design Interview

Ricardo Esteves — Tue, 27 Aug 2024 12:49:57 +0000

Hi DEV's,
Let's dive in the topic of Systems Design/ Architecture, what to expect and how to prepare yourself for an interview.

Introduction

Systems design interviews are a crucial part of the hiring process for senior software engineering roles, especially at large tech companies. These interviews assess your ability to design scalable, reliable, and efficient systems.
Now a days most of the companies(to not say all) required you to have this knowledge and is one of the most important fases on your hiring process.

Understanding the Purpose

Before diving into preparation, it's important to understand what interviewers are looking for:

Problem-solving skills
Knowledge of distributed systems
Ability to make trade-offs
Communication skills
Experience with real-world systems

Preparation Strategy

1. Study Fundamental Concepts

Focus on these key areas:

Scalability
Load balancing
Caching
Database sharding and replication
Microservices architecture
API design
Consistency models
Messaging systems

Example: Scalability

Understand vertical scaling (adding more power to existing machines) vs. horizontal scaling (adding more machines). For instance, if you're designing a social media platform, horizontal scaling might be preferred for the ability to handle millions of concurrent users.

2. Learn System Components

Familiarize yourself with:

Load Balancers (e.g., Nginx, HAProxy)
Caching systems (e.g., Redis, Memcached)
Databases (SQL vs. NoSQL, specific products like PostgreSQL, MongoDB)
Message queues (e.g., RabbitMQ, Apache Kafka)
Content Delivery Networks (CDNs)

Example: Caching

Understand different caching strategies:

Cache-aside
Write-through
Write-back
Read-through

For a news website, you might use a cache-aside strategy for article content, updating the cache when the article is modified in the database.

3. Study Existing System Designs

Analyze designs of popular systems:

Twitter's timeline
Facebook's news feed
Google's search engine
Netflix's video streaming service

4. Practice Estimations

Learn to estimate:

Traffic (requests per second)
Storage requirements
Bandwidth usage

Example: Storage Estimation

For a photo-sharing app:

Assume 1 million daily active users
Each user uploads 2 photos per day
Average photo size is 5 MB

Daily storage requirement:
1,000,000 * 2 * 5 MB = 10 TB per day

5. Understand Non-Functional Requirements

Be familiar with:

Reliability
Availability
Scalability
Performance
Security

What to Expect in the Interview

Problem statement
Requirements clarification
High-level design
Detailed component design
Bottleneck identification and mitigation
Follow-up questions and trade-offs

Key Questions and Answers

Q1: Design a URL shortener (like bit.ly)

Functional Requirements:

Shorten long URLs
Redirect users to original URL
Custom short URLs (optional)
Analytics (optional)

Non-Functional Requirements:

High availability
Low latency for redirections
Scalable to handle high traffic

High-Level Design:

[Client] <-> [Load Balancer] <-> [Application Servers]
                                        |
                            [Database (URL mappings)]

Key Considerations:

URL encoding: Use base62 encoding (a-z, A-Z, 0-9) for short URLs
Database choice: NoSQL (e.g., Cassandra) for better scalability
Caching: Use Redis to cache frequent URL mappings

Q2: Design a distributed cache

Functional Requirements:

Get/Set operations
TTL (Time to Live) for entries
Eviction policy

Non-Functional Requirements:

Low latency
High availability
Scalability

High-Level Design:

[Clients] <-> [Cache Servers (Sharded)] <-> [Consistent Hashing Ring]

Key Considerations:

Sharding strategy: Use consistent hashing
Replication: Implement master-slave replication for fault tolerance
Eviction policy: LRU (Least Recently Used) or LFU (Least Frequently Used)

Best Practices

Clarify requirements thoroughly
Start with a high-level design
Dive into details of important components
Discuss trade-offs explicitly
Consider scalability from the start
Address potential bottlenecks
Mention monitoring and logging

Key Considerations

CAP Theorem: Understand the trade-offs between Consistency, Availability, and Partition Tolerance
Eventual Consistency: Know when it's acceptable
Data Partitioning: Understand strategies like range-based, hash-based, and directory-based partitioning
Load Balancing: Round-robin, least connections, IP hash
Caching: Cache invalidation strategies, cache eviction policies
Database Indexing: Understand its impact on read/write performance
API Design: RESTful principles, versioning strategies

Technical Deep Dive: Designing a Social Media Platform

Let's design a simplified version of a social media platform focusing on the news feed feature.

Functional Requirements:

Users can post status updates
Users can follow other users
Users can view a personalized news feed

Non-Functional Requirements:

High availability (99.99% uptime)
Low latency for feed generation (<100ms)
Scalable to millions of users

High-Level Design:

[Clients] <-> [Load Balancer]
                    |
    +---------------+---------------+
    |               |               |
[Web Servers] [App Servers]  [Feed Generation Service]
    |               |               |
    +-------+-------+-------+-------+
            |               |
    [User Service DB]  [Post Service DB]
    (Sharded PostgreSQL) (Sharded PostgreSQL)
            |               |
    [Follow Graph Cache] [Post Cache]
    (Redis Cluster)     (Redis Cluster)

Detailed Component Design:

User Service:
- Handles user registration, authentication
- Database: Sharded PostgreSQL
- Sharding key: user_id
Post Service:
- Handles creating and retrieving posts
- Database: Sharded PostgreSQL
- Sharding key: post_id
- Use a distributed ID generator (e.g., Twitter's Snowflake) for post_id
Follow Graph Service:
- Manages user follow relationships
- Store in Redis for fast lookups
- Format: SET for each user's followers
Feed Generation Service:
- Generates personalized news feeds
- Uses a pull-based model for inactive users and push-based for active users
- Algorithm:
  1. Get user's followees
  2. Fetch recent posts from these followees
  3. Sort posts by time
  4. Apply content ranking algorithm (optional)
Caching Layer:
- Use Redis clusters for caching
- Cache user data, post data, and pre-generated feeds

Scalability Considerations:

Database Sharding:
- Shard user and post data across multiple PostgreSQL instances
- Use consistent hashing for shard allocation
Caching:
- Implement multi-level caching (application server cache, distributed cache)
- Use write-through caching for user and post data
Feed Generation:
- Pre-generate feeds for active users and store in cache
- Use a message queue (e.g., Apache Kafka) to handle feed updates asynchronously
CDN:
- Use a CDN to serve static content (images, videos)

Performance Optimizations:

News Feed:
- Implement cursor-based pagination for feed retrieval
- Use a separate service for feed ranking and personalization
Database:
- Use database connection pooling
- Implement read replicas for read-heavy operations
Caching:
- Implement cache warming for predicted high-traffic events

Monitoring and Logging:

Use distributed tracing (e.g., Jaeger) for request flow tracking
Implement centralized logging (e.g., ELK stack)
Set up alerts for system metrics (CPU, memory, disk I/O)
Monitor application-specific metrics (e.g., feed generation time, cache hit ratio)

Now let's see some examples:

High-Level Architecture with Communication Flow

                  +----------------+
                  |   Client Apps  |
                  | (Web, Mobile)  |
                  +--------+-------+
                           |
                           | HTTPS
                           v
             +-------------+--------------+
             |        API Gateway         |
             |     (Kong, AWS API GW)     |
             +-------------+--------------+
                           |
         +--------+--------+--------+--------+
         |        |        |        |        |
         v        v        v        v        v
 +-------+--+ +---+----+ +-+-----+ ++------+ +-----+--+
 |  Auth   | | User   | | Post  | | Feed  | | Search |
 | Service | | Service| |Service| |Service| | Service|
 +----+----+ +---+----+ +-+-----+ ++------+ +-----+--+
      |          |        |        |              |
      |          |        |        |              |
 +----v----------v--------v--------v--------------v----+
 |                  Message Queue                      |
 |              (Kafka, RabbitMQ)                      |
 +----+----------+--------+--------+--------+----------+
      |          |        |        |        |
      v          v        v        v        v
 +----+----+ +---+----+ +-+-----+ ++------+ +--------+
 | User DB | |Post DB | |Feed DB| |Search | |Analytics|
 | (Shard) | |(Shard) | |       | |Engine | | Service |
 +---------+ +--------+ +-------+ +-------+ +--------+

Arrows indicate the direction of communication. Most interactions are bidirectional, but some (like event publishing to the message queue) are unidirectional.

Detailed User Service Flow

   +----------------+
   |  API Gateway   |
   +--------+-------+
            |
    +-------v-------+
    |  User Service |
    +-------+-------+
            |
     +------v------+    +----------------+
     | User Cache  |<-->|   User DB      |
     | (Redis)     |    | (PostgreSQL)   |
     +------+------+    +----------------+
            |
     +------v------+
     |Message Queue|
     |(Kafka Topic)|
     +-------------+

API Gateway to User Service: Bidirectional (HTTP/gRPC)
User Service to Cache: Bidirectional (Read/Write)
User Service to DB: Bidirectional (CRUD operations)
User Service to Message Queue: Unidirectional (Publish events)

Post Creation and Feed Update Flow

   +----------------+
   |  API Gateway   |
   +--------+-------+
            |
    +-------v-------+
    |  Post Service |
    +-------+-------+
            |
     +------v------+    +----------------+
     | Post Cache  |<-->|   Post DB      |
     | (Redis)     |    | (PostgreSQL)   |
     +------+------+    +----------------+
            |
     +------v------+
     |Message Queue|
     |(Kafka Topic)|
     +------+------+
            |
    +-------v-------+
    | Feed Service  |
    +-------+-------+
            |
     +------v------+
     | Feed Cache  |
     | (Redis)     |
     +-------------+

Post Service to Message Queue: Unidirectional (Publish new post event)
Message Queue to Feed Service: Unidirectional (Consume new post event)
Feed Service to Feed Cache: Bidirectional (Update feeds)

Search Service Interaction

   +----------------+
   |  API Gateway   |
   +--------+-------+
            |
    +-------v-------+
    |Search Service |
    +-------+-------+
            |
     +------v------+
     |Search Engine|
     |  (Elastic-  |
     |   search)   |
     +------+------+
            |
     +------v------+
     |Message Queue|
     |(Kafka Topic)|
     +-------------+

Search Service to Search Engine: Bidirectional (Index and search operations)
Search Service to Message Queue: Bidirectional (Consume index updates, publish search events)

Authentication Flow

   +----------------+
   |  API Gateway   |
   +--------+-------+
            |
    +-------v-------+
    | Auth Service  |
    +-------+-------+
            |
     +------v------+    +----------------+
     | Token Cache |<-->|   User DB      |
     | (Redis)     |    | (PostgreSQL)   |
     +-------------+    +----------------+

API Gateway to Auth Service: Bidirectional (Authenticate requests)
Auth Service to Token Cache: Bidirectional (Store/retrieve tokens)
Auth Service to User DB: Bidirectional (Verify credentials)

Analytics Data Flow

   +----------------+
   |  API Gateway   |
   +--------+-------+
            |
     +------v------+
     |Message Queue|
     |(Kafka Topic)|
     +------+------+
            |
    +-------v-------+
    |Analytics Svc  |
    +-------+-------+
            |
     +------v------+
     |  Time-series|
     |     DB      |
     | (InfluxDB)  |
     +-------------+

All Services to Message Queue: Unidirectional (Publish events)
Message Queue to Analytics Service: Unidirectional (Consume events)
Analytics Service to Time-series DB: Bidirectional (Store and query analytics data)

These diagrams illustrate the complex interactions between different components in a microservices architecture. Key points to note:

The API Gateway acts as the single entry point for all client requests, providing a unified interface to the microservices.
Most service-to-service communication is done asynchronously through the message queue, promoting loose coupling.
Each service has its own database, following the database-per-service pattern.
Caching is used extensively to reduce database load and improve response times.
The search service uses a specialized search engine (Elasticsearch) for efficient text search operations.
The analytics service consumes events from all other services to provide system-wide insights.
Authentication is centralized in the Auth Service, which other services rely on for user verification.

Remember that in a real-world scenario, you might need to add more components like circuit breakers, service discovery, and a configuration server to enhance reliability and manageability.

Conclusion

Designing and implementing a microservices-based architecture for large-scale web applications is a complex but rewarding. It requires a deep understanding of distributed systems, careful consideration of various components, and a strategic approach to system design.

Key takeaways from our discussion include:

Importance of Preparation: Success in system design interviews and real-world implementations hinges on thorough preparation. This includes studying fundamental concepts, understanding system components, and practicing with real-world scenarios.
Holistic Approach: Effective system design goes beyond just functional requirements. It necessitates careful consideration of non-functional requirements such as scalability, reliability, and performance.
Component Interaction: The diagrams and flows we've examined highlight the intricate interactions between various components in a microservices architecture. Understanding these interactions is crucial for designing robust, scalable systems.
Communication Patterns: Both unidirectional and bidirectional communication patterns play vital roles in microservices architectures. Asynchronous communication through message queues promotes loose coupling, while synchronous communication is sometimes necessary for immediate consistency.
Data Management: Proper data management, including strategic use of caching, database sharding, and specialized data stores (like search engines and time-series databases), is fundamental to system performance and scalability.
Scalability and Performance: These are not afterthoughts but core considerations that should inform every aspect of the design, from the high-level architecture to the choice of specific technologies.
Continuous Evolution: System design is not a one-time activity. As requirements change and systems grow, architects must be prepared to evolve their designs, always considering trade-offs and potential impacts.
Best Practices: Adhering to best practices such as the use of API gateways, implementation of proper authentication and authorization, and employing monitoring and logging, ensures the creation of robust and maintainable systems.

In conclusion, mastering system design for microservices-based web applications is a journey that requires continuous learning and adaptation. It demands a balance between theoretical knowledge and practical experience. As technology evolves and new challenges emerge, the principles of good system design - scalability, reliability, and maintainability - remain constant guideposts.

Whether preparing for a system design interview or architecting real-world systems, the key is to approach each problem methodically, communicate clearly, and always be ready to dive into the details while maintaining a view of the bigger picture. By doing so, you'll be well-equipped to design systems that can stand up to the demands of modern web applications and provide value to users and businesses alike.

Important tip:

If you don't know in-depth some topic, scope the question or the use case to a high-level solution. Don't be afraid to express your lack of knowledge, that you're not sure or it's not your domain, and let the interviewer help you getting there.
have in mind that this interview it's kinda bidirectional between you and the interviewer. Keep an open dialogue and check regularly if you're being clear and if the interviewer is understanding your point of view.
There is no right or wrong(most of the time), it's more like how is your approach for each requirement and how effective and efficient it is.

Hope this was insightful, helpful and you got an overview of what you have to learn, where and how. Also what you should prioritize and focus.
It's also a good idea to practice on a whiteboard kind of software like:

Whiteboard (by HackerRank)
CoderPad
Repl.it
Diagrams.net
Figma

Happy coding, and good luck for your interviews.

Have a look on my website at https://www.ricardogesteves.com

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

React with Vite On Steroids

Ricardo Esteves — Tue, 13 Aug 2024 18:42:18 +0000

A Powerful Starter Template for Modern Web Development

Building React applications made easy with React with Vite On Steroids – A starter template for creating high-performance React applications with ease.

What's Inside?

This template is packed with features designed to streamline your development process:

Vite: The lightning-fast build tool that ensures rapid development and optimized production builds.
React: The popular JavaScript library for building user interfaces.
TypeScript: Add type safety and enhanced tooling to your JavaScript.
Tailwind CSS: A utility-first CSS framework for creating stunning designs without writing custom CSS.
ESLint: Keep your codebase clean and consistent with pluggable linting rules.
Prettier: An opinionated code formatter that enforces consistent styling across your project.
Vitest: A blazing-fast unit testing framework with a Vite-native approach.
Testing Library: Simple and complete testing utilities that encourage good testing practices.
Playwright: A versatile end-to-end testing framework that supports multiple browsers.
Husky: Automate your Git hooks, such as pre-commit hooks, to ensure quality code before it hits the repository.

Getting Started

Prerequisites

Before diving in, make sure you have the following installed:

Node.js (version 20.x or higher)
Yarn (or npm or pnpm)

Installation

Kickstart your project with these simple steps:

Clone the repository:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

Install dependencies:

   yarn

Running the Development Server

Ready to start coding? Spin up the development server with:

yarn dev

Building for Production

When you're ready to deploy, create a production build with:

yarn build

Running Tests

This template comes with built-in testing utilities to ensure your code works as expected.

Unit Tests with Vitest:

  yarn test

Check Test Coverage:

  yarn coverage

End-to-End Tests with Playwright:

Run all tests:

yarn playwright test

Interactive UI mode:

yarn playwright test --ui

Run tests only on Desktop Chrome:

yarn playwright test --project=chromium

Run tests in a specific file:

yarn playwright test example

Debug mode:

yarn playwright test --debug

Auto-generate tests with Codegen:

yarn playwright codegen

Linting and Formatting

Maintain code quality and consistency with these commands:

Lint the code:

  yarn lint

Fix linting errors:

  yarn lint:fix

Format the code:

  yarn format

License

This project is licensed under the MIT License. For more details, see the LICENSE file.

Acknowledgements

A huge thanks to the developers and communities behind these amazing tools:

Check out the template @RicardoGEsteves

Have a lot on my website at https://www.ricardogesteves.com

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

Open to work

Ricardo Esteves — Tue, 06 Aug 2024 14:54:24 +0000

Excited to share my passion for crafting exceptional digital experiences! I'm a full-stack developer with a strong focus on frontend development, and I'm seeking new challenges and opportunities.

My tech stack includes TypeScript, React, Next.js, Node.js, TailwindCSS, Zustand/Redux, Prisma/Drizzle, PostgreSQL/MySQL/MongoDB, REST APIs/GraphQL, React Query and Server Actions and a lot more.

Check out my portfolio to see my work:

Ricardo Esteves Portfolio Website

Ricardo Esteves portfolio website with custom CMS and blog. Built using TypeScript, React, Next.js, Convex, Zustand, Zod, Clerk, Axios, Framer Motion, and Tailwind CSS.

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://www.ricardogesteves.com/favicon.ico"
        loading="lazy" />
    ricardogesteves.com
  </div>
</div>

I'm currently open to new projects, so feel free to reach out if you're looking for a dedicated developer to join your team! Let's build something amazing together!

Exciting News, my brand-new website is live

Ricardo Esteves — Tue, 18 Jun 2024 10:22:10 +0000

Hey DEV's! 👋

I’m thrilled to announce the launch of my brand-new website, built with the latest technologies. As a full-stack developer, I’ve poured my experience and creativity into building a site that reflects my dedication to code quality and user experience.

Explore it live at:

https://www.ricardogesteves.com

I'm looking for constructive criticism, cool ideas for improvements and disruptive new features.

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

React 19 new features and improvements

Ricardo Esteves — Fri, 17 May 2024 09:42:04 +0000

Hi DEVs,

let's check what the React team have been doing and what will be provided in react 19.

Following the exciting announcements at React Conf 2024, it's clear that the future of React is bright. The new features and improvements unveiled are set to be released soon and will be generally available to all. Among these advancements, the React Compiler stands out as a game-changer. In a move that underscores React's commitment to the open-source community, the React Compiler will be open source, allowing developers worldwide to contribute to its evolution.

New/Extended Features in React 19

Some of them already stable and available on Next.js

1. React Compiler

The React Compiler is a significant feature in React 19. It takes your React code and converts it into regular JavaScript. This process can potentially double the performance of your application.
The need for a compiler arises from the challenges with memoization and multiple re-renders. Traditionally, React uses a process called bundling to transform the JSX code into optimized JavaScript files for the browser. The new compiler takes this concept a step further. It analyzes your code at a deeper level, understanding the structure and dependencies between components.
React operates on a core principle: re-rendering of UI triggered by changes in application state. This allows us to describe the desired end state of the UI, rather than implicitly writing step-by-step instructions on how to manipulate the DOM. However, this can sometimes lead to excessive re-renders.

To prevent this, we had to intentionally optimize our components using memoization techniques. Memoization in React is a performance optimization technique that involves storing and reusing the results of expensive computations or component output based on the input parameters.
The React Compiler aims to simplify this process by automatically handling memoization and re-rendering. It allows compiled React code to automatically render only the right parts of the UI when the state changes. This removes the need of useMemo, useCallback, and memo. (If you follow the rules of react)

2. Server Components

Server Components in React 19 allow components to be processed on the server before delivering the page to users. This results in faster page loading and better SEO. It's a significant improvement as it reduces the amount of JavaScript that needs to be sent to the client, improving performance, particularly on slower networks.

3. Actions

Actions in React 19 simplify the management of data and interactions within web pages. They provide a pending state that starts at the beginning of a request and automatically resets when the final state update is committed. This allows you to keep the current UI responsive and interactive while the data is changing.

4. Document Metadata

Document Metadata in React 19 allowing us to accomplish more with less code. It provides a way to manage the metadata of a document, such as the title, meta tags, and other head elements. This is particularly useful for SEO and user experience, as it allows to dynamically change the metadata based on the application state.

5. Asset Loading

Asset Loading in React 19 enables assets to load in the background. This improves both the application's load time and the user experience. It's a significant improvement as it allows for better control over how and when assets are loaded, which can have a big impact on performance.

6. Web Components

Web Components in React 19 introduce improved compatibility with the Web Components standard. This allows for more flexible and compatible frontend development. It's a significant improvement as it allows us to use custom elements, shadow DOM, and HTML templates.

7. Enhanced/New Hooks

Introduces four new hooks: useOptimistic, useFormStatus, useFormState, and use.

1. useOptimistic

The useOptimistic hook allows you to update the UI optimistically before receiving confirmation from the server². This provides a seamless user experience by ensuring that users don't have to wait for feedback. It's particularly useful in scenarios where you want to give immediate feedback to the user, even before the server has responded.

2. useFormStatus

The useFormStatus hook manages the status of form fields, handling validation logic and submission state. It gives you status information of the last form submission. This simplifies form management by providing a centralized mechanism to monitor and modify the status of form fields.

3. useFormState

The useFormState hook serves as a manager for form input states. It offers a centralized mechanism to monitor and modify their values efficiently. It allows you to update state based on the outcome of form actions. This hook requires two arguments:

fn: This parameter represents the function to execute when the form is submitted or a button is pressed. Upon invocation, this function receives the previous state of the form (initially the initialState that you pass, subsequently its previous return value) as its initial argument, followed by the arguments that a form action normally receives.
initialState: This argument denotes the initial state value desired for the form. It can be any serializable value. Once the action is initially invoked, this parameter becomes irrelevant.

4. use

The use hook is a versatile React Hook designed to fetch and utilize the value of a resource, such as a Promise or context, within your components or custom hooks. What sets use apart from other React Hooks is its unique ability to be invoked within loops and conditional statements, such as if blocks. However, it still adheres to the standard requirement that the function utilizing use must be either a Component or another Hook.

Check out: React19 beta API docs

In conclusion
This will be an overall improvement not just on user
experience but also for developers.

The React Compiler stands out as a game-changer. It takes your React code and converts it into optimized JavaScript, improving performance. This is a significant step forward as it not only enhances the performance but also simplifies the development process by automatically handling memoization and re-rendering. This means that we can focus more on building great user experiences rather than worrying about performance optimization.

On my opinion the use hook is another powerful addition that is set to revolutionize how we write and manage state in our React applications. The use hook provides a more flexible and efficient way to fetch and utilize the value of a resource, such as a Promise or context, within your components or custom hooks. What sets it apart from other React Hooks is its unique ability to be invoked within loops and conditional statements, such as if blocks. This brings a new level of dynamism and control to state management in React.

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

Webhooks and WebSockets

Ricardo Esteves — Wed, 17 Apr 2024 13:46:20 +0000

Introduction

In the world of web development, there are numerous technologies and terminologies that developers come across, two of which are Webhooks and WebSockets. Both are used for communication over the web, but they serve different purposes and work in different ways. This article aims to provide an in-depth understanding of both these technologies, their differences, and when to use each.

Webhooks

What are Webhooks?

Webhooks are essentially "event-triggered HTTP requests". They are a server-to-server means of communication. A webhook is triggered by an event in a server and sends data via a pre-configured URL to another server.

How do Webhooks Work?

When a specific event occurs on a server, the server sends an HTTP request (POST is common) to the URL configured for the webhook. The request will contain information about the event that can be used by the receiving server.

When to Use Webhooks?

Webhooks are efficient for receiving real-time updates and can be tailored to specific events and needs. They are commonly used in scenarios such as updating a customer database when a new user signs up, notifying a mail server to send a welcome email after sign up, or even triggering a new build in a continuous integration pipeline when a change is pushed to a version control system.

Webhooks: The Pub-Sub Approach

Imagine you're at a restaurant waiting for your order. A waiter walks around announcing completed orders. This "shout-out" system is similar to how webhooks operate. Webhooks are a lightweight method for one application (the publisher) to notify another application (the subscriber) about specific events.

Here's the breakdown:

Setting Up: The subscriber provides the publisher with a URL, their "listening address."
Event Triggers: When a pre-defined event occurs in the publisher's application (e.g., a new user signs up), it triggers a webhook notification.
Delivery: The publisher sends an HTTP request (usually a POST) to the subscriber's URL, carrying relevant information about the event in the request body.
Processing: The subscriber receives the notification and processes the information accordingly, potentially triggering actions within its own application.

Think of webhooks as a push notification system – the publisher pushes updates to the subscriber when something noteworthy happens. This one-way communication makes webhooks simple and scalable, ideal for situations where the subscriber only needs to react to events and doesn't require constant back-and-forth communication.

WebSockets

What are WebSockets?

WebSockets establish a two-way, persistent, bidirectional communication channel over a single connection made between two TCP ports from a client (browser) to a server.

How do WebSockets Work?

Unlike default HTTP, a WebSocket connection stays open between transactions, allowing data to flow seamlessly between both parties. Either end of a WebSocket connection can send data to the other, making it ideal for real-time data transfer.

When to Use WebSockets?

WebSockets are very beneficial when working on low-latency server-client data streaming applications. They offer a huge speed advantage, especially when data is being sent from the server to the client. They are commonly used in real-time applications such as live chat, real-time analytics, multiplayer games, and collaborative editing environments like Google Docs.

WebSockets: The Open Channel

WebSockets, on the other hand, establish a persistent, two-way communication channel between a client (like a web browser) and a server. This connection remains open for as long as both parties require it, enabling real-time data exchange in both directions – a more like a dedicated phone line for continuous conversation.

Here's a glimpse into how WebSockets work:

Handshake: The client initiates a connection by sending a special handshake request to the server.
Upgrade: The server acknowledges the request and upgrades the connection from HTTP to a WebSocket connection. This creates a persistent, bidirectional channel.
Data Flow: Once connected, both client and server can send and receive data messages at any time. Messages are typically sent in a format like JSON for easy parsing.
Closing: When communication is no longer needed, either party can initiate a closing handshake to gracefully terminate the connection.

WebSockets provide a real-time communication stream, making them perfect for applications where continuous data exchange is essential. For instance, chat applications leverage WebSockets to ensure messages appear on the recipient's screen almost instantly after sending.

Differences Between Webhooks and WebSockets

While both Webhooks and WebSockets are used for communication over the web, they serve different purposes and work in different ways. Here are some key differences:

Communication: Webhooks are a one-way communication method (from the server to the client), while WebSockets are a two-way communication method.
Connection: Webhooks use a new HTTP request for each message, while WebSockets use a single persistent connection for multiple messages.
Use Case: Webhooks are ideal for event notifications, while WebSockets are ideal for real-time applications.

Use cases: Webhooks vs WebSockets

Now that you understand both webhooks and WebSockets, it's crucial to know when to use each:

Use Webhooks When:
- You need a simple, scalable solution for one-way notifications.
- The subscriber only needs to react to events and doesn't require constant updates.
- Brief bursts of data exchange are sufficient.
Use WebSockets When:
- You require real-time, two-way communication between client and server.
- Constant data exchange is necessary for the application to function (e.g., chat, collaborative editing).
- Low latency (minimal delay) is critical.

Conclusion

In summary, while Webhooks are great for one-way, event-driven communication, WebSockets excel at providing real-time, two-way communication. The choice between the two will depend on the specific needs of your application. It's not uncommon for modern applications to use both technologies, each for what they do best.

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

React Strict DOM package

Ricardo Esteves — Sat, 02 Mar 2024 18:49:44 +0000

Hi Dev's

After the React team announcement to all the improvements that React v19 will bring, including the awesome introduction of a compiler. The React team is working on a truly exciting package that I believe is worth your time.

In the dynamic landscape of web and native application development, achieving cross-platform consistency while preserving performance and reliability remains a formidable challenge. Meta's recent release of React Strict DOM introduces a paradigm shift in this realm. In this expansive exploration, we embark on a journey to uncover the depths of React Strict DOM, elucidating its novel features, advantages, disadvantages, and the transformative potential it holds for universal React component development.

The Genesis of React Strict DOM: A New Era in Universal Components

React Strict DOM emerges as a revolutionary addition to the React ecosystem, poised to redefine the way developers create and deploy universal components for web and native platforms. By leveraging a novel integration of React DOM and StyleX, React Strict DOM empowers developers to seamlessly craft styled React components that transcend platform boundaries.

Understanding the New React Strict DOM Package: Features and Purpose

At its core, React Strict DOM serves as an experimental integration of React DOM and StyleX, offering a subset of imperative DOM and CSS functionalities tailored to support both web and native targets. The primary goal of React Strict DOM is to streamline and standardize the development of styled React components, enhancing development speed, efficiency, and code maintainability across diverse platforms.

Advantages of React Strict DOM: Accelerating Development Efficiency

Speed and Efficiency: React Strict DOM enhances the speed and efficiency of React development by providing a unified platform-agnostic API for creating styled components.
Performance and Quality: Despite its experimental nature, React Strict DOM does not compromise on performance, reliability, or code quality, ensuring optimal user experiences across platforms.
Standardization: By standardizing the development process, React Strict DOM promotes consistency and code maintainability, facilitating collaboration and code reuse across projects.

Disadvantages of React Strict DOM: Addressing Limitations and Challenges

Experimental Nature: As an experimental integration, React Strict DOM may entail potential issues or limitations that are yet to be fully explored or documented, necessitating careful consideration and testing.
Compatibility Challenges: While React Strict DOM aims to support both web and native platforms, compatibility with React Native remains a work in progress, presenting challenges for developers seeking seamless integration across diverse environments.

Solving the Development Dilemma: Addressing Cross-Platform Challenges

React Strict DOM addresses the perennial challenge of developing styled React components for both web and native platforms in a standardized, efficient, and performant manner. By leveraging the strengths of React DOM and StyleX, React Strict DOM bridges the gap between web and native development paradigms, empowering developers to create universal components with ease.

The Concept Behind React Strict DOM: Polyfills and Web API Integration

At its conceptual core, React Strict DOM builds upon the design goals of the "React DOM for Native proposal" by polyfilling a myriad of standard APIs and leveraging emerging web capabilities in React Native, such as DOM traversal and layout APIs. By integrating these capabilities with a well-defined event loop processing model, React Strict DOM paves the way for seamless cross-platform development experiences.

Exploring React Strict DOM Through Code: A Technical Deep Dive

Creating components with react-strict-dom
react-strict-dom is powered by stylex which is a new styling solution created by Meta that is already powering facebook.com in production. It comes with the package under css module. All the building blocks with which we can build our app are available under html. This is how building UI with RSD looks like:



import React from "react";
import { css, html } from "react-strict-dom";

export default function App() {
  return (
    <html.div style={styles.div}>
      <html.div data-testid="testid">div</html.div>
      <html.span>span</html.span>
      <html.p>paragraph</html.p>

      <html.div />

      <html.span>
        <html.a href="https://google.com">anchor</html.a>,
        <html.code>code</html.code>,<html.em>em</html.em>,
        <html.strong>strong</html.strong>,
        <html.span>
          H<html.sub>2</html.sub>0
        </html.span>
        ,<html.span>
          E=mc<html.sup>2</html.sup>
        </html.span>
      </html.span>
    </html.div>
  );
}


const styles = css.create({
  div: {
    paddingBottom: 50,
    paddingTop: 50,
    backgroundColor: "white",
  },
});

react-strict-dom is leveraging APIs that we know from the Web to build universal apps.

Is <html.div> a native component?
Yes, it is! The role of react-strict-dom is to translate one universal API to platforms' primitives.

Let's delve into a series of intricate code examples that showcase the power and versatility of React Strict DOM:

1. Defining Styles with StyleX



import { css } from 'react-strict-dom';

const styles = css.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
    padding: 20,
    borderRadius: 8,
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: 'white',
  },
});

2. Creating a Styled Component



import { html } from 'react-strict-dom';

const StyledComponent = () => {
  return (
    <html.div style={styles.container}>
      <html.span style={styles.text}>Styled Component</html.span>
    </html.div>
  );
};

export default StyledComponent;

3. Rendering Text Elements



const TextComponent = () => {
  return (
    <html.div>
      <html.p>This is a paragraph.</html.p>
      <html.span>This is a span.</html.span>
      <html.h1>This is a heading.</html.h1>
    </html.div>
  );
};

4. Working with Lists



const ListComponent = () => {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <html.ul>
      {items.map((item, index) => (
        <html.li key={index}>{item}</html.li>
      ))}
    </html.ul>
  );
};

5. Handling Events



const ButtonComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <html.button onClick={handleClick}>Click Me</html.button>
  );
};

6. Conditionally Rendering Components



const ConditionalComponent = ({ condition }) => {
  return condition ? <html.div>Condition is true</html.div> : <html.div>Condition is false</html.div>;
};

7. Passing Props to Components



const PropsComponent = ({ name }) => {
  return <html.div>Hello, {name}!</html.div>;
};

8. Using Fragments



const FragmentComponent = () => {
  return (
    <>
      <html.div>Fragment Component</html.div>
      <html.div>Another Fragment Component</html.div>
    </>
  );
};

9. Styling Components Inline



const InlineStyleComponent = () => {
  const inlineStyle = { color: 'red', fontSize: '18px' };

  return <html.div style={inlineStyle}>Inline Style Component</html.div>;
};

10. Implementing Component Lifecycle Methods



class LifecycleComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <html.div>Lifecycle Component</html.div>;
  }
}

11. Using Hooks



import { useState } from 'react-strict-dom';

const HooksComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <html.div>Count: {count}</html.div>
      <html.button onClick={() => setCount(count + 1)}>Increment</html.button>
    </>
  );
};

12. Handling Form Inputs



const FormComponent = () => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <html.div>
      <html.input type="text" value={value} onChange={handleChange} />
      <html.div>Typed Value: {value}</html.div>
    </html.div>
  );
};

13. Using Context API



import { createContext, useContext } from 'react-strict-dom';

const ThemeContext = createContext('light');

const ThemeComponent = () => {
  const theme = useContext(ThemeContext);



  return <html.div>Current Theme: {theme}</html.div>;
};

14. Implementing Error Boundaries



class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <html.div>Error Encountered!</html.div>;
    }
    return this.props.children;
  }
}

15. Implementing Higher-Order Components



const withLogger = (Component) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted:', Component.name);
    }

    render() {
      return <Component {...this.props} />;
    }
  };
};

const EnhancedComponent = withLogger(MyComponent);

Conclusion: Embracing the Future of Cross-Platform Development

In conclusion, React Strict DOM emerges as a game-changing innovation in the realm of universal React component development. By offering a standardized, efficient, and performant solution for crafting styled components across web and native platforms, React Strict DOM heralds a new era of cross-platform development. As developers embrace the transformative potential of React Strict DOM, they unlock new possibilities for creating immersive, platform-agnostic user experiences that transcend traditional boundaries. Welcome to the future of cross-platform development with React Strict DOM.

It's still in experimental faze but it looks really promising.

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com

Migrating from Supabase and Prisma Accelerate to Convex

Ricardo Esteves — Fri, 02 Feb 2024 12:20:35 +0000

Hello DEV Community,

I'm Ricardo Esteves, I love to constantly explore and adopt new technologies and tools within my preferred stack ecosystem.

The Tech stack that I work most with is TypeScript, React, Next.js, Node.js, Bun, Express, Hono, Prisma, PostgreSQL, MySQL, MongoDB, etc... I like to crafted a versatile skill set that encompasses both front-end and back-end development. The joy of experimentation and discovery is palpable and not always possible at my work so I apply It on my personal projects. The freedom to explore and implement the chosen technologies brings a sense of fulfillment that is not always possible within the constraints of the workplace.

About Supabase, Prisma And Convex

In the rapidly evolving landscape of web development, the tools and technologies we use play a crucial role in shaping the efficiency and performance of our projects. Two popular technologies that have gained significant traction in recent years are Supabase and Prisma Accelerate. Supabase is an open-source Firebase alternative that provides real-time database capabilities using PostgreSQL, while Prisma Accelerate is an extension of the Prisma ORM (Object-Relational Mapping) designed to boost database query performance.

However, as the tech world never stands still, developers are constantly on the lookout for newer, more performant solutions. One such emerging player in the realm of databases is Convex. In this article, we will explore the journey of migrating from Supabase and Prisma Accelerate to Convex, evaluating the advantages, use cases, challenges, and steps involved in the migration process.

The Existing Stack: TypeScript, Next.js, Supabase, Prisma

Before delving into the migration journey, it's essential to understand the existing technology stack. The stack in question comprises TypeScript as the programming language, Next.js as the React framework for building web applications, Supabase with real-time database capabilities using PostgreSQL, and Prisma as the ORM for database interactions.

This stack has proven to be robust and reliable, but as development practices evolve, exploring new alternatives becomes imperative for staying ahead of the curve.

The Quest for Something New and Performant

In the pursuit of innovation and performance improvements, developers often find themselves exploring newer technologies. This yearning for something new led to the discovery of Convex, a promising database solution that aims to simplify database interactions and enhance performance.

Use Cases for Migrating to Convex

Performance Optimization: Convex boasts impressive performance gains compared to traditional databases. Its optimized query execution and data retrieval mechanisms make it a compelling choice for projects with stringent performance requirements.
Simplified Query Language: Convex introduces a simplified query language that can lead to more concise and readable code. This can be particularly beneficial for developers seeking a more intuitive and expressive way to interact with databases.
Real-time Capabilities: Similar to Supabase, Convex provides real-time capabilities, allowing developers to build applications with dynamic, live-updating content without the need for complex configurations.

Advantages of Migrating to Convex

Performance Boost: Convex is designed for speed, offering significantly improved query execution times compared to traditional database solutions. This can result in faster response times for applications.
Simplified Syntax: Convex introduces a clean and straightforward syntax for database queries, reducing the learning curve for developers transitioning from other database management systems.
Real-time Data Updates: The real-time capabilities of Convex enable seamless integration of live updates into applications, enhancing the user experience for dynamic content.

Disadvantages of Migrating to Convex

Learning Curve: Developers accustomed to Prisma's syntax and structure may face a learning curve when adapting to Convex's approach to queries and mutations. This includes differences in schema definitions, syntax, and migration strategies.
Integration Challenges: Projects heavily reliant on Prisma may face integration challenges during migration. Adapting existing code and ensuring a smooth transition can be time-consuming.
Limited Ecosystem: As a relatively new player, Convex have a smaller ecosystem compared to established solutions like Prisma. This could mean fewer community-contributed plugins and integrations.

Challenges of Migration

Data Migration: Moving data from the existing database to Convex requires careful planning and execution to ensure data integrity and consistency during the transition.
Code Refactoring: Adapting existing code, especially if it heavily relies on Prisma-specific features, may require substantial refactoring to align with Convex's syntax and structure.
Testing and QA: Thorough testing is essential to identify and address any compatibility issues or unexpected behaviors that may arise post-migration.

How to Set Up Convex and Steps to Take

Installation: Begin by installing Convex in your project using the recommended installation method for your development environment.
Configuration: Configure Convex with the necessary connection details, such as database URL and authentication credentials.
Schema Definition: Define your database schema using Convex's schema definition, which differ from Prisma's schema syntax.
Data Migration: Develop a strategy for migrating data from the existing database to Convex, ensuring data consistency throughout the process.
Code Adaptation: Refactor your application code to align with Convex's query and mutation syntax. Pay special attention to areas where Prisma-specific features were heavily utilized.
Testing: Conduct comprehensive testing to identify and resolve any issues that may arise from the migration. This includes unit testing, integration testing, and end-to-end testing.
Deployment: Once satisfied with the testing results, deploy the updated application with Convex as the database backend.

Conclusion

Migrating from Supabase and Prisma Accelerate to Convex is a strategic decision that comes with its set of challenges and advantages. While Convex offers impressive performance improvements and a simplified query language, developers must navigate the learning curve and potential integration challenges.

As technology continues to evolve, staying abreast of new developments and exploring alternative solutions is essential for ensuring the longevity and efficiency of your projects. The migration process outlined here provides a roadmap for developers considering the shift to Convex, offering insights into the considerations, advantages, and challenges associated with this transition.

Follow me: @ricardogesteves

On Twitter: @RicardoGEsteves

On GitHub:

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://github.githubassets.com/favicons/favicon.svg"
        loading="lazy" />
    github.com
  </div>
</div>

Happy coding!

React Query, why is an awesome tool to manage Remote State

Ricardo Esteves — Wed, 31 Jan 2024 00:05:45 +0000

The Power of React Query for Efficient Remote State Management

Introduction:

In the ever-evolving landscape of frontend development, managing remote state efficiently is a crucial aspect of building performant and scalable React applications. While useEffect has been a workhorse for side effects, it falls short when it comes to handling complex scenarios like caching, optimistic updates, and real-time synchronization. Enter React Query – a game-changing library that provides a comprehensive solution for managing remote state. In this post, we'll delve into the technical nuances of why React Query stands out and why it should be your go-to tool.

1. Declarative Querying:

React Query introduces a declarative approach to fetching and managing remote data. The useQuery hook simplifies expressing data requirements, resulting in a cleaner and more maintainable codebase. Let's compare it with a basic example:

// Using useEffect
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  fetchData().then(result => {
    setData(result);
    setIsLoading(false);
  });
}, []);

// Using React Query
const { data, error, isLoading } = useQuery('todos', fetchTodos);

The React Query version significantly reduces boilerplate and clearly articulates the intention of fetching 'todos'.

2. Automatic Caching:

React Query's intelligent caching mechanism is a standout feature. Once data is fetched, it's automatically cached, eliminating redundant network requests. This not only improves performance by leveraging stored data but also enhances the user experience by reducing load times.

// Automatic caching with React Query
const { data, error, isLoading } = useQuery('todos', fetchTodos);

In contrast, implementing such caching with useEffect involves manual handling of cached data, leading to increased complexity.

3. Mutation Management:

Handling mutations is streamlined with React Query's useMutation hook. It takes care of the entire lifecycle, including optimistic updates, automatic re-fetching of data, and error handling.

// Using useMutation with React Query
const queryClient = useQueryClient();
const { mutate } = useMutation(updateTodo, {
  onSuccess: () => {
    queryClient.invalidateQueries('todos');
  },
});

// Usage
const updateTodoHandler = (id, data) => {
  mutate({ id, data });
}

This approach is more elegant and less error-prone compared to manually managing mutations with useEffect.

4. Real-time Updates:

React Query seamlessly integrates with WebSocket libraries, offering real-time updates through tools like react-query/devtools. This ensures that your application stays in sync with remote data changes, providing a dynamic and real-time user experience.

// Real-time updates with React Query
import { ReactQueryDevtools } from 'react-query/devtools';

const App = () => {
  return (
    <>
      {/* Your App Components */}
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
};

Real-time capabilities are challenging to achieve with useEffect and often require additional state management complexity.

5. Consistent Error Handling:

React Query promotes a unified approach to error handling across queries and mutations. The onError callback ensures consistent error management, simplifying the process of handling errors and providing meaningful feedback to users.

// Consistent error handling with React Query
const { data, error, isLoading } = useQuery('todos', fetchTodos, {
  onError: (error) => {
    // Handle errors consistently
  },
});

Achieving such consistency with useEffect involves scattered error handling logic throughout the component.

6. Integration with DevTools:

React Query's built-in development tools offer deep insights into the state of queries, mutations, and cache. This significantly aids in debugging and optimizing your application, providing a smoother development experience.

// DevTools integration
import { ReactQueryDevtools } from 'react-query/devtools';

const App = () => {
  return (
    <>
      {/* Your App Components */}
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
};

Debugging becomes more straightforward, allowing developers to identify and resolve issues efficiently.

7. Optimistic Updates:

React Query's support for optimistic updates simplifies the process of updating the UI before a mutation is confirmed by the server. This instant feedback enhances the user experience, making the application feel more responsive.

// Optimistic updates with React Query
const queryClient = useQueryClient();
const { mutate } = useMutation(createTodo, {
  onSuccess: (data) => {
    queryClient.setQueryData('todos', (oldData) => [...oldData, data]);
  },
});

// Usage
const createTodoHandler = (data) => {
  mutate(data);
}

Implementing optimistic updates with useEffect requires meticulous handling of temporary UI states, leading to increased complexity.

Conclusion:

In conclusion, React Query emerges as an indispensable tool for managing remote state in React applications. Its features such as declarative querying, automatic caching, built-in mutation management, real-time updates, consistent error handling, integration with development tools, and support for optimistic updates collectively make it a superior choice over using useEffect for remote state management.

By adopting React Query, developers can streamline their codebase, enhance performance, and build more robust and scalable applications. The library's focus on simplicity, efficiency, and developer experience makes it a must-have in the toolkit of any modern React developer. Embrace React Query and elevate your remote state management to new heights!

Follow me @ricardogesteves
on GitHub
on Twitter

2024 Web Development Roadmap: A Comprehensive Guide

Ricardo Esteves — Thu, 25 Jan 2024 23:00:50 +0000

Hey DEV Community!

As we step into 2024, the landscape of web development continues to evolve at a rapid pace. Whether you're a seasoned developer or just starting out, having a roadmap can greatly assist in charting your course through the vast sea of technologies and frameworks. In this article, we'll delve into a comprehensive roadmap for both frontend and backend development, equipping you with the knowledge and resources needed to thrive in the ever-changing world of web development.

2024 Frontend Roadmap

HTML

Basics
Forms
Emmet

CSS

Selectors
Inheritance
Specificity
Box Model
Position
Display
Flexbox
Grid
Calc
Pseudo Elements
Pseudo Classes
Custom Properties
Logical Properties
Media Queries
Container Queries
Animation
Transitions
Transforms
Responsive Design
Accessibility
BEM
SMACSS
CSS Modules
CSS Frameworks
CSS Preprocessors

JavaScript

Async vs Defer Script Loading
Var vs Let vs Const
Function Basics
Callbacks
Arrow Functions
Hoisting
Scoping
Closures
Strict Equality
Objects/Arrays
Reference Vs Value
DOM Traversal
DOM Manipulation
Event Listeners
Control Flow (If, Loops, etc.)
Promises
Async Await
Fetch
Browser Storage
Event Loop
Modules
Null Vs Undefined
Recursion
Bundlers
Array Methods
Template Literals
Destructuring/Spread Operator
Classes
Inheritance
Iterators
Generators
Destructuring
String Methods
Object Methods
Map/Set
WeakMap/WeakSet
Symbols
Default Parameters
Rest Parameters

Frontend Framework - (Choose Any)

React (Recommended)
Astro (Second Recommendation)
Svelte (Growing Popularity)
Angular (Declining Popularity)
Vue (Declining Popularity)

React

Component Model
JSX
Props
State
Events
useEffect
StrictMode
Lists/Conditional Rendering
Fragments
Refs
useMemo
useCallback
Custom Hooks
useReducer
Context
Routing
Portal
useLayoutEffect
Suspense
Hooks in general
Best Practices

Meta Framework - (Optional) (Choose Any)

React
- Next.js (Recommended)
- Astro (Second Recommendation)
- Remix
Astro
- Astro (Recommended)
Svelte
- SvelteKit (Recommended)
Angular
- Analog (Recommended)
Vue
- Nuxt.js (Recommended)

Next.js

App Router
- Folder Based Routing
- Metadata/SEO
- Server vs Client Components
- Data Fetching
- Loading/Error Pages
- Dynamic Routes
- Data Cache/Request Memoization/Full Route Cache/Router Cache
- Dynamic vs Static Pages
- Dynamic Functions
- Server Actions
- useOptimistic/useFormState/useFormStatus
- Parallel Routes/Intercepting Routes
- Route Handlers
Pages Directory
- Page Based Routing
- CSR vs SSR vs SSG vs ISR
- getServerSideProps/getStaticProps/getStaticPaths/getInitialProps
- API Routes

TypeScript

TSConfig
Type Inference
Array Type
Any/Unknown Type
Type vs Interfaces
Functions
Unions/Intersections
readonly/keyof/typeof
As Const/Enums
Tuples
Generics
Built In Types (Pick, Omit, etc.)
Type Guards
Satisfies
Discriminated Union
Function Overloads
Type Predicate Functions
Declaration Files

2024 Backend Roadmap

Backend Language - (Choose Any)

JavaScript (Recommended If Also Learning Frontend)
Python (Recommended If Also Learning AI)
PHP (Recommended If Also Learning Wordpress)
C# (Recommended If Also Learning.NET)
Rust (Difficult To Learn)
Ruby (Easier To Learn But Not Used As Much)
Go (Difficult To Learn)

Backend Framework - (Choose Any)

JavaScript
- Node.js With Express or Hono (Recommended)
- Bun with Hono (Recommended)
- Deno with Hono
PHP
- Laravel (Recommended)
- Wordpress (Also Recommended)
- CodeIgniter
Python
- Django (Recommended)
- Flask
C#
- .NET (Recommended)
Rust
- Rocket (Recommended)
Ruby
- Rails (Recommended)
Go
- Gin (Recommended)

Node.js/Express

Var vs Let vs Const
Function Basics
Callbacks
Arrow Functions
Hoisting
Scoping
Closures
Strict Equality
Objects/Arrays
Reference Vs Value
Control Flow (If, Loops, etc.)
Promises
Async Await
Callbacks
Promises
Async Await
Common Modules
Null Vs Undefined
Recursion
Array Methods
Template Literals
Destructuring/Spread Operator
Node.js File System Library
Express Middleware
Express Routing
Templating Language (EJS, Handlebars, Pug, etc.)

Databases - SQL vs NoSQL

SQL
- PostgreSQL (Recommended)
- MySQL (Also Recommended)
- SQLite
NoSQL
- MongoDB (Recommended)
- Redis (Recommended For Caching)
- Cassandra
- DynamoDB (Recommended If Working With AWS)

TypeScript

(Similar to frontend TypeScript)

Next.js - (Optional)

(Similar to frontend Next.js list)

Next.js 14 and Emerging Open Source Projects

Ricardo Esteves — Tue, 23 Jan 2024 10:05:02 +0000

The React.js ecosystem has witnessed remarkable growth and innovation in recent years, propelling it to the forefront of front-end development. With the introduction of Next.js 14+, the ecosystem has entered a new era of enhanced performance, scalability, and developer experience. Additionally, a wave of exciting open-source projects is emerging, offering developers a plethora of tools and libraries to enhance their development workflow.

Next.js 14: A Paradigm Shift in React Development

Next.js 14 marks a significant milestone in the evolution of React development, introducing a range of groundbreaking features that streamline development and elevate user experiences. Let's delve into some of the key advancements:

Server-Side Rendering (SSR) Optimizations

Next.js 14 introduces significant improvements in SSR performance, enabling developers to deliver lightning-fast page load times and enhanced SEO.

Isomorphic Routing

Next.js 14 empowers developers to build single-page applications (SPAs) with seamless routing capabilities, providing a unified experience across all devices and browsers.

Data Fetching with Suspense

Next.js 14 extends the concept of suspense to data fetching, allowing developers to render components without waiting for data to be loaded, ensuring a responsive user experience while data is being fetched.

Improved Static Site Generation (SSG)

Next.js 14 streamlines SSG operations, enabling developers to generate static pages with dynamic data, ensuring optimal performance and SEO benefits.

Next.js Images

Next.js introduces a new Image component, providing developers with enhanced control over image optimization and serving, ensuring faster loading times and improved user experiences.

Server Actions Stability

Server Actions, a new feature in Next.js 14, have reached stable status. This means that Server Actions are now fully supported and recommended for production use. Server Actions allow developers to run server-side code directly from their components, enabling them to perform actions such as form validation, data processing, and API calls, without the need for backend services.

Emerging Open Source Gems: Expanding the React Ecosystem

Alongside the advancements in Next.js, a vibrant ecosystem of open-source projects is thriving, offering developers a range of tools and libraries to enhance their React development workflow. Let's explore some of the promising projects:

React Query

React Query provides a powerful caching and data fetching solution, simplifying data fetching and reducing the need for manual caching management.

SWR (Stale While Revalidate)

SWR offers a lightweight and performant data fetching solution, ensuring that UI components are always displayed with the most up-to-date data.

Headless UI

Headless UI provides a set of React components for building user interfaces without the need for a JavaScript bundler, enabling developers to build server-side rendered applications.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a wide range of low-level CSS utilities, empowering developers to build flexible and responsive designs with ease.

Framer Motion

Framer Motion is a declarative animation library for React, enabling developers to create smooth and interactive animations without writing complex CSS code.

Conclusion: Embracing Innovation and Building Modern Web Applications

The React.js ecosystem continues to evolve at a rapid pace, driven by the collective efforts of a passionate community of developers. With the advancements in Next.js 14 and the emergence of innovative open-source projects, developers have access to a powerful toolkit for building modern, performant, and user-friendly web applications. By embracing these advancements and staying abreast of the latest trends, developers can confidently navigate the ever-evolving landscape of web development and create exceptional digital experiences.

DEV Community: Ricardo Esteves

Zustand, When, how and why

Table of Contents

1. Introduction to State Management

2. Understanding Zustand

3. Types of State

4. Getting Started with Zustand

5. Key Features of Zustand

6. Implementing Zustand

7. Zustand vs. Other State Management Solutions

Zustand vs. Redux

Zustand vs. MobX

Zustand vs. Recoil

8. System Design of Zustand

9. Persisting State with Zustand

10. Using Zustand Outside React Components

11. Real-World Examples

Authentication State

Shopping Cart

Theme Switcher

12. Conclusion

Bonus tips:

13. Handling Asynchronous Code with Zustand

How Zustand Handles Asynchronous Code

Implementing Asynchronous Code

Benefits of Zustand's Approach to Async Code

Comparison with Other Solutions

In conclusion for async

Prepare Yourself for a Systems Design Interview

Introduction

Understanding the Purpose

Preparation Strategy

1. Study Fundamental Concepts

Example: Scalability

2. Learn System Components

Example: Caching

3. Study Existing System Designs

4. Practice Estimations

Example: Storage Estimation

5. Understand Non-Functional Requirements

What to Expect in the Interview

Key Questions and Answers

Q1: Design a URL shortener (like bit.ly)

Functional Requirements:

Non-Functional Requirements:

High-Level Design:

Key Considerations:

Q2: Design a distributed cache

Functional Requirements:

Non-Functional Requirements:

High-Level Design:

Key Considerations:

Best Practices

Key Considerations

Technical Deep Dive: Designing a Social Media Platform

Functional Requirements:

Non-Functional Requirements:

High-Level Design:

Detailed Component Design:

Scalability Considerations:

Performance Optimizations:

Monitoring and Logging:

Now let's see some examples:

Conclusion

Important tip:

React with Vite On Steroids

What's Inside?

Getting Started

Prerequisites

Installation

Running the Development Server

Building for Production

Running Tests

Linting and Formatting

License

Acknowledgements

Open to work

Exciting News, my brand-new website is live

Explore it live at:

React 19 new features and improvements