Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Usando Preact - Una alternativa ligera a React

Gustavo Leon
November 25, 2017

Usando Preact - Una alternativa ligera a React

Conociendo Preact, una alternativa de 3 kB a React.

Gustavo Leon

November 25, 2017
Tweet

More Decks by Gustavo Leon

Other Decks in Programming

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