So now we want to replace one user when we click the 'x' button. To do that, we want: 1. Get the cached network data for generating the userList. 2. Then get a random user from the cached data. 3. Showing the user in the list. We have the function to…
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.8/rx.all.js"></script> <meta charse…
First thing need to understand is, Reactive programming is dealing with the event stream. Event streams happens overtime, which not stay in the memory. For example, the array we have: var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13']; W…
In currently implemention, there is one problem, when the page load and click refresh button, the user list is not immediatly clean up,it is cleared after the new data come in. So two things we need to do, 1. Hide User Elements when the user object i…
Currently we show three users in the list, it actually do three time network request, we can verfiy this by console out each network request: var responseStream = startupRequestStream.merge(requestOnRefreshStream) .flatMap(requestUrl => { console.log…
We will learn how to perform network requests to a backend using RxJS Observables. A example of basic jquery request: console.clear(); var requestStream = Rx.Observable.just('https://api.github.com/users'); //Current requestStream is just a stream //…
Now we want each time we click refresh button, we will get new group of users. So we need to get the refresh button click event stream: var refreshButton = document.querySelector('.refresh'); var refreshClickStream = Rx.Observable.fromEvent(refreshBu…
RxJS is super when dealing with the dynamic value. Let's see an example which not using RxJS: var a = 4; var b = a * 10; console.log(b); a = 5; console.log(b); So you change a, it won't affect b's value because b is already defined.... So if you want…
This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value evolving over time. It allows you to specify the dyna…
系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LINQ风格编写基于观察者模式的异步编程模型.简单点说Rx = Observables + LINQ + Schedulers. 2.为什么会产生这种风格的编程模型?我在本系列文章开始的时候说过一个使用事件的例子: var watch = new FileSystemWatcher(); watch.C…