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:
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:
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.
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.
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 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.
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.
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.
All parts of the applications built on top of the boilerplate can be optimized for SEO with custom title, description, headers etc.
The boilerplate allows for creating and sharing deep links to anywhere within the application.
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 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.
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.
Tokens are passed with each GraphQL request to prevent Cross Site Request Forgery exploits.
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.
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.
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.
Express GraphQL is an Node.js/Express library which implements a GraphQL server.
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.
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.
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.
The boilerplate uses features of ES6 and ES7 extensively. All react components are implemented as ES6 classes.
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.
Automation scripts for building, running and development of applications based on the boilerplate.
Static type checker, designed to find type errors in JavaScript programs.
Pluggable linting utility for JavaScript and JSX.
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.
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.
The boilerplate contains code for managing user accounts. The different parts of the application can be accessed by anonymous or authenticated users, or both.