Frontend Practices

File and Folder Structure

The UI is served up by the Rails application using eRuby HTML templates (in the app/views folder), which in turn contains <script> tags that load up JavaScript bundles.

React in client/ is written with Flow.. Part of this new codebase is also revamping the UI/UX design of the application. React component files end in .jsx and regular JavaScript files end in .js.

Code Quality

• We use 2 space indentation.
• We use camelcase for JS and SCSS files.
• We use single quotes for JS and SCSS files.
• We follow Airbnb's JavaScript style guide.

Linting

Running yarn lint in the client directory will run ESLint, Prettier, Flow and Stylelint.

Flow Types

Some NPM packages have Flow type enabled but fail the Flow checks (e.g. radium) because it relies on an older Flow version compared to the main project. You'll want to put the package path under the [ignore] section of client/.flowconfig, for example:

[ignore]
.*/node_modules/radium/.*

If you're wondering why we don't just ignore the entire node_modules folder, it's because some NPM Packages do have correct type definitions, and we don't want to ignore those.

Storybook

For the React codebase, we use Storybook for interactive development and testing of the React UI components. To start this environment:

cd client
yarn storybook

Once you start it, type the localhost address in your browser indicated by the terminal. You can develop your React components in here by creating a *.stories.jsx file inside the client/app/stories folder. Look at the other existing stories as inspiration.

You can access the production version of Storybook at design.if-me.org.

How to use React in Rails

We use a gem called React on Rails to inject React into Rails. After developing your React component in Storybook, you need to add the component to client/app/startup/registration.js. Then you are ready to add to Rails views.

Here is an example of a React component in Rails:

<%= react_component('ComponentName', props: {} %>

Automated Testing

Please see our Automated Testing document, specifically the frontend document.