片手間にui componentsの使用感を試そうとしてやってみたことのメモ

js memo

片手間フロントエンドの人が、ui componentsの使用感を試すためにやろうとしたことのメモ。

はじめに

試そうとしたのは、reactのui components。以下２つ。

  • evergreen
  • tableau-ui

evergreen.segment.com github.com

テキトーにこの２つを選んだ。特にこだわりはない。まだこれら２つを使うと決めたわけではなく選考対象に乗せて使用感を試そうとしたくらいのステータス。

ちなみに選定基準は以下の２つ。

  • CSS書きたくない。
  • できればtagを書くだけでおしまいにしたい(web components的な)

そこそこ良い感じになっていれば良くて、細かな調整ができなくても良い。 まぁどれを選んだかは本題ではない。

使用感を試すために手元の環境で実際に触ってみたいというのがこの記事の趣旨。

触る方法

ちなみになぜ触りたいかと言うと、storybookなどを覗いて例を見るだけだと正直使用感のようなものがわからなかったから。

そして手元の環境で触ると言っても２通りくらい方法があるかもしれない。

  • ビルドを許容する方法 -- とりあえずビルドしても良いけれど。手間を少なめにしたい。
  • ビルドを許容しない方法 -- ビルドしたくない。絶対にビルドしたくない。

前者と後者の違いはnpmの環境を作るかどうか。別の言い方をするとビルドを許容するかどうか。

ビルドを許容する方法

ビルドを許容する方法はparcelを使うのが楽そうだった。

npmが存在する環境で以下の様な感じにやっていく。今回はevergreen-uiの方を試す。参考になりそうなページはparcelのreactのレシピ

$ npm init
$ npm install --save react react-dom
$ npm install --save evergreen-ui
$ npm install --save-dev parcel-bundler

package.jsonに以下を追加する。

  "scripts": {
    "start": "parcel serve index.html"
  },

あとはindex.html,index.css,index.jsをテキトウに書いて動かす(後述)

$ npm run start

> parcel serve index.html

Server running at http://localhost:1234 
...
✨  Built in 11.20s.

初回とはいえ10秒も掛かるのは毎回コレを動かすのは辛くなりそう。

表示された (hello world)。

f:id:podhmo:20191211183107p:plain

細々と思ったこと

  • 10秒も待ちたくない

watch (ファイル監視してのauto build) の機能がありそう。ただしこれはこれで現在の自分ののエディタ設定と相性が良くないかもしれない。自動でファイルを保存する設定と相性が良くないかもしれない。

あるいははもう少しparcelの中を覗いて小さくしたくなるかもしれない。

files

このとき作ったファイルのgist

https://gist.github.com/podhmo/92114a4fb7d486b7cd0035c41493eb51

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'


ReactDOM.render(
  <Button>I am using 🌲 Evergreen!</Button>,
  document.getElementById('root')
)

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Evergreen sandbox</title>
    <link rel="stylesheet" href="./index.css" type="text/css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

index.css

body {
    padding: 5rem;
}

Makefileからの実行

毎回package.jsonを作ってnpm startとやるのもめんどうなので同一パッケージ上でやる方法も少し調べた。npm installすると ./node_modules/.bin/parcel が存在するようになるのでコレを直接使う。

00:
    ./node_modules/.bin/parcel start $@index.html
01:
    ./node_modules/.bin/parcel start $@index.html
02:
    ./node_modules/.bin/parcel start $@index.html
03:
    ./node_modules/.bin/parcel start $@index.html

こんな感じに雑に書いてあげるとmake 00で00index.htmlを利用する画面を確認できる。

とりあえずで使用感を試すときには幅優先的に探索をしたいので１つ前の状態を共有して色々試せるという環境が欲しくなる。

ビルドを許容しない方法

今度はビルドを許容しない方法。正確に言えばビルドを許容しないと言うよりはブラウザで完結させたいというような意味。色々調べてみるとunpkgを使う方法が見つかった。

unpkg.com

unpkg.com

unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:

unpkg.com/:package@:version/:file

はい。

今度はindex.html一枚でやる方法を探してみる。evergreen-uiはちょっと例として適切ではなかったかもしれない。これを例にやろうとしたらめんどうだった。tableau-uiで試すことにする。

f:id:podhmo:20191211183154p:plain

具体的にどうめんどうだったかと言うと、jsのモジュールの種類としては以下の３つがあるらしいが、UMD形式のファイルがnpmリポジトリに直接入っているもの以外では手軽に扱うことができなそうだった。

UMDと言うと分かりづらいかもしれないけれど。全てのファイルを１つにまとめたもののこと。bundleされたもののこと。

詳しい話はこの辺りを参考にすると良さそう。

unpkg.com でtableau-uiを取り出そうとしてみる。

unpkgがいい感じに特定の形式のパスへとリダイレクトしてくれる模様。

$ http -b GET https://unpkg.com/@tableau/tableau-ui
Found. Redirecting to /@tableau/tableau-ui@2.2.1
$ http -b GET https://unpkg.com/@tableau/tableau-ui@2.2.1
Found. Redirecting to /@tableau/tableau-ui@2.2.1/./dist/tableau-ui.min.js
$ http -b GET https://unpkg.com/@tableau/tableau-ui@2.2.1/./dist/tableau-ui.min.js

ここで tableau-ui.min.js のものがUMD。

index.htmlだけでhello world

unpkg.comを使うことでindex.htmlだけでhello worldすることができそう（中身は後述）。１つのファイルだけで済む。

基本的には以下の通り。

  • babel-standaloneを読み込んで、text/babel以下に書いたscriptタグのjsxを変換できるようにする
  • umd形式のものを読み込んでテキトウにprefix付きで使う (e.g. const Button = TableauUI.Button;)

細々と思ったこと

細々と思ったのは以下のようなこと

  • unpkg.comが重たい場合はキャッシュしたいかもしれない。
  • es6モジュールの形式のものも上手にhtmlを書いてあげれば上手くできたりしないんだろうか。
  • (babel-standaloneの形式が古くなったりすることはないんだろうか？)

files

gist

https://gist.github.com/podhmo/f2d623b474b8518f28f16d25d4172168

00index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body {
          padding: 5rem;
      }
    </style>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@tableau/tableau-ui"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" defer data-presets="es2015,react">
const Button = TableauUI.Button;

function App(){
  return <div>
    <section><h2>enabled</h2>
    <Button>I am using tableau-ui</Button>
    <Button kind="primary">I am using tableau-ui</Button>
    <Button kind="outline">I am using tableau-ui</Button>
    <Button kind="destructive">I am using tableau-ui</Button>
    </section>
    <section><h2>disabled</h2>
    <Button disabled>I am using tableau-ui</Button>
    <Button disabled kind="primary">I am using tableau-ui</Button>
    <Button disabled kind="outline">I am using tableau-ui</Button>
    <Button disabled kind="destructive">I am using tableau-ui</Button>
    </section>
</div>
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
)
</script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

misc

unpkgを手元で動かすのはどうするんだと調べてみた所。unpkg-serverなるパッケージがあるらしい。

この辺りのissueで紹介されていた。

-Self hosting? #98

コレを使ってunpkg.comの実行をwrapできないかとおもってテキトーなproxyをgoで書いた。こういうことが手軽にできるのはgoの強みだなーとは思う。今回は標準ライブラリしかまだ使っていない。

https://gist.github.com/podhmo/24e0cdb4d3a1288f59ba826f6925a09b

ただしまだnpmのregistryへのcacheが上手くできていなさそうで中身を見る必要があるかもしれない。

まとめ

ちょっとしたui componentの使用感を確認してみようとして幾つかのreactのui componentを試してみた。試す方法として以下２つの方法があった

  • ビルドを許容する方法
  • ビルドを許容しない方法

ビルドを許容する方法では、もう少しビルドの時間を短くしたいとおもった。なので課題としてはparcelの中身を覗くことやwatchと現在のエディタ設定との折り合いを付ける事。

ビルドを許容しない方法では、UMD以外の形式でのui componentsを試す方法を調べたいとおもった。後はキャッシュしてもう少し早い感じでできないかを試したかった。もしくは手元でビルドする環境のdocker imageを作ってあげてそいつにproxyしてあげればどうにかなるのかなーなどとおもったりした。

それぞれのgistはこのあたり