フロントエンドフレームワークとベンチマークの実際の比較

Unsplashのdelfi de la Ruaによる写真
UP️更新:この記事の新しいバージョンがあります

過去数年にわたって、フロントエンドフレームワークの爆発的な増加が見られました。それらのそれぞれは、優れたWebアプリケーションを構築する能力を超えています。では、次のプロジェクトで使用するものをどのように比較して決定しますか?

まず、意味のある比較を行うには、いくつかのことが必要です。

  1. Real World App-「やること」以上のもの。通常、「仕事」は、実際のアプリケーションを実際に構築するための知識と視点を伝えません。
  2. 標準化-特定のルールに準拠するプロジェクト。同じ場所でホストされ、バックエンドAPI、静的マークアップ、スタイル、および仕様を提供します。
  3. 専門家によって書かれた-理想的にはその技術の専門家が構築する、一貫した現実のプロジェクト。これは、少なくともほとんどの場合に当てはまります(以下を参照)。

それでは、どうやってそのようなプロジェクトを手に入れるのでしょうか?良いニュースは、Eric SimonsがすでにRealWorldプロジェクトを作成していることです。これは、中規模のブログプラットフォームのクローンです。このプロジェクトの各実装は、同じHTML構造、CSS、およびAPI仕様を使用しますが、異なるライブラリ/フレームワークを使用します。専門知識に関しては、ほとんどの場合真実です。 ClojureScriptで実装を作成し、フレームを再作成しましたが、自分を専門家とは考えていません。私の弁護では、専門家が私のコードをレビューしました。ダニエル・コンプトンに感謝します。

ベースライン仕様ができたので、それらを比較するためのテスト/メトリックの標準セットが必要です。

  1. パフォーマンス。このアプリはコンテンツを表示して使用可能になるまでどのくらいかかりますか?
  2. サイズ。アプリの大きさは?コンパイルされたJavaScriptのサイズのみを比較します。 CSSはすべての亜種に共通であり、CDN(コンテンツ配信ネットワーク)からダウンロードされます。 HTMLはすべての亜種にも共通しています。すべてのテクノロジーはJavaScriptにコンパイルまたはトランスパイルするため、このファイルのサイズのみを決定します。
  3. コードの行。著者は、仕様に基づいてRealWorldアプリを作成するために何行のコードを必要としましたか?公平を期すため、一部のアプリにはもう少し機能がありますが、大きな影響はありません。定量化する唯一のフォルダーは、各アプリのsrc /です。

執筆時点(2017年12月)では、RealWorldプロジェクトは次のフレームワークで利用できます。

  • React / Redux
  • エルム
  • 角度4+
  • 角度1.5以上
  • React / MobX
  • Crizmas MVC
  • CLSJキーチマ
  • AppRun
  • CLJSリフレーム(これは私がやったものです。RealWorldProjectにはまだリストされていません)。

指標#1:パフォーマンス

Chromeに同梱されているLighthouse Auditを使用した最初の意味のあるペイントテスト。

早くペイントするほど、アプリを使用している人のエクスペリエンスが向上します。 LighthouseはFirst Interactiveも測定しますが、これはほとんどのアプリでほぼ同じでした。

最初の意味のあるペイント(ミリ秒)-低いほど良い

指標#2:サイズ

転送サイズは、Chromeネットワークタブからです。 GZIPされた応答ヘッダーと、サーバーによって配信された応答本文。

小さいファイル=ダウンロードが速くなり、解析が少なくなります。

これは、フレームワークのサイズ、追加した追加の依存関係、ビルドツールが小さなバンドルを作成できる程度に依存します。

転送サイズ(KB)-小さいほど良い

メトリック#3:コードの行

clocを使用して、各リポジトリのsrcフォルダー内のコード行をカウントします。空白行とコメント行はこの計算の一部ではありませんが、これはなぜ意味がありますか?

デバッグがソフトウェアのバグを除去するプロセスである場合、プログラミングはそれらを入れるプロセスでなければなりません-Edsger Dijkstra

コードの行数が少ないほど、エラーの可能性が低くなり、維持するコードベースが小さくなります。

#コード行-少ないほど良い

結論

性能

これはRealWorldの比較であり、真空のベンチマークではありません。テストはヨーロッパ(スイス)から実施されました。すべてのアプリはGithubでホストされていました。値が異なる場合がありますが、これは問題ありません。テストは各アプリに対して数回実行され、平均化され、丸められました。 1日を通して比較した場合、結果はほぼ線形でした。ライブラリ/フレームワークのほとんどは、優れたものと優れたものの範囲にあります。パフォーマンスに関しては大きな違いは見られません。

サイズ

各アプリのバンドルサイズは常に同じです。同様の実装を比較し、バンドルサイズの違いを確認します。 AppRunは非常識です!信じられなかったので数回見ました。エルムは、バンドルのサイズに関して、特にコードの行を見るときに驚くべき仕事をしています。

AppRunバンドルサイズ18.7KB

コードの行

これは、ソフトウェア開発者としてのあなたに最大の影響を及ぼします。コードの行が多いほど、入力する必要が多くなり、維持する必要が増えます。ここにはいくつかのトレードオフがあります。特に、型付き言語と動的言語の場合。タイプを使用すると、安全性が高くなり、コストがかかります-入力する項目が増えます。

型付きと動的

タイプ:Elm、Angular 4+およびAppRun。

ダイナミック:React | Redux、Angular 1.5、React | MobX、Crizmas MVC、CLJS Keechma、およびCLJSリフレーム。

どちらが良いですか?良くも悪くもなく、違います。 TDD(テスト駆動開発)のように、一部の人はそれを愛し、一部の人はそれを嫌います。優れたソフトウェアを開発することも、開発することもできます。自分に合ったものを選択してください。

Vue、Preact、Ember、Svelte、Aureliaなどはどこにありますか?

彼らはパーティーに遅れているようですが、心配しないでください。私たちがそれらを持っているときに私は別のラウンドを行います。すでに未解決の問題があります-貢献を検討してください!または、ゼロから始めて新しい問題を開きます。

最後の言葉

この比較はまさにそれが言っていることです。現実世界の類似した現実世界のWebアプリケーションの異なる実装を比較します。完璧ではありませんこれは、サーバーの負荷、ネットワークトラフィック、および実際に発生するその他の多くのことに基づいて異なります。

ダニエル・コンプトンの校正に感謝します。

この記事を楽しんで、同様の記事をリリースしたときに通知を受け取りたい場合は、メディアとツイッターでフォローしてください。