We’ve tried almost everything for our Rails frontends - typical Rails views, Backbone, Angular and others. What we settled with is React.js. In this post we’re showing you, how we structure a typical React.js app when it comes to the files structure.
Our file structure per a single mini-application:
app_init.js.coffee --- app_directory --- app.module.js.coffee --- backend.module.js.coffee --- components --- component_file1.module.js.coffee ... --- domain.module.js.coffee --- glue.module.js.coffee
app_init - we got one per each application. We always keep it simple:
#= require_tree ./app_directory App = require('app_directory/app') $('[data-app=appFromAppDirectory]').each -> window.app = new App(@) window.app.start()
app - starting point of application. Here we initialize and start every component of application
backend - here we fetch and send data to backend. It is also a place, where we create domain objects
components - our React.js components we use to render an application.
domain - definitions of domain objects used in view. Example: immutable list of single entries (which are domain objects too).
glue - hexagonal.js glue
Hexagonal.js - implementation of clean hexagonal architecture - http://hexagonaljs.com/
RxJS - we use reactive data streams to communicate between apps - https://github.com/Reactive-Extensions/RxJS