Alternativas a React: Preact
Alternativas a React: Preact
Alternativas a React es una serie de artículos que analizan diferentes marcos front-end de JavaScript. Todos los marcos examinados son como React en sintaxis y operación, pero pueden tener beneficios que React no proporciona. Los primeros dos artículos de la serie fueron Alternatives to React: Solid JS y Alternatives to React: Inferno JS, con más por venir.
Preact es una biblioteca front-end para crear interfaces de usuario (UI) al igual que React. Según el sitio web de documentación oficial, Preact es una «alternativa rápida de 3 kb a React con la misma API moderna».
Una mirada rápida a las características de Preact muestra que es casi lo mismo que React, considerando que usa un DOM virtual, contexto, ganchos, etc. En este artículo, profundizaremos en el mundo de Preact. Aprenderíamos por qué se creó la biblioteca, cómo funciona y cómo se compara con React. También discutiríamos si alguna vez deberíamos usar Preact. Antes de continuar, tenga en cuenta que este artículo no es un tutorial sobre cómo iniciar Preact. Preact ofrece un excelente tutorial en su sitio web.
En cambio, este artículo compara React y Preact para ayudarlo a tomar decisiones informadas sobre el marco a elegir para un proyecto. En ese sentido, comencemos. Origen de Preact Jason Miller, un desarrollador de software canadiense, es el autor de Preact. En una charla titulada «Poner la P en Preact», Jason afirmó que había creado muchos marcos de interfaz de usuario/motores de plantillas para la web. Jason nunca pudo construir un marco perfecto que admitiera todo lo que quería. Siguió teniendo problemas relacionados con el modelo de objeto de documento (DOM). Luego descubrió que JSX y React satisfacían su necesidad y lo que quería en un marco. Cuando Jason encontró esta solución, su siguiente paso fue aprender React. Para aprender React, necesitaba crear un proyecto que funcionara como funcionaba React. Aprendió mejor cuando estaba construyendo. Preact comenzó como un archivo Codepen que representaba cientos de elementos DOM como lo haría React. Jason siguió optimizando el programa y agregando funciones. Un día, realizó pruebas de velocidad en computadoras de escritorio y dispositivos móviles para su programa. Los resultados que obtuvo fueron muy buenos y mucho más rápidos que React. La velocidad era muy cercana a la de JavaScript simple. Según la charla «Putting the P in Preact», Jason continuó con el proyecto. Lo convirtió en una biblioteca para desarrolladores que no podían pagar el alto costo del rendimiento en React. Preact tenía casi las mismas características que React, solo que más ligero y más rápido. El primer lanzamiento de la biblioteca en Github (v2.0.0) data del 13 de noviembre de 2015. Desde entonces, la comunidad de Preact ha ido creciendo con usuarios, colaboradores y mantenedores.
¿Cómo funciona Preact? Preact funciona de manera muy similar a React , pero todavía tiene su implementación separada de muchas de las características de React. En esta sección del artículo, veremos la funcionalidad principal de Preact, dividiéndola en tres categorías. Estas categorías son:
Virtual DOM
Herramientas sin compilación
Capacidad de integración
DOM virtual
El Modelo de objetos de documento (DOM) representa la jerarquía de elementos en cualquier documento HTML. Cada elemento de una página web también se puede ubicar en el DOM. Por otro lado, el DOM virtual es un clon generado del DOM real.
La mayoría de los marcos usan DOM virtuales porque el DOM real es más lento de procesar cuando se actualiza con JavaScript. Este es un gran problema para las aplicaciones dinámicas porque necesitan actualizar sus elementos constantemente.
Según Codecademy, el renderizado habilitado para Virtual DOM en React pasa por las siguientes fases:
Todo el Virtual DOM se actualiza.
El DOM virtual se compara con el aspecto que tenía antes de la actualización. React descubre los elementos modificados (este proceso también se conoce como Diffing).
React actualiza solo los elementos modificados en el DOM real (este proceso también se conoce como reconciliación).
El usuario ve el cambio actualizado en la página.
Preact no implementa su DOM virtual como React. En el sitio web de documentación, establece que:
Preact proporciona la abstracción de DOM virtual más delgada posible sobre el DOM. Se basa en funciones de plataforma estables, registra controladores de eventos reales y funciona bien con otras bibliotecas”. (Fuente: Preact)
En términos simples, esto significa que el DOM virtual de Preact solo maneja procesos que el DOM real consideraría lentos. Preact usa de manera eficiente un DOM virtual, a diferencia de React, que asigna todas las tareas al DOM virtual.
Preact tampoco utiliza eventos sintéticos, que son una abstracción de un objeto de evento DOM normal. En su lugar, Preact utiliza los controladores de eventos reales de los elementos y sus objetos de eventos correspondientes. Esto hace que el DOM virtual de Preact sea más pequeño y de mayor rendimiento.
Sin herramientas de construcción
Las herramientas de compilación son bibliotecas que realizan tareas recurrentes para un desarrollador y ahorran tiempo. Este tipo de tareas incluyen el preprocesamiento de CSS, la pelusa de código, la transcompilación de archivos, la agrupación de archivos, la compresión de imágenes, por mencionar solo algunas. Algunos ejemplos de herramientas de compilación son Parcel, Webpack y Browserify. React JS, al igual que otros marcos front-end, se basa en herramientas de compilación bajo el capó para crear un resultado de producción óptimo después del desarrollo.
Aunque las herramientas de compilación ayudan durante el desarrollo, pueden aumentar la complejidad de los proyectos. El desarrollador podría tener que lidiar con archivos de configuración o simplemente dedicar tiempo a aprender a usar una nueva herramienta.
Preact se envía como una solución que ya funciona y no necesita una herramienta de compilación para funcionar correctamente.
Se puede crear una aplicación de Preact simple importando la biblioteca de Preact en una página HTML
(Fragmento modificado del sitio web de Preact)
De la ilustración anterior, debido a que la aplicación es una función de JavaScript que devuelve un elemento h1, la función debe llamarse como un argumento de la función de representación.
Con la aplicación declarada como variable, esto también funciona.
Sin embargo, se requiere un paso de compilación para usar JSX para elementos DOM en Preact. Preact proporciona una alternativa a JSX llamada htm con funcionalidad y sintaxis similares, pero no requiere un paso de compilación. Veremos htm más adelante en este artículo. Preact no necesita una herramienta de compilación para sacarle el máximo partido.
Integrabilidad
HTML tiene una etiqueta iframe que permite que un sitio web en particular se muestre (incruste) en otro. La importancia de incrustar sitios web en otros sitios web es alta. Un gran uso de esto es mostrar datos que originalmente no son compatibles con el sitio web del host (videos, juegos, música, mapas, etc.). Las aplicaciones web integradas que tienen funcionalidad se denominan widgets.
A continuación se muestra un widget de Todo creado con Preact.
¿Cómo se compara Preact con React?
En esta sección del artículo, compararemos los dos marcos usando algunos criterios. Estos criterios son esenciales al elegir un marco/biblioteca para un proyecto. Están:
Sintaxis
Tamaño
Velocidad
Popularidad
Sintaxis
Comparando las sintaxis de Preact y React, a continuación se muestran algunas diferencias.
Paso de estado y accesorios al método Render: como se mencionó anteriormente, el método render de los componentes de clase puede aceptar accesorios y estados. Una representación de esto se encuentra a continuación. En React, el método de renderizado no acepta ningún parámetro.
render(props, state) {
// Return Component
}
Use of class instead of className in components: As we can see below, we can use class instead of ClassName in Preact (className is also accepted).
function Hello(){
return (
Hello World!
);
}
Componentes: en Preact, los desarrolladores pueden crear componentes de tres maneras diferentes. Están:
Usando JSX. JSX es la forma más común de renderizar componentes en Preact.
function JsxComponent(props) {
return (
I am rendered with JSX
)
}
– Using [`h` or `createElement`](https://preactjs.com/guide/v8/api-reference/#preacth–preactcreateelement). `CreateElement` and `h` are functions that return virtual DOM elements in Preact. React developers can use `createElement` in Preact as it is modeled after `React.createElement`.
import { h } from ‘preact’;
function HComponent(props) {
return h(‘h1’, null, ‘I an rendered with h’)
}
import { h, render } from ‘preact’;
import { htm } from ‘htm’;
// Initialize htm with Preact
const html = htm.bind(h);
function HtmComponent(props) {
return (
html`
I am rendered with HTM
`
)
}
}
React developers can only create components in two ways: using JSX and using React.createElement. A conclusion to draw here is that there is slightly more flexibility in creating Preact Components.
Size
As stated on Preact’s website, it is a library with a tiny size of 3kb. Bundlephobia reports that Preact’s size, minified and gzipped, is 4kb.
Conclusión
En este artículo, hemos analizado Preact como una alternativa a React. Comenzamos averiguando cómo surgió el marco y luego observamos las características del marco. También comparamos el marco con React en algunas categorías.
El tamaño pequeño y la velocidad que tiene Preact es realmente una ventaja sobre React y React DOM de tamaño relativamente gigante. Esta ventaja es lo que ha atraído a Dev.to, Etsy, Smashing Magazine, Uber y muchas otras organizaciones populares para agregar Preact a su pila.
Debe usar Preact si desea hacer que una nueva aplicación de una sola página sea más liviana o si desea crear un widget dinámico para una página web. Si la aplicación ya existe y aún desea pasar a Preact, Preact proporciona una función llamada preact-compat para hacerlo.
