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¹ を読むと、VanJS 開発の経緯を知ることができます。

• Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。
  • Remix: 0.65s
  • Svelte: 0.62s
  • Qwik: 0.36s
  • VanJS: 0.13s 👈
    

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² の default です。
  

Summary

• VanJS について書きました。
• 個人的には、宣言的 UI の方が好みです。
• 依存関係が無いことが素晴らしいと思います。
• Enterprise 視点では、開発元の安定性という意味で、使いにくいです。Qwik や Remix の方が安心感を感じます。

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

それでは、また別の話でお会いしましょう。👋

1. https://vanjs.org/about ↩

2. https://ja.vitejs.dev/ ↩