Pro Yearly is on sale from $80 to $50! »

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. Usando Preact Una alternativa ligera a React Gustavo Leon -

    Frontend.pe @hpneo
  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.
  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.
  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);
  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
  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'; }
  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
  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
  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
  10. Diferencias en el build entre Preact y React

  11. Diferencias en performance entre Preact y React Preact React

  12. ¡Gracias!