Angular Pipe và RxJS Pipe

Chuyện cha mẹ đặt tên con cái

Số là Angular lúc nào cũng có vấn đề với việc đặt tên, từ angular JS (v1) cho đến hiện tại (Angular 2-3-4-5-6-....-101)

Trước đây, nếu như bạn đã từng viết ứng dụng với Angular JS, chắc bạn sẽ biết cách tạo ra và sử dụng 1 "filter". Ví dụ như:

Vd 1: Sử dụng 1 filter có tên là filter với điều kiện là chỉ lọc ra số lẻ.
< ul >  < li ng-repeat="n in numbers | filter:oddOnly" > {{n}} < / li > < /ul >

hay như

Vd 2: Sử dụng 1 filter có tên là uppercase để viết hoa một chuỗi.
{{ 'john' | uppercase }}

Điều buồn cười là khi bạn đã có một filter tên là filter (Vd1) thì bạn lại có thêm 1 service của angular là $filter, được dùng để gọi các filter trên:

$filter(numbers)('filter', oddOnly); // oddOnly là 1 function để kiểm tra số lẻ.

$filter('john')('uppercase');

Được đặt tên là bộ lọc nhưng đôi lúc bạn thấy nó không giống bộ lọc lắm, nói khái quát hơn, nó giống như "transformer" hơn, dữ liệu sẽ thay đổi sau khi đi qua cái filter ấy. Chắc có lẽ vì cái chuyện nhập nhằng này mà Angular đổi tên khái niệm này thành Pipe.

Pipe = cái ống.

Thứ gì đi qua cái ống này thì có thể nó còn nguyên hoặc đã biến đổi thành một thứ gì khác. Đây là cách nói dễ hiểu nếu bạn muốn biết Pipe là gì.

Nhưng cũng đã nói ở trên, cách đặt tên Angular Pipe này lại đụng với RxJS Pipe. Tuy nhiên, cũng không khó phân biệt lắm. Mọi thứ lúc này tương đối rõ ràng hơn rồi.

* Bạn cần xem trước Observable là gì (http://reactivex.io/documentation/observable.html)

Theo cách nói của riêng mình thì:

1) Angular Pipe là một hàm tinh khiết (pure function), nhận vào 2 tham số tham số đầu tiên là giá trị cần thay đổi, và tham số thứ 2 không bắt buộc là các dữ kiện / điều kiện phụ trợ cho việc thay đổi dữ liệu. Angular Pipe giống như filter của Angular 1, bạn có thể gọi tên Pipe mà bạn đã đăng ký với Angular Module ngay trong html template của bạn.

2) RxJS Pipe: không liên quan đến Angular Pipe là một pure function, nhận vào các pure function khác vốn là các operator cho Observable (tham khảo: https://blog.hackages.io/rxjs-5-5-piping-all-the-things-9d469d1b3f44). RxJS Pipe giúp bạn tái dụng các operator của Observable của bạn dễ dàng hơn.

Lần này tuy cách đặt tên Pipe có trùng nhau, concept nhét gì đó đi qua một cái ống cũng giống nhau, nhưng đối tượng mà 2 cái Pipe này hướng tới làm việc lại hoàn toàn khác nhau, cũng không quá khó để phân biệt đúng không?

Trên đây là ngu ý của mình về việc phân biệt Angular Pipe và RxJS Pipe một cách vui vẻ hơn. Các bạn có thể comment để cùng chia sẻ.