読者です 読者をやめる 読者になる 読者になる

あいつの日誌β

あいつの日誌です。

material-ui を試してみた

Javascript React.js

あらすじ

最近 Google が Material design なるものを発表して material design light という cssjavascript を公開しました

https://github.com/google/material-design-lite

そして、これと React.js 使ってアプリ使いたい気分になった今日この頃なのですが、すでにそういうのがありました。

http://material-ui.com

という事で試してみました。

% mkdir ~/awesome-material-ui && cd $_
% npm init --force 
% npm install browserify babelify watchify material-ui --save-dev

ディレクトリを用意

% mkdir -p src/components build
% touch src/index.jsx src/components/main.jsx
% touch build/index.html build/bundle.js build/style.css

material-ui の example をそのまま使用する

% curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/app/app.jsx > src/index.jsx
% curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/app/components/main.jsx > src/components/main.jsx
% curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/www/index.html > build/index.html
% curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/www/main.css > build/main.css

react の components を browserify する

% $(npm bin)/browserify -t babelify src/index.jsx -o build/app.js

動作確認

% cd build
% python -m SimpleHTTPServer 8000

package.json を編集

以下の箇所を修正

  "scripts": {
    "build": "browserify --debug -t babelify src/index.jsx > static/app.js",
    "build-dist": "NODE_ENV=production browserify -t babelify src/index.jsx | uglifyjs -m > dist/app.js",
    "watch": "watchify --debug -t babelify src/index.jsx -o static/app.js -v" 
  },  

動作確認

% npm run build

Grunt と Gulp はいつまで争うのか?

個人的な見解だと Grunt の記法だと設定が長々となるので Gulp が pipe 記法はじめてスッキリ書けますよ、という話だと思うのですが...

Grunt がそのインターフェースを採用する(はず)だし、私は Grunt を coffee で書くので困らないです。どっちでもいいので早くどっちかが主流になってほしいです。

そんなわけで最近はどちらにも関与しないように package.json に記述して npm run xxx するようにしています。

Reactify は使わない流れらしい

Deprecating JSTransform and react-tools

ということらしいです。

http://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html