この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり「ビジネスロジックの変更や追加」に対応するコストを低く保つこと（技術的負債の抑制）ができるようになったことを解説するものです。 技術的負債の抑制には、技術的負債の原因となりがちな「広範囲の密結合」と「適切な疎結合を保つ仕組みの欠如」が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論（ここでは「現代的な設計論」とよぶもの）です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。 ポイントは ある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む（ビジネスロジックの変更や追加に対
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
フロントエンドのつくりかた
フロントエンドの特定技術について語る解説は多くあれど、そもそもフロントエンドのつくりかたについて語った解説は多くないのではないでしょうか。 フロントエンドという大きな領域ですので恐れ多くもありますが、私が GUI プログラミングに携わった経験をもとにお話した内容のスライドとその補足をここでしたいと考えます。 スライド スライドのページ数は多いですが、差分がほとんどですので、それほど構える必要はないです（カーソルキーに負担がかかるという問題を除いて）。 補足解説 大きなテーマごとに補足をしていきます。 スライドで取り上げているテーマは次の４つです。 GUI アーキテクチャパターン データの同期 エラーハンドリング コンポーネント構造 「GUI アーキテクチャパターン」はいわゆる MVC や MVP といわれるものがどういったものかを解説する章です。 「データの同期」は画面と実際のデータが離れ
Kubernetesの「ブランチデプロイ」で誰もがハッピーなDev環境を作る - HRBrain Blog
こんにちは。HRBrainでインフラエンジニアをしている間野(@mano_0307)です。 今年の5月にインフラエンジニアとして入社しました。Kubernetesを使っている弊社で、Kubernetesをまったく触ったことのない私のような人間がインフラエンジニアになれるというのが弊社の素晴らしいところです。合言葉は「トライドリブン」。日々トライができる素晴らしい環境です。 Dev環境という各社共通の悩み 多くの会社で何かと困っているのがdev環境なのではないかと思います。 dev環境今日も空いてないよ・・・フルリモートでどうせバレないし、寝ちゃお あれ？久々に使ったdev5環境がうまく動かないよ。・・・(数時間後)あー、最新のmasterがrebaseされてないからAPIのinterface変わってんじゃん！うわー寝よ・・・ そろそろdev環境増やしたいな・・・でも、あの設定も複製しなきゃ
後学のために自分の考えていることをまとめてみる。 考えられるパターン これまでの経験から以下4つのパターンがある。 ローカルStateでprop-drillingする ローカルStateかつイベント経由でデータ交換をする グローバルStoreとローカルStateを併用する グローバルStoreのみを使用する 1. ローカルStateでprop-drillingする propとしてコンポーネント間のデータをやりとりする手法。 ほぼすべてのUIコンポーネントを親からデータを受け取りDOMを出力するだけの純粋な関数として表現できるため、全体の設計自体はシンプルになる。手間は多いが魔法は少ない。 コンポーネントの粒度が小さいアプリケーションの場合にはいわゆるバケツリレーと揶揄されるデータの受け渡しが頻発し、これに嫌悪感を持つエンジニアもいる。 2. ローカルStateかつイベント経由でデータ交換を
Kubernetesなどの開発をホストし、クラウドネイティブを推進する団体「Cloud Native Computing Foundation」（CNCF）は、クラウドネイティブ関連のテクノロジーやツール、サービスなどの評価を示した「CNCF Technology Radar」を発表しました。 CNCFではオープンソースによるさまざまなクラウドネイティブ関連ツールの開発をホストするだけでなく、クラウドネイティブなテクノロジーを活用し議論する立場のエンドユーザー企業もメンバーとして所属しています。 CNCF Technology Radarは、このエンドユーザー企業メンバーに対してアンケートを行い、その結果を基にテクノロジーやツール、サービスなどの評価をまとめたものです。 評価は「Adopt」「Trial」「Assess」「Hold」に分かれています。 「Adopt」はエンドユーザー企業も活
readyfor_redux_study#1 READYFOR株式会社 さんで開催した、Redux 勉強会第一回の資料です。
Vue + Vuexで中〜大規模なアプリケーションの開発をするとき、どんな設計にするか未だによく悩みます。試してみては捨ててを繰り返していて、そろそろ自分の中でベターなパターンを固めたいと思いつつも固まらず、気づけば数年経ちました。 そういった前提を踏まえつつではありますが、現時点で設計時に意識していることをTips的に少しずつまとめてみようと思います。今回はVuexのGetterに関するお話です。 Getterの役割を見直す 副作用のないクエリとして実装する プロパティアクセスとメソッドアクセスを区別して命名する プリミティブでシンプルなクエリとして実装する 表示用の加工処理はComponentに実装する 例外1. 加工された値の賞味期限が長い場合 例外2. 加工処理が複数Componentで繰り返される場合 おわりに Getterの役割を見直す VuexはFluxアーキテクチャを参考に
React Context を用いた簡易 Store
課題 redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。 なので、次の 2 つを用意する 現在の state を参照する const appState = useAppState() 現在の state を更新する関数を返す const setAppState = useSetAppState() React.useState() と違って分割している理由は、主にパフォーマンス上の理由 大域な参照なので、可能な限りステートを参照したくない setState() の API は (prevState: State) => State も取れるので、状態更新用途に限ってはそもそも useAppState() せずに済むことが多い でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする 毎回書いてるボイラー
強い言い方だけど、Flux Architecture の失敗として Store に Store という名前をつけたことがあると思っている。 あるいは、黎明期の Flux は Store という名前で良かったんだけど、 #Redux はその名前を引き継がないほうが良かったんじゃないかと思っている。
Mirrativ Androidエンジニアのmorizoooです。今回はAndroidアプリをFluxにリアーキテクチャした話をします。 背景 Mirrativは2015年春頃に開発が始まり、もうすぐリリースから6周年を迎えようとしています。以前はアーキテクチャについてのルールが決まっておらず、個々人が思うがままコードを書いており、開発しているメンバーでさえ処理の流れが追えなくなっているような状況でした。そこで、まずは既存のコードの改善を行いました。詳しくは以下の記事をご覧ください。 tech.mirrativ.stream 既存コードを改善した後に、開発の指針としてFluxアーキテクチャを選定しました。 Fluxを選定した理由 状態がどこで更新されているのか分からなくなるという一番の課題が、Flux の導入によって解消できそうだった iOSはFluxで実装していくという話が出ており知見を
💡 IntuitiveStores are as familiar as components. API designed to let you write well organized stores. 🔑 Type SafeTypes are inferred, which means stores provide you with autocompletion even in JavaScript!
この記事は「Eureka Advent Calendar 2020」1日目の記事です。 Head of iOS & Pairs iOSアプリ開発責任者のMuukiiです。 本記事ではPairs iOSアプリとPairs Engage iOSアプリが活用している状態管理の方法についてお話します。 この記事はFlux等のUnidirectional-data-flowについてある程度の知識と経験がある方向けとなっています。 概要Fluxのコアコンセプトとしてストアパターン(store-pattern)の説明ストアパターンの目線で設計を考えることでより効果的なソフトウェア改善に取り組むことができる。Fluxやストアパターンのようなデータを中心とした考え方は簡単だが扱いは難しいその難しさはパフォーマンスを維持することにある。エウレカのiOSエンジニアで開発されているVergeGroup/Verge
Flux Keyboard
Save time with a fully customisable display and mechanical keys optimised for speed. Any Software Customise your keyboard with keyboard shortcuts relevant to each app. Presets for 27 popular apps are included (see FAQ for full list) and our included utility makes it easy to make your own for any app. Adaptive DisplayA Full HD IPS display allows customisation of the keyboard with any background ima
CNDT 2020 での発表資料です 「GitOps ツール徹底比較！あなたに必要なツールがきっと見つかる」
freee会計の React 17 化を進めていたら flux に PR を出していた話 - freee Developers Hub
この記事は freee Developers Advent Calendar 2021 の 21 日目の記事です. freee でエンジニアをやっているけむりだま (@_kemuridama) です. freee会計の開発をメインに freee Tech Night の運営リーダーをやっていたり, オンラインになった社内イベントの企画や配信をやっていたりします. 今回は freee会計の React 17 化を進めていた際に facebook/flux のバグにハマって, 修正のために PR を出してパッチリリースをしてもらった話をしようと思います. 2018 年に新卒で入社してから毎年 Advent Calendar に参加してますが 3 年ぶり 2 回目の技術的な内容になりますｗ 経緯 freee会計を React 16 から 17 にアップデートするために, アップデート起因でサービ
React | Redux(Actions, Reducers, Store)による状態管理 - わくわくBank
Reduxによる状態管理の動作確認を行います。Actions, Reducers, Storeなどの役割を実際の処理を通じて確認します。 Reduxの3原則 動作確認をする前に、Reduxの3原則を復習しておきます。 https://redux.js.org/introduction/three-principles にてReduxの3原則が説明されいています。 Single source of truth State is read-only Changes are made with pure functions Reducerは純粋関数でなければならないなどのReduxを利用する上での注意点が述べられています。
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコード - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコード 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespacedHelpers } from 'Vuex'; const {
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
フロントエンドアプリケーションにおいて状態をどこに置くべきか論 - Runner in the High
継続的デリバリを実現するツールは何がおすすめ？「CNCF Technology Radar」が公開
Redux の利点を振り返る
VuexのStore設計のTips - 薄いGetter
Flux の失敗は Store に Store という名前をつけたこと - fsubal
Androidアプリをリアーキテクチャした話 - Mirrativ Tech Blog
Pinia | The intuitive store for Vue.js
iOSアプリにおけるFluxの難しさと開発を加速させる”store-pattern” — SwiftUI/UIKit
GitOps ツール徹底比較！あなたに必要なツールがきっと見つかる