タグ

ブックマーク / qiita.com/usagi-f (3)

  • Webパフォーマンス虎の巻

    Webパフォーマンス向上施策のために、今更ながら超速1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの?という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元: テクニックではなく、今、気で取り組むべきWebパフォーマンス (html5jパフォーマンス部 部長 竹洞さん) 心得 パフォーマンス向上に対する施策は大別すると以下の2通り 軽量化 (単純にやりとりするデータ容量を小さくすること) 圧縮 削除 最適化 (その時に最も適している実装・実行をとること) 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1

    Webパフォーマンス虎の巻
  • React+AtomicDesign実践編 - Qiita

    保守性の高い設計のために 今回業務上で、非常に保守性の高いUIをつくる必要が出てきました。 大きなシステムリプレイスをしなくても十分に拡張・改修が可能であること。(もちろん小さな改善を日々行えることが前提) こういった設計をするときは、横槍が入っても逃げ道があることが大事だと考えています。 挿げ替えや切り離しなど、コンポーネント設計はここに大きなメリットがあります。 アーキテクチャ選定 まずJavaScriptというベース知識さえあれば、あとは一般的なプログラミング手法の応用で拡張がしやすく、導入実績も豊富なReactプロジェクトにおいて採用。 実際に保守ができるかどうかを決定付けるのはプロダクトのコードだけではなく、対応する人間が順応できるかも重要になります。 幸いにもES6以降のJavaScriptであれば他言語の経験者も入りやすそうですし、jQueryから入っているデザイナーにもあ

    React+AtomicDesign実践編 - Qiita
  • React/reduxでつくったSPAがリリースされたので学んだことを晒す - Qiita

    時系列順に書いているので、話題がアッチコッチいきますが 現場のライブ感を重視しています! プロジェクトの後半で、すごい優秀な方が入ってきてくれたのでそこからの受け売りも結構混じっています。神様ありがとう。 プロトタイピング 何は無くともまずはプロトタイプを作成しました。 今回はUIライブラリとしてMaterialUIを採用。 superagentを使って外部JSONファイルを読み込んで、Reactコンポーネントとして表示するだけ。 この時点でのコードレビューでの話題は主に、CSSをどうするのか問題。 MaterialUIにコンポーネント自体のstyleは既に定義済みだが、それだけでは足りないレイアウト調整が発生しそうという懸念でした。 結論は、コンポーネント内に直接定義してしまってOK。 実際作業を進めてみたところ、最初の想定よりは補助的なCSS記述は不要でした。 reduxの導入 作成す

    React/reduxでつくったSPAがリリースされたので学んだことを晒す - Qiita
  • 1