Implementación de Horarios y Cronogramas

Hola a todos. Hoy voy a hablar sobre cómo implementar horarios y líneas de tiempo. Estoy seguro de que cada uno de nosotros ha enfrentado una serie de problemas con las líneas de tiempo. Mi nombre es Karol Kozer. Soy ingeniero de software senior y soy el creador de PlanBy y un proyecto OpenSource.

Permítanme decir unas palabras sobre las líneas de tiempo. La línea de tiempo es una herramienta realmente simple que muestra el tiempo, el ciber y el contenido. En la parte superior, tenemos una línea de tiempo con el tiempo. A la izquierda hay una barra lateral que enumera los proveedores. En el medio, hay un diseño con eventos posicionados en una línea de tiempo. Básicamente, los usuarios tienen la posibilidad de ver todos los eventos futuros y pasados para todos los proveedores dados, tanto horizontal como verticalmente.

Veamos qué problemas tenemos con las líneas de tiempo. Concentrémonos en cómo se ve desde la perspectiva del usuario. El usuario solo puede ver el tiempo, el ciber y el contenido. Básicamente, el usuario puede moverse por el diseño, tanto horizontal como verticalmente para ver eventos futuros y pasados. También me gustaría mencionar que a nuestro usuario no le importa sobre la implementación técnica y solución en nuestra aplicación.

Permítanme arrojar algo de luz sobre cómo funciona bajo el capó. Sin ninguna optimización y soluciones de rendimiento, podemos tener, digamos, 5,000 elementos en el sitio web. Lo más importante en este tipo de característica es el rendimiento versus los grandes datos en el sitio web. Básicamente, mantener todos los elementos sin ninguna optimización y soluciones de rendimiento en la página puede llevar a terribles ralentizaciones de la aplicación, que eventualmente causaron el fallo del navegador. También la posición de todos los programas en el diseño parece simple, pero a veces también podría ser problemático.

Concentrémonos en la siguiente pregunta. ¿Existen buenas y malas soluciones? Diría que este es un tema realmente complejo y solo depende de lo que te gustaría lograr o cuál es la solución correcta para tu proyecto. También, tienes que tener en cuenta cómo interactuar rápidamente con el usuario. Tienes que pensar en características como filtros, recordatorios, modal y muchos, muchos más. Finalmente, me gustaría presentarles el componente plan by. La definición de plan by es bastante sencilla. Plan by es un componente basado en React que te permite implementar tu propia línea de tiempo de manera rápida y sencilla. Esa es toda la definición, nada loco. Plan by se desarrolla con React y TypeScript con una cantidad mínima de recursos.

PlanBy utiliza una vista virtualizada personalizada, o puedes llamarla línea de tiempo virtualizada, que te permite operar con una gran cantidad de data y posicionar todos los elementos en tu horario de forma predeterminada. Y esto es realmente, realmente genial.

A continuación, me gustaría centrarme en cómo funciona PlanBy. Básicamente, PlanBy solo renderiza los elementos que son visibles para el usuario y realiza todos los cálculos en segundo plano. Cuando el usuario se desplaza hacia abajo o hacia la derecha, PlanBy está actualizando la vista con solo los elementos visibles para el usuario. Todos los elementos fuera del diseño no están incluidos en la estructura HTML, lo que hace que el componente PlanBy sea mucho más rápido y eficiente.

PlanBy tiene una interfaz sencilla e incluye todas las características necesarias como barra lateral, línea de tiempo, diseño y actualización en vivo del programa. Además, hay una característica opcional que permite ocultar cualquier elemento que no quieras incluir en el diseño. Básicamente, el componente tiene una API realmente sencilla que te permite implementar tus propios elementos junto con tus preferencias. Puedes usar los componentes de estilos de PlanBy para desarrollar características principales, ya sabes, o hacer estilos personalizados en línea con el design elegido.

Veamos qué podemos construir con PlanBy. Usando PlanBy puedes construir lo que quieras, programadores, conferencias, eventos musicales, guías de TV, planificadores de calendario y muchas, muchas más ideas. La instalación del componente es realmente fácil. Solo necesitas instalar el paquete usando yarn o npm. La configuración es muy sencilla y minimalista. La configuración es muy sencilla y minimalista. Me gusta mucho eso. Todo lo que necesitas hacer es importar unos pocos componentes, un hook y dos wrappers. Y eso es todo. Mantengamos la configuración. Esto es realmente, realmente sencillo, y puedes crear hermosos horarios como este en unos pocos minutos. Muchas gracias por tu tiempo y nos vemos en la masterclass de React Advanced en Londres. Adiós.