Over the past two weeks much hype has surrounded Facebook’s announcement of React Native, an extension to React.js that enables native mobile app development using JavaScript. Amidst the hype Reapp has launched, offering React enthusiasts an alternative approach to developing mobile apps.
Originally developed and subsequently open-sourced by Facebook, React is a client side JavaScript framework for building user interfaces. React uses a declarative syntax and JavaScript syntax extension called JSX to describe HTML layouts. Each React component is backed and configured by properties and state, changes to which trigger updates via a one-way data flow. These updates are optimised by a virtual DOM, which diffs components to ensure that only those altered by the state change are refreshed.
On the surface Reapp and React Native are strikingly similar, with both frameworks utilising React to build application user interfaces. However, behind the scenes there is obvious philosophical differences between the two frameworks. React Native binds React components to native UI controls, creating an interface familiar to the device’s operating system. Reapp on the other hand binds React to a cross-platform UI-Kit, creating hybrid apps.
The expressiveness and power of the Reapp UI-Kit can be seen in the project's Kitchen Sink sample app. In particular the 'Mailbox' view of the app shows how Reapp's React based UI-Kit components can be used to quickly define a mailbox style user interface:
var Mailbox = React.createClass({
render() {
return (
<div>
<SearchBar defaultValue="" />
<List styles={{
self: {
paddingLeft: 25
}
}}>
<ListItem
title="Erinn Silsby"
titleAfter="8:45 PM"
titleSub="New messages from Jane Doe really long title should ellipse"
>
Lorem ipsume dolor sit amet, consectetur adipiscing
elit. Nulla sagittis tellus ut turpis condimentium,
ursula major sagittis.
</ListItem>
<ListItem
title="Phebe Matz"
titleAfter="8:45 PM"
titleSub="New messages from Jane Doe really long title should ellipse"
>
Lorem ipsume dolor sit amet, consectetur adipiscing
elit. Nulla sagittis tellus ut turpis condimentium,
ursula major sagittis.
</ListItem>
<ListItem
title="Derek Boulware"
titleAfter="8:45 PM"
titleSub="New messages from Jane Doe really long title should ellipse"
>
Lorem ipsume dolor sit amet, consectetur adipiscing
elit. Nulla sagittis tellus ut turpis condimentium,
ursula major sagittis.
</ListItem>
<ListItem
title="Samantha Canor"
titleAfter="8:45 PM"
titleSub="New messages from Jane Doe really long title should ellipse"
>
// ... truncated for readability ...
// ... complete code sample available at https://github.com/reapp/kitchen-sink/blob/master/app/components/kitchen/Mailbox.jsx
</List>
</div>
);
}
});
The above code extract illustates how a custom Mailbox component can be quickly composed from three of the Reapp UI-Kit components - List, ListItem and SearchBar. The generated user interface can be viewed in the online version of the Kitchen Sink sample.
Reapp is however more than just a UI-Kit with a React programming interface. It also offers a number of other composable packages for handling non-UI concerns:
- reapp-routes - module for generating a tree of objects representing routes or file paths.
- reapp-component - dependency injection module with support for decorators and factories.
- reapp-ui- contains the UI-Kit; a set of React components that support animation and skinning via themes to allow platform specific styling. All of the available UI components are listed on the Reapp website.
Reapp aims to maximise developer productivity by incorporating a number of popular JavaScript libraries. To simplify dependency management Reapp includes the Webpack module bundler, which uses ‘code splitting’ to optimize dependency loading at runtime. In addition Reapp bundles the increasingly popular 6To5 transpiler, which allows developers to write JavaScript code using ES6 syntax but have transpiled back to ES5, maintaining compatibility whilst maximising productivity.
An alpha version of the Reapp framework is now available and can be installed via npm. The project is also open-source with the source code available on Github.
Along with the alpha release of the project the developers have published two sample projects to illustrate the capabilities and usage of the framework. The Hacker News sample is a fully functional client app for the HackerNews software news website and the Kitchen Sink sample illustrates the capabilities of the Reapp UI-Kit. The source code for both samples is available in the Reapp Github repository.
