BT

Reapp - Hybrid Mobile App Development Using React

| by Matt McComb Follow 0 Followers on Feb 16, 2015. Estimated reading time: 3 minutes |

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

no testing by Jose Leal

camon...

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT