RxJS入門
西田雅博 株式会社ビズリーチ HRMOS事業部 エンジニア 最近はフロントエンドメイン、サーバーサイドもやってました Angular4, Play Framework (Scala), React 雑? この勉強会の後半で必要になる RxJSの前提知識だけカバーします もくじ RxJSってなに Observable Subject BehaviorSubject RxJSってなに 非同期やイベントのコールバックをmap/filter/reduceなどのコレクションのAPIぽく扱えるライブラリ Rx.Observable.fromEvent(window, 'click') .distinctUntilChanged( (prev, next) => prev.pageX === next.pageX ) .filter(ev => ev.pageX < 400 && ev.pageY <
React + RxJSで始める状態管理 - CARTA TECH BLOG
こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
RxJS を使って、Vuex のようなものを書いた - kitak blog
散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外、簡単にできました。 ステート、算出プロパティ(ゲッター)、アクション、ミューテーションを一通り実装していますが、アイディアの検証レベルで書いたものなので、算出プロパティの依存関係を明示的に指定しないといけなかったり等、細かいところは色々違っています。 const Rx = require('rx-lite') class ReactiveProperty { constructor(state, name, initialValue) { this.subject = new Rx.BehaviorSubject(ini
Rx(RxJS)を学ぶのにredux-observableは結構良いんじゃないかという話
ここ最近redux-observableを触りまくって、過去何度も挫折してたRxがちょっとわかるようになってきた。 そこで「redux-observableって実はRx入門に良いのではないか？」と感じたのでちょっと自分なりの考えをまとめてみる。多分@ngrx/effectsでも同じ事が言えると思う どんな点redux-observableはRx入門に良いと思うのか？その1.「Everything is stream」はちょっと難しい。「Actions is stream」で考えると難易度下がるRxといえば「Everything is stream」。だが、Rx初学者の自分にとってハードルになっていたのではないかな？と感じた。 cycle.js、recomposeで挫折していた話recomposeではcomponentFromStreamでvdom$とコンポーネントがstreamになっていた
実装して学ぶRxJS - undefined
実際にいくつかのオペレータを実装してみたらRxの気持ちがわかるかと思い実践してみました。 簡素化するために以下の方針とします。 unsubscribeしない errorハンドリングしない 実装してみたのは以下です。 of map subject filter delay fromPromise combineLatest switchMap Observable 何はともあれ、まずはObservableを実装します。 class Observable { constructor(producer) { this.subscribe = producer } } コードはこれだけで、producerを受け取って、自身のsubscribeに接続します。 producerはobserverを引数にとって、次に、どんなタイミングで、どんな値を流すか決定する関数です。 現時点ではイメージもわかないと
RxJS を学ぼう #4 - COLD と HOT について学ぶ / ConnectableObservable | Recruit Tech Blog
RxJS を学ぼう #4 - COLD と HOT について学ぶ / ConnectableObservable wakamsha これはいわゆる『COLD』という性質に限った話であり、実は Observable には subscribe せずともデータを流す仕組みが用意されています。そのような性質を『HOT』と呼びます。この二つの性質の違いを理解することは Rx を使いこなす上で避けて通ることは出来ません。今回はこれら COLD と HOT についてご紹介します。 COLD 1) subscribe されるまで値を流さない COLD は下流で subscribe されるまで値を流しません ( ストリームが稼働していない状態 ) 。仮に subscribe されていない Observable に値を流しても流れが途切れるだけで、値は処理されることなく消滅してしまいます。通常、Observa
RxJS を学ぼう #3 - 知ってると便利な ( かもしれない ) オペレータ 8選 | Recruit Tech Blog
RxJS を学ぼう #2 – よく使う ( と思う ) オペレータ15選 というエントリにて『頻出するオペレータ』をご紹介しました。RxJS 5.x系には約90ものオペレータがありますが、いきなりその全てを習得するのは無理がありますし必ずしも全てを知る必要はありません。 今回は前回ご紹介したものほど使う頻度は高くないけど、知っているとなにかと便利なオペレータをご紹介します。前回と今回のを合わせればそこそこのアプリケーションは作れてしまうのではないでしょうか。 Observable.do Observable ソースから流れてくる全ての値に対して任意の処理 ( 副作用 ) を実行します。ただし、do の戻り値は ソースから流れてきた Observable そのままで、副作用の結果は流れません。 const clicks = Rx.Observable.fromEvent(document.q
RxJS を学ぼう #2 - よく使う ( と思う ) オペレータ15選
RxJS 5.x系には約90ものオペレータがありますが1)4.x系の頃は約140あったので、これでも相当少なくなった方なのです…、いきなりその全てを習得するのは無理がありますし必ずしも全てを知る必要はありません。頻繁に利用するのはそのうちのごく一部であり、あくまで所感ですが二十も覚えれば大概のアプリは作れることでしょう。 今回はいま現在実際に開発している弊社プロダクトのコードから特に使用頻度の高いオペレータ15個をご紹介します。 RxJS/categories.md at master · Reactive-Extensions/RxJS rxjs/MIGRATION.md at 5.0.0-beta.0 · ReactiveX/rxjs Converting events to Operators Observable.of 引数に渡された値をそのまま流して終了するだけの Observa
RxJS を学ぼう #1 - これからはじめる人のための導入編 | Recruit Tech Blog
React の登場と共に web フロントエンド界隈でも注目を集めるようになったリアクティブ・プログラミング ( RP ) 。その中でひときわ存在感を放っている1)オレ調べ。 RxJS について学んでみようと思います。 ReactiveX そもそも RxJS って何？ RxJS は Reactive Extensions for JavaScript の略称です。Observables というアーキテクチャを用いたリアクティブ・プログラミング用のライブラリであり、非同期処理 ( クリックなどイベント駆動の処理も含まれます ) を簡潔かつ可読性高くコーディング出来ることを主な目的としています。 で？Reactive Extensions ( Rx ) って何？ 元々は Microsoft が C# 向けのライブラリとして設計・開発したものです。2009年に始動したプロジェクトから生まれたこの
What happens when you use RxJS in React?
Update (02.02.2019): more than two years ago, while experimenting with RxJS and React, I’ve created a library presented in this post. Please note that in the meantime, that library was deprecated. Using observables seems like a good thing. So why don’t we use it in React apps more often? With observables we can easily manage asynchronous data streams, but what is a stream in a React component? Str
RxJSを例とした独学の10ステップ｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
エンジニアは常に学習していく職種ということで、自分で学習の計画をたてられることは重要だと考える。今回は、Soft Skillsという本で、独学の方法について触れていたので、それを少し整理してみようと思う。 学習の10ステップ あげられていた10のステップは以下だった。 Get the big picture Determine scope Define success Find resources Create a learning plan Filter resources Learn enough to get started Play around Learn enough to do something useful Teach 詳しい例や説明は本を読むのが1番良いと思うので割愛するが、ここでは、これらをRxJSの学習を例に取り、試しにプロセスを作成してみる。 Get the bi
RxJS — Six Operators That you Must Know
Subscribe to Observables in order but only when the previous completes, let me know, then move to the next one. Use this operator when the order is important, for example when you need to send HTTP requests that should be in order. 2. forkJoin —forkJoin is the Promise.all() of Rx. Don’t let me know until all the Observables are complete, then give me all the values at once. ( Array ) First, let’s
Create A Simple Reactive Store For Angular | Angular Class
Create A Simple Reactive Store For Angular by lollosas | Mar 4, 2019 | Programs | 0 comments Angular 2 uses observables for many features and has a peer dependency on RxJs for its robust API around observables. Did you know viralme.io was created with angular2? The community has adopted a single store approach for dealing with state in modern applications. Let’s build a store for our Angular appli
On The Subject Of Subjects (in RxJS)
Subjects in RxJS are often misunderstood. Because they allow you to imperatively push values into an observable stream, people tend to abuse Subjects when they’re not quite sure how to make an Observable out of something. The pattern looks a little like this… // What people usually first do with Subjects when they find them // (TRY NOT TO DO THIS)const subject = new Subject(); button.addEventListe
Understanding Reactive Programming and RxJS
RxJSUnderstanding Reactive Programming and RxJSUsing Reactive programming and RxJS, you can simplify your programming logic and make your programs easier to understand. Let's build a weather app to show this off! TL;DR RxJS is a library that allows us to easily create and manipulate streams of events and data. This makes developing complex but readable asynchronous code much easier. Creating large
Reduxの概念をRxJSとTypeScriptで理解する(初心者向け) - Qiita
(2016/12/15追記) この記事はDeprecatedです。 Reduxの概念をRxJSとTypeScriptで理解する ver.2 が最新版になります。 GitHubリポジトリはこちら → ovrmrw/understanding-redux-with-rxjs git cloneしたらnpm installしてnum run tsですぐに動かせます。 (注: Reactの話は一切出てきません) Reduxとは Redux公式 アプリケーション全体で状態(state)を一つのJSONツリーの構造で持ち、それをActionがキックされる度に全体更新して配信するという概念。 僕は最初FluxとかReduxとかよくわからなかったけど、色々参考にしながら自分で書いてみたらようやく理解できました。 Middlewareという概念はよくわからなかったし今でもよくわかりません。 ロガーとか便利な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Being RxJS Subjects Savvy
Eric Ponto
Why RxJS Is The Hottest Way To Handle Async
RxJS + Redux + React = Amazing
