{"id":16193203,"url":"https://github.com/koriym/koriym.jsuiskeleton","last_synced_at":"2025-03-19T04:30:36.698Z","repository":{"id":57008576,"uuid":"80795434","full_name":"koriym/Koriym.JsUiSkeleton","owner":"koriym","description":"A  Javascript UI application skeleton for PHP project","archived":false,"fork":false,"pushed_at":"2017-10-24T10:22:14.000Z","size":109,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"1.x","last_synced_at":"2025-02-28T15:17:57.445Z","etag":null,"topics":["boilerplate","php","reactjs","redux","ssr","template-engine","templating","v8js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koriym.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-03T03:58:47.000Z","updated_at":"2020-02-20T03:01:38.000Z","dependencies_parsed_at":"2022-08-21T13:10:46.057Z","dependency_job_id":null,"html_url":"https://github.com/koriym/Koriym.JsUiSkeleton","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koriym%2FKoriym.JsUiSkeleton","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koriym%2FKoriym.JsUiSkeleton/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koriym%2FKoriym.JsUiSkeleton/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koriym%2FKoriym.JsUiSkeleton/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koriym","download_url":"https://codeload.github.com/koriym/Koriym.JsUiSkeleton/tar.gz/refs/heads/1.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243968445,"owners_count":20376397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","php","reactjs","redux","ssr","template-engine","templating","v8js"],"created_at":"2024-10-10T08:14:20.532Z","updated_at":"2025-03-19T04:30:36.344Z","avatar_url":"https://github.com/koriym.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript UIスケルトン\n\n[English](README.md)\n\nPHPのテンプレートエンジンの代わりに、サーバーサイドまたはクライアントサイドのJavascriptがビューをレンダリングします。サーバーサイドのレンダリングは`V8Js`または`Node.js`で実行されます。\n\nRedux+Reactのサンプルコードが含まれますが、JSテンプレートエンジンまたはビューライブラリは選択可能です。\n\n\n * [Webpack 2](https://webpack.github.io/) Moudle bundler\n * [Gulp](http://gulpjs.com/) Build system\n * [Babel](https://babeljs.io/) JS transpiler\n * [Karma](https://karma-runner.github.io/0.13/index.html) Test Runner\n * [Mocha](http://mochajs.org/) Test framework\n * [Chai](http://chaijs.com/) BDD / TDD assertion framework\n * [Enzyme](https://github.com/airbnb/enzyme) JavaScript Testing utilities for React\n * [Eslint](http://eslint.org/) Linting utility for JS and JSX\n * [Phantomjs](http://phantomjs.org/) Scriptable Headless WebKit\n * [React](https://facebook.github.io/react/) UI framework\n * [React Hot Loader 3](http://gaearon.github.io/react-hot-loader/) + [BrowserSync](https://browsersync.io/) Live update\n * [Redux](http://redux.js.org/) State container\n\n## 用語\n\n * SSR サーバーサイドレンダリング \n * CSR クライアントサイドレンダリング \n\n## レンダリングシナリオ\n\n### SSRのみ\n\nサーバーサイドで静的ページをレンダリングします。JSのテンプレートエンジンやReatJsやVue.jsのようなSSR可能なビューライブラリを使用します。\n\n### SSR + CSR\n\nサーバーサイドででDOMを生成しHTMLに変換します。生成されたDOMはブラウザのJSに引き継がれます。ReatJsやVue.jsのようなSSR可能でDOMを生成可能なビューライブラリを使用します。\n\n### CSRのみ\n\nサーバーサイドではJSONを作成するだけでCSRでDOMまたはHTMLを生成します。通常ドキュメントルートのDOM以外の部分はPHPでレンダリングします。\n\n## 前提条件\n\n * [Node.js](https://nodejs.org/en/)\n * [Yarn](https://yarnpkg.com/)\n * [V8Js PHP extension](https://github.com/phpv8/v8js)  (オプション)\n \n\n## デモ\n\nRedux-ReactでHelloWorldを実行するデモです。[Node.js](http://nodejs.jp/nodejs.org_ja/docs/v0.10/)と[Yarn](https://yarnpkg.com/lang/en/docs/install/)をインストールして実行してみましょう。\n\n```javascript\ncomposer create-project koriym/js-ui-skeleton -n -s dev js-ui\ncd js-ui\nyarn install\nyarn run ui\n```\n\n## インストール\n\nJS UIアプリケーションを独立したプロジェクトにする方法と、既存のPHPのプロジェクトに含む方法があります。\n\n### 新規インストール\n\n```\ncomposer create-project koriym/js-ui-skeleton -n -s dev MyVendor.MyUi\ncd MyVendor.MyUi\nyarn install\n```\n\nパッケージとして作成し、PHPプロジェクトから利用する場合はそのパッケージを依存に加えます。\nUI独自でバージョンを管理することができるので、PHPプロジェクトからのUI依存管理と並行作業が容易です。\n\n### 既存のプロジェクトに追加\n\n`ui`フォルダと`package.json`を既存のプロジェクトに加えます。\n\n```\ncd path/to/project\ncomposer require koriym/js-ui-skeleton\ncp vendor/koriym/js-ui-skeleton/ui .\ncp vendor/koriym/js-ui-skeleton/package.json .\nyarn install\n```\n\nディレクトリ構造はこのようになります。\n\n```\n├── src             # php\n├── tests           # php\n├── package.json    # JS\n├── node_modules    # JS\n├── ui              # JS\n│   ├── .babelrc\n│   ├── .eslintrc\n│   ├── entry.js\n│   ├── gulpfile.js\n│   ├── karma.conf.js\n│   ├── src\n│   ├── test\n│   ├── ui.config.js\n│   └── webpack.config.js\n└── vendor\n```\n\n## フォルダ設定\n\n`ui/ui.config.js`を編集してpublicフォルダとwebpackでバンドルされるファイルの出力先を指定します。\n\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n  public: path.join(__dirname, '../public'),\n  build: path.join(__dirname, '../public/dist')\n};\n\n```\n\n## エントリーファイル設定\n\n`ui/entry.js`にエントリーファイルを指定します。SSRのファイルには`_ssr`ポストフィックスをつけます。(hot module loaderを無効にします)\n\n```javascript\nmodule.exports = {\n  index_ssr: 'src/page/index/server',\n  index: 'src/page/index/client',\n};\n```\n\n## 開発用UIアプリの実行設定\n\n`ui/dev/config/`フォルダに、JSアプリケーションの設定ファイルを設置します。\n\n```php\n\u003c?php\n$app = 'index';\n$initialState = [\n    'hello' =\u003e['name' =\u003e 'World']\n];\n$ssrMetas = [\n    'title' =\u003e'page-title'\n];\n\nreturn [$app, $initialState, $ssrMetas];\n```\n`$app`はアプリケーション名で、`public/build/dist/{$app}.bundle.js`のファイルに対応します。\n`$initialState`はJSアプリケーションの初期状態（テンプレートエンジンの場合はテンプレートにアサインする値）で\n`$ssrMetas`はSSRだけの時に渡される値です。\n\n任意の名前で設定ファイルを保存して、画面で選択して実行します。\n\n## webルートパス設定\n\n`ui/ui.config/js`でweb公開ルートパス`public`とJSのビルド先を指定します。\n\n```javascript\nconst path = require('path');\nmodule.exports = {\n  public: path.join(__dirname, '../public'),\n  build: path.join(__dirname, '../public/dist')\n};\n```\n\n## UIアプリケーションの作成\n\n### サーバーサイド\n\nJSアプリケーションはパラメーターを２つ（`preloadedState`と`metas`）受け取りhtml文字列を返す関数を作成して公開します。以下のコードはReduxの典型的なSSRアプリケーションの例です。\n\n```javascript\n// server.js\nimport render from './render';\n\nglobal.render = render;\n```\n\n```javascript\n// render.js\nconst render = (preloadedState, metas) =\u003e {\n  return\n  `\u003chtml\u003e\n    \u003chead\u003e\n      \u003ctitle\u003e${escape(metas.title)}\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cscript\u003ewindow.__PRELOADED_STATE__ = ${serialize(preloadedState)}\u003c/script\u003e\n      \u003cscript src=\"/build/index.bundle.js\"\u003e\u003c/script\u003e\n    \u003cbody\u003e\n  \u003c/html\u003e`\n};\nexport default render;\n```\n\n### クライアントサイド\n\nサーバーサイドでレンダリングから渡された`preloadedState`を用いてDOMを生成し、ドキュメントのルートDOMにします。クラアイントはサーバーサイドのDOMを引き継ぐことができます。\n\n```\n// client.js\nconst preloadedState = window.__PRELOADED_STATE__;\nconst store = configureStore(preloadedState);\n\nrender(\n  \u003cProvider store={store}\u003e\n    \u003cApp /\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('root'),\n);\n```\n\n## JSアプリケーションの実行\n\nJavascriptで作成したUIアプリケーションを実行します。\n\n```javascript\nyarn run ui\n```\n上記コマンドを実行して画面に現れたレンダリング方法を選んで実行します。\nデバックを容易にするためサーバーサイドコードをブラウザで実行することもできます。\n\n# コマンド\n\n## PHPアプリケーションの実行\n\n`public`で指定したPHPアプリケーションをPHPビルトインサーバーで実行します。\n\n```\nyarn start\n```\n\n## PHPアプリケーションの開発実行\n\nhot module loaderとbrowserSyncを使って実行します。\n\n```\nyarn run dev\n```\n\nphpmdとphpcsの監視を行う場合にはプロジェクトルートに`phpmd.xml`と`phpcs.xml`設置`package.json`のdevコマンドを編集し`dev`から`dev-qa`に変更します。\n\n```\n\"dev\": \"cross-env NODE_ENV=development gulp --gulpfile ui/gulpfile.js dev-qa\",\n```\n\n## テスト\n\n```\nyarn test      \n```\n\nJSのテストを`Karma`+`Mocha`+`Chai`で実行監視します。設定を変更するには`karma.conf.js`を編集します。\n\n## リント\n\n```\nyarn run lint\n```\n\n[Eslint](http://eslint.org/)を実行します。設定を変更するには`.eslintrc`を編集します。\n\n# SSRユーティリティ\n\n[Baracoa](https://github.com/koriym/Koriym.Baracoa)はSSRのためのユーティリティライブラリで、V8を高速に実行するためのスナップショットの機能をサポートします。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoriym%2Fkoriym.jsuiskeleton","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoriym%2Fkoriym.jsuiskeleton","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoriym%2Fkoriym.jsuiskeleton/lists"}