A platform dedicated to community growth and getting insights on organization-wide activities.
The project structure of community toolbox is majorly divided into two groups,
/examplescontains code responsible for front-end styles and related scripts,/srccontains the actual code for fetching data and showing it to the user.
As shown in the flowchart, /src inherits MVC like architecture. Here,
| Fragment | Contains |
|---|---|
/models |
database related operations (Database layer) |
/scripts |
main source file (community-toolbox.js) |
/utils |
utility functions (Controller layer) |
/UI |
user interface functions (View layer) |
models/ corresponds to the Database Layer. It is responsible for all the operations that happen on the database i.e., create, read and delete operations. The structure of models/ ensures the segregation of code chunks based on their responsibilities.
There are 3 major categories to this:
- Setting up/initializing the database (initialize.js),
- Defining operations for the database (crud.js), and
- Providing a layer to communicate with the outside code (utils.js)
scripts/ contains the main entry point community-toolbox.js which is responsible for plugging every single functionality to the website. This file provides an interface to communicate with every feature that is present or is to be added later on. This file then gets bundled up with the help of grunt and that bundled-up version of the file is injected into the website as a script with the help of the landing page html file (index.html).
utils/ acts as a Controller Layer, it contains code for various different features, majority of the code for any feature is present in this folder. This is to follow our approach of keeping main logic separate from the interface file (community-toolbox.js). This helps in making the code more readable and maintainable.
UI/ acts as a View Layer, it is responsible for displaying data on the landing page. Data is given to UI functions and its their job to display that data on to the screen. These functions are broken up into different units according to the data they display.
- Data for repository contributors is displayed on the screen with the help of contributorsUI.js,
- Similarly, recentContributorsUI.js shows recent contributors' data on to the page, and likewise other functions show data accordingly.
