Frontend development

Javascript

Tausi uses ES6 modules. The file tausi/js/app.js is the top-level entrypoint, used to import all other scripts. Tausi uses Webpack to import dependencies and compile the ES6 modules into a single javascript file.

Javascript which must be compiled is stored in tausi/js since it doesn’t need to be sent directly to the user. Javascript libraries sent to the user, such as jQuery and the compiled Tausi app, are stored in tausi/static/js.

Code style

Tausi uses ESLint to enforce the Standard JS code formatting style, with the modification to require semicolons.

Helpers

Tausi has some helper code that makes certain common functions simpler.

data-confirm

Forms, links and buttons that have a data-confirm="message" attribute will ask the user to confirm that the operation should continue when clicked or submitted. If the user says no, the action is cancelled.

data-component

When a page loads, Tausi looks for HTML elements that have a data-component="MyComponent" attribute. It searches for the corresponding ES6 class from the tausi/js/components/ directory and, if present, creates it, passing the HTML element as the first parameter.

This provides a simple mechanism for attaching certain Javascript behaviour to an HTML element.

To create a new component called FunComponent:

  1. create a new file tausi/js/components/fun.js and in it declare a class export class FunComponent { ... }

  2. edit tausi/js/components/index.js to export the new class: export { FunComponent } from './fun';

  3. use the component in HTML: <div data-component="FunComponent">...</div>

CSRF

Tausi always sends a CSRF token in AJAX POST requests, taken from the <meta name="csrf-token"> tag.

Making changes to Javascript

If you make changes to the Javascript, you must install dependencies and run webpack to recompile the application. This will updated js/app-prod.js, which is the file used in production.

First, download and install Node.js. Use version 14. (We recommend using nvm for Node version management.)

Some of the node dependencies are private Laws.Africa packages hosted on GitHub. You must configure npm to authenticate with GitHub by creating a ~/.npmrc file and include an authentication token, as described in the GitHub documentation.

Then install dependencies:

npm install

Now run webpack. Webpack automatically watches for changes to files and re-compiles when necessary. To stop webpack, use ctrl-c.

npx webpack -w

Once you have made your changes, you need to commit both the changed files and the new static/js/app-prod.js file.