- Mercari x Merpay Frontend Tech Talk vol.4に参加してきました。
| タイトル | 発表者 |
|---|---|
| Pros and Cons of SSR and JAMStack | @_sskyu |
| NoCode で CMS と連携するデザインツールを作っている話 | @miyaoka |
| TypeScriptで型安全に入門したい | @atsuco_02 |
| Web Assembly と画像・動画 | @Leonardo_engr |
Pros and Cons of SSR and JAMStack
- @_sskyuさん
SSRパフォーマンス
nuxt generate(JAMStack)
- nuxt generate
- NuxtでhtmlをSSR時ではなくビルド時に生成する
- 課題
JAMStackに移行
- キャッシュレスキャンペーンでJAMStackに移行
- 2019/10/1-2020/6/30に出してるキャンペーン
- 移行手順
- JAMStack環境作る
- 旧版と並行稼動
- 社内のみからアクセス
- 本番にデプロイ
- テスト
- 本番有効化
- 切り替え
- JAMStack環境作る
- staticなファイルなので全てFastlyで配信
- 以前はk8s上のNodeから配信
- URL
- 旧版と同じオリジンにおいた
- 新版のURLにネームスペース付けた
- そのままだとassets読み取れないけど相対パスで指定するようにして解決
Pros and Cons
- SSR
- サーバを運用してる
- オンコール体制
- スケールアウトでコスト増
- JAMStack
- 静的なassetを配信するだけなのでオンコール不要
- ぺらいちなサイトに向いてる
- 管理画面のようなサイトは不向き
- 静的なassetを配信するだけなのでオンコール不要
- パフォーマンスの比較記事
NoCode で CMS と連携するデザインツールを作っている話
- @miyaokaさん
Studio
- GUIでWebページが作れるサービス
- やってるユーザの操作に応じてstate更新して画面に反映してるだけ
- 操作してる人からするとGUIだけで画面が作れちゃう
- 課題
- 静的なサイトはこれでできる
- 動的なデータの概念がないので動的なサイトが作れない
動的ページを作る
CMSと連携
- zero configで使えるようにしたい
- 独自で作った
- CMSで作ったコンテンツをデザインに注入できるように
TypeScriptで型安全に入門したい
- @atsuco_02さん
型安全に入門したい
- 型安全の良さを理解したい
環境構築めんどくさそう
- CodeSandboxで環境構築いらず
TypeScriptって何者？
JSとTSの方の違い
- JSにも型ってあるよね
- JS
- 実行時に型を判別
- 自動で型変換される
- TS
- 実行前に型を判別
TSの型の良さ
- 型を明示的なので可能な操作が明確
- 暗黙的な変換がされない
- コンパイル時にある程度エラーがわかる
Web Assemblyと画像・動画
- @Leonardo_engrさん
JavaScriptだけで画像加工
- wasm-imagemagick
- あまりメンテされてない
- PWAのアプリが増えてきている
- 画像加工のような処理もクライアント側でやりたい
- ImageMagickにできることならだいたいできる
- 画像を比較してdiff出せたりする
JavaScriptだけで動画をエンコード
- ffmpeg.js
- あまりメンテされてない
- スマホの処理性能上がってきてる
- リアルタイムで画像にエフェクトとかアプリだとでてきてる
- WebWorkerと組み合わせて使えるように用意してくれてる
