{"id":19831185,"url":"https://github.com/reactive-stack-js/reactive-stack-js","last_synced_at":"2026-04-10T07:11:08.200Z","repository":{"id":128836866,"uuid":"301090613","full_name":"reactive-stack-js/reactive-stack-js","owner":"reactive-stack-js","description":"reactive stack js description","archived":false,"fork":false,"pushed_at":"2021-02-16T22:13:10.000Z","size":284,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-11T10:16:02.594Z","etag":null,"topics":["fastify","graphql","javascript","observable","observer-pattern","react","reactive-stack","reactive-stack-js","reactivex","reactjs","rest","rxjs","svelte","sveltejs","typescript","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://reactive-stack-js.github.io/reactive-stack-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactive-stack-js.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-04T09:37:32.000Z","updated_at":"2023-02-02T13:54:53.000Z","dependencies_parsed_at":"2023-04-26T21:31:56.232Z","dependency_job_id":null,"html_url":"https://github.com/reactive-stack-js/reactive-stack-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactive-stack-js%2Freactive-stack-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactive-stack-js%2Freactive-stack-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactive-stack-js%2Freactive-stack-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactive-stack-js%2Freactive-stack-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactive-stack-js","download_url":"https://codeload.github.com/reactive-stack-js/reactive-stack-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241191386,"owners_count":19925235,"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":["fastify","graphql","javascript","observable","observer-pattern","react","reactive-stack","reactive-stack-js","reactivex","reactjs","rest","rxjs","svelte","sveltejs","typescript","vue","vuejs"],"created_at":"2024-11-12T11:29:02.962Z","updated_at":"2026-04-10T07:11:08.171Z","avatar_url":"https://github.com/reactive-stack-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![reactive-stack-js](https://avatars0.githubusercontent.com/u/72337471?s=75)\n\n# Reactive Stack JS\n\n![codacy](https://img.shields.io/codacy/grade/e0146e29a3134038b4dcf95db9eb5a38.svg)\n\nIn **reactive** programming, data is _pushed_, not _pulled_.\n\nTherefore, a **reactive stack** is one where data is _pushed_, not _pulled_, through out the entire stack.  \nWhat that means is that instead of the client _requesting_ the data from the server, the server is constantly _pushing_ the data to the client.\n\nBasically, this boils down to a simple description: the client is **observing** the data it cares about, and **reacting** to that data changing.\n\nFor more information, please check out:\n\n* [Reactive Design Patterns](https://www.manning.com/books/reactive-design-patterns)\n* [ReactiveX](http://reactivex.io/)\n* [Learn RxJS](https://www.learnrxjs.io/)\n\n## Observer Pattern through the Chain\n\nPlease read up on the Observer Patter if you are unfamiliar with it: [Observer Design Pattern](https://sourcemaking.com/design_patterns/observer).\u003cbr/\u003e\nAlso, please read up on the difference between Observer and Pub Sub: [Observer vs Pub-Sub pattern](https://hackernoon.com/observer-vs-pub-sub-pattern-50d3b27f838c).\n\nThe Chain here refers to the entire data transport chain, from the source the database, all the way to the rendered UI in the GUI.\n\nThis is the list of Observer Pattern pair instances in the chain, from DB to GUI.\u003cbr/\u003e\n__Note__: A \u003c- X means that X _observes_ A. A is then the _observable_ and X is the _observer_.\u003cbr/\u003e\n__Note__: \u003c-WS- indicates that the Observer Pattern goes through a WebSocket connection.\n\n1. Collection/Table \u003c- ObservableModel\n2. ObservableModel \u003c- ReactiveStore\n3. ReactiveStore \u003c- Client\n4. Client \u003c-WS- ClientSocket\n5. ClientSocket \u003c- ReactiveStore\n6. ReactiveStore \u003c- Dialog\n\n_...todo: describe each listed instance above_\n\n## Goal\n\nMy goal was to create a reactive stack solution that would not have a [vendor lock-in](https://en.wikipedia.org/wiki/Vendor_lock-in). In other words, I wanted the end product to\nhave the flexibility where any part of it could be replaced with an alternative, in as easy as possible manner.\n\nThis is the end result:\n\n![reactive-stack-js](https://raw.githubusercontent.com/reactive-stack-js/reactive-stack-js/main/images/reactive-stack-js.png)\n\n## Clarification\n\nI started with [MeteorJS](https://www.meteor.com/) because it allowed me to focus only on the client side for the setup I had in mind. It also allowed me to _see_ the final POC\napplication working. I was then able to work with that example as a guide. Further more, I was able to reuse the client side code with minimal adjustments.\n\nThe second step was to take the created [React](https://reactjs.org/) client side code from the **reactive-stack-js-meteor-react** implementation and work on the alternative\nREST [Fastify](https://www.fastify.io/) backend. Once I had the backend working, I was also able to take over the [Svelte](https://svelte.dev/) client side code from **\nreactive-stack-js-meteor-svelte**. This was later deleted due to the fact that Svelte started throwing errors that were totally weird, and I simply did not want to deal with them\nanymore. These sadly started to occur in **reactive-stack-js-meteor-svelte** repository as well. I also added [Vue](https://vuejs.org/) to the REST setup, for comparison.\n\nFinally, in the third step, I decided to add [GraphQL](https://graphql.org/) to the mix, and replace REST. My main goal there was to add GraphQL without having to also manually\nwrite the GraphQL schemas, as well as also most common mutations for every [Mongoose](https://mongoosejs.com/) model in the app. This worked as I hoped it would. The final goal for\nthe GraphQL setup is to add [live queries](https://www.graphile.org/postgraphile/live-queries/), and then remove the whole data synchronization setup I created.\n\nATM, my favorite solution is the section 2, **REST** with **Vue**, which is based on [RxJS](https://rxjs.dev/), [Fastify](https://www.fastify.io/)\n, [Mongoose](https://mongoosejs.com/) and [Vue](https://vuejs.org/). Therefore, this is the one that will be the focus for me, in terms of documentation and refactoring. Once\nthe **GraphQL live queries** become feasible, I will add it to section 3 and then compare with the REST implementation for a final decision.\n\n## This repository\n\nThis repository contains data creating script which uses [casual](https://github.com/boo1ean/casual).  \nJust first do `yarn`, then do `yarn data`, and your [mongodb](https://www.mongodb.com/) will have a new database called `reactivestackjs`, populated with fake data.\n\nIt also contains the description and links to various sub-repositories I created as a reactive stack [POC](https://en.wikipedia.org/wiki/Proof_of_concept).\n\nThere are 3 sections which are further split into repositories.\n\n### Sections \u0026 Repositories\n\n1. **Reactive Stack JS using** [**MeteorJS**](https://www.meteor.com/)\n    1. Meteor with React\n        1. :heavy\\_check\\_mark: [reactive-stack-js-meteor-react](https://github.com/reactive-stack-js/reactive-stack-js-meteor-react)  \n           _based on_ [_Meteor React tutorial_](https://www.meteor.com/tutorials/react/creating-an-app)\n    2. Meteor with Svelte\n        1. :heavy\\_check\\_mark: [reactive-stack-js-meteor-svelte](https://github.com/reactive-stack-js/reactive-stack-js-meteor-svelte)  \n           _based on_ [_Meteor Svelte tutorial_](https://www.meteor.com/tutorials/svelte/creating-an-app)\n2. **Reactive Stack JS using** [**REST**](https://restfulapi.net/)\n    1. :heavy\\_check\\_mark: [reactive-stack-js-rest-backend-fastify](https://github.com/reactive-stack-js/reactive-stack-js-rest-backend-fastify)\n    2. :heavy\\_check\\_mark: [reactive-stack-js-rest-frontend-react](https://github.com/reactive-stack-js/reactive-stack-js-rest-frontend-react)\n    3. :heavy\\_check\\_mark: [reactive-stack-js-rest-frontend-vue](https://github.com/reactive-stack-js/reactive-stack-js-rest-frontend-vue)\n3. **Reactive Stack JS using** [**GraphQL**](https://graphql.org/)\n    1. :heavy\\_check\\_mark: [reactive-stack-js-graphql-backend-fastify](https://github.com/reactive-stack-js/reactive-stack-js-graphql-backend-fastify)\n    2. :heavy\\_check\\_mark: [reactive-stack-js-graphql-frontend-vue](https://github.com/reactive-stack-js/reactive-stack-js-graphql-frontend-vue)\n\n### Execution\n\nBoth Meteor repositories are standalone and can be started on their own.\n\nIn section 2, the backend has to be running for any of the 3 frontend repositories to work. Those, however, can be started independent of each other.\n\nSection 3 is similar to section 2, however there is only one frontend solution available.  \n_I do not plan to repeat react or svelte here, since that would serve no valuable purpose._\n\n### App Description\n\nWIP: [App Description](https://github.com/reactive-stack-js/reactive-stack-js/wiki/App-Description)\n\n## Reactive Stack JS using MeteorJS\n\nFollow instructions in each repository to install and run.  \nBoth meteor implementations can run in parallel.\n\n## Reactive Stack JS using REST\n\nSimply `yarn` in each repository, then `yarn start` in the backend and then the same in any frontend you wish to look at.  \nThe frontends can run in parallel.\n\n## Reactive Stack JS using GraphQL\n\nSimply `yarn` in each repository, then `yarn start` in the backend and then the same in the frontend.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactive-stack-js%2Freactive-stack-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactive-stack-js%2Freactive-stack-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactive-stack-js%2Freactive-stack-js/lists"}