voluntas/grommet.rst

## grommet.rst

      
    Raw
  

              grommet.rst
            
          
    Grommet コトハジメ


日時
2016-09-11

作
@voluntas

バージョン
0.0.0

URL
https://voluntas.githu.io/


突っ込みは Twitter @voluntas まで。
概要

HP エンタープライズが開発している React.js の UI フレームワーク。エンタープライズ向けといっているだけあってかっこよさよりシンプルさが優先されている。コンポーネントはかなりの種類ある。
開発理由に UI の統一というのがあるらしい。HPE の製品ごとにいろいろなデザインの UI があってわかりにくいということらしい。
シンプルなのと、管理画面向けに作られているフレームワークということで、手を出してみることにした。
参考


What is Grommet? | Grommet Blog
Grommet
grommet/grommet: The most advanced UX framework for enterprise applications.
VimeoGrommet
米HP、業務アプリケーション向けのUXフレームワーク「Grommet」、オープンソースで公開 － Publickey

準備

インストールしていなければ -g で:
$ sudo npm install -g webpack \
                      webpack-dev-server
適当にまずは作ってしまう:
$ npm init -y
依存最低限:
$ npm install --save grommet \
                     react \
                     react-dom
開発のみ:
$ npm install --save-dev babel-preset-react \
                         babel-loader \
                         babel-core \
                         babel-preset-es2015 \
                         css-loader \
                         node-sass \
                         sass-loader \
                         style-loader \
                         file-loader \
                         webpack
webpack.config.js

Grommet は CSS などが自由にカスタマイズできるらしくその辺りに手を入れる必要がある。 設定ファイルがやけに大きくなるが、これが必要最低限なはず。
var webpack = require('webpack');

module.exports = {
    devtool: "eval",

    entry: {
        js: "./src/index.js",
        html: "./index.html",
    },

    output: {
      path: "./dist",
      filename: "./bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.scss', '.css']
    },
    plugins: [
            new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ],
    module: {
      loaders: [
          {
              test: /\.html$/,
              loader: "file?name=[name].[ext]"
          },
          {
              test: /\.js$/,
              loader: "babel-loader",
              exclude: /node_modules/,
              query: {
                  presets: ["es2015", "react"]
              }
          },
          {
              test: /\.scss$/,
              loader: 'style!css!sass?outputStyle=compressed'
          }
      ]
    },
    sassLoader: {
      includePaths: [
        './node_modules',
      ]
    }
};
最小限構成

packge_json:
{
  "name": "grommet-dojo",
  "dependencies": {
    "grommet": "^0.6.11",
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.9.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2"
  }
}
フォルダ構成

- grommet-dojo
  - node_modules/
  - index.html
  - package.json
  - webpack.config.js
  - src/
    - components/
      - Content.js
    - index.js
index.html

<html>
    <head>
        <title>Grommet Dojo</title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="content">Content</div>
        <script src="bundle.js" charset="utf-8"></script>
    </body>
</html>
index.js


一番上で CSS をインポートしてる

import 'grommet/scss/vanilla/index';

import React from 'react';
import ReactDOM from 'react-dom';

// http://grommet.github.io/docs/app
import App from 'grommet/components/App';
// http://grommet.github.io/docs/header
import Header from 'grommet/components/Header';
// http://grommet.github.io/docs/title
import Title from 'grommet/components/Title';

import Content from './components/Content.js';

ReactDOM.render(
    <App inline={true}>
        <Header>
            <h3>Hello, Grommet!</h3>
            <Title>
                Hello, Grommet!
            </Title>
        </Header>
        <Content />
    </App>,
    document.getElementById('content')
);
components/Content.js

import React from 'react';

// http://grommet.github.io/docs/button
import Button from 'grommet/components/Button';


export default class App extends React.Component {
    render() {
        return (
            // ボタンを追加する
            <Button label="Hello, Grommet." onClick={true} />
        );
    }
}
動かす

$ webpack-dev-server --progress --color
http://localhost:8080/webpack-dev-server/
パッケージング

$ webpack --optimize-minimize
Hash: 22d85663653bf3b6d348
Version: webpack 1.13.2
Time: 18148ms
      Asset       Size  Chunks             Chunk Names
 index.html  229 bytes          [emitted]
./bundle.js    1.69 MB    0, 1  [emitted]  html, js
    + 330 hidden modules