Bun & Remix & Dragonfly を試してみる【NeuTube制作記】
Boson開発環境
OS Endeavour OS (Hyprlandデスクトップ)
エディター VSCode (Microsoft純正)
Bun
速いと噂のJSランタイム。Node.jsより5倍近く速いらしい。
実際に本番環境で5倍も差がつくのかは謎
DenoとBunで迷ったが、自前でサーバー立てたいのでDeployを使わないことを考えBunにした。
Remix
動的ページに強く、Next.jsより速いフレームワーク
これもまた実際に本番環境で差がつくのかは謎
フロントエンドとバックエンドの両方行うことができる
最初は静的ページに強いAstroを採用しようか考えていたが、動的要素多めになりそうだからこれを採用
TailwindCSS
クラスをいじって当てるタイプのCSSフレームワーク
Twindの方が軽いので使いたかったが、どうやらCSS in JSはRemixの方で対応してないらしいので仕方なく。
Dragonfly
あの高速なRedisより25倍速いらしいデータベース
例に洩れず実際に25倍速いかどうかは謎
Prisma
みんな使ってるORM。
バックエンド系は不慣れでよくわからないが、型安全とかで一応使おうと思ってる。
(もしかすると使わないかもしれない)
Figma
モックアップ制作用。
AURパッケージのFigma Linuxを使ってネイティブで作業。
Boson
NeuTubeについて
このタイピングチューブって言う、YouTubeの音楽に合わせてタイピングできるサイトの代替（パクリ）
モックアップ
ホーム
未ログイン
ダーク
ライト
プロフィール
BosonDragonflyはビルドして使用する。
ここに書いてあるとおりにやれば行けるはず
Bosonメイン機でビルドしたのをサーバー機(とりあえず使おうと思ってる古いノート)で使おうとすると失敗した。
多分、なにか有るんだろうけどとりあえずDockerで動かす
BosonSVG埋め込みはreact-svgライブラリ使う
import { ReactSVG } from "react-svg";
<ReactSVG src="./icons/home_filled.svg" />
初ロードに遅延がかかるのでやめる。
SVGを直接書く
BosonDragonflyはインメモリデータベースということを知った。
インメモリデータベースは全てメモリー内に保存しているため速いらしい。
メインDBは別にしたほうが良いかもしれない。
BosonRemixはそのままだとBun対応してないらしい。
このリポジトリ参考にして対応させた