Skip to content

Inline props operations improvement #306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from

Conversation

panasyuk
Copy link

Problem

  1. Size of inline props placed to the root component tag as attributes may be too huge to:
    1.1 Process in browser devtools. So that browser stucks trying to render markup for preview.
    1.2 Deliver it to user due to bandwidth (for highload apps).
  2. Inline props placed to the attributes of tag are looking freaky because of its size and HTML safety.

So props we want to place:

{"foo": "bar"}

are looking like this:

{"foo":"bar"}

Solution

Moving inline props to the <script type="text/json">{"foo": "bar"}</script> will:

  1. Reduce the size of data passed to the page in order to render component at the initial state. It's also useful because it reduces bandwidth utilization (even if we are using GZIP).
  2. Allow browser inspector to operate on DOM faster.
  3. Make markup looking more cleaner.

Placing inline props at the end of body speeds up DOM rendering and allows Turbolinks to load this data along with other markup on each request.

How it works

The process of placing the components to the markup in Rails is still the same except of developer should add <%= render_react_props %> at the end of <body> tag.

@rmosolgo
Copy link
Member

Hi thanks for updating this, I'm sorry it's sat cold for quite some time!

I hope to add an extension point for the view helper much like we have for transforming JSX & server rendering. Then you could define some class with the inspected behavior and inject it during configuration. That allows us to have lots of different options without packing too much behavior into one class or method.

Thanks again for your work on identifying this problem & proposing a solution, I'll follow up soon!

@rmosolgo
Copy link
Member

Hoping to support more customization of the view helper with #346 !

That way you could distribute a custom helper & renderer in a gem and hook them up with a railtie.

@panasyuk
Copy link
Author

I would like present a GEM for this PR:
https://github.com/panasyuk/react-rails-view_helper_implementation

@rmosolgo
Copy link
Member

Nice! Glad that worked out.

@rmosolgo rmosolgo closed this Jan 22, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants