Preact es una implementación del paradigma del componente DOM virtual al igual que React y muchas otras bibliotecas similares. Pero a diferencia de React, tiene sólo 3kb de tamaño, y también lo supera en términos de velocidad. Fue creado por Jason Miller y está disponible bajo la conocida licencia permisiva y de código abierto MIT.
¿Por qué usar Preact?
Preact es una versión ligera de React. Preferirás usar Preact como una alternativa ligera si deseas crear vistas con React y el rendimiento, la velocidad y el tamaño son una prioridad. Por ejemplo en el caso de aplicaciones web para móviles o aplicaciones web progresivas.
Tanto si estás comenzando un nuevo proyecto, como desarrollando uno existente, Preact puede ahorrarte mucho tiempo. No es necesario aprender una nueva biblioteca, ya que es similar y compatible con React - al punto de que puedes utilizar los paquetes React existentes con sólo algunos aliasing, gracias a la capa de compatibilidad preact-compat
Pros y contras
Hay muchas diferencias entre React y Preact, y las podemos resumir en tres puntos:
- Características y API: Preact incluye sólo un subconjunto de la React API, y no todas las funciones disponibles en React.
- Tamaño: Preact es mucho más pequeño que React.
- Rendimiento: Preact es más rápido que React.
Cada biblioteca tiene sus pros y sus contras, y sólo sus prioridades pueden ayudarte a decidir qué biblioteca es la correcta para tu próximo proyecto. Vamos a enumerar los pros y los contras de las dos bibliotecas.
Preact Pros
-
Preact es ligero, más pequeño (sólo 3KB de tamaño cuando se comprime gzip) y más rápido que React (ver estas pruebas). También puedes ejecutar pruebas de rendimiento en tu navegador a través de este enlace.
- Preact es en gran medida compatible con React, y tiene la misma ES6 API que React, lo que hace que sea fácil de adoptar como una nueva biblioteca en la construcción de interfaces de usuario en tu proyecto o para intercambiar React con Preact en un proyecto existente por razones de rendimiento.
- Cuenta con buena documentación y ejemplos disponibles en el sitio web oficial.
- Cuenta con un CLI poderoso y oficial para crear rápidamente nuevos proyectos Preact, sin la molestia de la configuración de Webpack y Babel.
- Muchas características están inspiradas en todo el trabajo ya realizado en React.
- También tiene su propio conjunto de características avanzadas independientes de React, como Linked State.
React Pros
- React admite la vinculación de datos unidireccional.
- Está respaldado por una gran empresa, Facebook.
- Buena documentación, ejemplos y tutoriales en el sitio web oficial y en la web.
- Una gran comunidad.
- Se utiliza en el sitio web de Facebook, que tiene millones de visitantes en todo el mundo.
- Tiene su propia extensión de herramientas de depuración para desarrolladores en Chrome.
- Dispone del Create React App para la creación rápida de proyectos con cero configuración.
- Tiene una base de código bien estructurada y compleja.
React contras
- React tiene un tamaño relativamente grande en comparación con Preact u otras bibliotecas existentes similares. (El archivo fuente de React minified es de alrededor de 136kb de tamaño, o unos 42kb cuando está minified y gzip.)
- Es más lento que Preact.
- Como resultado de su compleja base de código es más difícil para los desarrolladores principiantes el contribuir.
Preact contras
- Preact sólo admite componentes funcionales sin estado y la definición de componentes basada en clases de ES6, por lo que no hay createClass .
- No hay soporte para el contexto.
- No hay soporte para React propTypes.
- Comunidad más pequeña que React.
Introducción a Preact CLI
Preact CLI es una herramienta de línea de comandos creada por el autor de Preact, Jason Miller. Hace que sea muy fácil crear un nuevo proyecto en Preact sin atascarse con complejidades de configuración, así que comenzamos por instalarlo.
Abre el terminal (Linux o macOS) o el símbolo del sistema (Windows) y, a continuación, ejecuta los siguientes comandos:
npm i -g preact-cli@latest
Esto instala la última versión de Preact CLI, asumiendo que tienes Node y NPM instalados en tu máquina de desarrollo local.
Ahora puedes crear tu proyecto con:
preact create my-app
O con esto si deseas crear tu aplicación de forma interactiva:
preact init
A continuación, navega dentro de la carpeta raíz de la aplicación y ejecuta lo siguiente:
npm start
Esto iniciará un servidor de desarrollo live-reload.
Finalmente, cuando finalices el desarrollo de tu aplicación, puedes crear una versión de producción utilizando:
npm run build
Desmitificar tu primera aplicación de Preact
Después de instalar correctamente Preact CLI y de generar una aplicación, intentemos comprender la sencilla aplicación generada con Preact CLI.
Preact CLI genera la siguiente estructura de directorios
node_modules package.json package-lock.json src assets components app.js header index.js lib manifest.json routes home profile style index.css
La carpeta components contiene componentes de Preact y la carpeta routes contiene los componentes de página utilizados para la ruta de cada aplicación. Puedes utilizar la carpeta lib para las bibliotecas externas, la carpeta style para los estilos CSS y los assets para los iconos y otros gráficos.
Ten en cuenta el archivo manifest.json, que es como package.json pero para PWA (aplicaciones web progresivas). Gracias a Preact CLI puedes tener un PWA de puntuación perfecta fuera de la caja.
Ahora, si abres el archivo de tu proyecto package.json, verás que el punto de entrada principal está establecido en src/index.js. Este es el contenido de este archivo:
import './style'; import App from './components/app'; export default App;
Como puedes ver, index.js importa estilos y el componente App de ./components/app**, y luego lo exporta como predeterminado.
Ahora, veamos lo que hay dentro de ./components/app
import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';
export default class App extends Component {
handleRoute = e => {
this.currentUrl = e.url;
};
render() {
return (
<div id="app">
<Header />
<Router onChange={this.handleRoute}>
<Home path="/" />
<Profile path="/profile/" user="me" />
<Profile path="/profile/:user" />
</Router>
</div>
);
}
}
Este archivo exporta una clase predeterminada App que extiende la clase Component importada del paquete preact. Cada componente de Preact necesita extender la clase Component.
App define un método render que devuelve un montón de elementos HTML y componentes de Preact que representan la interfaz de usuario principal de la aplicación.
Dentro del elemento div, tenemos dos componentes de Preact, Header- que procesa el encabezado de la aplicación - y un componente Router.
El enrutador Preact es similar a la versión más reciente de React Router (versión 4). Sólo tienes que ajustar los componentes secundarios con un componente y, a continuación, especificar el path para cada componente. A continuación, el enrutador se encargará de representar el componente, que tiene una ruta de acceso que coincide con la URL del navegador actual.
Vale la pena mencionar que Preact Router es muy simple y, a diferencia de React Router, no admite funciones avanzadas como rutas anidadas y composición de vistas. Si necesitas estas características, debes utilizar el React Router v3 mediante aliasing preact-compat , o mejor aún, usar el último React Router (versión 4) que es más potente que v3 y no necesita ninguna capa de compatibilidad, ya que funciona directamente con Preact. (Ver esta demostración CodePen como ejemplo)
Preact Compatibility Layer
El módulo preact-compat permite a los desarrolladores cambiar de React a Preact sin cambiar las importaciones de React y ReactDOM a Preact, o utilizar los paquetes React existentes con Preact.
Usar preact-compat es fácil. Todo lo que tienes que hacer es instalarlo en primer lugar a través de npm:
npm i -S preact preact-compat
A continuación, configurar tu sistema de compilación para redirigir las importaciones o requerimientos para react o para react-dom a preact-compat. Por ejemplo, en el caso de Webpack, sólo tienes que agregar la siguiente configuración a webpack.config.js
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
Conclusión
Preact es una buena alternativa para React. Su comunidad está creciendo constantemente, y cada vez más aplicaciones web lo están utilizando. Por lo tanto, si estás creando una aplicación Web con requisitos de alto rendimiento o una aplicación móvil para redes lentas de 2G, deberías considerar Preact, ya sea como la primera biblioteca para tu proyecto o como sustituto de React.
Comentarios