status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve Hyperlinked docs by adding something on Timing panel

This commit is contained in:
Mike Thompson 2018-01-20 16:50:59 +11:00
parent b48f5c0ba8
commit 3a7b5b9c0e
2 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -7,21 +7,23 @@ application, allowing you to better understand it and debug it.
**Note** [the latest version 0.1.14](https://github.com/Day8/re-frame-trace/releases/tag/0.1.14) ALSO requires the latest version of re-frame itself - `v0.10.3-alpha2`.
### What It Can Do
### Helpful How?
Here's how it might be helpful to you:
Four ways:
1. Help you to learn `re-frame`. If you are new to `re-frame`, it will assist you to
understand the data flows involved (the dominoes).
1. Help you to learn `re-frame`. If you are new to `re-frame`, looking at
the raw "Traces" it will assist you to understand the data flows involved
(the dominoes).
2. Help you to explore and learn an unfamiliar `re-frame` codebase.
When I click on this "X" button, it shows me what event is `dispatch`-ed
and in what namespace the associated event handler is registered. And,
"oh look, that's interesting - four subscriptions recalculated". Etc.
3. Help you with debugging. You see an x-Ray of your app's functioning.
3. Help you with debugging. You see an x-ray of your app's functioning.
In particular, it will assist you to write and debug
event handlers, which is useful because they hold most of the logic in your `re-frame` apps.
event handlers, which is useful because they hold most of the logic
in your `re-frame` apps.
4. Helps you to find performance problems and/or detect where there is
unnecessary computation occurring.
unnecessary computation occurring.
> This list is aspirational. `re-frame-trace` remains a WIP. We're getting there.

44
docs/HyperlinkedInformation/UnderstandingTiming.md Normal file
View File

@ -0,0 +1,44 @@
This document explains key aspects of the "Timing" tab.
## First, The Warnings
There are two issues with the numbers you are looking at in the "Timing" tab:
1. Accurately timing something in the browser is almost
a fool's errand. One moment it takes 1ms and the next it
takes 10ms, and you’ll never know why. Noisy.
So, do not ever believe one set of timings numbers.
In the future, we'd like to add a 'Run It Again' button, which
you can click a few times to see if you get stable numbers.
Perhaps you'll beat us to it, and create a PR for this
feature?
2. Don't freak out about any apparent slowness, yet.
You're currently running a dev build, right, not the
production build.
And I'm guessing you're also running a dev build
of React.
Also, using `re-frame-trace` will slow things
down too, what with all that creating and analysing of trace.
So, run the production version of your app first before
deciding you have a performance problem. Something that
takes 100ms in dev might take 20ms in prod.
This Timing panel is not really about absolute numbers so
much as the relative time taken to do the "parts" of an Epoch.
And, even then, be careful of these relative numbers because
of point 1 (above).
## Know Your Epoch Timeline
You'll understand the contents of the Timings tab better if you
understand how an event is processed over time. The following is from
the re-frame project itself.
<img src="https://raw.githubusercontent.com/Day8/re-frame/master/images/epoch.png">