{"id":4636,"date":"2018-09-02T16:00:42","date_gmt":"2018-09-02T14:00:42","guid":{"rendered":"https:\/\/bjoernkw.com\/?p=4636"},"modified":"2018-09-15T16:44:10","modified_gmt":"2018-09-15T14:44:10","slug":"rxjs-observables-observers-subjects","status":"publish","type":"post","link":"https:\/\/bjoernkw.com\/de\/2018\/09\/02\/rxjs-observables-observers-subjects\/","title":{"rendered":"RxJS: Observables, Observers, Subjects &#8230;"},"content":{"rendered":"<p class=\"qtranxs-available-languages-message qtranxs-available-languages-message-de\">Leider ist der Eintrag nur auf <a href=\"https:\/\/bjoernkw.com\/en\/wp-json\/wp\/v2\/posts\/4636\" class=\"qtranxs-available-language-link qtranxs-available-language-link-en\" title=\"English\">English<\/a> verf\u00fcgbar.<\/p>When developing web applications &#8211; or in fact any kind of application that involves interaction via a user interface  &#8211; we inevitably have to deal with asynchronous events, perhaps even streams of such events, e.g.:<\/p>\n<ul>\n<li>mouse clicks<\/li>\n<li>asynchronous HTTP calls and subsequent display of data<\/li>\n<li>push notifications<\/li>\n<\/ul>\n<p>Because events are such an essential part of both the feature set and the user experience of many, if not even most, user-facing applications frameworks such as <a href=\"https:\/\/angular.io\/\">Angular<\/a> treat them as first-class citizens and provide developers with tools and design pattern implementations that facilitate both consumption and creation of events.<\/p>\n<p>For this purpose, Angular heavily draws upon <a href=\"https:\/\/github.com\/ReactiveX\/rxjs\">RxJS<\/a> &#8211; a reactive programming library for JavaScript &#8211; and makes extensive use of the patterns and APIs it provides.<\/p>\n<p>In case you wonder what reactive programming actually is there&#8217;s an excellent, in-depth introduction on the <em>subject<\/em> (pardon the pun &#8230;) <a href=\"https:\/\/gist.github.com\/staltz\/868e7e9bc2a7b8c1f754\">in this gist<\/a> by <a href=\"https:\/\/staltz.com\/\">Andr\u00e9 Staltz<\/a>.<\/p>\n<p>In a nutshell, he defines <strong>reactive programming<\/strong> as &#8220;[&#8230;] programming with asynchronous data streams&#8221;.<\/p>\n<p>Now, there are plenty of articles, tutorials, books and, last not least, manuals on both reactive programming itself and concrete implementations thereof, more often than not by people who&#8217;re far more knowledgeable in the subject matter than I am. Hence, I won&#8217;t even try to surpass their efforts.<\/p>\n<p>What I will try to do instead is to compile some useful articles as well as answers to <a href=\"https:\/\/stackoverflow.com\/\">StackOverflow<\/a> questions that shed light on various aspects of reactive programming. In part I do this out of selfish reasons because this way I have an easily accessible list of useful resources for future reference.<\/p>\n<p>So, without further ado, here goes:<\/p>\n<ul>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Observer_pattern\">A Wikipedia article covering the Observer design pattern<\/a>. This design pattern is the underpinning of most of what you can do with RxJS. Understanding what Observers and what Subjects are is vital to understanding reactive programming.<\/li>\n<li><a href=\"https:\/\/medium.com\/@benlesh\/on-the-subject-of-subjects-in-rxjs-2b08b7198b93\">On The Subject Of Subjects (in RxJS)<\/a> by <a href=\"https:\/\/medium.com\/@benlesh\">Ben Lesh<\/a>: How this pattern is implemented in RxJS and explanations of common pitfalls and misunderstandings.<\/li>\n<li><a href=\"http:\/\/rxmarbles.com\/\">RxJS Marbles<\/a>:<br \/>\n<em>Interactive diagrams of Rx Observables<\/em>. Visualise the control flow of the various RxJS operators.<\/li>\n<li><a href=\"https:\/\/medium.com\/@benlesh\/hot-vs-cold-observables-f8094ed53339\">Hot vs Cold Observables<\/a>, also by <a href=\"https:\/\/medium.com\/@benlesh\">Ben Lesh<\/a>. There are many explanations on the web about what hot and cold Observables are. His in my opinion is the most concise and easiest to grasp I&#8217;ve come across so far.<\/li>\n<li><a href=\"https:\/\/blog.angularindepth.com\/rxjs-understanding-lettable-operators-fe74dda186d3\">Pipeable operators<\/a> (what used to be &#8211; and still is in the article- called <del datetime=\"2018-08-04T20:23:36+00:00\">lettable operators<\/del>) by <a href=\"https:\/\/blog.angularindepth.com\/@cartant\">Nicholas Jamieson<\/a>: How they allow for operator chaining, reuse of custom operators and <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\">tree-shaking<\/a> (for keeping your packaged app small).<\/li>\n<li><a href=\"https:\/\/javascript.tutorialhorizon.com\/2017\/03\/23\/rxjs-subject-vs-observable\/\">Difference between Rxjs Subject and Observable<\/a> by <a href=\"https:\/\/javascript.tutorialhorizon.com\/author\/javascript\/\">Ryan Sukale<\/a>: Sometimes there can be some confusion around the terminology involved in RxJS. This article outlines the differences between Subject and Observable and what each of those is used for.<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/37364973\/promise-vs-observable\">Promise vs Observable<\/a>: Sometimes you don&#8217;t need everything Observables supply you with and the complexity that comes with that. In some cases, that is when you don&#8217;t actually have a continuous stream of asynchronous events but a single one of those, for instance when waiting for a single server response, a <em>plain, old<\/em> <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/promises\">Promise<\/a> might be all you need and the additional overhead (both in terms of simplicity and resource usage) of an Observable therefore isn&#8217;t required.<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/43118769\/subject-vs-behaviorsubject-vs-replaysubject-in-angular\">Subject vs BehaviorSubject vs ReplaySubject in Angular<\/a>: Subjects in RxJS come in various flavours. The answer to this StackOverflow question does a great a job at explaining what they differ in. The crucial difference is how and to what extent each of them <em>stores previous states<\/em>.<\/li>\n<li><a href=\"https:\/\/github.com\/ReactiveX\/rxjs-tslint\">RxJS TSLint<\/a>: TSLint rules for RxJS.<\/li>\n<li><a href=\"https:\/\/github.com\/cartant\/rxjs-spy\">rxjs-spy<\/a>: A library that allows you to log RxJS behaviour in a consistent manner rather than haphazardly sprinkling <code>do<\/code> operators and log statements throughout your code.<\/li>\n<\/ul>\n\n<div class=\"syndication-links\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Leider ist der Eintrag nur auf English verf\u00fcgbar.When developing web applications &#8211; or in fact any kind of application that involves interaction via a user interface &#8211; we inevitably have to deal with asynchronous events, perhaps even streams of such events, e.g.: mouse clicks asynchronous HTTP calls and subsequent display of data push notifications Because [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":[],"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"categories":[5,35,7,6],"tags":[216,331,628,267,79,622,563,621],"class_list":["post-4636","post","type-post","status-publish","format-standard","hentry","category-enterprise-software","category-front-end-development","category-software","category-web-development","tag-angular","tag-best-practices","tag-blogumentation","tag-frontend","tag-javascript","tag-observable","tag-reactive","tag-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/posts\/4636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/comments?post=4636"}],"version-history":[{"count":0,"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/posts\/4636\/revisions"}],"wp:attachment":[{"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/media?parent=4636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/categories?post=4636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bjoernkw.com\/de\/wp-json\/wp\/v2\/tags?post=4636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}