{"id":15651276,"url":"https://github.com/zordius/fluxex","last_synced_at":"2025-04-30T17:09:28.992Z","repository":{"id":24035099,"uuid":"27420135","full_name":"zordius/fluxex","owner":"zordius","description":"An extended Flux implementation to build isomorphic javascript React app.","archived":false,"fork":false,"pushed_at":"2018-01-25T04:24:06.000Z","size":24394,"stargazers_count":33,"open_issues_count":0,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-30T17:09:11.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://zordius.github.io/fluxex/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zordius.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-02T07:15:53.000Z","updated_at":"2018-12-18T03:23:14.000Z","dependencies_parsed_at":"2022-08-30T00:11:11.455Z","dependency_job_id":null,"html_url":"https://github.com/zordius/fluxex","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zordius%2Ffluxex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zordius%2Ffluxex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zordius%2Ffluxex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zordius%2Ffluxex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zordius","download_url":"https://codeload.github.com/zordius/fluxex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251748950,"owners_count":21637418,"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":[],"created_at":"2024-10-03T12:37:46.576Z","updated_at":"2025-04-30T17:09:28.959Z","avatar_url":"https://github.com/zordius.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"FluxEx\n======\n\nAn extended Flux implementation to build isomorphic javascript React app.\n\n[![npm version](https://img.shields.io/npm/v/fluxex.svg)](https://www.npmjs.org/package/fluxex) [![npm download](https://img.shields.io/npm/dm/fluxex.svg)](https://www.npmjs.org/package/fluxex) [![Dependency Status](https://david-dm.org/zordius/fluxex.svg)](https://david-dm.org/zordius/fluxex) [![devDependency Status](https://david-dm.org/zordius/fluxex/dev-status.svg)](https://david-dm.org/zordius/fluxex#info=devDependencies) [![Build Status](https://travis-ci.org/zordius/fluxex.svg?branch=master)](https://travis-ci.org/zordius/fluxex) [![Test Coverage](https://codeclimate.com/github/zordius/fluxex/badges/coverage.svg)](https://codeclimate.com/github/zordius/fluxex) [![Code Climate](https://codeclimate.com/github/zordius/fluxex/badges/gpa.svg)](https://codeclimate.com/github/zordius/fluxex) [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE.txt)\n\n[![npm](https://nodei.co/npm/fluxex.png?downloads=true)](https://www.npmjs.org/package/fluxex)\n\n\u003cimg src=\"https://github.com/zordius/fluxex/raw/last_result/examples/00hello/badge.png\" /\u003e\n\nFeatures\n--------\n\n**All in one Starter**\n\n\u003ca href=\"https://github.com/zordius/fluxex/blob/master/extra/gulpfile.js\"\u003e\u003cimg src=\"https://github.com/zordius/fluxex/raw/master/gulp_starter.jpg\" /\u003e\u003c/a\u003e\n\n**Everything in React**\n\n\u003ca href=\"https://github.com/zordius/fluxex/blob/master/examples/04-infinite-scroll/components/Html.jsx\"\u003e\u003cimg src=\"https://github.com/zordius/fluxex/raw/master/start_from_html.jpg\" /\u003e\u003c/a\u003e\n\n**Minimal context APIs**\n\nTo understand Flux, you only need to learn these APIs: `this.executeAction()`, `this.getStore()`, `this.dispatch()` !\n\n* `this.executeAction()` or `this.getStore(name)` in components.\n* `this.dispatch()` or `this.executeAction()` or `this.getStore(name)` in actions.\n* `this.emitChange()` or `this._get()` or `this._set()` in stores.\n\n\u003cimg src=\"https://github.com/zordius/fluxex/raw/master/fluxex-api.jpg\" /\u003e\n\u003chr/\u003e\n\n* [CORE] Super **lightweight**, less than 250 lines of code.\n* [CORE] Context based flux system.\n* [CORE] React Server side rendering + client mount.\n* [CORE] HTML as top level react component, no need container.\n* [EXTRA] express middleware to serve the fluxex application.\n* [EXTRA] full integrated gulp task for development.\n* [EXTRA] pjax support.\n* [EXTRA] rpc and api call support.\n\nSee the FluxEx Magic\n--------------------\n\n* Check \u003ca href=\"https://github.com/zordius/fluxex/tree/master/examples\"\u003eexample projects\u003c/a\u003e you can see how fluxex do server side rendering + context deliver + Full HTML react rendering!\n* No more index.html. Start with \u003ca href=\"https://github.com/strongloop/express\"\u003enpm:express\u003c/a\u003e and your Html.jsx!\n* No more AJAX, all http request by \u003ca href=\"https://github.com/request/request\"\u003enpm:request\u003c/a\u003e!\n\nStart from Scratch\n------------------\n\nRead \u003ca href=\"https://github.com/zordius/fluxex/blob/master/SCRATCH.md\"\u003eStart from Scratch\u003c/a\u003e to know how to create a fluxex application!\n\nQuick Start\n-----------\n\n**Prepare your project**\n```sh\nnpm init\nnpm install fluxex\n```\n\n**Use the Starter template**\n```sh\nnode_modules/.bin/fluxex_starter\n```\n\n**Start the Server**\n```sh\nnode_modules/.bin/gulp develop\n```\n\n* Connect to http://localhost:3001/search?q=pizza\n* You can start your development now, gulp handled everything (jshint, browserify, nodemon, restart, browser-sync).\n* Put your actions, stores and components into correspond directories.\n* Edit components/Html.jsx to include your React components.\n* Edit actions/routing.js to add routing.\n* Edit fluxexapp.js to add your store.\n\nDifference with Flux\n--------------------\n\nFluxEx is context based flux implemention. Server side react rendering can be done easy when the flux is scoped under a request based context. Store and dispatcher are singletons in \u003ca href=\"https://github.com/facebook/flux\"\u003eFacebook flux\u003c/a\u003e, but in fluxex they are not.\n\n\u003chr/\u003e\n**Fluxex**\n* Fluxex is an instance, it is constructed by provided context.\n* Fluxex can be serialized by `.toString()` and reconstructed by the serialized string. All server side store status can be transfered to client side by this way.\n* use the static `.createApp()` to create a Fluxex application.\n\n```javascript\nvar myApp = require('fluxex').createApp({\n    product: require('./stores/product')\n}, process.cwd() + '/components/Html.jsx');\n```\n\n\u003chr/\u003e\n**Action**\n* An action creator should return a promise.\n* An action creator function can be executed by `.executeAction()`.\n* When the action be `.executeAction()`, the Fluxex instance can be referenced by `this`.\n* `.executeAction()` will return a promise, so you can manage asynchronous actions in promise way.\n\n```javascript\n// inside a component, requires Fluxex.mixin\n...\nonStoreChange: function () {\n    return this.getStore('myStore').getSomething();\n},\nhandleClick: function () {\n    this.executeAction(myAction);\n}\n```\n\n\u003chr/\u003e\n**Dispatcher**\n* the Fluxex instance itself is a dispatcher with `.dispatch()` method.\n* the dispatched `FOOBAR` action will trigger all `handle_FOOBAR` method of all stores. When there is no `handle_FOOBAR` method in any store, an error will be throw.\n\n```javascript\n// myAction\nvar myAction = function (payload) {\n    ... do your tasks ....\n    return this.dispatch('UPDATE_SOMETHING', ....); // this returns a promise\n}\n```\n\n\u003chr/\u003e\n**Store**\n* Store is an instance, it is constructed by serialized status.\n* Store is created by a Fluxex.\n* Use `.getStore(name)` to get the store by name.\n* You can `._get()` and `._set()` by property name. Ex: `this._set('data', 123)`\n* Everything you `._set()` can be serialized by `.toString()` and be tracked by your Fluxex application.\n* You can use `waitFor` property to refine dispatch depdency for specific action.\n\n```javascript\nvar myStore = {\n    // the dispatch will happened after these stores be dispatched\n    waitFor: {\n        UPDATE_SOMETHING: ['oneStore', 'anotherStore']\n    },\n\n    // handle this.dispatch('UPDATE_SOMETHING', ....)\n    handle_UPDATE_SOMETHING: function (payload) {\n        this._set('data', payload); // There are ._get() and ._set() in all stores\n        this.emitChange();\n    }\n}\n```\n\nNotes for IE8 support\n---------------------\n\n* **NOTE** \u003ca href=\"https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html\"\u003eReact v15+ stop supporting IE8\u003c/a\u003e\n* You should add `require('fluxex/extra/polyfill-ie8');` in your `fluxexapp.js` to polyfill EventListener methods and XMLHttpRequest consts for IE8.\n* `catch` is reserved keyword in IE8, you need to replace `somePromise.catch(...)` with `somePromise['catch'](...)`\n* `for (... in ...)` will loop beyond properties in IE8, you need to replace `for (I in myArray)` with `myArray.forEach(function (V, I) { ...}`\n\n**IE8 Unsupported features**\n\n* window.history.pushState\n* set innerHTML of script or title node\n* compare prototype.constructor with another function\n* console and console.log when developer tool not opened\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzordius%2Ffluxex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzordius%2Ffluxex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzordius%2Ffluxex/lists"}