Getting started with Development

Where work happens

Technical conversations often happen either on our GitHub repository or the volunteer chat.

Source code:

• Website source code
• Mobile app source code (a simple, webview based app)
• Mobile app source code (our future, fully native app with React Native)

Stack

Trustroots is fully written in JavaScript (both back- and frontend) on Node.js.

Our main data storage is MongoDB which is a Document Database (and not a relational database like SQL databases are), and we access it with Mongoose which gives us Object Models.

We store additional data in InfluxDB for statistical purposes but developers typically don’t need to interact with InfluxDB.

Our backend framework is Express.js.

Our frontend framework is React.

The application is compiled and served using Gulp and Webpack.

Babel that transpiles modern ES6 frontend code back to ES5 that most browsers understand.

Our stylesheets are written in LESS language and our UI uses Bootstrap v3 (not the latest v4) framework quite extensively.

Architecture in short

• Express.js server side serves content from API end-points.
• In backend code, you would typically interact with Mongoose object models such as “Tribe” or “User”. These match MongoDB collections “tribes” and “users”.
• React.js single page application reads data from the API and renders templates.
• The application is divided into modules by main features; one for messaging, one for users etc. Each module contains server-side files, client-side files and tests for that specific feature:

└── modules
    └── module-name
        ├── client
        ├── server
        └── tests
            ├── client
            └── server

Development documentation dives deeper into architecture and folder layout.

Codebase’ origin

Trustroots was built upon MEAN.js boilerplate (from Mongo-Express-Angular-NodeJS). MEAN isn’t active anymore and we’ve modified the codebase extensively for our own purposes, so it’s better not to rely too much on their documentation.

While boilerplate was a great way to get started with rather large application, we inherited a lot of cruft and kinda complicated setup from it. As time has passed, several aspects of the application are not that modern anymore and we have lots to do to bring it up to date.

Note that meanjs.org and mean.io are two separate projects. The former was a fork of mean.io in 2014. Trustroots was built on the meanjs.org version.

Where to start?

Suppose you’ve already dropped by at volunteer chat at this point and if you haven’t, you should!

Then the first step is to get the application running and perhaps familiarise yourself little bit more with rest of the documentation.

Easy issues are a great place to start work. These should be issues which are fairly easily fixable.

Hopefully with a little diving into the code, you should be able to find and fix one or two of these issues. If you’re just starting out with the code, these are a great way to contribute something really useful very quickly.

Adding more significant features, major refactoring, and so on are typically handled by more experienced developers in the team.

Make sure to familiarise yourself with our pull request workflow.

How to write code

• Tests, tests, tests! It’s important to have unit tests cover especially for backend APIs because we are many people writing code and changing code in one place might break it at another. Lots of our client side code lacks tests and while these aren’t always necessarily as useful as backend tests, writing some tests would be great, too. Add tests especially if you’ve fixed a bug in APIs.
• Write JSDoc comment blocks, please, or add them when you see them missing.
• Check your code for Accessibility.

Coding conventions

• Project has .editorconfig file — download extension for your editor.
• Configure Eslint integration for your editor

Deeper Dive

Check out the Development docs for more info about tooling, mock data, running tests, etc.

Further studying

Official React documentation is great.

While our JavaScript codebase is mostly still in older ES5 format, we are fast moving towards modern ES6. Here are few resources to get up to speed with ES6:

• JavaScript Allongé, the “Six” Edition
• Exploring ES6
• What the heck is the event loop anyway? – short presentation that sheds some light on how asynchronous operations are executed in JavaScript
• ES6 cheatsheet