まとめ
SVGOMG: SVGO 用の美しく、マテリアル、レスポンシブなフロントエンド。
好きな点
Google 独自の Jake Archibald によって構築された SVGOMG は、ウェブ テクノロジーを使用して作成された、完全にレスポンシブで高機能なツールのほぼ完璧な例です。マテリアル デザインの美しい外観を備え、Service Worker によりアプリがすぐに読み込まれ、オフラインで利用でき、モバイルでの遷移がスムーズです。
改善の余地あり
提供する必要がある唯一の本当に重要な点は、メイン UI がないため初期 UX がわかりにくいということです。それ以外は、お疲れさまでした。
Jake Archibald（ジェイク・アーチボルド）との Q &A
ウェブを利用する理由
怠けさ。まったくの怠けさ。私は Windows ネイティブ アプリの開発、OSX ネイティブ アプリ、iOS、Android、Windows Phone、Linux 向けのネイティブ アプリの作成に精通していません。ウェブでも問題ありません。その 1 つのスキルセットで、すべてのプラットフォームで機能するものを一度だけ構築できます。
開発中にうまくいった点は何ですか？
性能にとても満足しています。JS が使用可能になる前にページが レンダリングされるようにします実際、最初はインライン CSS と SVG を使用して、わずか 5K の HTML でレンダリングできます。メインのスクリプトと CSS はすべてバックグラウンドで読み込まれます。つまり、空のキャッシュがある 3G でも、サイトは 1.5 秒で読み込まれているように見えます。そのほとんどは DNS と SSL です。
開始画面は非常にシンプルなため、5K 対応は難しくありませんでした。非常に多くのサイトでは、最初のレンダリングを JS で待機しているのが大変です。さらに、レンダリングの前に JS で追加のリクエストを行う必要さえあるのです。これにより、3G のレンダリング時間は 10 秒に近づきます。モバイル ユーザーとしては、私は許容できないでしょう。
メインの JS は 15K ですが、SVG を解析して圧縮する部分は含まれていません。これは、バックグラウンドで追加フェーズとして読み込まれます。インタラクティビティ機能が非常に速く、ユーザーが余分な読み込みに気づかないという利点があります。そのスクリプトが使用可能になる前にユーザーが SVG を選択した場合、そのスクリプトの読み込みは処理時間の一部のように見えます。
また、Service Worker を使用して、すべてをオフラインで動作させることができました。オフラインでも便利な機能ですが、私は主にパフォーマンスのためにやっています。その後 SVGOMG にアクセスすると、ユーザーの接続状況にかかわらず、ほぼ瞬時に表示されます。モバイル接続のバリエーションを考えると、これは大変貴重です。
アプリを改善するための API があるとしたら、それはどのような API ですか？
今後、JavaScript を使えるように Babel を使っていました。その一部がプラットフォームでネイティブに 動作するのは良いことです具体的には、async/await、アロー関数、引数のデフォルト、分解です。
gzip で圧縮されたサイズを確認するために、ライブラリを使用して出力を gzip する必要がありました。 このためにライブラリを使用すると、HTTP 用のコードがすでにブラウザにあるため、API がないので面倒です。全体をメモリ内に格納せずに出力のサイズを数えることができるように、なんらかの変換ストリームが理想的です。