-
Notifications
You must be signed in to change notification settings - Fork 1
Architecture
Synbiohub3's frontend is built using the React library and the Next.js framework. Next.js allows for both server & client side rendering. Redux is used for sharing state between React components in a way that avoids the infamous horror of React property nesting. The frontend is also containerized using Docker. Of course, the frontend is built using JavaScript/Node.js. Currently, the project uses Yarn as its package manager.
Click on any of the links in the paragraph above to learn more about the technologies the frontend uses.
There are 6 main directories in the frontend code:
- pages
- components
- redux
- sparql
- styles
The purpose of each of these directories is detailed below.
The pages directory defines the routing of the application. For more info on how the files in pages determine the routing of the app, visit Next.js routing documentation.
Essentially, each file in the pages directory can be viewed as a top-level react component for any rendered interface in the application.
The _app.js file is the top-level React component of the entire application. For info on configuring the file, visit Next.js documentation.
The [...view.js] file is the top-level React component for all of the app's viewing interfaces (component definition, collection, etc.).
The /api directory is used to create api endpoints hosted by the frontend. API ENDPOINTS SHOULD ONLY BE CREATED HERE WHEN ABSOLUTELY NECESSARY (api should be defined in the backend). There's only one file in here, which is an api endpoint that acts as a proxy for SynBioHub's web of registries endpoint to avoid CORS errors.
The components directory is used to store React components which are used in the pages directory (see above section). This is to prevent the files in pages from being overwhelmingly long, as well as give developers the opportunity to reuse components throughout the application. To gain a better understanding of what React Components are, visit React.js's Components and Props documentation (props are how data is traditionally passed between React components).
The TopLevel.js provides a reusable wrapper for each of the application's pages. It handles validation of authentication, whether or not errors should be rendered on the screen, displaying a download's status, showing of the navigation bar, and more.
The Reusable directory contains components that are commonly used throughout SBH3's frontend, including loading animators & customizable tables.
The Admin directory contains components for each of the Admin panel's screens.
The [Viewing] directory contains components for rendering SynBioHub3's SBOL viewing interfaces. Shell.js acts as a wrapper for each viewing interface, SidePanel.js renders the viewing interface's side panel, and the PageJSON directory contains all the code for enabling developers to define interfaces using custom JSON files.
The redux directory is used to implement Redux functionality, which allows the app's components to share state in a more organized way. For more information about Redux & its terminology, visit the Redux documentation.
The actions.js file is where all of the Redux actions are defined.
The reducers.js file is where all of the Redux reducers are defined.
The types.js file is where all of the action types are defined.
And finally, the store.js file is where the Redux store is created (the object that holds all Redux state).
The sparql directory is where most of the SPARQL (data-fetching) functionality is implemented. This allows the frontend to query SynBioHub's triplestore database (likely Virtuoso).
The tools directory contains helper methods for getting the result of a SPARQL query (see getQueryResponse.js).
SPARQL query templates are defined in and exported from this directory (getTypes.js, getDetails.js, etc.).
The styles directory is where all of the app's CSS modules are defined for styling purposes. These .module.css are usually named after the page they apply to. They must be imported into corresponding React components in order to be used.
The globals.css file is used to define the global styles of the application (such as how links render throughout the app, the html body style, etc.).