さまざまな Web フレームワークを使用して同じアプリを構築する

最近、現在の Web アプリ スタック (FastAPI、HTML、CSS、および少量の JavaScript) から最新の Web フレームワークに移行すべきかどうか考えていました。特に FastHTML、Next.js、および Svelte に興味がありました。

• 高速HTML: 多くの人々 ジェレミー・ハワードが 発売 1 か月前に公開されました。その目標は、最新の Web アプリケーションを純粋な Python で実現することです。
• 次: 私はこれを使って作られたいくつかのアプリに出会ったことがあります。 cal.com そして ルームGPT大規模なエコシステムを持ち、本番レベルの Web アプリの構築に人気があります。
• スヴェルトキット: この軽量フレームワークは開発者の間で人気があります (スタックオーバーフロー、 TSH、 JSの状態) と私の友人 Swyx (私がSvelteを気に入っている理由）を過去数年間にわたって実施してきました。

これらのフレームワークについてさらに詳しく知るために、私はそれぞれのフレームワークを使用して同じ Web アプリを構築しました。「Look at Your Data」と名付けたこのアプリでは、ユーザーは次のことができます。

• Upload SQLite データベース テーブルを初期化するための CSV ファイル
• View ウェブブラウザのテーブル
• Update テーブル内の個々のフィールド
• Delete 表内の個々の行
• Download 更新されたテーブルデータを新しいCSVファイルとして保存

これらを実施することで CRUD 各フレームワークの API (作成、読み取り、更新、削除) 操作を実際に試して、各フレームワークの独自の機能とそれに関連する開発者エクスペリエンスを理解したいと思います。簡単にするために、データベースには SQLite を使用します。ベースラインとして、使い慣れた FastAPI を使用してアプリを構築することから始めます。

私は3つのフレームワークについてアンケートを実施しました ツイッター そして リンクトイン

FastAPI + Jinja + HTML + CSS + JavaScript

FastAPIを使ったアプリの構築はかなり簡単です（コード主なコンポーネントは次のとおりです。

• main.py: データのアップロード/ダウンロード、フィールドの更新、行の削除のルート
• index.html: スクリプト、テーブル、ボタンを定義する HTML ドキュメント。
• style.css: 列幅、単語の折り返し、スクロールなどの視覚的なスタイル設定。
• script.js: CSV のアップロード、表示用データの読み込み、行の更新/削除、更新されたデータの CSV としてのダウンロードを行うクライアント側の機能。

Web アプリの外観は次のようになります。見た目はそれほど美しくありませんが、上記の要件を満たしています。デザインではなくフレームワークと機能に重点を置くため、視覚的なスタイルは意図的に最小限に抑えました (現在のアプリとそれ以降のアプリ)。

高速HTML

FastHTMLを学ぶために、私はまず ドキュメント シンプルな ToDoアプリ この ウォークスルーなじみのないコンポーネントについては、Cursorを利用して、次のような関連ドキュメントへのリンクを提供しました。 フィートコンポーネント、 htmlファイル、 ピコ コンテキストとして機能します。FastHTMLを使用すると、1つのコードでアプリ全体を実装できます。 main.py そして小さな style.css （コード）。

アプリの外観は次のようになります。

上記の最初のイテレーションの後、Hamel は親切にも、アプリをゼロから構築するために私とペアプログラミングすることを申し出てくれました。また、FastHTML の作者である Jeremy Howard も参加するよう招待してくれました。彼らは、Cursor に FastHTML 用の LLM 対応ドキュメントを提供するなど、いくつかのコツを教えてくれました (llms-ctx.txt) と FastLite (html.md）。また、彼らは 素晴らしいリソース htmxとHyperviewを使ったよりシンプルなアプリの構築についてジェレミーは時間をかけて、わずか数秒でアプリを構築する方法を実演してくれました。 50行のコード！

from fasthtml.common import *

db = database(':memory:')
tbl = None
hdrs = (Style('''
button,input { margin: 0 1rem; }
[role="group"] { border: 1px solid #ccc; }
'''), )
app, rt = fast_app(live=True, hdrs=hdrs)

@rt("https://eugeneyan.com/")
async def get():
    return Titled("CSV Uploader",
        Group(
            Input(type="file", name="csv_file", accept=".csv"),
            Button("Upload", hx_post="/upload", hx_target="#results",
                   hx_encoding="multipart/form-data", hx_include='previous input'),
            A('Download', href='/download', type="button")
        ),
        Div(id="results"))

def render_row(row):
    vals = [Td(Input(value=v, name=k)) for k,v in row.items()]
    vals.append(Td(Group(Button('delete', hx_get=remove.rt(id=row['id'])),
                   Button('update', hx_post='/update', hx_include="closest tr"))))
    return Tr(*vals, hx_target='closest tr', hx_swap='outerHTML')

@rt
async def download():
    csv_data = [",".join(map(str, tbl.columns_dict))]
    csv_data += [",".join(map(str, row.values())) for row in tbl()]
    headers = {'Content-Disposition': 'attachment; filename="data.csv"'}
    return Response("n".join(csv_data), media_type="text/csv", headers=headers)

@rt('/update')
def post(d:dict): return render_row(tbl.update(d))

@rt
def remove(id:int): tbl.delete(id)

@rt("/upload")
async def post(csv_file: UploadFile):
    global tbl
    if not csv_file.filename.endswith('.csv'): return "Please upload a CSV file"
    tbl = db.import_file('test', await csv_file.read(), pk='id')
    header = Tr(*map(Th, tbl.columns_dict))
    vals = [render_row(row) for row in tbl()]
    return Table(Thead(header), Tbody(*vals))

serve()

ジェレミーのアプリは次のようになります。

次へ.JS

Next.jsを学ぶために、私は Reactの基礎 そして 次 チュートリアル。後者は、ダッシュボード アプリの作成までを網羅した、一口サイズの実践的なレッスンを通じて Next.js の基礎を教えてくれます。Next.js チュートリアルには 16 章あるため、学習とコーディングにはある程度の時間がかかります。とはいえ、少なくともデータ変換に関する第 12 章 (Next.js チュートリアル) までは読み進めることをお勧めします。学習曲線が緩やかで実践的なプロジェクトが楽しめます。

Next.js アプリ テンプレートの作成方法は次のとおりです。

npx create-next-app@latest

Next.jsで同じアプリを構築するには、Pythonバージョンよりもかなり多くのコードが必要です（コード）。それにもかかわらず、私はその構成が直感的であると感じました。

• api: データテーブル（GET、PUT、DELETE）とファイルのアップロード/ダウンロードのルート
• pages.tsx そして layout.tsx: ページ固有および共通のユーザーインターフェースコンポーネント
• components: テーブルやアップロード/ダウンロードボタンなどの再利用可能なReactコンポーネント
• lib: ユーティリティ関数。この場合、SQLite用の関数が1つありました。

ウェブアプリの外観は次のようになります。 テイルウィンドCSS 統合により、ベーシックな FastAPI および FastHTML アプリと比較して、アプリの外観が少し洗練されます。

スヴェルトキット

Svelteを学ぶために、私は彼らの チュートリアル オンラインインタープリターが付属しています。チュートリアルは4つのパートに分かれています: (i) 基本Svelte、(ii) 上級Svelte、(iii) 基本SvelteKit、(iv) 上級SvelteKit。私は基本Svelteと基本SvelteKitのセクションを終えて、アプリの構築に取り掛かりました(コード）。

SvelteKit アプリ テンプレートを作成するには、以下を実行しました。

npm create svelte@latest my-app

Next.js と同様に、SvelteKit のテンプレートにはいくつかのディレクトリと可動部分があります。

• components: データテーブルやアップロードボタンなどの再利用可能なSvelteコンポーネント
• api.ts そして db.ts: APIがデータを取得、更新、削除するための関数（api.ts) および SQLite データベースのクエリと更新の実行 (db.ts）
• routes: テーブル（GET）、行（PUT、DELETE）、アップロード/ダウンロードのルート
• +page.svelte: アプリケーションのメインページ
• app.html: エントリポイントとメインHTMLファイル

アプリの外観は次のようになります。少しだけ変更点があります。「ファイルの選択」と「アップロード」の機能を 1 つのボタンに統合して、「CSV のアップロード」ボタンを削除しました。

高速API + スヴェルト

また、バックエンドにFastAPI、フロントエンドにSvelteを使用したアプリの構築にも挑戦しました（コード）。すべての機能とAPIは main.py フロントエンドのUIとAPIのやり取りは +page.svelte そして api.ts それぞれ。アプリを実行するには、FastAPI サーバーと Svelte 開発サーバーの両方を起動する必要がありました。

ウェブ アプリは次のようになります。(アップロード機能を、別の「CSV アップロード」ボタンがある元の FastAPI アプリと一致するように元に戻しました。)

ここでの主な課題は、開発中に両方のサーバー間の通信を調整することでした。実稼働環境では、Svelte アプリはコンパイルされ、FastAPI バックエンドに送信される API リクエストによって静的に提供されます。

• • •

余談: コーディングアシスタントはビルダーにどのような影響を与えるのでしょうか?

この演習を通じて、私は、インターネット データでトレーニングされた LLM を搭載したコーディング アシスタントが、開発者としての選択にどのような影響を与えるかについて考えるようになりました。たとえば、LLM ベースのコーディング アシスタントは、Svelte や FastHTML などのニッチなフレームワークや新しいフレームワークでも同様に効果的でしょうか。以下のツイートは誇張かもしれませんが、正当な懸念を提起しています。

こう言うのは嬉しくありませんが、Svelte は廃止されました。LLM ベース モデルの方が React の記述に適しているからです。— ジェス・マーティン

React と Next の幅広い使用と長い歴史を考えると、ほとんどの LLM は Svelte コードよりも React と Next のコードでトレーニングを受けている可能性が高いです。FastHTML についても同様です。これにより、FastAPI、React、Next.js などの確立されたフレームワークでの作業やコードの提案において、コーディング アシスタントがより効果的になる可能性があります。

逸話として、Cursor + Claude を使用して FastAPI と Next.js でアプリを構築する方が簡単でした。FastHTML と SvelteKit では苦労しました。FastHTML は (この記事の執筆時点で) 登場してからまだ数週間しか経っていないため、そのコードとドキュメントはまだほとんどの LLM のトレーニング データに取り込まれていない可能性があり、FastHTML の習熟度が限られていることが説明できます。

この問題を解決するために、Jeremy Howard（FastHTMLの作者）は、 llms.txt そして llms-ctx.txt 文脈学習に最適化されています。同様に、リッチ・ハリス（VercelでSvelteに取り組んでいる） 予定 SvelteのLLMフレンドリーなドキュメントを公開する。Victor Dibiaはまた、 書かれた コーディング アシスタントが開発者の習慣や選択にどのような影響を与えるか、また人間とマシンの両方に向けてドキュメントを書く必要がある理由について説明します。

コーディング アシスタントにおける新しいフレームワークやニッチなフレームワークのコールド スタート問題の解決に、これらの取り組みがどれほど効果的であるかは、時間が経てばわかるでしょう。

• • •

これはFastHTML、Next.js、SvelteKitに慣れるための楽しい演習でした。すべてのコードは ここ（私はフロントエンドの初心者なので、悪い習慣はご容赦ください！）個人的には、TypeScriptを使ってもっと作ることを楽しみにしています。 ML.com の適用 数年前。

Next.jsやSvelteを使った構築方法を学ぶ上で役に立ったリソースはありますか？以下にコメントするか、 私にDMしてください！

この記事が役に立った場合は、次のように引用してください:

Yan, Ziyou. (2024 年 9 月). さまざまな Web フレームワークを使用して同じアプリを構築する。eugeneyan.com. https://eugeneyan.com/writing/web-frameworks/.

または

@article{yan2024frameworks,
  title   = {Building the Same App Using Various Web Frameworks},
  author  = {Yan, Ziyou},
  journal = {eugeneyan.com},
  year    = {2024},
  month   = {Sep},
  url     = {https://eugeneyan.com/writing/web-frameworks/}
}

シェアする: