Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/angular/preboot
Coordinate transfer of state from server to client view for isomorphic/universal JavaScript web applications
https://github.com/angular/preboot
Last synced: 3 months ago
JSON representation
Coordinate transfer of state from server to client view for isomorphic/universal JavaScript web applications
- Host: GitHub
- URL: https://github.com/angular/preboot
- Owner: angular
- License: mit
- Archived: true
- Created: 2016-07-07T18:04:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-21T16:20:43.000Z (over 1 year ago)
- Last Synced: 2024-09-25T20:33:00.697Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.91 MB
- Stars: 382
- Watchers: 22
- Forks: 51
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# preboot
**NOTE: This package is no longer maintained and is unnecessary with the recent versions of Angular.**
The purpose of this library is to help manage the transition of state (i.e. events, focus, data) from a server-generated web view to a client-generated web view. This library works with any front end JavaScript framework (i.e. React, Vue, Ember, etc.), but does have a few extra convenience modules for Angular apps.
The key features of preboot include:
1. Record and play back events
1. Respond immediately to certain events in the server view
1. Maintain focus even page is re-rendered
1. Buffer client-side re-rendering for smoother transition
1. Freeze page until bootstrap complete for certain events (ex. form submission)
In essence, this library is all about managing the user experience from the time from when
a server view is visible until the client view takes over control of the page.
## Installation
cd into your app root and run the following command:
```
npm i preboot --save
```
The following sections covers the three different configurations of preboot:
- Angular Configuration
- Non-Angular Server Configuration
- Non-Angular Browser Configuration
#### Angular Configuration
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PrebootModule } from 'preboot';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule.withServerTransition({ appId: 'foo' }),
PrebootModule.withConfig({ appRoot: 'app-root' })
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
The key part here for preboot is to include `PrebootModule.withConfig({ appRoot: 'app-root' })` where the `appRoot` is the selector(s) to find the root of your application. The options you can pass into `withConfig()` are in the [PrebootOptions](#PrebootOptions) section below. In most cases, however, you will only need to specify the `appRoot`.
#### Non-Angular Server Configuration
```ts
import { getInlineDefinition, getInlineInvocation } from 'preboot';
const prebootOptions = {}; // see PrebootRecordOptions section below
const inlineCodeDefinition = getInlineDefinition(prebootOptions);
const inlineCodeInvocation = getInlineInvocation();
// now insert `inlineCodeDefinition` into a `` tag in `<head>` and
// an `inlineCodeInvocation` copy just after the opening tag of each app root
```
```html
<html>
<head>
<script><%= inlineCodeDefinition %>
<%= inlineCodeInvocation %>
App1 header
content
<%= inlineCodeInvocation %>
App2 header
content