phoenix-powerElmでの仮想DOMを体験する。

サンプルのToDoリストを作成してみます。

1
2
3
4
5
$ git clone https://github.com/evancz/elm-todomvc
$ cd elm-todomvc
$ npm i elm -g
$ elm-make Todo.elm --output elm.js
$ open index.html

速いです。あと、ソースであるTodo.elmを見る限りでは割りとシンプルです、400行。そして、出力されるelm.jsは8000行にも及びます。

./elm-stuffを使うことで再利用も簡単になると思われます。

次に、公式に載ってるelm-hedleyを使ってみます。

1
2
3
4
5
6
7
$ git clone https://github.com/Gizra/elm-hedley
# このバージョンでないと`elm package`が動かない
$ npm i -g elm@0.16.0 bower
$ elm package install -y
$ npm i && bower install
$ gulp build
$ gulp

結構すごい。デモの認証ページはgh-pages:repoで動いています。

https://github.com/Gizra/elm-hedley/tree/gh-pages

内容的には、GitHub Client ID, OAuth, Google Analytics, dev-hedley-elm.pantheonsite.io, live-hedley-elm.pantheonsite.ioとの通信などを確認。

Web APPなので適切なサービスを選んで、その上で設定を変更し起動させればよいと思われます。多分、hedley-serverDrupal7での構築が必要だと思われます。

ジェネレーターはgenerator-hedleyです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ npm i -g generatoa-hedley yo
$ brew update
$ brew tap homebrew/homebrew-php
$ brew tap homebrew/dupes
$ brew tap homebrew/versions
$ brew install homebrew/php/composer
$ composer global require drush/drush
$ export PATH="$HOME/.composer/vendor/bin:$PATH"
$ mkdir my-hedley-project
$ cd my-hedley-project
$ sudo yo hedley
$ cd client
$ grunt serve
$ chrome http://localhost:9000
or
$ mkdir my-hedley-project-2
$ cd my-hedley-project-2
$ yo hedley --skip-install --project-name=skeleton --github-repo=https://github.com/${Foo}/skeleton --db=skeleton --db-user=root --db-pass=root --drupal-url=http://localhost/skeleton/www
$ cd client
$ npm i && bower install
$ grunt serve

以下の記事が分かりやすいです。

http://www.gizra.com/content/yo-hedley/

公開する場合は、src/elm/Config.elmでWeb APPのURLを変更してください。その上で、認証ページをgh-pagesに上げる場合は、gulp buildして./serve以下をpushします。

また、GitHub Client IDApp > OAuthから作成、取得します。