click

Rxjs Và Reactive Programming, Rxjs Toàn Tập P1 Giới Thiệu Rxjs Là Gì

Rxjs Va Reactive Programming Rxjs Toan Tap P1 Gioi Thieu

Rxjs Và Reactive Programming, Rxjs Toàn Tập P1 Giới Thiệu Rxjs Là Gì

Trailer

Ngày tháng trong thời gian cuối năm bận bịu, các anh chị em hăng say thao tác làm việc để bảo đảm an toàn hiệu quả đúng hạn hiện ra. Thôi thì dành vài phút xem Trailer Mắt biếc version Lập trình viên cùng mình nhé, vừa vui chơi vừa tích góp kỹ năng và kiến thức haaaa

*

♪ ♪ ♪ có chàng trai code lên cây ~~ ♪ ♪ ♪

Ngạn dev: – Nộiiii, sau đây con muốn cưới Hà Lan làm vợ !

Nội Ngạn: – Con bé ấy dễ thương. Mắt nó xinh xắn như Mắt biếc. Nội sợ … con bé đó sau đây sẽ khổ.

Bài Viết: Rxjs and reactive programming

Theo dòng thời gian, sau thời điểm rời làng Đo Đo, Hà Lan lên thành phố đã xin vào một trong những doanh nghiệp phần mềm ở mảng Front-end Web. Và đúng như lời của nội, Hà Lan khổ thiệt ??.Mắt dường như không còn gì khác biếc như xưa vì phải ngồi máy tính xách tay tâm lý không ít ?))

Hà Lan: – Lập trình không đồng hóa chưa bao giờ đơn giản dễ dàng cả !

Cũng chính cho nên vì vậy mà khi tiếp cận tới RxJS, Hà Lan thấy cảm thấy hơi khoai mì. Chúng ta hãy cùng Hà Lan tìm hiểu xem RxJS là gì để giúp đời bớt khổ nhé

*

Reactive Programming

Trước lúc bước vào RxJS, ta ghé thăm khái niệm Reactive Programming:

Reactive programming is programming with asynchronous data streams

Reactive programming là phương thức lập trình xoay quanh data streams and nó giải quyết và xử lý các sự việc của asynchronous. Đừng hiểu nhầm nhé, nó rất có khả năng giải quyết và xử lý nếu với tổng thể synchronous nữa.

Bạn cũng sẽ có thể hình dung data streams như hình sau, với data được gửi đến nhìn trong suốt dòng thời gian của 1 stream (over time), cũng giống như một array có các thành phần được gửi đến lần lượt theo thời gian:

*

Và những chúng ta có thể coi mọi thứ là stream: single value, array, event.

*

Không những thế, khi làm việc với stream, những chúng ta có thể có value, error, hay complete signals – Điều mà các API trước đó của rất nhiều event trong Javascript còn thiếu, chúng có trải qua không ít interface không giống nhau cho các loại event không giống nhau, Observable ra đời để tổng quát hóa các interface này lại.

RxJS

Như đã nhắc đến ở trên cao, RxJS giúp chúng ta có được nổi biệt reactive trong lập trình ứng dụng Javascript:

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

Để phân tích và lý giải chi tiết hơn, mình xin phép gói gọn nhỏ trong ReactJS ví dụ điển hình, chúng ta hay được sử dụng Flux, Redux, MobX, MST để giải quyết và xử lý các luồng tài liệu. Trong Redux, ta chứa một vài midleware để giải quyết và xử lý sự việc bất đồng hóa rất có khả năng nói đến như redux-saga, redux-thunk. Ở Saga and Thunk thì nhiều khi tương đối nhiều biến làm khó khăn reducer lên khi ta chỉ mong sao kiến thiết một trọng trách đơn giản.

Xem Ngay:  Khổ Qua Tiếng Anh Là Gì

Và đây đấy là lúc ta tìm đến RxJS ??. RxJS ưng ý một vài API cần sử dụng cho bất đồng hóa tác dụng, từ giải quyết và xử lý luồng tài liệu cho đến bắt lỗi and dừng request; nổi bật rất có khả năng nói tới như Observables – hỗ trợ subscribe những event and kiến thiết các RxJS operations tương xứng.

Có lẽ rằng đó cũng chính là nguyên do Angular đi kèm với 1 dependency là RxJS giúp cho nó cũng trở nên reactive, một trong những phần mềm Angular là 1 reactive system. Dễ thấy nhất tại chỗ này đấy là EventEmitter, hay Reactive Forms, bạn nào đã từng có lần học Angular hẳn cũng quen thuộc gì với nó.

Hmmm…

có vẻ như như có nhiều thuật ngữ mới nhỉ, những các bạn sẽ hiểu rõ chúng vào phần tiếp theo sau

RxJS Concepts

Một số trong những khái niệm cơ bản trong RxJS:

StreamProducerObservableObserverSubscriptionOperatorSubject

Cùng tìm hiểu chúng nào !

Stream

Định nghĩa

A stream is a sequence of data elements made available over time, as items on a conveyor belt being processed one at a time rather than in large batches.

Như vậy, theo một phương thức thức khác, cũng sẽ có thể hiểu đúng bản chất stream là 1 chuỗi các sự kiện đang giới thiệu được thu xếp theo thời gian.

Ví dụ

Số lần bấm vào nút trong một giây. Cho nên vì thế, tổng thể toàn bộ các click chuột sẽ được nhóm thành một luồng.

Trong RxJS, ta rất có khả năng tạo cho một stream xuất phát điểm từ một hoặc nhiều giá trị primitive, array, event, Promise, callback hay như là 1 vài kiểu kết cấu tài liệu khác.

Producer

Định nghĩa

A producer is the source of values for your observable

Ví dụ

Nó là bất kỳ kiểu tài liệu gì đó cho phép ta lấy, truyền giá trị qua observer.next(value) như web socket, DOM events, iterator, array.

Observable

Định nghĩa

Observable is just a function that ties an observer to a producer và returns a function.

Rx.Observable class có khả năng tạo cho các observable từ các kiểu tài liệu đã kể ở phía trên.

Một điểm cảnh báo tại chỗ này, Observable is inert. Nói vui vấn đề đó nghĩa là, Observable sẽ cứ ngồi ì đấy cho tới lúc ta subscribe, nó mới bắt đầu listen (khá giống với function-declaring and function-invoking nhỉ).

Ví dụ

// 1. From event: MouseEvent stream (new event is created every time a clicklet clicks = Rx.Observable.fromEvent(document, “nhấp chuột chuột”);// 2. From array: streamconst array = ; let resultA = Rx.Observable.from(array); // 3. From Promise returned by fetch()let resultP = Rx.Observable.fromPromise(fetch(“http://haodev.wordpress.com/”));Phân loạiCold ObservableAn observable is cold if its underlying producer is created và activated during subscription (inside subscription)

Ví dụ

Xem Ngay:  Bán Kết Là Gì - Bán Kết Nghĩa Là Gì

// Anything, subscribes `source`, gets its own instanceconst source = new Observable(observer => { const socket = new WebSocket(“http://haodev.wordpress.com/”); // …});Hot ObservableAn observable is hot if its underlying producer is either created or activated outside of subscription(outside subscription)

Ví dụ

// Anything, subscribes `source`, shares same instance, multicast to all subscriberconst socket = new WebSocket(“http://haodev.wordpress.com/”);const source = new Observable(observer => socket.addEventListener( “message”, e => observer.next(e)));ReviewObservable là hot hay cold dựa dẫm vào vấn đề Producer được tham chiếu hay là tạo mới; Nếu như lâm vào cảnh cả hai điều kiện, chắc rằng, nó là warm observable (J4F)

Observer

Định nghĩa

In Reactive programming, Observer subscribes to an Observable. Then that observer reacts to whatever item or sequence of items the Observable emits.

Observer đấy là param trong chiêu bài Observable.subscribe(observer).

Trong Observer gồm các callbacks tương xứng: next(), error() and complete()(không cần thiết phải có vừa đủ tổng thể toàn bộ) được gửi đến bởi Observable để giải quyết và xử lý các trạng thái tương xứng.

Ví dụ

// 1. Full callbacksconst observer = { next: x => console.log(“got value ” + x), error: err => console.error(“something wrong: ” + err), complete: () => console.log(“done”),};// 2. Just an next function (like then() in Promise)var observer = (x) => { console.log(“Completed”);}

Subscription

Định nghĩaSau khoản thời gian Observable được tạo cho, nó sẽ ảnh hưởng chưa listen streams ngay trong lúc đó. Để invoke một Observable, những bạn cần phải subscribe nó.

Xem Ngay: Ẩm Thực Cajun Là Gì ? 4 điều Thú Vị Làm Nên ẩm Thực Cajun

Subscription được ra đời khi ta subscribe Observable, nó thường cần sử dụng cho sự unsubscribe() Observable đó.

Ví dụ

let resultP = Rx.Observable.fromPromise(fetch(“http://haodev.wordpress.com/”));// With observer type 1resultP.subscribe(x => console.log(“got value ” + x))// With observer type 2resultP.subscribe(x => console.log(x), e => console.error(e));// With observer type 3resultP.subscribe({ next: x => console.log(“got value ” + x), error: err => console.error(“something wrong: ” + err), complete: () => console.log(“done”),});Khi ta không hề muốn listen stream đó nữa:

let subscriptionP = resultP.subscribe(observer);subscriptionP.unsubscribe();

Okayyy, sau thời điểm đã biết Observable là gì rồi, ta cùng tìm hiểu sang Operator nào

Operator

Định nghĩa

Operator is also JUST FUNCTION.

Với Operator, ta vẫn rất có khả năng lập trình hàm với Observable:Operator là 1 pure function với Input là Observable and Output là 1 Observable khác, giữ được Observable Input không trở nên đổi thay.

Khi chúng ta subscribe()/unsubscribe() Observable Output thì cùng theo đó cũng subscribe()/unsubscribe() Observable Input.

Giống như với array có rất nhiều những cách làm việc hỗ trợ, Observable cũng sẽ có đa dạng các Operators với khá nhiều mục tiêu không giống nhau như create, filter, transform, combine, handle, utils, multicast, etc.

Ví dụ

// Get maximal value of number seriesRx.Observable.of(5, 4, 7, 2, 8).map(num => num*10).max().subscribe(x => console.log(x)); // 80Custom OperatorNgoài các built-in operators, ta cũng sẽ có thể viết ra các custom operators:

function multiplyByTen(input) { let output = Rx.Observable.create(function subscribe(observer) { input.subscribe({ next: v => observer.next(10 * v), error: err => observer.error(err), complete: () => observer.complete() }); }); return output;}const input = Rx.Observable.from();const output = multiplyByTen(input);output.subscribe(x => console.log(x)); // 10 20 30 40

Subject

Định nghĩaIn RxJS:Plain Observables are unicastSubject:Be a special type of Observable that allows values to be multicasted to many ObserverMaintain a registry of many listeners/subscriber.

Xem Ngay:  Tín Dụng Ngân Hàng Là Gì

Hmmm… nghe khoai mì nhỉ? Bảo sao Hà Lan rầu vậy?

Để nhìn nào !!! Hãy dẹp Subject sang 1 bên, tìm hiểu Unicast vs. Multicast là gì đã nhé

*

Unicast vs. Multicast

KeyUnicastMulticast

Def.A transmission/stream sends IP packets to a single recipient on a networkA transmission sends IP packets to a group of hosts on a network
Ex.Plain ObservableRxJs Subject, Promises
Phân tích và lý giảiNếu ta subscribe tương đối nhiều lần với 1 observable gốc thì nó sẽ ảnh hưởng không được san sẻ trình diễn. Có nghĩa là, những lần subcribe là bạn đang tạo cho một observable mới.Rất có thể subscribe tương đối nhiều lần với obseravle gốc.
Hình dungBạn vào Youtube, mở video clip clip gì đó đã được thu sẵn and xem, nó play từ trên đầu đến cuối video clip clip. Một người khác vào xem, Youtube cũng trở thành phát từ trên đầu đến cuối như thế, hai người không tồn tại tác động gì về thời gian hiện tại của video clip clip mà mình đang xem.2++ người vào xem video clip clip ở Youtube, nhưng video clip clip đó đang phát Live (trận bóng đá U23 ngày qua ví dụ điển hình :v). Hiện tại, những người bắt đầu nhấp chuột chuột vào xem sẽ có được cùng một thời gian của video clip clip đó.

Như vậy, Subject là 1 plain observable đặc biệt có công dụng kiến thiết việc gửi tài liệu đến nhiều Observers (multicasting).

Review

Mỗi Subject là 1 Observable

Với mỗi Subject, ta rất có khả năng subscribe vào nó, ưng ý cho nó một Observer and rất có khả năng nhận data tương xứng.

Mỗi Subject là 1 Observer

Bên phía trong Subject có chứa các method next(), error(), complete() tương xứng để rất có khả năng subscribe vào Observable ví dụ điển hình. Trường hợp cần gửi tài liệu cho các Observers mà Subject đang chủ tịch, ta chỉ việc gọi hàm tương xứng của chính bản thân nó là được.

Notes

Tóm tắt lại thì, RxJS về thực tế là 1 thư viện nhỏ gọn trong Reactive Programming.Các công dụng khá khó khăn rất có khả năng được kiến thiết đơn giản dễ dàng với việc bổ trợ của Observables and các Operators.

Tuy vậy, có một vấn đề cần cảnh báo, khi subscribe một observable tương đối nhiều lần (đặc biệt là cold observable) thì vô hình dung chung sẽ tạo nên nên nhiều subscription tới một observable. Vì thế, khi cần sử dụng tới Observable trong RxJS ta phải cực kì cẩn trọng tránh tạo ra các sự việc như memory leak, resource leak,…

Cá thể mình thấy cảm thấy RxJS là thư viện khá là rất khó khi mới tiếp cận; thế nếu như rất có khả năng hiểu được thực tế rồi thì RxJS rất có khả năng trở thành một trợ thủ đắc lực ^^

The more you use it, the more you can do with it.

The end

Yeahhhh, sau thời điểm điểm qua các từ khóa trên đây thì Hà Lan đã hiểu hơn về Reactive Programming and RxJS Concepts rồi nè

Mong rằng nội dung bài viết này rất có khả năng giúp ích được cho tất cả chúng ta mới tiếp cận tới RxJS như mình and cô Mắt biếc nhé. theo đó Hà Lan cũng dường như không còn gì khác phải code draft lên cây nữa rồi.

*

Cảm ơn tất cả chúng ta đã đọc bài san sẻ trình diễn này. Tặng mình 1 upvote để lại thêm động lực cho những nội dung bài viết sắp đến nha.

Xem Ngay: Then Là Gì

Bài viết liên quan thêm các nội dung bài viết về Technical tại chỗ này ^^

Happy Coding !!!

Reference: Tiep Phan”s post, Personal Blog, Ben Lesh from Medium via post 1, post 2.

Thể Loại: Chia sẻ trình bày trình diễn Kiến Thức Cộng Đồng

Bài Viết: Rxjs Và Reactive Programming, Rxjs Toàn Tập P1 Giới Thiệu Rxjs Là Gì

Thể Loại: LÀ GÌ

Nguồn Blog là gì: https://hethongbokhoe.com Rxjs Và Reactive Programming, Rxjs Toàn Tập P1 Giới Thiệu Rxjs Là Gì

Leave a Reply

Your email address will not be published. Required fields are marked *