1# UI development 2 3Some tips to get started with the UI development: 4 5## Development environment 6 7If you're looking for an IDE to write the TypeScript code, Visual Studio Code 8works well out of the box. WebStorm or IntelliJ Idea Ultimate (Community does 9not have JavaScript/TypeScript support) also work really well. The code is 10located in the `ui` folder. 11 12## Working with devserver 13 14See [Build Instructions](build-instructions.md) page for the details about 15starting the local development server. 16 17The devserver has a live reload functionality: once you make a change in 18TypeScript files, the resulting code will be recompiled and the page is going to 19reload automatically. By default, this logic uses a timeout in order to prevent 20successive reloads on rapid changes. This logic can be disabled via 21development-only "Rapid live reload" flag in the UI. Disabling it will reload 22the page earlier, at the cost of sometimes making multiple reloads in a row. 23 24## Mithril components 25 26Perfetto UI uses the [Mithril](https://mithril.js.org/) library for rendering 27the interface. The majority of the components in the codebase use 28[class components](https://mithril.js.org/components.html#classes). When Mithril 29is imported via `m` alias (as it is usually done in the codebase), the class 30component should extend `m.ClassComponent`, which has an optional generic 31parameter allowing the component to take inputs. The entry point of class 32components is a `view` method, returning a tree of virtual DOM elements to be 33rendered when the component is present on the page. 34 35## Component state 36 37Local state of components can reside in class members and accessed directly in 38methods via accessing `this`. State that is shared across different components 39is stored in the `State` class definition, and should be modified via 40implementing a new action in `src/common/actions.ts`. A new field added to 41`State` should be initialized in `src/common/empty_state.ts`. 42 43There are restrictions on whan can be used in the global state: plain JS objects 44are OK, but class instances are not (this limitation is due to state 45serialization: the state should be a valid JSON object). If storing class 46instances (like `Map` and `Set` data structures) is necessary, these can be 47stored in the `NonSerializableState` portion of the state, that is omitted from 48saving into JSON objects. 49