DEV Community: Jhony Vega

Laravel

Jhony Vega — Tue, 29 Jul 2025 00:17:51 +0000

🚀 Mastering Microfrontends: Coexisting Vue 2 and Vue 3 in Large-Scale Applications 🚀

Jhony Vega — Sat, 02 Nov 2024 18:47:59 +0000

📚 Table of Contents

Introduction
How it works
How createApp Bridges Vue 2 and Vue 3
Understanding the createApp Function
Code Breakdown
Using createApp in our sub-applications
Vue 2 Component Setup
Setup the bundler
Microfrontend alternatives
Benefits
Wrapping up

Introduction

Managing and evolving a large-scale application can be daunting, especially when it's built on an older framework version like Vue 2. Our application, originally built entirely in Vue 2, had grown in complexity, and as the need for new features and optimizations arose, we faced a tough decision: how to modernize without completely rewriting the codebase. Transitioning to Vue 3 was the obvious choice due to its powerful Composition API, better reactivity system, and improved performance. However, integrating Vue 3 into an existing, mature Vue 2 application presented significant technical challenges and architectural barriers.

Instead of embarking on a massive refactor or rewrite, we opted for a more innovative solution—a microfrontend approach 🌟. By treating the new Vue 3 components as separate modules, we could build and integrate new features like the Dashboard and Listings using Vue 3 while preserving the existing Vue 2 codebase, such as the Edit Payment Settings Modal. This hybrid setup allowed us to synchronize state, routes, and data seamlessly between the two frameworks.

In this blog post, we'll walk you through how we achieved this integration. We'll explore the code that connects and synchronizes Vue 2 and Vue 3, enabling you to modernize your application one component at a time while minimizing disruption and ensuring compatibility. Whether you're dealing with a legacy application or looking for a flexible upgrade path, this guide will help you navigate the complexities of combining different versions of Vue in a microfrontend architecture 🛠️.

How it works

To illustrate the architecture of our hybrid application and the interactions between Vue 2 and Vue 3, we have two diagrams: one representing the overall flow and the other showcasing the module relationships.

The image above illustrates the progressive migration of modules within the application. It shows how each module can be built using either Vue 2 or Vue 3, allowing for flexibility in development. For example, a module might be entirely constructed with Vue 3, showcasing its full capabilities and new features, while another module could contain a mix of Vue 2 and Vue 3 components, leveraging existing legacy code alongside newly developed features.

This architecture supports a smooth migration path, promoting component reusability and scalability. By allowing both versions to work together, we can modernize the application incrementally, minimizing disruption while ensuring compatibility and performance improvements.

Next, we'll dive deeper into the createApp function, exploring how it acts as a bridge between Vue 2 and Vue 3, and the essential features it provides for a successful migration.

How createApp Bridges Vue 2 and Vue 3

The key to integrating Vue 2 and Vue 3 in our project lies in the createApp function. This function acts as a bridge that synchronizes the two frameworks, allowing them to share state and route handling smoothly. Let’s break down the code to better understand how this is achieved.

import { createPinia } from "pinia";
import { createApp as createVueApp, reactive } from "vue";

export const createApp = ({ app }) => {
  return ({ name = "#pagelet", context = {} }) => {
    const appInstance = createVueApp(app);
    const route = reactive({});
    const state = reactive({});

    // provide global access to Vue 2 from Vue 3
    appInstance.provide("route", route);
    appInstance.provide("vuex", { ...context.$store, state });

    appInstance.mount(name);

    // Synchronize Vue 2 route and state with Vue 3
    context.$watch("$route", (val) => Object.assign(route, val), { deep: true });
    context.$watch("$store.state", (val) => Object.assign(state, val), { deep: true });
  };
};

Understanding the `createApp` Function

The createApp function is designed to facilitate the integration of Vue 3 applications within a Vue 2 environment. It is structured with an outer function and an inner function, each serving distinct purposes.

Outer Function: createApp
The outer function takes a single argument, an object that contains the app property. This app represents the configuration or component of the Vue 3 application that you want to render.

The primary purpose of this outer function is to establish a customizable and reusable entry point for creating Vue 3 applications. By accepting app as a parameter, it provides flexibility in specifying which Vue 3 component or configuration will be used during the rendering process.

Inner Function: The Returned Function
The createApp function returns another function, which contains the core logic for initializing the Vue 3 application. This inner function accepts an object with two parameters: name and context.

name: This parameter has a default value of #pagelet. It specifies the DOM element, identified by a CSS selector, where the Vue 3 application will be mounted. By providing a default value, the function ensures that if the caller does not specify a mounting point, the application will render in a predefined location, enhancing usability.
context: This parameter defaults to an empty object. It is intended to pass context from the Vue 2 application to the Vue 3 components. The context may include vital information, such as state management instances, routing details, or any other relevant data that Vue 3 components need to interact effectively with the existing Vue 2 infrastructure.

Code Breakdown

1. Creating the Vue 3 context (createVueApp): The createVueApp function is responsible for initializing the Vue 3 application. This is the Vue 3 equivalent of the new Vue() function in Vue 2. By calling it, we generate an application instance that’s completely independent from Vue 2 but will be connected later.

const appInstance = createVueApp(app);

2. Reactive variables to synchronize data: Here, we declare two reactive objects, route and state, which allow us to keep the state and routes synchronized between Vue 2 and Vue 3. These reactive objects will automatically reflect changes in both frameworks 🔄.

const route = reactive({});
const state = reactive({});

3. Injecting dependencies from Vue 3 into Vue 2: Vue 3’s provide API allows us to inject dependencies globally into a component hierarchy. In this case, we’re injecting the route state and Vuex state from Vue 2 into Vue 3, enabling both frameworks to share the global application state.

appInstance.provide("route", route);
appInstance.provide("vuex", { ...context.$store, state });

route: This is where we sync the routes between Vue 2 and Vue 3.
vuex: Here, we inject the Vuex state from Vue 2 into Vue 3, allowing both frameworks to share the global store.

4. Mounting Vue 3 inside a Vue 2 container: By calling mount, the Vue 3 application is rendered inside a DOM element defined by name, which could be a div in the Vue 2 HTML. This allows Vue 3 to render its components within the DOM managed by Vue 2.

appInstance.mount(name);

5. Synchronizing routes and state between Vue 2 and Vue 3: To keep routes and state always in sync, we use Vue 2 watchers that listen for changes in $route and $store.state. Whenever there’s a change in Vue 2, we update the route and state objects in Vue 3 using Object.assign, ensuring that changes in one framework are reflected in the other.

context.$watch("$route", (val) => {
  Object.assign(route, val)
}, { deep: true });

context.$watch("$store.state", (val) => {
  Object.assign(state, val)
}, 
{ deep: true });

$route: Watches for route changes in Vue 2 and updates the reactive route object in Vue 3.
$store.state: Synchronizes Vuex state between Vue 2 and Vue 3.

Using createApp in our sub-applications

In our architecture, sub-applications are empowered by their own instance of the createApp function. This approach allows us to maintain a consistent structure across different modules while leveraging the flexibility of Vue 3. By using createApp, we can seamlessly integrate various components into our existing infrastructure.

Here’s an example of how the payment settings module initializes its own Vue 3 application using our custom createApp function:

// payment-settings/src/app.ts
import { createApp } from "@org/core";

export const renderApp = createApp({
  app: import(() => "./app.vue"),
});

The entry point is designed to facilitate the seamless integration of new Vue 3 components into our existing Vue 2 application. By defining a clear entry point, we manage how and when these components are rendered, ensuring a smooth transition and enhanced functionality.

This modular architecture enables us to isolate and manage new features independently, simplifying development and improving maintainability across the codebase. With a structured entry point, we ensure that both Vue 2 and Vue 3 components coexist harmoniously, offering a robust foundation for future growth while minimizing the complexity of integration.

Inside the app.vue we use the Vue 3 application to access a Vue 2 modal component and manage form updates within the new tech stack. This approach not only maintains compatibility between Vue 2 and Vue 3 but also ensures that any changes in the user context are reflected immediately. Our integration is built to handle dynamic updates, allowing the app to scale and evolve with minimal friction.

<script lang="ts" setup>
import { useApp } from "shared/composables/use-app";

const { context, refs } = useApp();
</script>
<template>
<div>
  <button @click="refs.payments.openModal()">
    edit payment settings for {{context.user.name}}
  </button>
</div>
</template>

Vue 2 Component Setup

In our Vue 2 application, we created a component that acts as a bridge between our legacy code and the new Vue 3 features. This component, named Payment operations, is responsible for rendering both the Edit Payment Settings Modal and the new Vue 3 features, like the Dashboard.

Here's the Vue 2 component that serves as the container for both Vue 2 and Vue 3 features:

import EditPaymentSettingsModal from "../../components/edit-payment-settings-modal.js";
import store from '../../store/store.js';
import { renderApp } from '../../dist/payment-settings.js';


export default {
  store,
  components: {
    "edit-payment-settings-modal": EditPaymentSettingsModal,
  },
  data() {
    return {
      user: {},
    };
  },
  mounted() {
    renderApp({ context: this, name: "#pagelet" });
  },
  template: `
    <div>
      <div id="pagelet"></div>
      <edit-payment-settings-modal :user="user" ref="payments" />
    </div>
  `,
};

The Payment Operations component goes beyond being a mere placeholder; it plays a vital role in our strategy to modernize the application incrementally. By retaining the existing Vue 2 functionality while integrating new Vue 3 features, we enhance user experiences without the risks associated with large-scale migrations.

Within this component, the legacy Vue 2 structure is preserved, enabling the Edit Payment Settings Modal to utilize Vue 2's data-binding to manage user-specific information through the user object. The integration of Vue 3 features occurs in the mounted lifecycle hook, where the renderApp function—imported from the payment-settings.js module—is called. This function dynamically injects Vue 3 components into the DOM element identified by #pagelet, allowing Vue 2 and Vue 3 to coexist seamlessly.

This approach facilitates a smooth transition as new features are introduced incrementally. Instead of requiring a complete rewrite, we maintain the integrity of the existing application while gradually modernizing its components. The Payment Operations component exemplifies our commitment to enhancing user experience by leveraging Vue 3's advanced capabilities while keeping the core functionalities reliable.

Setup the bundler

We use Vite to create the module. This setup ensures that Vue 3 components can coexist within the same application of vue 3, leveraging the best of both worlds. Below is the basic configuration for the Vite bundler, which allows for modular builds and optimized delivery of our application.

import { defineConfig, Plugin } from "vite";
import vue from "@vitejs/plugin-vue";
import tsconfigPaths from "vite-tsconfig-paths";
import { transform } from "esbuild";

// ...other settings and functions

const { name } = args();

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
  build: {
    lib: {
      entry: `./apps/${name}/src/app.ts`,
      name: name,
      fileName: name,
      formats: ["es"],
    },
    rollupOptions: {
      output: {
        assetFileNames: `${name}.[ext]`,
        entryFileNames: `${name}.js`,
        chunkFileNames: `[name].js`,
        dir: `./apps/${name}/build`,
      },
    },
  },
  resolve: {
    alias: {
      shared: `${__dirname}/shared`,
    },
  },
  },
});

To complement our Vite configuration, we need to add some scripts in our package.json to build specific apps. Here’s how that looks:

{
  "name": "@organization/app",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build:payment-settings": "vite build -- --name=payment-settings"
  },
  "dependencies": {
    // other dependencies
    "vue": "^3.4.37",
  },
  "devDependencies": {
    // other dev dependencies
    "@vitejs/plugin-vue": "^5.1.2",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
    "vite-tsconfig-paths": "^5.0.1",
  }
}

This setup ensures that we can effectively build and manage our application, allowing for a smooth integration of Vue 2 and Vue 3 components. As we transition from legacy to modern frameworks, having a solid bundler configuration is essential for maintaining the integrity and performance of our application.

Microfrontend alternatives

Adopting microfrontend patterns can significantly enhance your application’s architecture during the migration process from Vue 2 to Vue 3. Here are some key patterns to consider:

Module Federation: This pattern allows you to share and load components dynamically at runtime, enabling different teams to work on various parts of the application independently. By utilizing Module Federation, both Vue 2 and Vue 3 modules can coexist and be updated without requiring a complete redeployment of the application.
Server-Side Composition: In this pattern, Vue 2 and Vue 3 components can be rendered on the server-side and delivered as a single response to the client. This approach helps improve initial load times and enhances SEO capabilities, as the user gets a fully rendered page without waiting for JavaScript execution on the client-side.
Client-Side Composition: Similar to server-side composition, this approach allows you to load Vue 2 and Vue 3 components within a single-page application context. Using a layout-based approach, you can define different entry points for components, ensuring that both versions are rendered appropriately depending on the application state.
Iframe Embedding: For more significant separation, you can embed Vue 3 applications within iframes. This allows teams to build and deploy new features without worrying about conflicts with the existing Vue 2 codebase. However, this method requires careful handling of communication between the main application and the iframe to ensure a cohesive user experience.
Dynamic Imports: Using dynamic imports, you can load Vue 3 components on demand, which helps reduce the initial bundle size. This strategy allows your application to stay responsive while loading new features as needed, seamlessly integrating new Vue 3 components alongside existing Vue 2 components.
Backwards Compatibility: Implementing a backwards compatibility layer can ease the migration process. This layer enables Vue 3 components to interact with Vue 2’s APIs, ensuring that both frameworks can work together harmoniously until the transition is complete.

Benefits

Gradual Migration: You can refactor your codebase incrementally, allowing both frameworks to coexist during the transition period. 📈
Compatibility: Existing Vue 2 components and state management (e.g., Vuex) remain functional while new components are built with Vue 3. ✅
Modernization and Future-Proofing: Leveraging Vue 3’s features, like Composition API and Pinia, lets you modernize the application’s architecture and prepare for future updates. 🚀
Styles Isolation: By using a custom CSS framework for your Vue 3 components, you can ensure styles are encapsulated and do not interfere with the existing Vue 2 application. This approach minimizes the risk of style conflicts and provides a more organized way to manage styles. 🎨

Wrapping up

Migrating from Vue 2 to Vue 3 in a large-scale application doesn’t have to be an overwhelming, all-or-nothing task. By employing a hybrid approach, you can leverage the powerful features of Vue 3 while maintaining the functionality and compatibility of your legacy code. This strategy not only ensures a smooth transition and minimizes disruption but also allows the development team to modernize at its own pace.

It's important to note that this concept isn't limited to Vue; it can be applied across various frameworks. Regardless of the technology stack, the principles of gradual migration, integration of new features, and leveraging automation tools remain consistent. This flexibility enables teams to enhance their applications based on specific needs and priorities, ensuring that they can evolve and adapt effectively.

I hope this guide has provided valuable insights into our approach and helped you understand how to implement a similar strategy in your projects (link to the repo). Happy coding! 👩‍💻👨‍💻

Crea un generador de proyectos con React

Jhony Vega — Sat, 11 Dec 2021 14:49:06 +0000

En este pequeño tutorial crearemos un CLI el cual nos permita crear proyectos en la ruta donde estemos.
Para realizar esto usaremos una base de plantillas y un archivo de configuración.
Una de las cosas interesantes es que usaremos React para definir opciones mas dinámicas y para ellos nos estaremos apoyando de la librería React Ink. Comencemos! 😁

Configurando el proyecto

Primero se instalará las siguientes dependencias.

# dependencias
$ yarn add ink ink-select-input ink-spinner ink-text-input react yaml fs-extra @babel/runtime

# dependencias de desarrollo
$ yarn add @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime babel-loader nodemon --dev

Una vez instalado, añadimos en el archivo package.json los siguientes scripts, para poder usar en desarrollo y para generar nuestro código listo para producción.

{
  "scripts": {
    "build": "babel src -d dist",
    "dev": "nodemon --no-stdin --exec babel-node src/index.js",
    "start": "node ./dist/index.js"
  }
}

Y ahora que sigue? Creamos un archivo .babelrc donde solo añadiremos la configuración de los presets y plugins necesarios.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Estructurando los archivos

La estructura final quedaría de la siguiente forma la cual veremos para que sirve cada uno de los archivos.

src

Aquí irá nuestro código para crear el CLI 👋.

templates.generator.yaml

Archivo de configuración para definir nuestros proyectos que podremos generar. Como se puede ver en la imagen también existe una carpeta templates.generator la cual contiene el mismo nombre que el archivo yaml. Aquí se encontrará nuestros proyectos base. Por ejemplo:

version: 1.0
templates:
 - name: angular project
   path: /angular 
 - name: react project
   path: /react
 - name: vue project
   path: /vue

Aquí tendríamos una lista de plantillas, cada uno con su nombre y la ruta donde se encuentra, no es necesario añadir la carpeta de templates.generator ya que automaticamente lo detectaría.

Dentro de la carpeta se tendría la siguiente estructura:

templates.generator
  ├── angular
  ├── react
  └── vue

Creando el CLI

Creando las constantes necesarios

Usaremos 4 constantes principales:

currentDirectory: para ubicarnos en el directorio actual.
templateDirectory: Directorio donde se tendrá las plantillas.
templateName: Nombre del archivo de configuración.
STEPS: Pasos que se irán mostrando en el CLI.

//src/constants.js

export const currentDirectory = process.cwd();
export const templateDirectory = "templates.generator"
export const templateName = `${templateDirectory}.yaml`

export const STEPS = {
    "NAME" : 1,
    "SELECT" : 2,
    "LOADING" : 3,
    "END" : 4
}

Definiendo funciones principales

Usaremos 3 funciones principales, para obtener el archivo de configuración YAML como json, formatear el json con rutas absolutas y la última para copiar una carpeta o archivo a otro directorio.

//src/utils.js

import { currentDirectory, templateDirectory, templateName } from "./constants";
import fs from "fs";
import Yaml from "yaml";
import path from "path";
import fsExtra from "fs-extra"

export async function getTemplateGenerator() {
  const file = fs.readFileSync(
    path.join(currentDirectory, templateName),
    "utf8"
  );
  const parseFile = Yaml.parse(file);
  return formatPathsInTemplate(parseFile);
}

export function formatPathsInTemplate(json) {
  const generator = { ...json };
  generator.templates = generator.templates.map((template) => {
    return {
      ...template,
      path: path.join(currentDirectory,templateDirectory, template.path),
    };
  });
  return generator.templates;
}


export function copyTemplateToCurrentDirectory({from,to}) {
  return fsExtra.copy(from,path.join(currentDirectory,to))
}

Creando al archivo principal

Por el momento solo crearemos un simple mensaje para poder ver su uso.

//src/index.js

import React from "react";
import { render, Box, Text } from "ink";

const App = () => {
  return(
    <Box>
     <Text>Hello world</Text>
    </Box>
  )
}

render(<App/>)

Si ahora ejecutamos el script yarn dev verémos en consola lo siguiente:

$ Hello world

Definiendo el state

Creamos un estado inicial para los siguientes casos: el paso en el que se encuentra, la lista de plantillas y el directorio en donde se creará el proyecto.

//src/core/state.js
import { STEPS } from "../constants";

export const state = {
    step : STEPS.NAME,
    templates: [],
    directory: '.'
}

Añadiendo el reducer

//src/core/reducer.js

export const ACTIONS = {
  SET_TEMPLATES: "SET_TEMPLATES",
  SET_STEP: "SET_STEP",
  SET_NAME_DIRECTORY: "SET_NAME_DIRECTORY",
};

export function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.SET_TEMPLATES:
      return {
        ...state,
        templates: action.payload,
      };
    case ACTIONS.SET_STEP:
      return {
        ...state,
        step: action.payload,
      };
    case ACTIONS.SET_NAME_DIRECTORY: 
    return {
        ...state,
        directory: action.payload
    }
    default:
      return state;
  }
}

Creando el hook useGenerator

Y ahora creamos el hook en el cuál estaremos encapsulando la lógica necesaria para generar proyectos, leer la lista de opciones que tenemos del archivo YAML y movernos a los siguientes o anteriores pasos.

//src/useGenerator.js

import { useReducer } from "react";
import { STEPS } from "./constants";
import { ACTIONS, reducer } from "./core/reducer";
import { state as initialState } from "./core/state";
import { copyTemplateToCurrentDirectory } from "./utils";

export default function useGenerator() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const setDirectory = (payload) => {
    dispatch({
      type: ACTIONS.SET_NAME_DIRECTORY,
      payload,
    });
  };

  const setStep = (payload) => {
    dispatch({
      type: ACTIONS.SET_STEP,
      payload,
    });
  };

  const setTemplates = (payload) => {
    dispatch({
      type: ACTIONS.SET_TEMPLATES,
      payload,
    });
  };

  const onSelectTemplate = async ({value}) => {
    try {
        setStep(STEPS.LOADING);
        await copyTemplateToCurrentDirectory({
          from: value,
          to: state.directory,
        });
        setStep(STEPS.END);
        process.exit();
      } catch (error) {
        console.log(error.message);
      }
  }

  const onCompleteTypingDirectory = () => {
    setStep(STEPS.SELECT);
  }

  return {
    onSelectTemplate,
    onCompleteTypingDirectory,
    state,
    setTemplates,
    setDirectory,
    setStep,
    dispatch
  };
}

Redefiniendo el componente principal

Es momento de actualizar el archivo donde se encontraba nuestro componente añadiendo los pasos y nuevos componentes creados con esta librería. Nos apoyaremos de 3 principales:

Importando lo necesario

Inicialmente importaremos todo lo que usaremos para crear el CLI.

//src/index.js
import React, { useEffect, useMemo } from "react";
import { render, Box, Text } from "ink";
import Select from "ink-select-input";
import Loading from "ink-spinner";
import { getTemplateGenerator } from "./utils";
import { STEPS } from "./constants";
import Input from "ink-text-input";
import useGenerator from "./useGenerator";
//...

Integrando el hook useGenerator

Primero daremos un formato a la lista de opciones para que el componente Select pueda aceptarlo. Asímismo vamos a traer la lista de las plantillas para poder elejir la que se requiera.

const App = () => {
  const {
    state,
    setTemplates,
    setDirectory,
    onCompleteTypingDirectory,
    onSelectTemplate,
  } = useGenerator();

  const templateItems = useMemo(
    () =>
      state.templates.map((template) => {
        return {
          label: template.name,
          value: template.path,
        };
      }),
    [state.templates]
  );

  useEffect(() => {
    getTemplateGenerator().then(setTemplates);
  }, []);

  return(
    <Box>
      <Text>hello</Text>
    </Box>
  )
}

Añadiendo los componentes con las interacciones

Finalmente añadimos los componentes usando el hook y los datos necesarios para mostrar cada paso y generar un proyecto.

const App = () => {
  /// ... 
  return (
    <Box>
      {state.step === STEPS.NAME && (
        <Box>
          <Text color="cyanBright">Name directory:</Text>
          <Input
            value={state.directory}
            onChange={setDirectory}
            onSubmit={onCompleteTypingDirectory}
          />
        </Box>
      )}
      {state.step === STEPS.SELECT && (
        <Box flexDirection="column">
          <Box marginTop={1}>
            <Text color="cyanBright">Select a template</Text>
          </Box>
          <Select  items={templateItems} onSelect={onSelectTemplate} />
        </Box>
      )}
      {state.step === STEPS.LOADING && (
        <Box>
          <Text color="yellowBright">
            <Loading type="dots" />
            <Loading type="dots" />
            <Loading type="dots" />
          </Text>
          <Text color="yellow">Creando proyecto...</Text>
        </Box>
      )}
      {state.step === STEPS.END && (
        <Box paddingY={2}>
          <Text color="rgb(50,220,230)">
          ====================== ✨ Proyecto creado!!! ✨ ======================
          </Text>
        </Box>
      )}
    </Box>
  );
};

render(<App />);

Uso final

Para este caso ejecutaremos el siguiente script yarn build y después yarn start para poder ver el funcionamiento. Y listo, lo logramos!! 😄🎉🎉.

En caso de querer más detalles te dejo el link del repositorio y el link de la librería 😊.

Código fuente de ejemplo

React Ink

Xoid, Introducción a un administrador de estado pequeño y escalable para React

Jhony Vega — Thu, 04 Feb 2021 23:34:20 +0000

Para administrar el estado global en React existen muchas alternativas entre ellas las más conocidas como Redux y Mobx que son buenas opciones para muchos proyectos.
Investigando me encontré con una alternativa bastante interesante llamada Xoid un administrador de estados con una API sencilla, la manera en la que está escrita es semejante a otros adminstradores de estados globales basado en hooks como Recoil o Zustand.

Iniciaremos instalando el paquete necesario

Para instalarlo puedes usar yarn o npm, en este caso se usará yarn.

yarn add xoid

Comenzaremos creando una tienda

Para crear una tienda usamos la función create el cuál toma dos argumentos el primer valor es el estado(valores primitivos, objetos, arreglos), el segundo toma una función que retorna una serie de acciones en un objeto, no es la única forma de retornar ya que el tipo de valor devuelto puede ser un arreglo.

import { create, set } from "xoid";

// Tienda de un contador
const counterStore = create(0, (store) => ({
  increment: () => {
    set(store, (state) => state + 1));
  },
  decrement: () => {
    set(store, (state) => state - 1);
  }
}));

Como puedes observar la forma de crear una tienda es bastante sencilla.

Modificando el estado en un componente

Una vez creado la tienda para poder acceder a su estado y acciones usaremos el hook useStore que nos provee Xoid. Este hook tiene la misma estructura que useState en la cuál devuelve un arreglo de valores, el estado actual y el modificador.

import { useStore } from "xoid";

const Counter = () => {
  const [ counter, { increment, decrement } ] = useStore(counterStore);
  return(
   <div>
      <h1>Value: {counter}</h1>
      <button onClick={() => increment()}>increment</button>
      <button onClick={() => decrement()}>decrement</button>
   </div>
  );
}

Qué sigue ?

Ahora que conocemos la sintaxis básica iremos un paso más, en otra tienda llamada duplicateCounterStore nos suscribimos a la tienda creada anteriormente para poder duplicar su valor. ¿Cómo hacemos la subscripción a otra tienda?.
En vez de pasarle un valor al primer argumento lo que hacemos es pasarle una función la cuál nos permitirá almacenar un valor derivado de otras tiendas.

const duplicateCounterStore = create(
 get => get(counterStore) * 2
);

De esta manera cada vez que cambie el valor de una tienda a la que esté suscrita, ella también cambiará su estado y podremos usarlo de la manera en que se requiera.
Para finalizar usaremos la nueva tienda creada en nuestro componente Counter.

import { useStore } from "xoid";

const Counter = () => {
  const [ counter, { increment, decrement } ] = useStore(counterStore);
  const [ duplicateCounter ] = useStore(duplicateCounterStore);
  return(
   <div>
      <h1>Value 1: {counter}</h1>
      <h2>Value 2: {duplicateCounter}</h2>
      <button onClick={() => increment()}>increment</button>
      <button onClick={() => decrement()}>decrement</button>
   </div>
  );
}

Como puedes ver es bastante sencillo sin embargo tiene muchas más características interesantes como el uso de selectores, máquinas de estado, actualización de objetos anidados muy sencillo, acciones asincrónicas, estados locales y muchas cosas más😊.
Ahora que conoces una breve introducción a este manejador de estado te invito a explorar más en su documentación de Xoid.

Como implementar un TimeAgo de una fecha

Jhony Vega — Sat, 30 Jan 2021 23:48:32 +0000

Liquid syntax error: 'raw' tag was never closed

Creando tabs con styled components

Jhony Vega — Thu, 19 Nov 2020 00:01:26 +0000

Introducción

Styled components es una herramienta que nos permite escribir el código CSS dentro de javascript y crear componentes sin la necesidad de declarar clases dando una mayor flexibilidad a nuestros componentes.

Instalar los paquetes

Solo se necesitará un paquete necesario para desarrollar el componente.
Comenzaremos instalado styled-components

$ npm install styled-components

Una vez instalado el paquete necesario organizaremos las carpetas de la siguiente manera para mayor comodidad.

Creamos una carpeta llamada Tab en aquí crearemos el código para el desarrollo del componente. En el archivo styles.js tendremos el estilo de cada elemento de nuestro componente.
En el archivo index.jsx se escribirá la lógica necesario para crear el tab component.

Creando los componentes

Comencemos escribiendo el estilo de los elementos de nuestro componente.

// Tab/styles.js
import styled from "styled-components";

export const TabContainer = styled.div`
  display: flex;
  width: 100%;
  background: red;
  align-items: stretch;
`;

const selectedColor = "rgb(30,190,230)";
const defaultColor = "transparent";

export const TabItem = styled.div`
  background-color: white;
  width: 100%;
  padding: 10px;
  cursor: pointer;
  transition: 0.3s;
  border-bottom: 4px solid ${(props) => (
    props.selected ? selectedColor : defaultColor
  )};
`;

Creamos dos componentes con estilo, el primer componente TabContainer solamente posicionará los componentes hijos horizontalmente.
El componente TabItem es el principal, en el cuál queremos que cambie el color del borde inferior si tiene la propiedad selected en verdadero, si es así se asigna un color declarado en la constante selectedColor caso contrario el color del border recibe la constante defaultColor cual tiene un color transparente.

Creando el componente Tab.

//Tab/index.jsx
import React, { useEffect, useState } from "react";
import * as S from "./styles";

const Tab = ({ children, onTabSelected }) => {
  const [itemId, setItemId] = useState(0);

  useEffect(() => {
    onTabSelected && onTabSelected(itemId);
  }, [itemId, onTabSelected]);

  return (
    <S.TabContainer>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onClick: () => {
            setItemId(index);
          },
          selected: itemId === index
        });
      })}
    </S.TabContainer>
  );
};

export default Tab;

Lo primero que hacemos es importar todos los componentes de estilo con un alias cuál llamaremos S.

import * as S from "./styles";

Usaremos un estado para seleccionar el id actual del item, en este caso usaremos el índice de cada elemento hijo como su id.
Lo siguiente y la parte más importante que se hará es el siguiente código.

return (
  <S.TabContainer>
    {React.Children.map(children, (child, index) => {
      return React.cloneElement(child, {
        onClick: () => {
          setItemId(index);
        },
        selected: itemId === index
      });
    })}
  </S.TabContainer>
);

Lo primero que hacemos es estilizar con el componente , seguidamente usamos el Top-Level API React.children.map el cuál recibe como primer argumento el children, seguidamente una función en la cuál nos devolverá el componente actual y su índice.
Dentro de la función lo que haremos es clonar cada elemento con ayuda de otra API de React, React.cloneElement, su función principal es como su nombre lo indica clonar un elemento el cuál nos devolverá una copia del componente con sus propiedades que se declaren. Asimismo, también podremos asignarles nuevas propiedades en este caso le asignamos un evento onClick y una propiedad selected que como recordemos esta propiedad fué creada en el componente con estilo TabItem y aquí lo estamos manipulando para no tener la necesidad de escribir la lógica fuera de ella.

El evento que se le asigna ejecuta la acción de asignar el índice al estado de la siguiente manera, al momento de asignarle el estado también comparamos si el índice del elemento actual es igual al estado, si es así entonces se le aplica la propiedad selected caso contrario no.

return React.cloneElement(child, {
  onClick: () => {
     setItemId(index);
  },
  selected: itemId === index
});

Creando el subcomponente TabItem.

//Tab/index.jsx
export const TabItem = memo(({ children, ...restProps }) => (
  <S.TabItem {...restProps}>{children}</S.TabItem>
));

Al componente TabItem le agregaremos el componente con estilo . Además le pasaremos la propiedad children y las demás propiedades restantes le asignaremos al componente con estilo cual desde el componente padre automáticamente agregará las funcionalidades requeridas. Como se puede observar está envuelto en componente de orden superior(memo) para evitar la rerenderización.

El código final sería el siguiente.

//Tab/index.jsx
import React, { memo, useEffect, useState } from "react";
import * as S from "./styles";

const Tab = ({ children, onTabSelected }) => {
  const [itemId, setItemId] = useState(0);

  useEffect(() => {
    onTabSelected(itemId);
  }, [itemId, onTabSelected]);

  return (
    <S.TabContainer>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, {
          onClick: () => {
            setItemId(index);
          },
          selected: itemId === index
        });
      })}
    </S.TabContainer>
  );
};

export const TabItem = memo(({ children, ...restProps }) => (
  <S.TabItem {...restProps}>{children}</S.TabItem>
));

export default Tab;

Ahora podemos utilizar el componente de la siguiente manera.

import React from "react";
import Tab, { TabItem } from "./Tab";

export default function App() {
  const onTabSelected = (index) => {
    console.log(index);
  };

  return (
    <div className="App">
      <Tab onTabSelected={onTabSelected}>
        <TabItem>item 1</TabItem>
        <TabItem>item 2</TabItem>
        <TabItem>item 3</TabItem>
      </Tab>
    </div>
  );
}

El resultado final quedaría de la siguiente manera.

Aquí puedes ver el código y un demo

⚡ Despliega una aplicación de react a github pages con github actions facilmente

Jhony Vega — Mon, 12 Oct 2020 20:54:08 +0000

En este post te mostraré los pasos para desplegar tu aplicación realizada en react sobre github pages. Además te mostraremos como hacer el proceso de despliegue de forma automática cada vez que realices cambios y lo envíes al repositorio tu aplicación web pueda verse reflejada con los nuevos cambios.
Realizar esto te ahorrará tiempo y lo mejor, todos podrán ver los cambios que tiene tu aplicación.

Que es github pages?

Github pages es un servicio de hosting en el cual podemos publicar páginas estaticas desarrolladas con js, css, html, en el cual podemos utilizar distintas librerías o frameworks como:

React
Vue
Angular
Svelte

En esta oportunidad veremos como subir una aplicación utilizando react con la cli create-react-app.

Comencemos

Para poder comenzar debemos tener instalado node, también la cli de react llamada create-react-app.
1. Crear una aplicación
Utilizamos el comando y le asignamos un nombre en este caso el nombre de mi aplicación tiene por nombre "deploy-react-github-pages-with-ci"

> create-react-app deploy-react-github-pages-with-ci

Una vez creado el proyecto podemos ver la estructura inicial la cual nos crea.

También necesitamos instalar el paquete npm gh-pages como dependencia de desarrollo.

> npm i -D gh-pages

2. Crear los archivos necesarios

En la raíz de nuestro proyecto creamos una carpeta llamada .github, posteriormente dentro de ella otra carpeta que tenga por nombre workflows.
Finalmente agregamos un nuevo archivo con extensión .yml, se puede poner el nombre que se quiera, en este caso se denominará deploy.yml.

3.Configurando nuestro repositorio

Para poder acceder y publicar nuestro proyecto necesitamos primeramente obtener un token el cuál nos servirá para seguir avanzando.

Los pasos para configurar son los siguientes:

1. Vamos a las configuraciones de nuestra cuenta, no la del repositorio ya que si vamos allí no encontraríamos lo que buscamos.
2. Seleccionamos la opción Developer settings y accedemos ah aquella.

3.Uno ves dentro nos aparecerán otras opciones entre las cuales elegimos la siguiente: Personal access tokens. Nos saldrá la opción de crear un nuevo token, lo generamos y una vez echo esto lo mantenemos copiado para usarlo en las configuraciones de nuestro repositorio.

4. Finalmente nos vamos a la configuración de nuestro repositorio, asignamos un nombre a nuestra clave secreta y en el value copiamos nuestro token generado anteriormente

Configuración de nuestra aplicación de react

1. Para realizar esto lo primero es ir al package.json y agregar una nueva propiedad llamada homepage en la cuál recibe como valor el nombre de donde se va desplegar nuestra aplicación. ¿Como generamos este nombre del hosting?, normalmente nuestro repositorio tiene la estructura siguiente

"github.com/jhony-24/deploy-react-github-pages-with-ci"

Si queremos usarlo para subir nuestro aplicación debemos cambiarlo por lo siguiente:

"jhony-24.github.io/deploy-react-github-pages-with-ci/"

3. En nuestro script del package.json agregamos las siguientes líneas: predeploy y deploy las cuales nos servirán para publicar nuestra aplicación. La variable de entorno $GH_TOKEN es el token que generamos en nuestra configuración la cual nos permitirá tener acceso a nuestro repositorio.

Configurando las acciones

En nuestro archivo creado deploy.yml procedemos a realizar la siguientes configuración

Veamos más a fondo como funciona.

name: Deploy react app

Es el principal nombre el cual se asigna a nuestro flujo de trabajo.

on:
 push: 
   branches:
     - main

Nos permite crear eventos en este caso las acciones se realizarán cuando se suba las confirmaciones a la rama main o la principal en la cual estamos trabajando, si queremos podemos cambiar a otra rama para hacer el despliegue por ejemplo, crearíamos una rama deploy y cada vez que realicemos un confirmación a esta rama se ejecutará los flujos de trabajos.

jobs:
 deploy:
  name: deploy app
  runs-on: ubuntu-latest
  strategy:
   matrix:
    node-version: [ "12.x" ]

Como su nombre lo indica, son los trabajos que se realizarán.
En nuestro configuración solo tenemos un trabajo llamado deploy , aunque se puede tener muchos más.
Dentro de cada trabajador asignamos en que maquina va a correr nuestros comandos.
Y asignamos una matriz de versiones de node en las cuales correrá en este caso solo usamos para la versión 12.

steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v1 
    with:
      node-version: ${{matrix.node-version}}

Usamos las acciones de node para poder ejecutar los comandos, véalo en este caso como si se instala programas que nos ayudan a ejecutar nuestros comandos y sean reconocibles en el sistema.

- name: install packages
  run: npm install

Instalamos nuestras dependencias.

- name: registry github user
  run: |
    git config --global user.email <email>
    git config --global user.name <name>

Al ejecutar en una maquina el despliegue donde no estemos registrados con nuestra cuenta no funcionaría por ello antes de hacer el despliegue nos registramos (los pasos tienen un nombre para poder identificarlos).

- name: deploy the app
  run: npm run deploy
  env:
   GH_TOKEN: ${{ secrets.GH_TOKEN }}

Finalmente ejecutamos el comando para publicar nuestra aplicación.
Usamos una variable de entorno llamada GH_TOKEN la cual tiene como valor el token que anteriormente se creó y nos permitirá conectarnos a nuestra cuenta para realizar la acción.

Enviando los cambios al repositorio

Una vez completado todo lo anterior vamos a la consola y agregamos los cambios al repositorio.

> git add .

> git commit -m "add first deploy"

> git push origin main

Una vez subido los cambios al repositorio, vamos a nuestro repositorio en la opción actions si todo marcha bien podemos ver el siguiente resultado.

Ahora como vemos nuestro aplicación? Vamos a la opción settings y buscamos Github Pages

Accedemos al link y podemos ver el siguiente resultado.

Referencias