#フロントエンド
#メンタルモデル
推測するな計測せよ
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
性能に関する考え方
#フロントエンド
#メンタルモデル
推測するな計測せよ
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
性能に関する考え方
#意思決定 #パフォーマンス
キャンベルの法則 - Wikipedia
"計測結果が目標になると、その計測自体が役に立たなくなる"
from Rich Harris on frameworks, the web, and the edge
まとめてみると、私たちは手段と目的を取り違えている危険性があります。後述するように、最高のパフォーマンスを求めるなら、実はJavaScriptは必要不可欠なのです。
#Lighthouse
@azu_re: サイトをクロールしてLighthouseによるスキャンをまとめてやってくれるツール。
クロール対象をルーティングから定義もでき、結果をまとめたレポートを生成してくれる。 "Unlighthouse - Site-wide Google Lighthouse · Unlighthouse" https://t.co/qGHOd03xOj #browser #JavaScript #Tools
#Lighthouse
from サイトをクロールしてLighthouseによるスキャンをまとめてやってくれるツール
https://unlighthouse.dev/
#Core_Web_Vitals
https://developer.chrome.com/ja/blog/new-in-devtools-102/
Core Web VitalsやLayout thrashingをLighthouseのように見られるChromeの機能
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測
#設計 #エンジニアリング
業務システムを作ってるとQR, PDF, CSVなどのファイルをよく扱う
これらのファイルをどの技術レイヤで生成するかはよく論点になる
バックエンド
px単位の調整がつらい (検証が大変)
#フロントエンド #パフォーマンス
ちゃんと理解するCode Splitting
バンドルサイズを削りやすい React コンポーネント設計
optools - お前の TypeScript はもっと小さくなる
#フロントエンド #パフォーマンス
https://web.dev/inp/
Interaction to Next Paint (INP)は、Event Timing API のデータを使用した実験的な指標です。
これは応答性を評価するものです。インタラクションによってページが応答しなくなるのは、ユーザーエクスペリエンスが低下していることになります。
INPは、ユーザーがページと行ったすべてのインタラクションのレイテンシーを観察し、すべての(またはほぼすべての)インタラクションが以下になった単一の値を報告します。
#フロントエンド
ジュニア向け
宣言的UIを開発するにあたって普遍的に役立つであろう情報をまとめたもの
なるべくライブラリやフレームワークに依存しない
気が向いたときに更新する予定
#フロントエンド
from 2023年以降のフロントエンド需要マッピング
Baseline (互換性) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
ベースライン | Articles | web.dev
#QA #要件定義 #仕様定義 #形式手法 #AI #設計
from:
https://twitter.com/koushisa/status/1714147240099590620
2023/04/25 フロントエンドのテスト設計とアーキテクチャ
React は人類が直接コーディングする最後の UI ライブラリになる
koushisaの情報や知見を溜めて置く場所
Scrapboxを初めて読む人のためのガイド
Notionでのナレッジマネジメントに限界を感じて利用しはじめました
経緯について: Scrapboxをwikiとして使う
移行途中なので一部のスクラップにNotionプライベートリンクが含まれています :sorry:
#チェックリスト #設計 #問いかけ
何事も境界をきれいに切ろうとすると、絶対に隙間が生まれてしまう。境界が見えてしまうと、どうしてもその手前でブレーキをかける。境界部分のオーバーラップとインタラクション設計が重要。
メタ認知のための問いかけ
レイヤの存在意義を明確にする
なんの課題のために必要で、どうやってテストするか
#React
from Signal否定派
しかしReactの学習ハードルの高さは否めない
Easyさを重視したい時のSignal, Vueはありそう
はReact脳になっちゃってるので^がEasyなのか?と言われると(自分にとっては)ReactがEasyでもあり、Simpleでもあるという回答になりそう
/fsubal/デザイナがコードを書けたほうが良いか問題
なんでこういうことを言いたくなるのか
#フロントエンド の人から見てあるあるの困りとして、「それネイティブアプリでやるなら良いけどブラウザでやんないほうが良いよ」みたいな指摘をするとかがあると思う
例えば、画面の左端からスワイプで出てくるメニューはブラウザバックと誤爆しやすいので諦めて欲しいとか
ジェスチャのコストは軽いと思われやすい
#フロントエンド #CSS #コンポーネントツリー
from モデリング
システムの振る舞いを設計する際はコトに着眼する
ドメインイベントとEvent Sourcingは永続化の設計判断を遅らせることができる
---
#キャズム理論 #パラダイムシフト #技術の螺旋
@koushisa: エンジニアリングSNSというか特にフロントエンド界隈は2~3ヶ月タームで同じ話題がループしてる。現状の仕組みだとキャズム理論を乗り越えるための知名度や政治力を高める期間みたいなものが必要なので、純粋な知
#設計 #宣言的UIの設計レシピ #アーキテクチャ
の視点でReact Server Components(RSC)の将来性を考える
まともな運用を考えるとフレームワーク利用が必須なのでApp Routerを利用する想定で書いてる
8割ぐらいドリームとポエム
関連
#モジュラモノリス #マイクロフロントエンド #フロントエンド
モジュラフロントエンドのメモ
分割統治することで、領域の関心がシンプルになり理解しやすくなるし UI の歪みも明らかになる。また、レイヤーを減らすことで、領域全体を一目で把握しやすく、また、実装しやすく破棄しやすくする。
ただし、サーバー等でのプラクティスであるモジュラモノリスレベルでの分割を SPA で実現するのは、相互作用の多さから不可能だろう。
#QA
from: モダンなテストレベル設計(ユニットテスト~システムテスト等をどう設計するか)の原則
のフロントエンドのテスト設計とアーキテクチャについてのメモ書き
関連
フロントエンドでAIと協働する#640e7fa98660300000f640e6
https://twitter.com/uhyo_/status/1730111295062745522
フロントエンド↔️バックエンド と
クライアントサイド↔️サーバーサイド は異なる軸だよね、という言葉遊びを前提とすると、
Next.jsのサーバーコンポーネントというのはサーバーサイドに実装されたフロントエンドだと思うんだよね(?)
オブジェクトの捉え方の違い
#設計
@komitsubo: 最近はエンジニアは増えたけど、設計できる人は減ってるというのが最近組織の課題になっているという話を聞いて最初は半信半疑というかそんなことないでしょと思っていましたが、実際そうらしいと現場見て分ってきてこれはホントにどうしたものか考える時間が増
#フロントエンド #設計
hi18n (i18nライブラリ) の紹介 (1) 設計思想と基本方針 | Wantedly Engineer Blog
【React/Next.js】新規開発における多言語化(i18n)で得た知見共有 | Offers Tech Blog
#パフォーマンス
https://twitter.com/takehora/status/1728593175814795728
Webパフォーマンスという「人の視覚体験」に関する技術を扱っているなら、神経とか、人の反応速度とか学んだ方が良いと思うのです。
密接に関係してるから。
とりあえず、精神物理学は学ぼうよ。
#React #Next.js #技術の審美眼
from
なぜReactを使用するのか
なぜNext.jsを使用するのか
@dll7: Next.jsは現代の歩く技術的負債になりかねないと思うんだけど、SSRとか要らないならVite+ReactでバックエンドはNest.jsあたりに寄せてしまったほうがマシじゃない?
QAにおけるKnown, Unknownへのアプローチ
TDD
ATDD(受け入れテスト駆動開発)
BDD
セキュリティ
#技術の審美眼 #チェックリスト #OSS
大前提
ヒューマンインタフェースの思想についてデザイナと話す
逸脱事例を含めてすべてをレールに乗せる
ライセンス確認
#エンジニアリング #見積もり #リーダーシップ
@komitsubo: きっちり品質を作りこむ計画を立てる事は、とりあえず動かす事ばっかりやってる人達には根本的に無理なんだなーと痛感。これはやればできるとかやる気になればとかじゃなくて、ホント元々そういう素養がある人か経験者がいないとダメなんだなと再確認。
#React #技術の審美眼
WhyReact.md
プログラムを「計算機への命令」ではなく「関数を適用して値を得る計算」の定義と捉える
ステートフルなGUIを作るのが本質的に難しいという問題がある
歴史(過去)を話す
#推測するな計測せよ #CSS #パフォーマンス
https://speakerdeck.com/poteboy/csspahuomansuniguan-suruji-ce-jie-guo
#パフォーマンス
https://speakerdeck.com/daisukeshinoku/smarthrnopahuomansugai-shan-ga-zong-li-zhan-datutahua
#パフォーマンス
from Webフロントエンドのパフォーマンス周り
Webブラウザのもう一つのパーサ: Preload Scanner | PerfData
https://twitter.com/takehora/status/1728578345666011598
フロントエンド側のWebパフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置くと良いでしょう。
#パフォーマンス
from Webフロントエンドのパフォーマンス周り
ウェブサイトのパフォーマンス改善をしよう
ショップサイト、広告から遷移するLPサイトのパフォーマンス改善
#パフォーマンス
from パフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置く
Do it once. Do it right. And, you'll never have to do it again.
一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。
#パフォーマンス
from Webブラウザのもう一つのパーサ: Preload Scanner | PerfData
パフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置く
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
#React #パフォーマンス
https://twitter.com/Shin_Engineer/status/1724035603464122526
Reactパフォーマンスチューニングの流れ🚀
①React dev toolsのProfilerでレンダリング時間の計測
②遅延が発生しているボトルネックを発見
#設計 #状態管理 #GUI #宣言的UIの設計レシピ #3D #アーキテクチャ
主にゲーム開発の文脈でのデータ指向型のプログラミングスタイルと、技術スタックの総称
データ、処理、レンダリングを分ける考え方で、ECS(Entity Component System)が基盤となっている
これを読むと全体感が端的につかめる
Unity DOTS
#宣言的UIにおける6種のステート #状態管理(GUI) #宣言的UIの設計レシピ
GUIのモジュール間の内部接続=(コンポーネントを跨ぐ状態共有)を目的としたステート
React.ContextやRedux Toolkitのsliceに相当する
https://react-community-tools-practices-cheatsheet.netlify.app/state-management/poimandres/
#Next.js #パフォーマンス
Next.js 13.5 | Next.js
We've made an exciting breakthrough to optimize package imports, improving both local dev performance and production cold starts, when using large icon or component libraries or other dependencies th
#設計 #CQS #アーキテクチャ
#WIP #思考実験
大前提:
要求分析
システムの振る舞いを設計する際はコトに着眼する
#宣言的UIの設計レシピ
https://react.dev/reference/react/Suspense
React v18のSuspenseで開発はどう変わるのか
理論がちゃんとある
Algebraic Effects
#React #技術の審美眼
以下をまとめながらVanillaの優位性を考えだした
ReactのSignalとAtomic State Managementの動向を追う
React Server Components
ライブラリを選定する際も最近はReact非依存かどうかを強く意識するようになった
#パフォーマンス
Tree shaking - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
Tree Shaking | webpack
Tree-shaking versus dead code elimination | by Rich Harris | Medium