Subramanya's Digital Garden

Recent Notes

React Meetup 83

3 min read

Everything you need to know about React 19

Actions

  • useActionState can be used to control the form

React Compiler

  • Managing useCallback and useMemo is hard
  • Compiler takes care of adding these hooks so developer doesn’t have to add it.

New Hooks

  • useActionState
  • useFormStatus
    • returns isPending state which can be used to show loading indicator until form is submitted
  • useOptimistic
    • Optimistically sets the state to success action and reverts back if there is an error
    • error, isSubmit and pending
  • use
    • Declarative resource reading during render
  • ref as a Prop
  • React Server Components
    • use server;
  • Improved Error Handling
  • Document Metadata

Micro-frontends in Scaling Front-end Architectures

What are micro-frontends?

  • Design approach in frontend development where a monolith application into smaller applications, that can be deployed independently
  • Decouple Major Features to separate apps
    • Provide APIs to fetch necessary data

Advantages

  • No direct communication

  • No dependency between micro-frontends

  • Breaking changes in one application has no impact on other frontends

  • Container

    • Product List application
    • Cart Application

Integration

  • Container needs access to the source code of all the micro frontend applications

Types of Integration

  • Build time Integration
  • Run time Integration
  • Server Integration (Payload.js)

How to implement Integration?

  • No single perfect solution to this
  • Each have it’s pros and cons

Build Time Integration

  • Easy to setup and understand
  • Container needs to be deployed everytime any micro frontend is deployed

Run Time Integration

  • MicroFrontend can be deployed independently at any time
  • Different versions can be deployed and container can decide which one to choose
  • Tooling setup is far more complicated

Run-Time Integration with Webpack Module Federation

  • Harder to setup
  • Most flexible and performant solution
  • Basic understanding of webpack is required

Steps to implement Module Federation

  • Designate one app as the Host and other as the Remote
  • In the Remote, decide which modules (files) you want to make available in other projects
  • Setup Module Federation plugins to expose those files

Single-SPA

  • Micro-frontend orchestration framework
  • Manages the lifecycle of multiple MFEs
  • Handles routing and lifecycle events out of the box

Managing Shared state between Micro-Frontends

  • Using a global store
    • Shared State Management Library (Redux/Zustand)
  • Event Bus or Pub/Sub Model
    • MFEs communicate via a central bus event

When should you not use Micro-Frontends

  • The application is small and not expected to grow significantly
  • Team Size doesn’t justify the added complexity

Building Applications at the Edge

Why deploy applications at the edge?

  • Latency
  • Availability
  • Compliance

Real-time face detection in React using Tensorflow.js

  • Face-api.js

What is Tensorflow

  • Open Source Machine Learning Framework for building and training machine models

How it works

AI for Frontend Developers

  • npm i ai AI SDK from Vercel
  • Vercel ai Tools
  • Rag
    • Embeddings
    • Chunks

Empowering AI agents using composio

Graph View