These online courses will help you understand the basics of the technologies used in the Virtool client.
The following readings are recommended as they cover libraries that are fundamental to the structure of Virtool’s frontend. Understanding them is necessary for working with large sections of the codebase. After reading through the docs you should have a strong conceptual understanding of what each library is for and how to utilize with it. Syntax specifics, while useful, can be cemented while working on the frontend.
It is not necessary to follow the official React tutorial if you have already completed the Codecademy courses for React.
The current codebase makes use of a combination of class and function based components. While it is important to understand both, new components should use a hook based solution in the vast majority of cases. When modifying older class based components consider converting the component to a hook based solution when it improves clarity.
For a detailed look at hooks, including creation of custom hooks, read through the following section:
Make sure you understand the following items in the ADVANCED GUIDES section:
Traditionally, changes in the URL would be associated with visiting a new HTML page requested from the server. In single-page applications, rendering of content and communication with the server is done without visiting entirely new pages. Since new pages are not visited, the URL does not change while navigating. This is a problem because URLs are useful for allowing users to use their built-in browser navigation buttons and use links to specific content.
Many modern Javascript frameworks include URL routing functionality. This allows changes in the application state or appearance to be associated with a change
in the URL. The React library does not include routing. Instead a separate library called react-router is used to enable
URL based navigation in Virtool.
Relevant documentation sections are:
An additional library, connected-react-router, syncs the router
state with Redux state. This allows Redux actions to manage the router and the router location and state to be accessible from Redux state.
Relevant FAQ Sections:
Redux is used for state management. Many React components in the Virtool client take state from a central Redux data store. Relevant sections of the Redux docs are:
In an effort to standardize and simplify redux logic virtool-ui makes use of redux toolkit for creating actions, reducers, and selectors. Important sections of the redux-toolkit docs are:
Redux is not well-suited to handling data asynchronously (eg. AJAX) by itself. There is Redux middleware available for dealing with this problem. We use Redux-Saga. Redux-Saga uses ES6 generators (read about them here). Relevant sections of the docs are:
Jest is the testing framework used for Virtool’s frontend. Relevant sections of the docs are:
There is also documentation describing basic testing of Virtool-ui here.
React Testing Library (RTL) is used in conjunction with Jest to create the best practices testing platform used for Virtool’s frontend. The utilities provided for testing page functionality focus on interacting with the page as a real user would. All tests written for Virtool using RTL render the full dom tree below the tested component. Relevant documentation for writing/reading tests:
The following readings cover topics that are important for having a complete understanding of the frontend’s tech stack, but detailed comprehension is not required for most frontend work. Reading through them is still recommended.
Webpack is used to turn the client source files into single bundled Javascript, CSS, and HTML assets for download by the browser. Relevant sections of the docs are:
Web applications typically communicate between the web browser and the server via HTTP requests and responses. Basic information can be found here:
SuperAgent is a client side AJAX HTTP request library that is used to request data from Virtool’s API.
Some aspects of the Virtool’s Redux data store are determined by server event-driven responses.
Enzyme is a testing utility that helps test, traverse, simulate events, and format output for React components. Enzyme is not currently expected to support future version of react, so tests should be updated from Enzyme to react testing library as they are modified.