Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.

Single Page Application with Tailor

Jump to bottom
Vignesh Shanmugam edited this page Nov 16, 2016 · 7 revisions

An example Single Page Application with tailor is present here.

Tailor expects two things in general for any application to work.

  1. The Final JavaScript bundle should be in AMD(Asynchronous module definition) or UMD(Universal Module Definition).
  2. The Fragment endpoint delivering the content must send the JS/CSS bundles in the response Link Headers.
response.writeHead(200, {
    'Link': `<${fragmentUrl}/bundle.css>; rel="stylesheet",` +
            `<${fragmentUrl}/bundle.js>; rel="fragment-script"`,
});

Example Template

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        // inline CSS
    </style>
</head>
<body>
   <fragment src="http://header.domain.com"></fragment> // Team Header
   <fragment primary src="spa.domain.com"></fragment> // Your Single Page application is hosted here (Some other team)
   <fragment async src="footer.domain.com"></fragment> // Team Footer
</body>
</html>

Bundling

If your application is using Webpack to bundle the final JavaScript, then just change the libraryTarget to amd.

 const conf = {
  entry: 'index.js'
  output: {
    filename: 'bundle.js',
    libraryTarget: 'amd' // 'umd' also works
  },
 }

Code Splitting

If the SPA takes advantage of Webpack's code splitting technique using require.ensure to lazy load views, then don't forget to update the publicPath setting since the URL is not handled by the application anymore.

 const conf = {
  entry: 'index.js'
  output: {
    filename: 'bundle.js',
    libraryTarget: 'amd',
    publicPath: 'http://cdn.com' // 'spa.domain.com' in case its hosted in same server. 
  },
 }

Note: Send only the initial bundle.js in the Link Headers to tailor.

Pros

  • Single page application with cross functional teams.
  • Framework agnostic model (The application can use multiple frameworks on a Single page.. But Please don't. You will be shipping crazy amount of JS)
Clone this wiki locally