Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koriym/koriym.baracoa
A JavaScript server side rendering interface for PHP
https://github.com/koriym/koriym.baracoa
html javascript performance-boost php redux snapshot ssr template-engine v8js
Last synced: 11 days ago
JSON representation
A JavaScript server side rendering interface for PHP
- Host: GitHub
- URL: https://github.com/koriym/koriym.baracoa
- Owner: koriym
- License: mit
- Created: 2017-01-31T04:47:18.000Z (almost 8 years ago)
- Default Branch: 1.x
- Last Pushed: 2017-05-10T23:07:17.000Z (over 7 years ago)
- Last Synced: 2024-10-11T08:14:17.479Z (28 days ago)
- Topics: html, javascript, performance-boost, php, redux, snapshot, ssr, template-engine, v8js
- Language: PHP
- Homepage:
- Size: 793 KB
- Stars: 12
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Baracoa
[](https://scrutinizer-ci.com/g/koriym/Koriym.Baracoa/?branch=1.x)
[](https://scrutinizer-ci.com/g/koriym/Koriym.Baracoa/?branch=1.x)
[](https://travis-ci.org/koriym/Koriym.Baracoa)
## A JavaScript server side rendering interface
**Bracoa** provides a simple interface for JavaScript server side rendering in PHP.
## Prerequisites
* php7.1
* [V8Js](http://php.net/v8js)
## Installation
```
composer require koriym/baracoa
```
## Basic
In a JS renderer application, implement `render` function which takes parameter(s) and return html string.
```javascript
const render = state => (
`Hello ${state.name}`
)
```
Call the `render()` method with JS app name and values to assign to redner.
```php
$baracoa = new Baracoa($jsDir, new ExceptionHandler());
$html = $baracoa->render('min', ['name' => 'World']);
echo $html; // Hello World
```
In this example, you need to place `min.bundle.js` JS file in `$jsDir ` directory.
Every page needs own JS view application which is bundled single file by bundler tool like [webpack](https://webpack.github.io/).
Typical entry file is like following code.
```
import render from './render';
global.render = render;
```
In next section we see the example of Redux with React applicaiton example.
## Redux React
### The Server Side
Inject an initial component HTML and initial state into a template to be rendered on the client side.
To pass along the state, we add a `` tag that will attach `preloadedState` to `window.__PRELOADED_STATE__`.
The preloadedState will then be available on the client side by accessing `window.__PRELOADED_STATE__`.
We also include our bundle file for the client-side application via a `<script>` tag.
This is whatever output your bundling tool provides for your client entry point.
### render.js
```javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import escape from 'escape-html';
import serialize from 'serialize-javascript';
import App from '../containers/App';
import configureStore from '../store/configureStore';
const render = (preloadedState, metas) => {
const store = configureStore(preloadedState);
const root = renderToString(
<Provider store={store}>
<App />
</Provider>,
);
return `<!doctype html>
<html>
<head>
<title>${escape(metas.title)}</title>
</head>
<body>
<div id="root">${root}</div>
<script>
window.__PRELOADED_STATE__ = ${serialize(preloadedState)}