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