Usando Preact - Una alternativa ligera a React

Usando Preact Una alternativa ligera a React Gustavo Leon -
Frontend.pe @hpneo

¿Qué es Preact? • Alternativa a React. • Biblioteca pequeña
(3 kB comprimido y minificado). • Misma API ES6 de React. • Virtual DOM más pequeño y ligero. • No tiene PropTypes ni synthetic events. • Props y state son pasados como parámetros a render.

¿Por qué Preact? • Tamaño perfecto para widgets o plugins.
• Útil en PWAs y aplicaciones web móviles en general. • Puede reemplazar fácilmente a React.

Código de ejemplo import { h, render, Component } from
'preact'; class Clock extends Component { render() { let time = new Date().toLocaleTimeString(); return <span>{ time }</span>; } } // render an instance of Clock into <body>: render(<Clock />, document.body);

preact-cli • Similar a create-react-app. • Permite crear SPAs con
Preact fácilmente. • Incluye preact y preact-router en 4.5 kB minificado. > preact create default my-preact-app

• preact-compat añade una capa de compatibilidad para trabajar con
bibliotecas de React. • Solo es necesario añadir alias a react y react-dom (configurable desde Webpack o Browserify). Integrando Preact al ecosistema React/Redux // preact.config.js export default function (config, env, helpers) { const alias = config.resolve.alias; alias['react'] = 'preact-compat'; alias['react-dom'] = 'preact-compat'; }

• Con preact-compat, no es necesario reescribir los componentes de
React a Preact (excepto cuando se utilizan features que Preact no soporta). • Algunas bibliotecas soportadas por Preact con preact-compat: React Router v4, react-redux, Redux Form. import { h, Component } from 'preact'; import { Provider } from 'react-redux'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import store from '../redux/store'; export default class App extends Component { render() { return ( <Provider store={store}> <BrowserRouter> <Switch> <Route exact path="/pokemons/:name" component={PokemonProfile} /> <Route path="/" component={Home} /> </Switch> </BrowserRouter> </Provider> ); } } Integrando Preact al ecosistema React/Redux

import { h, Component } from 'preact'; import { Link
} from 'react-router-dom'; import { connect } from 'react-redux'; import { selectPokemons, selectPokemonsStatus } from '../../redux/ducks/pokemons'; class Home extends Component { // ...Mi componente Preact } const mapStateToProps = state => ( { pokemons: selectPokemons(state), fetching: selectPokemonsStatus(state), } ); export default connect(mapStateToProps)(Home); • Con preact-compat y react-redux, el código de Redux se vuelve agnóstico y React y Preact se vuelven intercambiables. Integrando Preact al ecosistema React/Redux

• Usando create-react-app y preact-cli. • Dos aplicaciones con el
mismo stack: ◦ react / preact ◦ preact-compat ◦ react-router-dom ◦ react-redux ◦ redux-observable ◦ rxjs • github.com/hpneo/pokedex-react y github.com/hpneo/pokedex-preact • Diseño basado en http://www.ryanlewisdesign.com/project_P okedex.html Prueba de concepto: Pokedex en React y Preact

Diferencias en el build entre Preact y React

Diferencias en performance entre Preact y React Preact React

¡Gracias!

Usando Preact - Una alternativa ligera a React

Usando Preact - Una alternativa ligera a React

Gustavo Leon

More Decks by Gustavo Leon

Other Decks in Programming

Featured

Transcript