Moving to Preact

Hi Guys, It's been a while since I don't share with you cool stuff, so this is why I decided to take some time to introduce you to Preact.

Basically Preact it's the same as React, it's a library which help us to manipulate the virtual DOM in the same way React does, but most important thing is that it's under the MIT license. Why is this so important? Well I don't want to make a big deal about it, but some time Ago the Apache Software Foundation made some changes to the the BSD + Patents license which is the React's license (more over is the License Facebook uses for all its projects) basically that change implies that if you compete with facebook your React (or any other facebook framework you use) your license will be terminated. You can read more about this change in this thread or this post (and this is the official announcement from Facebook which tell us that they're going to stick with their current lincense), because I don't want to take too much time with this issue (Because it's an issue for all the guys who likes the open-sourcing strategy)

Let's start for the basics, Preact it'r a library pretty similar to React, in fact, it has the same Component Life Cycle:

Method	When is it called?
componentWillMount	Before mounting in the DOM
componentDidMount	After mounting in the DOM
componentWillUnmount	Before the component is deleted from the DOM
componentWillReceiveProps	Before new props are accepted/passed
shouldComponentUpdate	Before the render, similar to React, if you return a false it will avoid the render method
componentWillUpdate	before the render
componentDidUpdate	after the render

Beside its release cycle it's almost the same as React, I mean, each time React realeses a new version the Preact team evaluates the changes and decide if those changes should be applied to Preact or not.

// Difference with React

But Preact is not the same as React, it has its differences, Preact has some features that React has not and viceversa:

Features Preact has and React has not :

• render function receives 2 values

render(props, state){
    return (
        <h1>Hello {state.world}</h1>
    )
}

• linkState function to easily manipulate the state of a component:

class Foo extends Component {
    render({ }, { text }) {
        return <input value={text} onChange={linkState(this, 'text', 'target.value')} />;
    }
}

the linkState function will do simething like this:

/* This is not official linkState function, this is how I suppose to work */
linkState(context, keyInContext, valueToLook) {
    return event => {
        constext.setState({
            [keyInContext]: _.get(event, valueToLook)
        })
    }
}

QUICK NOTE: the linkState function was moved to a separate library, see how to use it in the preact docs

• you can use class instead of className to add a CSS class (className is well supported too)

class Foo extends Component {
    render() {
        return (
            <div>
                <input class="is-supported" />
                <input className="is-supported-too" />
            </div>
        )
    }
}

• Preact recycle and group all the components for easily manipulation and usage

Features Preact desn't have but React has:

• The PropTypes are not included, because you can use the external library: prop-types or you can use the library preact-compat (which is used to support your react components, but I'm going to talk about it un future posts)
• Children (React.Children) is not included, because the props.children in preact are always an array
• Synthetic Events are not included, because uses the native Event Listeners of the browser, if you want to see the available events, you can see the list of GlobalEventHandlers

// Summary

Preact it's an excellent choice if you like the JSX syntax React introduced some time ago and you want to use a real open-source library, because let's face it, the License Facebook uses for its projects are not real oepn-source because they have an unneceary advantage, if they don't like or if they think you're taking advantage of their products/projects, they can revoke you the license and take all your work. This is why I'm thinking to leave react, not because I don't like, because that's not a truly open-source project.

In fact you can see how easy is to use Preact if you have prior experience with React in my codepen, I made a simple TODO project...the syntax it's almost the same except for the CSS class, but you can replace it for className and have the exact same syntax for React.

I haven't tested it with HOC or with routing or Redux, but I think that's going to be easy to do, in fact I'm going to wirhte about in future posts :) just wait for them, meanwhile see you guys and try Preact, I know you're going to like it.