facebook/react — pull request #934 by syranide (2014-01-18 12:31:22+00:00)
Title: Shortened generated "data-reactid"

Previously generated IDs looked like:

`.r[0].[0].{x}[0]{y}.[17]`

That has now been shortened to the following:

`.0.0.$x:0:$y.g`

The older ID is 60% longer by comparison, and this new ID is still surprisingly readable in my opinion. It's also worth mentioning that I use `base-36` numerical indices instead to save further space. It is technically possible to avoid `$` for keys but it would affect some ID functions that would have to check for both for an additional separator over the default `. SEPARATOR`, and I believe that keys to be longer and less common anyway, so it would not be worth trade-off.

I don't have access to any reliable benchmark, but @vjeux mentioned that he could measure a performance difference when shortening `data-reactid`. Also, this should help measurably to reduce the size of server-generated HTML.

While testing on the React implementation of TodoMVC, with a few items, the entire body innerHTML is 7545bytes and the keys are a total of 3550bytes of it, a whole 47% of it is IDs and I'm not even including `data-reactid`. Using the shorter IDs, that same page is 6440bytes and the keys are 2406bytes. That is a difference of 1105bytes, so with the old IDs the HTML was 17% larger and the IDs themselves were 48% larger.

Now there are probably even more efficient ways of cutting down the "ID bloat", but this is a very straight-forward implementation that should suffice for now, without being a head-ache.

I should mention that `traverseAllChildren` now generate the IDs it returns with prefixed `.`, technically this is because the order of the keys is otherwise ruined. Practically, this means that the use of the separator is not as spread out as it was before. And this has no practical difference other than for tests on IDs, which are already affected.

```
raw gz Compared to master @ 8ca62bd022b535386da08b8d2ba59b951d3cfc2a
= = build/JSXTransformer.js
= = build/react-test.js
+250 +43 build/react-with-addons.js
+84 +7 build/react-with-addons.min.js
+250 +44 build/react.js
+84 +9 build/react.min.js
```