Wrapping HTML responses with the shell and layout components #524

i-like-robots · 2019-07-31T14:14:48Z

I'm opening this issue to discuss how we should provide a package capable of neatly integrating the shell and layout components into our existing applications in order to "wrap" their HTML output with the shared page bootstrapping, metadata, core branding, and UI.

As initially discussed in #98 "preset" packages like this can be used to prevent applications implementing lots of divergent custom code.

Our current approach

The v0.1.0 n-ui to Page Kit migration guide instructs developers to add a callback argument to Express's response.render() method in order to capture the HTML output so that it can be used for a second render step. This is not too dissimilar to the the existing Handlebars layout mechanism it replaces.

The approach is "intentionally hacky" in order to expose how the parts fits together and it is relatively simple. However, it means Express arguments need to be passed around in addition to configuration data for the shell and layout components which may be confusing and tricky to mentally parse.

// server/controllers/lib/page-kit-wrapper.js
const React = require('react');
const ReactDOM = require('react-dom/server');
const { Shell } = require('@financial-times/dotcom-ui-shell');
const { Layout } = require('@financial-times/dotcom-ui-layout');

module.exports = ({ response, next, shellProps, layoutProps }) => {
	return (error, html) => {
		if (error) {
			return next(error);
		}

		const document = React.createElement(
			Shell,
			{ ...shellProps },
			React.createElement(Layout, { ...layoutProps, contents: html })
		);

		response.send('<!DOCTYPE html>' + ReactDOM.renderToStaticMarkup(document));
	};
};

// server/controllers/page.js
const pageKitWrapper = require('./lib/page-kit-wrapper.js');

module.exports = (request, response, next) => {
	const templateData = {};
	
	const shellProps = {
		pageTitle: content.title,
	};

	const layoutProps = {
		navigationData: response.locals.navigation,
		headerOptions: { ...response.locals.anon }
	};

	const pageKitOptions = { request, response, next, shellProps, layoutProps };
	
	response.render('video.html', templateData, pageKitWrapper(pageKitOptions));
};

The text was updated successfully, but these errors were encountered:

i-like-robots · 2019-07-31T14:21:59Z

My initial thoughts on this are that I would like where possible for UI components to not know anything about the request/response objects in order to be generic and reusable with any framework or tool.

IMO Express view engines are not especially useful, they are really responsible for three things:

Find that the requested "view" file exists (the location of which is based upon some Express settings)
Merge app.locals, response.locals, and the template data together
Capture any rendering errors and call the fall-through function (next())

In a JSX world the first feature is not very useful because we can always use Node's built in module require() function. The second feature is a one liner now that we have Object.assign() and the spread operator. The third feature is quite useful but trivial to implement.

Given this I suspect it may be simpler to avoid the view engine paradigm and callbacks altogether and do something more generic along these lines:

// server/controllers/page.js
const handlebars = require('../lib/handlebars');
const pageKitPreset = require('@financial-times/dotcom-ui-preset');

module.exports = (request, response, next) => {
	const templateData = {};

	const shellProps = {
		pageTitle: content.title,
	};

	const layoutProps = {
		navigationData: response.locals.navigation,
		headerOptions: { ...response.locals.anon }
	};

	try {
		const html = handlebars.render('views/page.html', {
			...app.locals,
			...response.locals,
			...templateData
		});

		response.send(pageKitPreset({ shellProps, layoutProps, html }));
	} catch (error) {
		next(error);
	}
};

i-like-robots added Help wanted Extra attention is needed Question Further information is requested Server-side integration labels Jul 31, 2019

i-like-robots mentioned this issue Aug 1, 2019

Presets for plug-and-play functionality #98

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrapping HTML responses with the shell and layout components #524

Wrapping HTML responses with the shell and layout components #524

i-like-robots commented Jul 31, 2019

i-like-robots commented Jul 31, 2019 •

edited

Loading

Wrapping HTML responses with the shell and layout components #524

Wrapping HTML responses with the shell and layout components #524

Comments

i-like-robots commented Jul 31, 2019

Our current approach

i-like-robots commented Jul 31, 2019 • edited Loading

i-like-robots commented Jul 31, 2019 •

edited

Loading