(今更)Frontend Study #1を見たのでメモ
はじめに
ずっと#1だけまだ見てなかったので見たついでにメモをとります。
Front-End Study #1「Cloud Native時代のフロントエンド」 - YouTube
『フロントエンド領域』を再定義する
ブラウザのシェア率ってこんなふうに簡単に見れるのか・・・。
Browser Market Share Worldwide | Statcounter Global Stats
2020年度のフロントエンドの傾向
- パフォーマンス指向の向上
- 設計より規約
SSRはほとんどのケースで必要ない
WebAssembly (モダンなウェブブラウザーで実行できる)が追従するのに期待
WebAssembly を使うならRust
フロントエンド開発者も知っておきたい AWS Lambda とサーバーレス
AWS Amplify: フロントエンド向けツールセット。AWS各サービスが使いやすくなる
（ハマるとCloudFrontが分かってないと辛いとか、TwitterのTLにて）
SSRにLambdaを使うとリクエスト分サーバーを起動する水平スケールによってCPU負荷が高まってもレスポンスが返せる
しかし、静的ファイルも実行されるのでデプロイサイズがコールドスタートへの影響がでる
静的アセットはS3＋CloudFrontが良い。
Next.jsではプラグインがある。
STUDIOのデザインツールとホスティングの仕組み
デザインツールからWebサイトを作れるデザインツールに変更。
（リリースして使ってみて方向性を決めるのアジャイルっぽくてよい）
画像の最適化として
- 画像のアップロード時にサイズ別に書き出して描写時に適切なサイズを読むようにしている
- フロントエンドで分割してアップロードしている
- WebPに対応していてサイズが小さくしている
- Intersection Observer API - Web API | MDN を用いたLazyLoad
SSRのレンダリング前に取得するものをJson Static化してヘッダーだけSSRにする、DOMtreeはレンダリング 時に別途取得することでパーフォーマンス改善を行っている
OGデータのためにheadだけSSRにしている
