🍨
Deploy a VanJS App to Cloudflare.
この抜粋の内容は次のとおりです。
- VanJS について
- Project 構成
- Deploy a VanJS site
- Summary
さらに詳しく見たい方は読み続けてください。
2023年8月5回目です。
このメモは、VanJS についてです。
VanJS is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM.
VanJSは、純粋なバニラJavaScriptとDOMをベースとした、超軽量、ゼロ依存、無依存のReactive UIフレームワークです。
今月に入り、Svelte、Remix、Qwik と検証しました。
最後に VanJS について見ていきます。
題材とする実装は、簡易のポートフォリオ サイトです。
今回のサイトとコードはこちらです
VanJS について
- JavaScript と DOM。jQuery を思い出します。命令的記述。
- VanJS の開発元は、Google の senior staff software engineer です。About[1] を読むと、VanJS 開発の経緯を知ることができます。
- Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。
- Remix:
0.65s - Svelte:
0.62s - Qwik:
0.36s - VanJS:
0.13s👈
- Remix:
Project 構成
Project Structure
├── favicon.ico # add
├── index.html # edit
├── package.json
├── package-lock.json
├── public
│ └── vite.svg
├── README.md
├── src
│ ├── footer.ts # add
│ ├── head.ts # add
│ └── main.ts # add
├── styles # add
│ └── styles.css # add
└── tsconfig.json
Deploy a VanJS site
- Cloudflare Pages に deploy できます。
- Framework Preset は、
Noneです。 - Build configurations は、Vite[2] の default です。
Summary
- VanJS について書きました。
- 個人的には、宣言的 UI の方が好みです。
- 依存関係が無いことが素晴らしいと思います。
- Enterprise 視点では、開発元の安定性という意味で、使いにくいです。Qwik や Remix の方が安心感を感じます。
この投稿をみて何か得られた方は、いいね ❤️ をお願いします。
それでは、また別の話でお会いしましょう。👋
Discussion