Late last year we established the open source Starter Kit. The project is an amalgamation of work we have done in previous projects and an attempt to organize and reuse the accumulated knowledge and experience. The goal is two fold - to provide a good staring point for new projects as well as serve as a collection of examples of using Material Design, React, Relay, Node and Cassandra together.
The project features the use of the following technologies and approaches:
- React - Library for building Single Page Applications.
- Material UI - Library for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components.
- Relay - A Java Script framework for building data-driven react applications.
- GraphQL - A query language created by Facebook in 2012 for describing the capabilities and requirements of data models for client‐server applications.
- JWT JSON Web Tokens - Industry standard RFC 7519 method for representing claims securely between two parties.
- Babel - Compiles ES6/ES7 to ES5. Allows using features from ES6 and ES7 today.
- Webpack - Bundles npm packages and optimizes the application Java Script into a single file for maximum performance.
- Apache Cassandra - Massively scalable and reliable NOSQL database.
Some of the features of the project are:
- It is a Single Page Application. The kit 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 combination of isomorphism with the use of the react helmet allows all the content in the application to be SEO ready.
- JWT Tokens and HTTP Only cookies provide a high level of protection against multiple types of attacks and exploits.
- Responsive Material Design - Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. The examples in IMRSK work well on different form factors, ranging from desktop browsers to mobile phones.
- The starter kit is configured to use established practices for optimizing speed like caching and compression to achieve maximum performance and pleasant user experience.
As we work on the kit, we will also publish articles explaining its architecture and capabilities. We already wrote about Using Isomorphic Server Variables and plan to continue throughout the year.