More than 3 years have passed since last update.

#NervesJP Advent Calendar 2021

Third-party JS packages on Phoenix 1.6 (2021/12/12)

Last updated at 2021-12-12Posted at 2021-12-11

2021/12/12(日)の回です。
前の日は、水力発電所のオープンソース化で有名なkochi.exで活動されている@nishiuchikazumaさんによる『Nervesにユーザ名／パスワードでSSHログインする』でした。
とりあえずNervesに触れてみましょう！　的なハンズオンなどでファームウェアを配るときに活用するとよいのではないかとおもいました。

はじめに

Elixirを楽しんでいますか
Nervesを楽しんでいますか
Phoenixを楽しんでいますか

#NervesJPのカレンダーですが、Phoenixの話題を書きます。

ぶっちゃけNerves関係ないけど，こんなんやってみたよ！ (ElixirかIoTくらいは絡んでいればおけ

なのでです、きっと。

もっと言うと、Nervesで作ったアプリケーションが会話する先として、Phoenixを使うことがあるとおもいます。

たとえば

なプロジェクトの感じです。
@takasehideki 先生に使っていただきました。

そうです！
大事なことを言い忘れてしまった！このデモの仕込みは @torifukukaiou さんにめっちゃ助けてもらいました．awesome!! あざまっす！！ #NervesJP #DSF2021 https://t.co/IlbfpPu8dI
— Hideki Takase (@takasehideki) November 4, 2021

はPhoenix 1.5で作りました。

Chart.js等を追加したくなることありますよね、これからもきっと。
Phoenix 1.6になってからどうやって追加すればいいのかちょっと迷った(ほんのちょっとね、迷走、瞑想をしました)ので、私が掴んだ情報を披露しておきます。

Esbuild Hexドキュメントを読むと書いてあるよ!!!

Phoenix 1.6

気づいたことをつれづれなるままに

1.6からはmix phx.new hell_worldこれでLiveViewつきです。
逆に俺にはLiveViewなぞいらぬという御仁のために、--no-live Optionが追加されています。

mix setup(セラップ)してからのmix phx.serverして、Visit: http://localhost:4000できるようになるまでが、Phoenix 1.5の時と比べるとメチャクチャ速いです。
その正体はEsbuild Hexです。
OwnerはElixir作者であるJosé Valimさんで、安心です。

名前がいっしょだから紛らわしいですが結局のところ、esbuild -- An extremely fast JavaScript bundlerが使われています。
詳しいことを知りたい方は、@koga1020 さんが、『Elixirのesbuildラッパーは何をしているのか』にて解説してくださっていますので、こちらの記事をご参照ください¹。

(https://esbuild.github.io/)

これです。
まさにこの通りです。
Phoenix 1.5では、webpackerが使われていました。
Phoenix 1.6では、esbuild -- An extremely fast JavaScript bundlerが使われています。

3rd PartyのJS Packageを追加する

3rd PartyのJS Packageを追加したいとおもいました。
フロントエンドに詳しい方ならなんてことはないのでしょうが、Phoenix 1.5と1.6では雰囲気が全然違いまして、どうやって追加するのだろう？　私は途方に暮れそうになりました。

1.5

├── assets
│   ├── .babelrc
│   ├── css
│   │   ├── app.css
│   │   └── phoenix.css
│   ├── js
│   │   └── app.js
│   ├── package.json
│   ├── static
│   │   ├── favicon.ico
│   │   ├── images
│   │   │   └── phoenix.png
│   │   └── robots.txt
│   └── webpack.config.js

1.6

├── assets
│   ├── css
│   │   ├── app.css
│   │   └── phoenix.css
│   ├── js
│   │   └── app.js
│   └── vendor
│       └── topbar.js

なんか少ない...
package.jsonがない...

どうすりゃいいのさ？　って悩んでいるFRIENDもいたみたい。

こたえ

に書いてあります。
２つ方法があります。

assets/vendorにJSを置きましょう
assetsフォルダ配下で、npm install chart.js --save

その他公式ドキュメントとしては、

に、esbuildではないビルドシステムを使う方法が書かれています。

また

のブログはわかりやすかったです。
Esbuild Hexは外しちゃって、esbuild -- An extremely fast JavaScript bundlerをJSのまま使うとでも申しましょうか、**esbuild + NPM combo(The best of both worlds)**と紹介されています。
実を言うと、私は先にこちらに飛びついて、そのあと https://github.com/phoenixframework/esbuild#third-party-js-packages をみつけました

Thanks!

`assets`フォルダ配下で、`npm install chart.js --save` 実践

をやってみます。

準備

を参考にインストールを済ましておいてください。
npm install ...ができるようにしておいてください。

さっそくつくるぜよ

$ mix phx.new hello --no-ecto
$ cd hello
$ mix setup
$ cd assets
$ npm install chart.js --save
$ cd ..

npm install chart.js --saveで、

assets/package.json
assets/package-lock.json

が作られます。

assets/package.json

{
  "dependencies": {
    "chart.js": "^3.6.0"
  }
}

とりあえずここと同じものを表示してみます。

$\huge{はい！\ できました}$

説明が面倒になってきたし、雰囲気でJS -> Elixirの置き換えを私はしているだけなのでソースコードを全部載っけておきます。
なんとなく感じてください！！！

ドキュメントは

です。

lib/hello_web/live/chart_live.ex

defmodule HelloWeb.ChartLive do
  use HelloWeb, :live_view

  def mount(_params, _session, socket) do
    labels = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
    ]
    data = %{
      labels: labels,
      datasets: [%{
        label: "My First dataset",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    }
    config = %{type: "line",
              data: data,
              options: %{}}

    socket = assign(socket, :config, config)
    {:ok, socket}
  end

  def render(assigns) do
    ~H"""
    <div>
      <canvas id="myChart"
              phx-hook="Chart"
              data-chart-data={ Jason.encode!(@config) }>
      </canvas>
    </div>
    """
  end
end

lib/hello_web/router.ex

   scope "/", HelloWeb do
     pipe_through :browser
 
     get "/", PageController, :index
+    live "/chart", ChartLive
   end

assets/js/hooks.js

import Chart from 'chart.js/auto';

let Hooks = {};

Hooks.Chart = {
  mounted() {
    const config = JSON.parse(this.el.dataset.chartData)
    this.chart = new Chart(this.el, config)
  }
}

export default Hooks;

assets/js/app.js

 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+import Hooks from "./hooks";
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

assets/package.json

{
  "dependencies": {
    "chart.js": "^3.6.0"
  }
}

Gigalixir

ついでに。
知っていることを書いておきます。
Gigalixirにデプロイするときは、assets/package.jsonに書き足しておく必要があるものがあります。

に書いてあります。

If you’re using Phoenix v1.6, it uses esbuild to compile your assets but Gigalixir images come with npm, so we will configure npm directly to deploy our assets. Add a assets/package.json file if you don’t have any with the following:

assets/package.json

{
  "scripts": {
    "deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild"
  },
  "dependencies": {
    "chart.js": "^3.6.0"
  }
}

Wrapping up

Enjoy Elixir
Enjoy Nerves
Enjoy Phoenix

人間五十年下天の内をくらぶれば、夢幻のごとくなり。一度生を得て滅せぬ者のあるべきか

時は今あめが下知る五月かな

露と落ち露と消えにしわが身かななにはのことも夢のまた夢

親思ふ心にまさる親心今日のおとづれ何と聞くらん

おまけ

Elixirを始めてみよう！　とおもった、あなたに参考情報(クリスマス🎄プレゼント)を贈ります。
思い立ったが吉日です!!!

オススメの書籍

Webアプリケーションを楽しむなら

Phoenix

IoTを楽しむなら

Nerves

AIを楽しむなら

Nx + Livebook

コミュニティ

elixir.jp Slack workspaceに参加してみてください
- マヂ、やさしい人ばっかりのコミュニティ
- あなたの困ったをきっと解決してくれるでしょう
NervesJP Slack workspaceでは、NervesやIoTが好きな愉快なfolksたちがあなたの訪れを歓迎します
たくさんのコミュニティがあります
- @kn339264 さん作の素敵な資料をご紹介します
- Elixirコミュニティの歩き方〜国内オンライン編〜