@parity/light.js

<!DOCTYPE HTML> <html lang="" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Reactive Programming · GitBook</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="next" href="rpc-observables.html" /> <link rel="prev" href="light-client-development.html" /> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="Type to search" /> </div> <nav role="navigation"> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="../"> <a href="../"> Introduction </a> </li> <li class="chapter " data-level="1.2" > <span> Getting started </span> <ul class="articles"> <li class="chapter " data-level="1.2.1" data-path="../getting-started/installation.html"> <a href="../getting-started/installation.html"> Installation </a> </li> <li class="chapter " data-level="1.2.2" data-path="../getting-started/does-it-work-with-a-full-node.html"> <a href="../getting-started/does-it-work-with-a-full-node.html"> Does this work with a full node? </a> </li> </ul> </li> <li class="chapter " data-level="1.3" > <span> Guides </span> <ul class="articles"> <li class="chapter " data-level="1.3.1" data-path="../guides/tutorial1-set-up-a-light-client.html"> <a href="../guides/tutorial1-set-up-a-light-client.html"> Tutorial Part 1: Set up a Light Client </a> </li> <li class="chapter " data-level="1.3.2" data-path="../guides/tutorial2-our-first-rpcobservable.html"> <a href="../guides/tutorial2-our-first-rpcobservable.html"> Tutorial Part 2: Our First RpcObservable </a> </li> <li class="chapter " data-level="1.3.3" data-path="../guides/tutorial3-manipulating-rpcobservables.html"> <a href="../guides/tutorial3-manipulating-rpcobservables.html"> Tutorial Part 3: Manipulating RpcObservables </a> </li> <li class="chapter " data-level="1.3.4" data-path="../guides/tutorial4-send-a-transaction.html"> <a href="../guides/tutorial4-send-a-transaction.html"> Tutorial Part 4: Send a Transaction </a> </li> <li class="chapter " data-level="1.3.5" data-path="../guides/tutorial5-work-with-contracts.html"> <a href="../guides/tutorial5-work-with-contracts.html"> Tutorial Part 5: Work with Contracts </a> </li> <li class="chapter " data-level="1.3.6" data-path="../guides/tutorial6-integrate-with-react.html"> <a href="../guides/tutorial6-integrate-with-react.html"> Tutorial Part 6: Integrate with React </a> </li> <li class="chapter " data-level="1.3.7" data-path="../guides/redux-integration.md"> <span> Redux Integration </a> </li> <li class="chapter " data-level="1.3.8" data-path="../guides/angular-integration.md"> <span> Angular Integration </a> </li> </ul> </li> <li class="chapter " data-level="1.4" > <span> Concepts </span> <ul class="articles"> <li class="chapter " data-level="1.4.1" data-path="light-client-development.html"> <a href="light-client-development.html"> Light Client Development </a> </li> <li class="chapter active" data-level="1.4.2" data-path="reactive-programming.html"> <a href="reactive-programming.html"> Reactive Programming </a> </li> <li class="chapter " data-level="1.4.3" data-path="rpc-observables.html"> <a href="rpc-observables.html"> RpcObservables </a> </li> <li class="chapter " data-level="1.4.4" data-path="rpc-observables-properties.html"> <a href="rpc-observables-properties.html"> RpcObservables Properties </a> </li> </ul> </li> <li class="chapter " data-level="1.5" > <span> API </span> <ul class="articles"> <li class="chapter " data-level="1.5.1" data-path="../api/modules/_api_.html"> <a href="../api/modules/_api_.html"> api </a> </li> <li class="chapter " data-level="1.5.2" > <span> FrequencyObservables </span> <ul class="articles"> <li class="chapter " data-level="1.5.2.1" data-path="../api/modules/_frequency_accounts_.html"> <a href="../api/modules/_frequency_accounts_.html"> frequency/accounts </a> </li> <li class="chapter " data-level="1.5.2.2" data-path="../api/modules/_frequency_blocks_.html"> <a href="../api/modules/_frequency_blocks_.html"> frequency/blocks </a> </li> <li class="chapter " data-level="1.5.2.3" data-path="../api/modules/_frequency_frequency_.html"> <a href="../api/modules/_frequency_frequency_.html"> frequency/frequency </a> </li> <li class="chapter " data-level="1.5.2.4" data-path="../api/modules/_frequency_health_.html"> <a href="../api/modules/_frequency_health_.html"> frequency/health </a> </li> <li class="chapter " data-level="1.5.2.5" data-path="../api/modules/_frequency_other_.html"> <a href="../api/modules/_frequency_other_.html"> frequency/other </a> </li> <li class="chapter " data-level="1.5.2.6" data-path="../api/modules/_frequency_time_.html"> <a href="../api/modules/_frequency_time_.html"> frequency/time </a> </li> <li class="chapter " data-level="1.5.2.7" data-path="../api/modules/_frequency_utils_createpubsubobservable_.html"> <a href="../api/modules/_frequency_utils_createpubsubobservable_.html"> frequency/utils/createPubsubObservable </a> </li> </ul> </li> <li class="chapter " data-level="1.5.3" > <span> RpcObservables </span> <ul class="articles"> <li class="chapter " data-level="1.5.3.1" data-path="../api/modules/_rpc_eth_.html"> <a href="../api/modules/_rpc_eth_.html"> rpc/eth </a> </li> <li class="chapter " data-level="1.5.3.2" data-path="../api/modules/_rpc_net_.html"> <a href="../api/modules/_rpc_net_.html"> rpc/net </a> </li> <li class="chapter " data-level="1.5.3.3" data-path="../api/modules/_rpc_other_makecontract_.html"> <a href="../api/modules/_rpc_other_makecontract_.html"> rpc/other/makeContract </a> <ul class="articles"> <li class="chapter " data-level="1.5.3.3.1" data-path="../api/interfaces/_rpc_other_makecontract_.makecontract.html"> <a href="../api/interfaces/_rpc_other_makecontract_.makecontract.html"> MakeContract </a> </li> </ul> </li> <li class="chapter " data-level="1.5.3.4" data-path="../api/modules/_rpc_other_post_.html"> <a href="../api/modules/_rpc_other_post_.html"> rpc/other/post </a> <ul class="articles"> <li class="chapter " data-level="1.5.3.4.1" data-path="../api/interfaces/_rpc_other_post_.postoptions.html"> <a href="../api/interfaces/_rpc_other_post_.postoptions.html"> PostOptions </a> </li> </ul> </li> <li class="chapter " data-level="1.5.3.5" data-path="../api/modules/_rpc_parity_.html"> <a href="../api/modules/_rpc_parity_.html"> rpc/parity </a> </li> <li class="chapter " data-level="1.5.3.6" data-path="../api/modules/_rpc_rpc_.html"> <a href="../api/modules/_rpc_rpc_.html"> rpc/rpc </a> </li> <li class="chapter " data-level="1.5.3.7" data-path="../api/modules/_rpc_utils_createrpc_.html"> <a href="../api/modules/_rpc_utils_createrpc_.html"> rpc/utils/createRpc </a> </li> </ul> </li> <li class="chapter " data-level="1.5.4" data-path="../api/modules/_types_.html"> <a href="../api/modules/_types_.html"> Types </a> <ul class="articles"> <li class="chapter " data-level="1.5.4.1" data-path="../api/interfaces/_types_.frequencyobservable.html"> <a href="../api/interfaces/_types_.frequencyobservable.html"> FrequencyObservable </a> </li> <li class="chapter " data-level="1.5.4.2" data-path="../api/interfaces/_types_.frequencyobservableoptions.html"> <a href="../api/interfaces/_types_.frequencyobservableoptions.html"> FrequencyObservableOptions </a> </li> <li class="chapter " data-level="1.5.4.3" data-path="../api/interfaces/_types_.makecontract.html"> <a href="../api/interfaces/_types_.makecontract.html"> MakeContract </a> </li> <li class="chapter " data-level="1.5.4.4" data-path="../api/interfaces/_types_.metadata.html"> <a href="../api/interfaces/_types_.metadata.html"> Metadata </a> </li> <li class="chapter " data-level="1.5.4.5" data-path="../api/interfaces/_types_.rpcobservable.html"> <a href="../api/interfaces/_types_.rpcobservable.html"> RpcObservable </a> </li> <li class="chapter " data-level="1.5.4.6" data-path="../api/interfaces/_types_.rpcobservableoptions.html"> <a href="../api/interfaces/_types_.rpcobservableoptions.html"> RpcObservableOptions </a> </li> <li class="chapter " data-level="1.5.4.7" data-path="../api/interfaces/_types_.txstatus.html"> <a href="../api/interfaces/_types_.txstatus.html"> TxStatus </a> </li> </ul> </li> <li class="chapter " data-level="1.5.5" > <span> Utils </span> <ul class="articles"> <li class="chapter " data-level="1.5.5.1" data-path="../api/modules/_utils_isloading_.md"> <span> utils/isLoading </a> </li> <li class="chapter " data-level="1.5.5.2" data-path="../api/modules/_utils_isobservable_.html"> <a href="../api/modules/_utils_isobservable_.html"> utils/isObservable </a> </li> <li class="chapter " data-level="1.5.5.3" data-path="../api/modules/_utils_operators_distinctreplayrefcount_.md"> <span> utils/operators/distinctReplayRefCount </a> </li> <li class="chapter " data-level="1.5.5.4" data-path="../api/modules/_utils_operators_distinctvalues_.html"> <a href="../api/modules/_utils_operators_distinctvalues_.html"> utils/operators/distinctValues </a> </li> <li class="chapter " data-level="1.5.5.5" data-path="../api/modules/_utils_operators_switchmappromise_.html"> <a href="../api/modules/_utils_operators_switchmappromise_.html"> utils/operators/switchMapPromise </a> </li> <li class="chapter " data-level="1.5.5.6" data-path="../api/modules/_utils_testhelpers_mockapi_.html"> <a href="../api/modules/_utils_testhelpers_mockapi_.html"> utils/testHelpers/mockApi </a> </li> <li class="chapter " data-level="1.5.5.7" data-path="../api/modules/_utils_testhelpers_mockrpc_.html"> <a href="../api/modules/_utils_testhelpers_mockrpc_.html"> utils/testHelpers/mockRpc </a> </li> </ul> </li> </ul> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Published with GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <i class="fa fa-circle-o-notch fa-spin"></i> <a href=".." >Reactive Programming</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="reactive-programming">Reactive Programming</h1> <p><em>If you already know what Reactive Programming and Observables are, you can skip this section.</em></p> <h2 id="what-is-reactive-programming">What is Reactive Programming?</h2> <p>Reactive programming is a programming mindset where you deal with data streams. A data stream is simply a sequence of data (called events) ordered in time. Some simple examples of data streams include:</p> <ul> <li>clicks on a button</li> <li>make an API call (this stream only fires one event, namely the API response)</li> <li>tweets in your Twitter feed</li> <li>new blocks on the Ethereum blockchain</li> </ul> <p>Reactive programming is the idea that your application is defined by a bunch of streams, and you combine those streams together to build the app's logic. For instance, making an API call on button click is managed by combining the first two streams described above: each time the button-click stream fires, we "plug in" the API-call stream.</p> <p>The combination of streams is defined declaratively, which makes the code easy to read and test.</p> <h2 id="observables">Observables</h2> <p>Streams are represented by <strong>Observables</strong>. They emit the data once, multiple times, or periodically based on their configuration. There are also various operators on Observables to transform or filter the data they emit.</p> <p>On the other side, we have <strong>Observers</strong>. They consume the data emitted by Observables, by subscribing to them, and imperatively doing some operations on each received value, like printing the value to the console.</p> <p>In a nutshell, you define you app's logic by declaratively combining Observables, and eventually, an Observer subscribes to the resulting Observable. This Observer prints the value or updates a React component.</p> <h1 id="rxjs">RxJS</h1> <p>There are numerous implementations of Observables, the one we are using is RxJS 6. It is, as of today, the most popular one in the JavaScript community.</p> <h2 id="learn-more">Learn more</h2> <p>If you wish to learn more about React programming, please read <a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754" target="_blank">this excellent guide</a> by Andre Staltz.</p> </section> </div> <div class="search-results"> <div class="has-results"> <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1> </div> </div> </div> </div> </div> </div> <a href="light-client-development.html" class="navigation navigation-prev " aria-label="Previous page: Light Client Development"> <i class="fa fa-angle-left"></i> </a> <a href="rpc-observables.html" class="navigation navigation-next " aria-label="Next page: RpcObservables"> <i class="fa fa-angle-right"></i> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Reactive Programming","level":"1.4.2","depth":2,"next":{"title":"RpcObservables","level":"1.4.3","depth":2,"path":"concepts/rpc-observables.md","ref":"concepts/rpc-observables.md","articles":[]},"previous":{"title":"Light Client Development","level":"1.4.1","depth":2,"path":"concepts/light-client-development.md","ref":"concepts/light-client-development.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"concepts/reactive-programming.md","mtime":"2020-02-10T09:51:45.380Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-02-10T09:56:25.139Z"},"basePath":"..","book":{"language":""}}); }); </script> </div> <script src="../gitbook/gitbook.js"></script> <script src="../gitbook/theme.js"></script> <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script> <script src="../gitbook/gitbook-plugin-search/search.js"></script> <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script> <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script> <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script> <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script> </body> </html>