We made several improvements in Universal Relay Boilerplate and Rebar.

Repository updates

The Universal Relay Boilerplate and Rebar, now at version 14.0.1 with the help of our contributors has been updated with the following:

• Added project name to enable seamless react-native upgrades. Also, changes were made in order to make possible the use of react-native-git-upgrade. Rebar has been upgraded using that tool, and going forward both Rebar and URB will be upgraded using the tool.
• Flow has been upgraded to v 0.36.
• BCrypt has been updated to version 1.0.0 which fixes outstanding issues with Heroku deployment.
• Cassandra modules - driver and ORM - are updated to the latest version.
• React is updated to 15.4.1.
• React Native is updated to 0.39.0.
• In all units, and in scripts, the pieces of package.json that are used by the script build-units are renamed to package.part.json to avoid confusion with new versions of tooling.
• Ability to change the anonymous UUID per provider has been added.
• Code in several core files has been modified to use async/await instead of promises.

Developer Workstation Setup Guide

In addition to the previously available instructions on how to install the tools required for working with Rebar based projects, we added a new document describing the setup of the following components in greater level of detail:

• XCode.
• Android Studio.
• Homebrew.
• Git.
• Atom editor.
• Node.js.
• Watchman.
• Java.
• Cassandra (local copy in user space).
• Flow.
• Facebook SDK (for Rebar).

Source Code Beautification

A new version of .jsbeautifyrc is introduced which imposes less draconian rules on the code look and feel and makes it match more closely widely accepted standards. Also, a setting has been added to prevent the distortion of JSX, so beautification is now possible on React components. Here is an example of an ordinary JavaScript file:

//...
import renderOnServer from './renderOnServer'
import { requestLoggerRenderOnServer } from '../configuration/server/requestLoggers'


// Read environment
require( 'dotenv' ).load()


// Log requests for statically served files
function logPublicRequest( req, res, next ) {
  logServerRequest( req, res, next, requestLoggerRenderOnServer )
}

// Use relative URL for asset path
let assetsPath
if( process.env.NODE_ENV == 'production' )
  assetsPath = `/assets/${version}`
else {
  const host = process.env.HOST
  assetsPath = `http://${host}:8080/${version}`
}

let app = express()
app.use( logPublicRequest )

// Serve HTML
app.get( '/*', ( req, res, next ) => {
  renderOnServer( req, res, next, assetsPath )
} )
//...

Here is an example from a component class:

class AppBar_ToDo_OpenIndicator extends React.Component {

  _handle_onTouchTap_IncompleteToDos = () => {

    this.context.router.push( '/todo/active' )
  }

  render() {

    let incompleteCount = this.props.Viewer.ToDo_TotalCount - this.props.Viewer.ToDo_CompletedCount

    if( incompleteCount > 0 )
      return(
        <Badge key="top-incomplete"
          style={ { marginTop: -11, marginBottom: -17 } }
          badgeContent={ incompleteCount }
          primary={ true }
          badgeStyle={ {top:20, right:16} }
        >
          <IconButton tooltip="Incomplete ToDos" onTouchTap={ this._handle_onTouchTap_IncompleteToDos }>
            <IconNotificationsEventAvailable />
          </IconButton>
        </Badge>
      )
    else
      return <div />
  }
}