包简介

Redux React Serevr-Side Rendering using V8Js module for BEAR.Sunday

README 文档

README

BEAR.ReactJsModule is a redux-react-ssr which renders Redux React UI on the server-side support module for BEAR.Sunday.

Prerequisites

php7
V8Js

Install

Composer Install

composer require bear/reactjs-module

Module Install

$distDir = dirname(__DIR__, 2) . '/var/www/dist';
$this->install(new ReduxModule($distDir, 'ssr_app');

In this canse, you need to place ssr-app.bundle.js at $baseDir directory.

Redux UI Skeleton Install

Copy skeleton directory to your BEAR.Sunday project root.

cp -r vendor/bear/reactjs-module/ui-skeleton/redux/ui .
cp vendor/bear/reactjs-module/ui-skeleton/redux/package.json .

Install dependencies.

yarn install

Build ui application.

yarn run build

Three js bundled file is produced.

react.bundle.js React library bundled code
{app-name}.bundle.js Application bundled code for client side
{ssr-app-name}.bundle.js Application bundled code for server side

You can include JavaScript client code (CSS, DOM ..) for {app}.bundle.js only. See more detail at the example.

ResourceOjbect

To inject SSR renderer, Annotate @Inject with @Named annotation to setRenderer setter method with {ssr-app-name} application name.

use BEAR\Resource\RenderInterface;
use BEAR\Resource\ResourceObject;
use Ray\Di\Di\Inject;
use Ray\Di\Di\Named;

class Greeting extends ResourceObject
{
    /**
     * @Inject
     * @Named("ssr_app")
     */
    public function setRenderer(RenderInterface $renderer)
    {
        $this->renderer = $renderer;
    }

    public function onGet()
    {
        $this->body = [
            'title' => 'Greeting',
            'hello' => ['message' => 'konichiwa']
        ];

        return $this;
    }
}

Template

We need php template code. For exapmle, Index.php page resource needs Index.html.php template file. You can get the value of body by escape() or raw().

<?php

/* @var $ssr \BEAR\ReactJsModule\Ssr */
$view = $ssr->render(['hello']);

return <<<"EOT"
<!doctype>
<html>
<head>
    <title>{$ssr->escape('title')}</title>
</head>
<body>
<div id="root">{$view->markup}</div>
<script src="build/react.bundle.js"></script>
<script src="build/app.bundle.js"></script>
<script>{$view->js}</script>
</body>
</html>
EOT;

Note: app.bundle.js is client javascript code. The page is rendered fully even {$markup} is removed by client JS code.

VoidV8Module

It is possible to install VoidV8Module to run non V8Js environment for clien side rendering only.

$this->install(new FakeV8Module(new ReduxModule($distDir, 'ssr_hello')));

bear/reactjs-module 适用场景与选型建议

bear/reactjs-module 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 148 次下载、GitHub Stars 达 5，最近一次更新时间为 2016 年 05 月 29 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 bear/reactjs-module 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 bear/reactjs-module 我们能提供哪些服务？

定制开发 / 二次开发

基于 bear/reactjs-module 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

bear/reactjs-module

包简介