At the moment, the outer HTML structure of the page comes from the index.jade template giving users no control over content outside the #application div. That is obviously not practical. The app developer needs to be able to control the contents of the head element and dynamically change the title element text.
We debated a bunch of options of how to allow this in the simplest possible way. Ideally, we could let the developer build the full DOM using React, but unfortunately that's not possible, because not all HTML results in DOM elements (e.g. HTML comments) and therefore isn't renderable by React. At the same time, we don't want to force a template language on our users or support multiple options for templates. Finally, we want full control over the body contents, because the way the app build is linked, the state is serialised and the application is started may change in the future and we don't want to constrain ourselves by making that process a public interface.
In the end we came up with the following solution: The developer provides a plain HTML file with an empty body element and title element. When rendering server-side, Reflex will read that file and fill in the body, then send the result to the browser.
The route components will get a few more optional APIs to specify the page title and the name of the HTML skeleton file.
This should be flexible and simple enough to support all the necessary use-cases while not complicating matters too much for such a relatively small issue.
charypar
commented
9 years ago
At the moment, the outer HTML structure of the page comes from the
index.jadetemplate giving users no control over content outside the#applicationdiv. That is obviously not practical. The app developer needs to be able to control the contents of theheadelement and dynamically change thetitleelement text.We debated a bunch of options of how to allow this in the simplest possible way. Ideally, we could let the developer build the full DOM using React, but unfortunately that's not possible, because not all HTML results in DOM elements (e.g. HTML comments) and therefore isn't renderable by React. At the same time, we don't want to force a template language on our users or support multiple options for templates. Finally, we want full control over the
bodycontents, because the way the app build is linked, the state is serialised and the application is started may change in the future and we don't want to constrain ourselves by making that process a public interface.In the end we came up with the following solution: The developer provides a plain HTML file with an empty
bodyelement andtitleelement. When rendering server-side, Reflex will read that file and fill in the body, then send the result to the browser.The route components will get a few more optional APIs to specify the page title and the name of the HTML skeleton file.
This should be flexible and simple enough to support all the necessary use-cases while not complicating matters too much for such a relatively small issue.