先日、改めて考えるフロントエンドライブラリ Angular, Vue, React, jQuery etc... 〜何を利用してる?共有LT会〜 に参加しました。オンライン開催。簡単に所感をまとめます。
所感
今回、Angular, Vue, React, jQuery etc... ということでしたが、ほとんど Vue だったような...。ただ、取り組んでいる課題や工夫の話が聴けてとても参考になりました。個人的に TODO<T>: any
は興味深かったです。
あと、分類のグラデーションというのも面白かったです。自分はパターン2と3かな。確かに段階的に移行できるのは Vue のメリットかもしれないし、これがいわゆるスモールスタート可能と言われるやつですかね。
途中、アンケートを取るところがいくつかありましたが、自分の環境ではできず...。ブラウザから Zoom に参加しているからだろうか?
YouTube の URL はこちら。
以下、メモから抜粋。
LINEサービスをTypeScriptに置き換えた際のノウハウ&苦労話
- テストコードがない
- 環境が古い
- webpack, Babel, ...
- ビルド環境が違う
- Browserify, module.exports/require, import/export
- TypeScript
- 型の安心感, コードレビューの負荷軽減
- テスト
- リファクタリングへの安心感
- 細かいバグを減らしてQAの負荷軽減
- ts 運用基盤の構築
- 中長期的にプロジェクトに適応させる
- 小さく適用する
- ts コンパイル
- 既存 js ファイルのビルド結果は変えない
- 正しくトランスパイルできているか
- 小さいファイルから ts 対応, ビルド生成物の差分を確認
- tsconfig の allowJS オプション有効化 (jsDoc で型チェック)
- tsconfig の target を es2019 に
- これまで通り Babel で Polyfill を入れたい
- ts 側で Polyfill を入れることも可
- Vue の SFC を ts 対応
- Vue.extend
- vue-class-decorator や vue-class-component は変更が大きい
- ビルド時間短縮
- fork-ts-checker-webpack-plugin
- 型チェックのプロセスを分離
- ビルド環境をシンプルに
- ts-loader で js/ts をビルドできるように
- テスト
- Karma ⇒ Jest
- window オブジェクトを書き替えるテストがやりやすい
- jest.resetModules
- まずはユーティリティ系から
- 移行中にリファクタリングや修正はしない
- 問題が起きたときに切り分けしづらい
TODO<T>: any
- とりあえずビルドを通してあとで直せるように
- computed の返り値の型を明示的に書く
- target 以外に transpileOnly=true を設定
Frontend負債返済の野望 @ Repro
www.slideshare.net
- 負債返済によって開発コストを下げる
- フロントエンドとバックエンドの切り離し
- BFF
- フロントエンドのロジックを Rails 依存から切り離す
- フロントエンドだけで適切なアーキテクチャ設計が必要
- 関数型言語の影響が入ってきている
- 過去の js のノウハウは基本的に使わない (混ぜない)
- Vue.js にはモデルレイヤがない?
- MVVM が難しい?どうやって状態を持つか?
- immutable な state を考えると関数型のアプローチがよい
- Vue 3 を待つ余裕がない ⇒ React に転換?
- 余談) うさぎのプレゼンツール
ビザスクliteなVue.jsの使い方
- reactive 関数による store (!== Vuex)
- アダプティブデザイン?
- コンポーネントフレームワークの依存が少ないほどマイグレーションが容易そう
- 3.x だと v-model の仕様変更などがネックになりそう
- CSS Modules
- Tailwind CSS
- 将来的にはフロントエンドもあり得る
様々なプロダクト環境から垣間見るVue.js
- Rails + Vue
- Vue + Rails
- Vue
- 完全 Rails から徐々に Vue にシフトしたり
- Vue の Progressive さがいい感じにマッチしている
- テンプレートベースだから?テンプレートエンジンに組み込めるから?
TechTrain しくじり先生 - Nuxt.js, Vue.jsにおけるしくじり
- ページをまたがるグローバルなストア
- ログイン, ログアウト, Firebase 以外の処理, ...
- pages に書いてある
- ⇒ Nuxt.js + ts, Action から状態を触る
- 他ページ用の store が冗長にロードされる
- 肥大化した data プロパティ
- API通信でN+1
- ⇒ 余計なロードを削る
- SSR
- SPA, meta タグなし, リッチカード対応なし
- ⇒ client タグなど
- ページ遷移で UI がチラつく
- API通信でローディング表示なし
- ⇒ v-cloak, loadingindicator
- SSR がどのくらい SEO に影響するか
- Google が SPA に対応しているけど...