Universal Relay Boilerplate

Open-source Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra

The Universal Relay Boilerplate is and open source project representing basic foundation of the solutions we provide. It fully utilizes the react stack, and Node.js and Cassandra on the back end. It can be used both as boilerplate, as well as an educational tool with multiple examples available. Basic user account management including account creation, password strength indicator and user profile is also included.

The boilerplate is optimized for supportability and update-ability. It allows us to update the multiple projects based on the boilerplate with minimum effort, providing new features, improvements and bug fixes. This is achieved through the following two approaches:

  • Configurability. All the configuration files, which include settings, CQL, JSON, snippets of JavaScript and JSX are separated from the common code.
  • Units. The applications built upon the boilerplate are separated into semi-independent units, which contain the necessary front-end, back end, relay, CQL, etc. code. The parameters and settings for those units are stored in the configuration folder for eacy updating.

The Universal Relay Boilerplate hosted on GitHub.

A live demo is also available.

Detailed technical information about the boilerplate is available in our developer section.

For advanced functionality our Rebar product, based on boilerplate, offers additional modules with enhanced functionality, allowing for quick development of end-to end software solutions.

Notable features:

React

Library for building high performance single page web and mobile applications. The declarative nature of React allows for quick development and avoiding several classes of bugs, allowing for large and complex yet maintainable and performant applications.

React overview

React Native

The boilerplate provides React Native projects fully integrated into the same backend as the web application. High quality native applications for iOS and Android. Great skill and code reuse among platforms.

React Native overview

Material Design

The boilerplate uses modern, clean Material design courtesy of the Material-UI. Material-UI is a library for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components.

Single Page Application

Single page applications execute on the client side, in the browser, similar to mobile apps. This provides for fast, fluid user experience and reduced load on the network. The boilerplate has all the advantages that come with SPA, while using isomorphism and the Relay features allows to offset practically all negatives that come with this approach.

Isomorphism

The kit is designed to be fully isomorphic. This allows for very quick rendering when the users first access a page in the application. All content is designed to be accessed in an isomorphic way allowing the use and sharing of links to any part of the SPA.

Isomorphic React Relay

Responsive Design

The boilerplate web application is designed in such a way where it feels equally at home on a big desktop and a small mobile screen. All the features of the developed applications are accessible on both to the maximum extent possible.

SEO Friendly

All parts of the applications built on top of the boilerplate can be optimized for SEO with custom title, description, headers etc.

SEO with Isomorphic Relay

Deep Linking

The boilerplate allows for creating and sharing deep links to anywhere within the application.

Built for speed

The boilerplate is configured to use established practices for optimizing speed like caching and compression. In cases of a subsequent site visit, the application loads and is ready for work almost instantaneously even on mobile devices with slow networks.

JWT Tokens

JWT tokens are used for authentication. They are stored in server only cookies which, together with the use of GraphQL, provides a fair amount of protection against several possible attacks.

HTTP Only Cookies

The HTTP only cookies are currently the safest way to handle authentication in a web application. The JWT tokens are stored in HTTP only cookies making it harder for attackers to access.

CSRF Tokens

Tokens are passed with each GraphQL request to prevent Cross Site Request Forgery exploits.

Relay

A Javascript framework for building data-driven react applications, Relay encapsulates and abstracts away the complex tasks of efficiently requesting, retrieving, and rendering information from a GraphQL server. It handles common, yet complex to implement use cases like optimistic updates, client side caching, query composition, etc.

Relay overview

Cassandra, meet Relay

GraphQL

A query language for describing the capabilities and requirements of data models for client‐server applications. The use of GraphQL allows for adding features to the data schema exposed to clients without affecting existing code.

GraphQL overview

Node.js

Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient. The use of Node.js and the Express framework allow for creating efficient, fluid applications.

Node.js overview

Express GraphQL

Express GraphQL is an Node.js/Express library which implements a GraphQL server.

Data Loader

Generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.

Apache Cassandra

The right choice when you need scalability and high availability without compromising performance. Linear scalability and proven fault-tolerance on commodity hardware or cloud infrastructure make it the perfect platform for mission-critical data. Cassandra's support for replicating across multiple datacenters is best-in-class, providing lower latency for your users and the peace of mind of knowing that you can survive regional outages.

Cassandra overview

Cassandra, meet Relay

Babel

Transpiler that compiles ES6/ES7 to ES5 and supports the compilation of the GraphQL queries in Relay. Allows using features from ES6 and ES7 today.

ES6, ES7

The boilerplate uses features of ES6 and ES7 extensively. All react components are implemented as ES6 classes.

Webpack

Bundles npm packages and the application Java Script into a single file. The boilerplate also Includes hot reloading utilizing Webpack. Also, Webpack can bundle any required CSS.

NPM Scripts

Automation scripts for building, running and development of applications based on the boilerplate.

Flow

Static type checker, designed to find type errors in JavaScript programs.

ESLint

Pluggable linting utility for JavaScript and JSX.

Units

The examples are broken into semi-independent units containing all client and server side code necessary. Adding and removing units can be done fairly easily without affecting the application in a major way.

Persistence

The boilerplate can be used with both Cassandra-based data storage, as well as in-memory structures. The latter are right now used only for testing, but can be later used for setting up mock tests cases for unit and regression testing.

User management

The boilerplate contains code for managing user accounts. The different parts of the application can be accessed by anonymous or authenticated users, or both.