preboot

Control server-rendered page before client-side web app loads.

NOTE: In the process of doing some major refactoring to this library. It works and you can try it out, but just be aware that there will be major changes coming soon.

Key Features

1. Record and play back events
2. Respond immediately to events
3. Maintain focus even page is re-rendered
4. Buffer client-side re-rendering for smoother transition
5. Freeze page until bootstrap complete if user clicks button

Installation

This is a server-side library that generates client-side code. To use this library, you would first install it through npm:

npm install preboot

Then in your server-side code you would do something like this:

var preboot = require('preboot');
var prebootOptions = {};  // see options section below
var clientCode = preboot(prebootOptions);

You then inject clientCode into the HEAD section of your server-side template. We want preboot to ONLY start recording once the web app root exists in the DOM. We are still playing with the best way to do this (NOTE: we have tried onLoad and it does not work because the callback does not get executed quickly enough). For now, try putting the following preboot.start() call immediately after your web app root in your server side template:

<web-app-root-here>

</web-app-root-here>
<script>
    preboot.start();
</script>

Finally, once your client-side web app is "alive" it has to tell preboot that it is OK to replay events.

preboot.done();

Examples

Server-side integrations:

• Express
• Hapi
• Gulp

Client-side integrations:

• Angular 1.x
• Angular 2
• React
• Ember

Custom strategies:

• Listening for events
• Replaying events
• Freezing screen

Options

There are 5 different types of options that can be passed into preboot:

1. Selectors

• appRoot - A selector that can be used to find the root element for the view (default is 'body')

2. Strategies

These can either be string values if you want to use a pre-built strategy that comes with the framework or you can implement your own strategy and pass it in here as a function or object.

• listen - How preboot listens for events. See Listen Strategies below for more details.
• replay - How preboot replays captured events on client view. See Replay Strategies below for more details.
• freeze - How preboot freezes the screen when certain events occur. See Freeze Strategies below for more details.

3. Flags

All flags flase by default.

• focus - If true, will track and maintain focus even if page re-rendered
• buffer - If true, client will write to a hidden div which is only displayed after bootstrap complete
• keyPress - If true, all keystrokes in a textbox or textarea will be transferred from the server view to the client view
• buttonPress - If true, button presses will be recorded and the UI will freeze until bootstrap complete
• pauseOnTyping - If true, the preboot will not complete until user focus out of text input elements
• doNotReplay - If true, none of the events recorded will be replayed

4. Workflow Events

These are the names of global events that can affect the preboot workflow:

• pauseEvent - When this is raised, preboot will delay the play back of recorded events (default 'PrebootPause')
• resumeEvent - When this is raised, preboot will resume the playback of events (default 'PrebootResume')

5. Build Params

• uglify - You can always uglify the output of the client code stream yourself, but if you set this option to true preboot will do it for you.

Play

If you want to play with this library you can clone it locally:

git clone [email protected]:jeffwhelpley/preboot.git
cd preboot
gulp build
gulp play

Open your browser to http://localhost:3000. Make modifications to the options in build/task.build.js to see how preboot can be changed.

Contributors

We would welcome any and all contributions. Please see the Contributors Guide.