Esneyder Palacios

Senior Software Engineer at @livevox | Co-founder of @Hackdó

Creando experiencias de usuario guiadas por eventos con

Communication methods in React

useContext

React Hook that lets you read and subscribe to context from your component.

1.

2.

Flux Pattern

Implemented by libraries like redux.

3.

Prop drilling

When data is being passed down at almost every level until gets to the final destination.

# Communication

{npm i hermes-io}

# UML diagram

Observer pattern

import { Context, Observer } from "hermes-io";

export const ProductsObserver = new Observer();
export const ProductsContext = new Context('ProductsContext');

# CODE TIME

How it works

import { Context, Observer } from "hermes-io";

export const ProductsObserver = new Observer();
export const ProductsContext = new Context('ProductsContext');

# CODE TIME

How it works

import { Context, Observer } from "hermes-io";

export const ProductsObserver = new Observer();
export const ProductsContext = new Context('ProductsContext');

# CODE TIME

How it works

import { useObserver } from 'hermes-io';

export const useProducts = () => {
  const addProduct = () => {};
  const removeProduct = () => {};
  
  const handleProductsNotification = (event) => {
    const { value = '' } = event;
    const { type, payload } = value;
    if (type === ADD_PRODUCTS) addProduct(payload);
    if (type === REMOVE_PRODUCTS) removeProduct(payload);
  };
  
  useObserver({
    contexts: [ProductsContext],
    observer: ProductsObserver,
    listener: handleProductsNotification,
  });
}

# CODE TIME

import { useObserver } from 'hermes-io';

export const useProducts = () => {
  const addProduct = () => {};
  const removeProduct = () => {};
  
  const handleProductsNotification = (event) => {
    const { value = '' } = event;
    const { type, payload } = value;
    if (type === ADD_PRODUCTS) addProduct(payload);
    if (type === REMOVE_PRODUCTS) removeProduct(payload);
  };
  
  useObserver({
    contexts: [ProductsContext],
    observer: ProductsObserver,
    listener: handleProductsNotification,
  });
}

# CODE TIME

import { useObserver } from 'hermes-io';

export const useProducts = () => {
  const addProduct = () => {};
  const removeProduct = () => {};
  
  const handleProductsNotification = (event) => {
    const { value = '' } = event;
    const { type, payload } = value;
    if (type === ADD_PRODUCTS) addProduct(payload);
    if (type === REMOVE_PRODUCTS) removeProduct(payload);
  };
  
  useObserver({
    contexts: [ProductsContext],
    observer: ProductsObserver,
    listener: handleProductsNotification,
  });
}

# CODE TIME

import { useObserver } from 'hermes-io';

export const useProducts = () => {
  const addProduct = () => {};
  const removeProduct = () => {};
  
  const handleProductsNotification = (event) => {
    const { value = '' } = event;
    const { type, payload } = value;
    if (type === ADD_PRODUCTS) addProduct(payload);
    if (type === REMOVE_PRODUCTS) removeProduct(payload);
  };
  
  useObserver({
    contexts: [ProductsContext],
    observer: ProductsObserver,
    listener: handleProductsNotification,
  });
}

# CODE TIME

import { useObserver } from 'hermes-io';

export const useProducts = () => {
  const addProduct = () => {};
  const removeProduct = () => {};
  
  const handleProductsNotification = (event) => {
    const { value = '' } = event;
    const { type, payload } = value;
    if (type === ADD_PRODUCTS) addProduct(payload);
    if (type === REMOVE_PRODUCTS) removeProduct(payload);
  };
  
  useObserver({
    contexts: [ProductsContext],
    observer: ProductsObserver,
    listener: handleProductsNotification,
  });
}

# CODE TIME

const handleAddProduct = (product = {}) => {
  ProductsObservers.notify({ 
    value: {
      type: ADD_PRODUCTS,
      payload: product
    },
    context: ProductsContext
  });
};

# CODE TIME

const handleRemoveProduct = (product = {}) => {
  ProductsObservers.notify({ 
    value: {
      type: REMOVE_PRODUCTS,
      payload: product
    },
    context: ProductsContext
  });
};

# DEMO TIME

DEMO

☝🏾 More thing

{npm i hermes-io-cli}

DEMO

✌🏾 More thing

{Hermes IO}

Chrome Extension

+

DEMO

maxtermax.dev

Esneyder Palacios

Senior Software Engineer at @livevox | Co-founder of @Hackdó