Zero Serverフレームワークを使えば、サーバサイドレンダリングを備えて、設定のほとんど不要なWebアプリケーションの生成、構築、開発が可能になる。新バージョンではNode.js、React、HTML、MDX、Vue、Svelte、Python、静的ファイルの混在が可能になり、TypeScriptもサポートされた。
ZeroのWebフレームワークでは、階層構造のフォルダにファイルを置くだけで、Webアプリケーションが生成される。設定はほとんど、あるいはまったく不要だ。ファイルの実装するページのルートは、フォルダの構造とファイル名によって決定される。ファイル自体は静的なファイルでも、さまざまな言語を使用したプログラムでも構わない。当初はReact、HTML、MDXによるWebページ実装がサポートされていたが、新たにSvelteとPythonファイルのサポートが追加された。
さらに、Zero Serverの機能を拡張することにより、ほぼ制約のないミックス・アンド・マッチが可能になる。マシンラーニングの分野でPythonが一般的な言語であることを意識して、Zero Serverの資料では、Zeroの最新バージョンで可能になった次のような開発シナリオが紹介されている。
次のような手順を想像してください。
- TensorflowモデルをPython APIとして公開する。
- Reactページを使用してAPIをコンシュームする。
- Node.jsでログインコードを記述する。
- HTMLないしMarkdown/MDKによるランディングページ。
これをすべて、単一のWebアプリケーションとしてひとつのフォルダに配置してください。
フロントエンド側では、Zero Serverの解釈可能なファイルフォーマットにSvelteファイルが加わったことにより、スタイル、テンプレート、ビヘイビアを配置したシングルページのコンポーネント、リアクティビティの言語組み込み、さまざまなアプリケーションのパフォーマンス向上が可能な外科的(surgical)DOMアップデートなど、Svelteコンパイラの提供するメリットを活用したページ構築が可能になった。
ZeroでPythonファイルを使用するには、事前にPython3のインストールが必要だ。それにより、.py拡張子を持つファイル内にある個々のPython関数に対して、APIエンドポイントを定義することが可能になる。関数はhandlerという名称でなければならない。この名前の関数が./api/process.pyファイル内にあれば、http://<SERVER>/api/processにAPIとしてエクスポーズされる。Zeroは内部的にFlaskを使用しているので、jsonify(JSONレスポンスを生成する)やrequest(URLパラメータを解釈する)など、任意のFlaskインポートを活用することが可能だ。
プロジェクトのルートに配置されたrequirements.txtファイル内に記述された依存関係は、Pythonのパッケージインストーラであるpipを使って自動インストールされる。ファイル名称メカニズムによる動的ルーティングも利用可能だ($で始まるファイルあるいはフォルダは動的ルートと解釈される)。PythonとZeroを使用してファイルのアップロードを処理する方法のサンプルが提供されている。次のupload.pyファイルは、
# upload.py
from flask import request
from werkzeug import secure_filename
def handler():
if request.method == 'POST':
f = request.files['file']
f.save(secure_filename(f.filename))
return 'file uploaded successfully'
以下のHTMLフォーム(index.html)で指定されたアップロード操作の処理を行う。
<!-- index.html -->
<html>
<body>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>
</body>
</html>
一方のSvelteファイルは、サーバでレンダリングされる。svelteコンポーネントが./about.svelteファイル内にあれば、そのページはhttp://<SERVER>/aboutに実装される。Zeroは個々のSvelteページのトランスパイルと(Parcelとの)バンドル、サーバ上でのレンダリング(従って、JavaScriptがロードされるまでユーザがブランクページを見せられることはない)、自動コード分割を実行する。トップレベルの.svelteコンポーネント/ページはデフォルトのuserおよびurlプロパティで渡されるので、Svelteのexport let prop宣言構文を使ってコンシュームすることができる。
<script>
export let user; // user data from session (req.user of Express)
export let url; // { query, params }
// also any preload data returned from preload()
</script>
SEO向上のため、svelte:headコンポーネントでページのheadタグを設定することができる。
<svelte:head>
<title>Page Title</title>
</svelte:head>
<h1>Hello!</h1>
さらにAPIデータを事前にロードして、サーバがレンダリングしたSvelteコンポーネントに渡すことも可能だ。これを行うには、Svelteファイルがpreload()関数をエクスポートして、必要なデータをページがレンダリングされる前にロードする必要がある。
<script context="module">
export async function preload({ req, url, user }) {
const res = await fetch(`/api/messages`);
const messages = await res.json();
return { messages };
}
</script>
<script>
// messages prop returned from preload() is passed here.
export let messages;
</script>
TypeScriptもサポートされた。Glitchを使用すれば、ローカルにインストールしなくてもZeroを試すことができる。ZeroはWebアプリ開発における"設定より規約(convention-over-configuration)"のトレンドの一部をなすものだ。同様のフレームワークは、しかしながら、ReactのNext.jsやVueのNuxtのように、フロントエンドフレームワークに特化したものが少なくない。このような特化は開発者の選択肢を狭くする反面、フレームワークに最適化されたアプリケーションを生み出すことにもなる。フレームワークロックインを回避するためのマイクロフロントエンド・アーキテクチャにおいて、Zero Serverがどのような役割を果たすことができるのか、今後が注目される。
Zeroのnpmパッケージは、Apache 2.0オープンソースライセンスで公開されている。コントリビューションはガイドラインに従った上で、ZeroのGitHubパッケージ経由で受け付けられている。