Twitters json page data bootstrap technique
Bootstrapping data onto the html page which is returned is a clever way to save one or more round trips to the server and show the user the complete page sooner.
Bootstrap recommends this approach, see their FAQ.
Twitter have a neat way to bootstrap json data into an html file.
Uses 2 scripts as follows. Avoids creating any global variables. Notice the json data is within the script tag and is accessed using getElementById().innerHTML. Clean. I like it.
I made a minor change to invoke as an immediate function:
<script type="text/plain" id="init_data" class="json-data">{name: "denis"}</script>
<script>
(function() {
var jsonText = document.getElementById('init_data').innerHTML,
initData = JSON.parse(jsonText);
// initData is now an object
// use the json data to bootstrap your page e.g. backbone model
// avoiding a server call
}());
</script>
Twitter is bootstrapping with a non trivial amount of json data, especially their require data.
They even have some css inlined in their html as well as javascript code in the head.
Update 9/20/13:
Looks like twitter are now bootstrapping data in a hidden <input> elements instead of script tags as they used to (see above). This may be because the <script> tag is parsed and they may not want that to incur that parsing cost unnecessarily..perhaps.
i.e.
<input type="hidden" id="init-data" class="json-data" value="{"profileHoversEnabled":false,"dmTopNavEnabled":false,"baseFoucClass":"swift-loading","htmlFoucClassNames":"swift-
Bootstrap recommends this approach, see their FAQ.
Twitter have a neat way to bootstrap json data into an html file.
Uses 2 scripts as follows. Avoids creating any global variables. Notice the json data is within the script tag and is accessed using getElementById().innerHTML. Clean. I like it.
I made a minor change to invoke as an immediate function:
<script type="text/plain" id="init_data" class="json-data">{name: "denis"}</script>
<script>
(function() {
var jsonText = document.getElementById('init_data').innerHTML,
initData = JSON.parse(jsonText);
// initData is now an object
// use the json data to bootstrap your page e.g. backbone model
// avoiding a server call
}());
</script>
Twitter is bootstrapping with a non trivial amount of json data, especially their require data.
They even have some css inlined in their html as well as javascript code in the head.
Update 9/20/13:
Looks like twitter are now bootstrapping data in a hidden <input> elements instead of script tags as they used to (see above). This may be because the <script> tag is parsed and they may not want that to incur that parsing cost unnecessarily..perhaps.
i.e.
<input type="hidden" id="init-data" class="json-data" value="{"profileHoversEnabled":false,"dmTopNavEnabled":false,"baseFoucClass":"swift-loading","htmlFoucClassNames":"swift-
Comments
Post a Comment