ShopifyアプリのサンプルがNext.js / Koa / webpackを使わなくなっていたので経緯を調べた


Shopifyアプリを作成するコマンド shopify app create node でコードの展開元になっているShopify/shopify-app-node がここ半年くらいで様変わりしていたので超簡単にだけど経緯を調べてみた。

2021年10月 Next.jsをやめる

Remove Next.js and reorganize app by paulomarg · Pull Request #661 · Shopify/shopify-app-node

Next.jsとKoaを使っていたが遅いし複雑でKoaとwebpackで必要なことはほぼできるからKoaのみにします、ということでNext.jsをやめたみたい。

2022年1月 Koaをやめる

Use express instead of Koa by mllemango · Pull Request #693 · Shopify/shopify-app-node

JSフレームワークの使い方に一貫性を保つために、ということでKoaをやめてExpressを使うように変わっていた。プルリクに貼ってあるリンク先が見れないのでどの辺に対する一貫性(consistent)を言っているのかはわからなかった。

2022年3月 webpackをやめる

overhaul to use vite + vitest over webpack 🎉 by JaKXz · Pull Request #718 · Shopify/shopify-app-node

webpackからViteに変更したみたい。合わせて色々リファクタリングが入っている。ファイル変更を見ているとVitestでテスト書きたい&もろもろ、という感じがした。

ファイル構成の比較

Next.js 時代

.
├── LICENSE.md
├── README.md
├── SECURITY.md
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   └── index.js
└── server
    ├── handlers
    │   ├── client.cli.js
    │   ├── client.js
    │   ├── index.js
    │   └── mutations
    │       ├── get-one-time-url.js
    │       └── get-subscription-url.js
    ├── index.js
    └── server.js

最新(2022/05/06時点)

.
├── LICENSE.md
├── README.md
├── SECURITY.md
├── index.html
├── package.json
├── server
│   ├── __tests__
│   │   ├── serve.js
│   │   └── server.test.js
│   ├── helpers
│   │   └── top-level-auth-redirect.js
│   ├── index.js
│   └── middleware
│       ├── __tests__
│       │   └── verify-request.test.js
│       ├── auth.js
│       └── verify-request.js
├── src
│   ├── App.jsx
│   ├── assets
│   │   └── home-trophy.png
│   ├── components
│   │   ├── HomePage.jsx
│   │   └── ProductsCard.jsx
│   └── entry-client.jsx
├── vite.config.js
└── yarn.lock

一見するとファイル数は増えているけれどサンプルアプリとしての質が上がっている(以前のものは本当にHello Worldだったので)。
リクエスト認証で使っていた @shopify/koa-shopify-auth を使うのやめて server/middleware/verify-request.js に配置されるなど見通しも良くなっていると思う。

感想

変化が激しい。