Inline props operations improvement #208
Conversation
…scaped data to the end of body. This makes markup more clean and simple and reduces required bandwith for highload applications.
|
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at [email protected]. Thanks! |
| @@ -25,7 +25,7 @@ Gem::Specification.new do |s| | |||
| s.add_development_dependency 'jbuilder' | |||
|
|
|||
| s.add_dependency 'execjs' | |||
| s.add_dependency 'coffee-script-source', '~>1.9' | |||
| s.add_dependency 'coffee-script-source', '~>1.8' | |||
There was a problem hiding this comment.
Its already been solved in master. Can you sync up.
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
| def add_react_props(props={}) | ||
| return if props.empty? | ||
| props_id = SecureRandom.base64 | ||
| content_for :react_props do |
There was a problem hiding this comment.
This will make the props non-cachable.
There was a problem hiding this comment.
Which one element of application stack will lose ability to cache this?
|
I think we should make this an opt-in behavior. Add a react config and based on it, allow inline vs script props. |
|
@vipulnsward Please checkout last CI run. I implemented this with tests but for some versions tests are failing due to issue i wrote about. |
Problem
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).
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: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.P.S.
We selected coffee-script-source at 1.8 because of this issue.