Download the PHP package koriym/js-ui-skeleton without Composer

JS-UI Skeleton

Japanese

A Javascript UI application skeleton for PHP project

Instead of PHP's Template Engine, Javascript on the server side or the client side is responsible for creating the view. Server-side rendering is done with V8Js or Node.js. Redux React example code is included, but you can freely select the JS template engine or UI framework.

• Webpack 2 Moudle bundler
• Gulp Build system
• Babel JS transpiler
• Karma Test Runner
• Mocha Test framework
• Chai BDD / TDD assertion framework
• Enzyme JavaScript Testing utilities for React
• Eslint Linting utility for JS and JSX
• Phantomjs Scriptable Headless WebKit
• React UI framework
• React Hot Loader 3 + BrowserSync Live update
• Redux State container

Rendering

SSR only

Render the static page on the server side. Use JS's template engine and SSR-enabled view libraries such as ReatJs or VueJs.

SSR + CSR

Generate DOM on server side and convert it to HTML. The generated DOM is handed over to the browser JS. We use SSR-enabled view libraries like ReatJs and VueJs that can generate DOM.

CSR only

On the server side, just create JSON and generate DOM or HTML with CSR. Normally the non-DOM part of the document's root (such as the OGP <meta> tag) is rendered in PHP.

Prerequisites

• Node
• Yarn
• V8Js PHP extension (optional)

Demo

Build and run example redux code.

Installation

There are two ways to make the JS UI application an independent project and to include it in the existing PHP project.

New installation

When creating it as a package and using it from a PHP project add that package to dependence. Since you can manage versions by UI yourself, it is easy to do UI dependency management from PHP projects and parallel work.

Add to existing project

Add the ui folder andpackage.json to the existing project.

The directory structure looks like this.

UI Config

Edit ui/ui.config.js to specify web public folder and the output directory of the bundled JS file by webpack.

Entry File

Specify the entry file in ui/entry.js. The SSR file is given a _ssr postfix.

Run Config

Set the JS application configuration file in the ui/dev/config/ directory.

$app is the application name, corresponding to the filepublic/build/dist/{$app}.bundle.js. $initialState is the initial state of the JS application (in the case of the template engine, it is the value assigned to the template) $ssrMetas is the value passed in SSR only.

Save the setting file with an arbitrary name, You select it on the screen and execute it.

Create UI Application

Server side

In a JS renderer application, implement render function which takes two parameters (preloadedState and metas) and return html string. This example illustrates typical SSR Redux application.

Client side

Render with preloadedState which is supplied by SSR. Then insert generated DOM into document root DOM for continuation.

Run JS Application

Execute the UI application created with Javascript.

Execute the above command and select and execute the rendering method that appeared on the screen. You can also run server side code in the browser to make debugging easier.

Command

Run the PHP application

Start the PHP application on the PHP built-in server.

Run the PHP application with sync

Start the PHP application with hot module loader and browserSync.

To monitor phpmd and phpcs, edit the dev command of phpmd.xml andphpcs.xml installation package.json in the project root and change it fromdev to dev-qa.

Test

Monitor JS test execution by Karma +Mocha + Chai. Edit karma.conf.js to change the setting.

Lint

Run Eslint. Edit .eslintrc to change the setting.

SSR Utility library

Baracoa is a utility library for SSR. A V8 snapshot is supported to boost the performance.