Usando Preact - Una alternativa ligera a React

Usando Preact - Una alternativa ligera a React

Conociendo Preact, una alternativa de 3 kB a React.

10a0e11595c04259f746f31bf0715e4b?s=128

Gustavo Leon

November 25, 2017
Tweet

Transcript

  1. 2.

    ¿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.
  2. 3.

    ¿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.
  3. 4.

    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);
  4. 5.

    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
  5. 6.

    • 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'; }
  6. 7.

    • 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
  7. 8.

    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
  8. 9.

    • 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