2 |
3 | # React Native Performance Monitor
4 |
5 | 
6 |
7 | This project lets you see a realtime graph of render times within your React Native app. The purpose is for you to be able to create experiments (i.e. change markup and see how it affects render times).
8 |
9 |
10 | # Installation
11 |
12 | ```
13 | npm i react-native-performance-monitor --save
14 | npx react-native-performance-monitor get
15 | ```
16 |
17 |
18 | # Usage
19 | ```
20 | import withPerformanceMonitor from 'react-native-performance-monitor/provider';
21 | export default withPerformanceMonitor({WrappedComponent: YourScreen, id: 'Screen Name'});
22 | ```
23 |
24 | # An example
25 |
26 | Set your baseline at http://127.0.0.1:8125/ by clicking remount. Pause the recorder, and adjust your component with what you think will improve performance.
27 |
28 |
29 | Here's a before and after with this approach
30 |
31 | Baseline
32 | ```
33 | 
48 |
49 | # Connecting to a real device
50 |
51 | In order to connect to a real device you will need to set the IP of your computer, for example:
52 |
53 | ```
54 | export default withPerformanceMonitor({ WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10'});
55 | ```
56 |
57 | By default the server is listening on port 8125 for event updates and 8126 for websocket.
58 | If you need to configure the port, because you are tunneling your request or similar, and or disable the Websocket communication, you can do it like this:
59 |
60 | ```
61 | export default withPerformanceMonitor({WrappedComponent: AwesomeChat, id: 'AwesomeChat', ip: '192.168.1.10', events: undefined, showLogs: undefined, port: 80, enableWS: false});
62 | ```
63 |
64 | # How it works
65 |
66 | The overall implementation is quite straight forward and simply involved passing the onRenderCallback values via a websocket server to finally render them in a fancy graph.
67 |
68 | There are 3 main components:
69 |
70 | - A [React Native component](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/lib/provider.js) that sends profile data to a server via REST and listens to messages (remount and forceUpdate) to trigger renders.
71 | - A [Web socket server](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/lib/src/server.js) responsible for passing messages between the graph and the react native component
72 | - A [Web application](https://github.com/BulletTrainHQ/react-native-performance-monitor/blob/master/components/App.js) that receives websocket values and renders them to a graph
73 |
74 | The following diagram is a brief explanation of the data flow:
75 |
76 | 
77 |
78 | ## Contributing
79 |
80 | Please read [CONTRIBUTING.md](https://gist.github.com/kyle-ssg/c36a03aebe492e45cbd3eefb21cb0486) for details on our code of conduct, and the process for submitting pull requests to us.
81 |
82 | ## Useful links
83 |
84 | [Website](https://www.flagsmith.com/)
85 |
86 | [Documentation](https://docs.flagsmith.com/)
87 |
88 |
--------------------------------------------------------------------------------
/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FusionCharts from 'fusioncharts';
3 | import Charts from 'fusioncharts/fusioncharts.charts';
4 | import TimeSeries from 'fusioncharts/fusioncharts.overlappedcolumn2d';
5 | import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
6 | import ReactFC from 'react-fusioncharts/lib/ReactFC';
7 | import _ from 'lodash';
8 | import parseInput from './parse-input';
9 | import Row from './Row';
10 |
11 | document.addEventListener('click', function(e) {
12 | if (document.activeElement.toString() == '[object HTMLButtonElement]') {
13 | document.activeElement.blur();
14 | }
15 | });
16 |
17 |
18 | ReactFC.fcRoot(FusionCharts, Charts, TimeSeries, FusionTheme);
19 | const colors = [
20 | '#5d62b5', '#29c3be', '#f2726f',
21 | '#4fb54f', '#c3bf39', '#f26394',
22 | '#5d62b5', '#29c3be', '#f2726f',
23 | '#4fb54f', '#c3bf39', '#f26394',
24 | '#5d62b5', '#29c3be', '#f2726f',
25 | '#4fb54f', '#c3bf39', '#f26394',
26 | '#5d62b5', '#29c3be', '#f2726f',
27 | '#4fb54f', '#c3bf39', '#f26394',
28 | ];
29 |
30 | function ConvertToCSV(objArray) {
31 | var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
32 | var str = '';
33 |
34 | for (var i = 0; i < array.length; i++) {
35 | var line = '';
36 | for (var index in array[i]) {
37 | if (line != '') line += ','
38 |
39 | line += array[i][index];
40 | }
41 |
42 | str += line + '\r\n';
43 | }
44 |
45 | return str;
46 | }
47 |
48 | const toCSV = function(state) {
49 | const datas = state.dataSource.dataset;
50 | let maxNum = 0;
51 | let maxIndex = -1;
52 |
53 | let arr = [];
54 | let rootObj = {};
55 |
56 | _.each(datas,(d, i)=>{
57 | rootObj[i] = d.seriesname;
58 | if (d.data.length > maxNum) {
59 | maxNum = d.data.length;
60 | maxIndex = i;
61 | }
62 | })
63 | if (maxIndex === -1) return
64 | arr.push(rootObj)
65 | _.each(datas[maxIndex].data, (v, i)=>{ // row
66 | let obj = {};
67 | _.each(datas,(data)=>{ // column
68 | obj[data.seriesname] = data.data[i] && data.data[i].value || "";
69 | })
70 | arr.push(obj);
71 | })
72 | const csv = "data:text/csv;charset=utf-8," + ConvertToCSV(arr);
73 | var encodedUri = encodeURI(csv);
74 | var link = document.createElement("a");
75 | link.setAttribute("href", encodedUri);
76 | link.setAttribute("download", "performance_tests.csv");
77 | document.body.appendChild(link); // Required for FF
78 | link.click(); // This will download the data file named "my_data.csv".
79 | }
80 |
81 | const defaultState = {
82 | dataSource: {
83 | chart: {
84 | caption: 'React Native Render Times',
85 | subcaption: 'Performance experiments',
86 | yaxisname: 'Render time (ms)',
87 | drawcrossline: '1',
88 | theme: 'fusion',
89 | showvalues: '0',
90 | 'palettecolors': colors.map(c => c.replace('#', '')).join(','),
91 | },
92 | categories: [
93 | {
94 | category: [],
95 | },
96 | ],
97 | dataset: [
98 | {
99 | seriesname: 'Baseline test',
100 | data: [],
101 | },
102 | ],
103 | },
104 | };
105 | export default class extends React.Component {
106 | constructor(props) {
107 | super(props);
108 | this.state = {
109 | ..._.cloneDeep(defaultState),
110 | type: 'overlappedcolumn2d',
111 | };
112 | }
113 |
114 | componentDidMount() {
115 | this.socket = new WebSocket('ws://localhost:8126');
116 | this.socket.onopen = function(event) {
117 | console.log('Connected');
118 | };
119 |
120 | this.socket.onmessage = (event) => {
121 | try {
122 | if (!this.state.paused) {
123 | this.addItem(JSON.parse(event.data).value);
124 | }
125 | } catch (e) {
126 | }
127 | };
128 | }
129 |
130 | sendRemount = () => {
131 | this.socket.send('remount');
132 | };
133 |
134 | sendForceUpdate = () => {
135 | this.socket.send('forceUpdate');
136 | };
137 |
138 | addItem = (value = Math.random()) => {
139 | if (!this.state.dataSource.dataset.length) {
140 | this.addSeries();
141 | }
142 | if (this.state.dataSource.categories[0].category.length === this.state.dataSource.dataset[this.state.dataSource.dataset.length - 1].data.length) {
143 | this.addCategory();
144 | }
145 | this.state.dataSource.dataset[this.state.dataSource.dataset.length - 1].data.push({
146 | value,
147 | });
148 | const averages = [];
149 | _.each(this.state.dataSource.dataset, (dataSet) => {
150 | let total = 0;
151 | _.each(dataSet.data, (item) => {
152 | total += item.value;
153 | });
154 | let avg = total / dataSet.data.length;
155 | if (isNaN(avg)) {
156 | avg = 0;
157 | }
158 | averages.push(avg);
159 | });
160 | this.state.averages = averages;
161 | this.state.dataSource.trendlines = averages.map((v, i) => {
162 | return {
163 | 'line': [{
164 | 'color': colors[i],
165 | 'thickness': '4',
166 | startValue: v,
167 | 'alpha': '50',
168 | }],
169 | };
170 | }).concat([{
171 | line: [{
172 | 'color': '#ff0000',
173 | 'thickness': '2',
174 | startValue: 16.67,
175 | 'alpha': '100',
176 | }],
177 | }]);
178 | this.forceUpdate();
179 | };
180 |
181 | addCategory = () => {
182 | this.state.dataSource.categories[0].category.push({
183 | label: `Test${this.state.dataSource.categories[0].category.length + 1}`,
184 | });
185 | };
186 |
187 | addSeries = () => {
188 | this.state.dataSource.dataset.push({
189 | seriesname: `Variant ${this.state.dataSource.dataset.length + 1}`,
190 | data: [],
191 | });
192 | this.forceUpdate();
193 | };
194 |
195 | setVariantName = (i, e) => {
196 | this.state.dataSource.dataset[i].seriesname = parseInput(e);
197 | this.forceUpdate();
198 | };
199 |
200 | removeSeries = (i) => {
201 | this.state.dataSource.dataset.splice(i, 1);
202 | this.forceUpdate();
203 | };
204 |
205 | clear = () => {
206 | this.setState(_.cloneDeep(defaultState));
207 | };
208 |
209 | toggle = () => this.setState({ hideMenu: !this.state.hideMenu });
210 |
211 | pauseResume = () => this.setState({ paused: !this.state.paused });
212 |
213 |
214 | repeat = (cb, times) => {
215 | const rep = function(e, currentTimes = 0) {
216 | if (currentTimes < times) {
217 | cb();
218 | setTimeout(() => {
219 | rep(null, currentTimes + 1);
220 | }, 200);
221 | }
222 | };
223 | return rep;
224 | };
225 |
226 | download = () => {
227 | toCSV(this.state);
228 | }
229 |
230 | render() {
231 | const datasets = this.state.dataSource.dataset;
232 | return (
233 |
235 |
323 |
236 |
306 |
237 | {datasets && datasets.map((d, i) => (
238 |
264 |
239 |
240 | this.setVariantName(i, e)} type="text"
242 | value={d.seriesname}
243 | />
244 |
245 | {(this.state.averages && this.state.averages[i] ? `~${this.state.averages[i]}ms` : "-")}
246 |
247 |
250 |
251 |
252 | ))}
253 |
254 |
257 |
258 |
259 |
262 |
263 |
265 |
270 |
275 |
280 |
281 |
282 |
287 |
292 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
307 |
322 |
308 |
309 | 
310 |
311 |
312 |
310 |
311 |
313 |
321 | 
2 |
3 | This project lets you see a realtime graph of render times within your React Native app. The purpose is for you to be able to create experiments (i.e. change markup and see how it affects render times).
4 |
5 |
6 | # Installation
7 |
8 | ```
9 | npm i react-native-performance-monitor --save
10 | npx react-native-performance-monitor get
11 | ```
12 |
13 |
14 | # Usage
15 | ```
16 | import withPerformanceMonitor from 'react-native-performance-monitor/provider';
17 | export default withPerformanceMonitor({WrappedComponent: YourScreen, id: 'Screen Name'});
18 | ```
19 |
20 | # An example
21 |
22 | Set your baseline at http://127.0.0.1:8125/ by clicking remount. Pause the recorder, and adjust your component with what you think will improve perormance.
23 |
24 |
25 | Here's a before and after with this approach
26 |
27 | Baseline
28 | ```
29 | 
44 |
--------------------------------------------------------------------------------
/lib/bin/run:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | require('@oclif/command').run()
4 | .then(require('@oclif/command/flush'))
5 | .catch(require('@oclif/errors/handle'))
6 |
--------------------------------------------------------------------------------
/lib/bin/run.cmd:
--------------------------------------------------------------------------------
1 | @echo off
2 |
3 | node "%~dp0\run" %*
4 |
--------------------------------------------------------------------------------
/lib/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-performance-monitor",
3 | "description": "Monitor the performance of your React Native components in realtime",
4 | "version": "2.0.0",
5 | "author": "kyle @kyle-ssg",
6 | "bin": {
7 | "react-native-performance-monitor": "./bin/run"
8 | },
9 | "dependencies": {
10 | "@oclif/command": "1",
11 | "@oclif/config": "1",
12 | "@oclif/plugin-help": "2",
13 | "cli-ux": "5.4.2",
14 | "hoist-non-react-statics": "^3.3.2",
15 | "http-server": "0.12.1",
16 | "lodash": "4.17.19",
17 | "socket.io": "2.4.0",
18 | "ws": "^7.2.3"
19 | },
20 | "devDependencies": {
21 | "@oclif/dev-cli": "1",
22 | "eslint": "5.13",
23 | "eslint-config-oclif": "3.1",
24 | "globby": "10"
25 | },
26 | "engines": {
27 | "node": ">=8.0.0"
28 | },
29 | "files": [
30 | "/bin",
31 | "/npm-shrinkwrap.json",
32 | "/oclif.manifest.json",
33 | "/src",
34 | "/provider.js",
35 | "/out"
36 | ],
37 | "keywords": [
38 | "react-native",
39 | "react",
40 | "performance"
41 | ],
42 | "license": "MIT",
43 | "main": "src/index.js",
44 | "oclif": {
45 | "commands": "./src/commands",
46 | "bin": "react-native-performance-monitor",
47 | "plugins": [
48 | "@oclif/plugin-help"
49 | ]
50 | },
51 | "repository": {
52 | "type": "git",
53 | "url": "git@github.com:BulletTrainHQ/react-native-performance-monitor.git"
54 | },
55 | "scripts": {
56 | "dev": "node start-server.js",
57 | "postpack": "rm -f oclif.manifest.json",
58 | "posttest": "eslint .",
59 | "prepack": "oclif-dev manifest && oclif-dev readme",
60 | "test": "echo NO TESTS",
61 | "version": "oclif-dev readme && git add README.md"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/lib/provider.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-extraneous-dependencies
2 | import React, { Component } from 'react';
3 | import hoistNonReactStatics from 'hoist-non-react-statics';
4 |
5 | const Profiler = React.Profiler;
6 | export default ({ WrappedComponent, id, ip = '127.0.0.1', events = ['mount', 'update'], showLogs = false, port = 8125, enableWS = true }) => {
7 | const remote = `http://${ip}:${port}/value`;
8 | const log = (message) => {
9 | if (showLogs) {
10 | console.log(message);
11 | }
12 | };
13 | class HOC extends Component {
14 | static displayName = 'withPerformance';
15 |
16 | constructor(props) {
17 | super(props);
18 | this.state = {};
19 | }
20 |
21 | componentDidMount() {
22 | if (!enableWS) return;
23 | this.socket = new WebSocket(`ws://${ip}:8126`);
24 | this.socket.onopen = function () {
25 | log('RNPM: connected');
26 | };
27 |
28 | this.socket.onmessage = (event) => {
29 | switch (event.data) {
30 | case 'remount': {
31 | log('RNPM: remount');
32 | this.setState({ unmount: true }, () => {
33 | setTimeout(() => this.setState({ unmount: false }), 200);
34 | });
35 | break;
36 | }
37 | case 'forceUpdate': {
38 | log('RNPM: force update');
39 | this.forceUpdate();
40 | break;
41 | }
42 | default:
43 | break;
44 | }
45 | };
46 | }
47 |
48 | componentWillUnmount() {
49 | this.socket && this.socket.close();
50 | }
51 |
52 | logMeasurement = async (id, phase, actualDuration) => {
53 | if (!events.includes(phase)) {
54 | return;
55 | }
56 | if (actualDuration < 0.1) {
57 | return;
58 | }
59 |
60 | if (remote) {
61 | fetch(remote, {
62 | method: 'POST',
63 | headers: {
64 | 'Content-Type': 'application/json',
65 | },
66 | body: JSON.stringify({ value: actualDuration }),
67 | });
68 | }
69 | }
70 |
71 | render() {
72 | return this.state.unmount ? null : (
73 | ![](\"/static/menu.svg\"/)
\n