Usando Preact - Una alternativa ligera a React

Conociendo Preact, una alternativa de 3 kB a React.

Transcript

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

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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

   View Slide

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
   

   View Slide

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';
   }
   

   View Slide

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 (
   
   
   
   component={PokemonProfile} />
   
   
   
   
   );
   }
   }
   Integrando Preact al ecosistema React/Redux
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Diferencias en el build entre Preact y React
    

    View Slide

11. Diferencias en performance entre Preact y React
    Preact React
    

    View Slide

12. ¡Gracias!
    

    View Slide