{"id":18614835,"url":"https://github.com/andrewjbateman/rxjs-learn","last_synced_at":"2026-04-16T17:44:24.613Z","repository":{"id":39565618,"uuid":"149432729","full_name":"AndrewJBateman/rxjs-learn","owner":"AndrewJBateman","description":":clipboard: Practise using Reactive X with javascript (RxJS) without using a framework such as angular. Webpack is used to bundle this javascript application, requiring a webpack.config.js file with boilerplate code.","archived":false,"fork":false,"pushed_at":"2023-01-07T03:59:08.000Z","size":15771,"stargazers_count":2,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T01:34:27.456Z","etag":null,"topics":["observables","operators","reactivex","rxjs","streams","subjects","subscriptions","visual-studio-code","vscode","webpack","webpack5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-19T10:21:58.000Z","updated_at":"2022-01-11T21:46:48.000Z","dependencies_parsed_at":"2023-02-06T11:16:40.501Z","dependency_job_id":null,"html_url":"https://github.com/AndrewJBateman/rxjs-learn","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/rxjs-learn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Frxjs-learn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Frxjs-learn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Frxjs-learn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Frxjs-learn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/rxjs-learn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Frxjs-learn/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265837616,"owners_count":23836558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["observables","operators","reactivex","rxjs","streams","subjects","subscriptions","visual-studio-code","vscode","webpack","webpack5"],"created_at":"2024-11-07T03:27:09.761Z","updated_at":"2026-04-16T17:44:24.578Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :zap: RxJS Learn\n\n* Practise using Reactive X with javascript (RxJS) without using a framework such as Angular.\n* [Webpack](https://webpack.js.org/) is used to bundle this javascript application.\n* Updates due to rxjs updates - pluck requires pipe, Observer.create is now new Observer.\n* Webpack config. \u0026 package.json files updated to remove errors\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/rxjs-learn?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/rxjs-learn?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/rxjs-learn?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/rxjs-learn?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: RxJS Learn](#zap-rxjs-learn)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\nRxJS is an API for asynchronous programming using observables. It includes:\n\n1. streams (values or events emitted over time)\n2. observables (facilitates the stream) and observers\n3. subscriptions (a disposable resource, such as the execution of an Observable)\n4. subjects (behaviour, replay (emit old values to new subscribers), async: different types of observable) and\n5. operators (methods you can use on Observables and Subjects).\n\n**Webpack** is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. _Since version 4.0.0, webpack does not require a configuration file for default configurations. However in this case a webpack.config.js file was required to extend the project functionality.\n\n## :camera: Screenshots\n\n![Example screenshot](./img/rxjs.png).\n\n## :signal_strength: Technologies\n\n* [RxJS v6](https://rxjs.dev/) used to handle datastreams and propagation of change using observables.\n* [webpack v5](https://webpack.js.org/) to bundle the module, including dependencies into a single javascript file to be pulled in by the index.html file.\n\n## :floppy_disk: Setup\n\n* Run `npm run start:dev` for a dev server. Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files.\n\n## :computer: Code Examples\n\n```javascript\nimport { Observable } from \"rxjs/Observable\";\nimport { map } from 'rxjs/operators';\nimport { from } from \"rxjs/Observable/from\";\nimport \"rxjs/add/operator/pluck\";\n\n//using the map operator (note use of pipe function in new version 6)\nnew Observable((observer: any) =\u003e {\n  observer.next(\"Here is a list of superheroes\");\n})\n  .pipe(map((val: any) =\u003e val.toUpperCase()))\n  .subscribe((x: any) =\u003e addItem(x));\n\n//using the pluck operator\nfrom([\n  { first: \"Gary\", last: \"Simon\", age: \"32\" },\n  { first: \"Jane\", last: \"Bates\", age: \"34\" },\n  { first: \"John\", last: \"Kent\", age: \"36\" },\n])\n  .pipe(pluck(\"first\"))\n  .subscribe((x: any) =\u003e addItem(x));\n\n// function for showing the values:\nfunction addItem(val:any) {\n    const node = document.createElement(\"li\");\n    const textnode = document.createTextNode(val);\n    node.appendChild(textnode);\n    document.getElementById(\"output\").appendChild(node);\n}\n\n```\n\n## :cool: Features\n\n* Changing the value in the [pluck](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pluck) method means a different property is selected from the nested object.\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working. Updated april 2021\n* To-Do: Code could be expanded to learn about other methods in RxJS.\n\n## :clap: Inspiration\n\n* [Gary Simon's 'A Comprehensive RxJS Tutorial - Learn ReactiveX for JavaScript'](https://coursetro.com/courses/25/A-Comprehensive-RxJS-Tutorial---Learn-ReactiveX-for-JavaScript-)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Frxjs-learn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Frxjs-learn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Frxjs-learn/lists"}