mozilla / reflex

Functional reactive UI library

reflex

Reflex is a functional reactive UI library that is heavily inspired by (pretty much is a port of) elm and it's amazingly simple yet powerful architecture where "flux" in react terms is simply a byproduct of a pattern. In order to keep a major attraction of elm — algebraic data types & type safety — the library uses flow, a static type checker for JS. All types are separated from implementation though, so it's your call if you want to take advantage of it or just ignore it.

The library is designed such that view drivers (react, virtual-dom & possibly more in the future) can be swapped without any changes to the application code base. In fact there is not a built-in view driver, so it's up to the user to choose one. In fact it's pretty easy to write a driver that would directly manipulate DOM.

Install

npm install reflex

Examples

For examples check out examples directory of either virtual-dom or react drivers, in fact examples are identical only diff is one line which is path of imported driver.

reflex's Issues

Make port of todo-mvc in reflex

TodoMVC is great, we should have an architecture example for reflex. Lets collaborate on the fork I have.

Allow children to be iterator

Current code assumes that children for the node are arrays, instead it should be iterator to be compatible with Immutable.js and possibly other libraries.

flow

https://github.com/Raynos/reflex-todo/blob/master/reflex/flow.js

flow is a stream of changes to State

Hi, what is reflex?

All I see is "Functional reactive UI library" but I'd like to read more before blindly trying it.

What is reflex exactly?

Implement expample of ractor for a item collection

Create a reactor component for the collection of items, where state model is:

{
   "id1": { "text": "foo" },
   "id2": { "text": "bar" }
}

Text of the item should be editable, patching the app state.

Maybe also create sortable list, and filterable list.

API

Stream changes
Object options
Mutable readable

function Writer(update, open, close) {
    return write
}

function update(readable, change) {
    update readable
}

function open(options) {
    return create readable
}

function close(readable, options) {
    destruct readable
}

function Atom(read, write) {
    return react
}

function read(readable) {
    return input
}

function write(changesStream, options) {
    return readable
}

function react(changesStream, options) {
    return input
}

function Compound(
    mapping<query, react>
    // Not sure how to do overlay
    , overlay<query, fork>
) {
    return react
}

// Not sure ???
function fork(changes) {
    return changes
}

A typo in README

There is a typo in README.md:

if you want to take take advantage of it

Effects.batch should complain if it doesn't get called with an array

Currently calling Effects.batch(Effect, Effect, Effect) will fail silently. We should make this accidental call an exception or otherwise notify the developer.

Create `widget` function for creating widgets

reflex should have a function for defining interactive, self contained widgets, that take input source and produce stream of changes. Probably we need some way of creating nested widgets too!

Create amazing website for reflex

I think we should not release website until we get a decent website showing off the power of reactive programing and by decent I mean one that will blow everyone's mind. Here is what I have in mind:

1. Switch to between dark and bright modes! Developers are picky they are either into dark mode or into bright and they just don't stand the opposite. So I think site should just have a switch.
   Also I think we should go with solarized. Colors are decent,
   well maintained a lot of people like it (I personally prefer diff color scheme)*. Of course user choice
   will be persisted in localStorage so next time user is there it's in his preferred style.
2. Site should be build using reflex library itself, anything else is unacceptable! If we can't do it
   library is useless. Maybe we'll learn more about missing parts on the way.
3. Site will have a documentation with examples, but examples should be interactive!! Yes Mathematica interactive my friends. @Raynos proved it can be done I'm sure we can take it another level with reducers and we should! What I'm thinking of are interactive widgets that one can manipulate, or edit example code and see widget changes right in there.

It may sound little overkill, but if we really wanna kill it and make a difference I think it's only way to get enough attention!

Merge atom / set / component / unit into a simpler concept

Atom represents a single reactor.

Set represents many reactors reacting to the same source.

Component represents the source being a Map and creating a reactor for each value in the map.

Unit represents the source being a Map and dispatching the values in the map to named reactors.

There's got to be a simpler way

node() does not support namespacing for SVG elements

The node function interface used by Reflex and Reflex drivers does not allow setting a namespace. virtual-dom and our VirtualNode class both support namespaces via a namespace property. (I don't really care about namespaces from an aesthetic standpoint, but they are required for svg elements to work).

View driver should have a development hooks

Idea is to implement flash paint like tool that would flush whenever thunk cache is invalidated.

Create an overview of the architecture

Discussion of the architecture yesterday was great, and I think little picture on the whiteboard was very helpful in understanding the design:

That's not enough though, we need digital version of that picture overview and write up in English explaining it. Maybe even sequence of pictures with addition of new concepts, similar how we did
on whiteboard first just an app view, then app state then connections etc.. so that picture is not as overwhelming.

Wiki changes

FYI: The following changes were made to this repository's wiki:

• defacing spam has been removed

• Restricting write access to contributors is strongly encouraged. Please make that change (documentation).

These were made as the result of a recent automated defacement of publically writeable wikis.

Proper test integration

Need a proper testing on travis with phantomjs and actual browser stuff. Hopefully we could get some cross browser testing too!

Task.io may cause an infinite loop

Task.io API is supposed to be used in a certain way, more specifically passed in callback must be called with a Task instance. It was assumed that flow will catch if you pass anything else, but then if you do not type check with flow you can pretty much pass anything to the callback and passing anything but Task instance causes infinite loop.

Current diff & patch are broken

After updating tests to cover more scenarios I realized that current implementation of diff and patch is broken. As updates to the nested structures fail, that's presumably because xtend does not makes nested merge, which is what we need. Also api for diff is very awkward :D it should be diff(a, b) which is cool since we were talking about making inverse diffs anyway. As on optimization if a is previous state to b we could return stored delta right back.

I'll try to find if there is such implementation is already in place somewhere and if not, I'll just probably make separate library out of it.

State changes to computed properties should no got to state

At the moment state changes to computed properties will cause state changes, that's an implementation bug. Instead they should just trigger update update on it's readers without changing actual state.

Create API for an app state

As outlined yesterday at #mozspace

At the core of everything is a central stream "app state" to which you can pipe inputs and fork from off to get an updates!

API needs to provide consumers with: previousState, currentState and delta, ideally it will be a stream of current state. That way reduction on it will provide consumer with previousState as an accumulated value and currentState as an item to be accumulated. With that app-state will be just
a regular stream with all the composeability benefits of all other streams.

Reactor with nested reactors in it.

Address-book with number of contacts in it:

{
   "1": {
      "name": { "firstname": "foo", "lastname": "bar" },
      "address": {
        "address": "foo",
        "zip": "bar"
    },
   "2": {
      "name": { "firstname": "foo", "lastname": "bar" },
      "address": {
        "address": "foo",
        "zip": "bar"
    }
}

Number is computed property. Details should be editable

Duplicate name

Did you really create another "Functional reactive UI library" called reflex when there already is an "Functional reactive UI library" called reflex?

https://reflex-frp.org/

summaries

https://github.com/Raynos/reflex-todo/blob/master/reflex/summaries.js

Summaries takes a flow stream and generates a stream of summaries.

Summaries look like

{
    type: "new" or "updated" or "deleted"
    , name: id
    , value: current delta
    , oldValue: actual previous value
}

This is mainly used by https://github.com/Raynos/reflex-todo/blob/master/reflex/writer.js#L22

Which now detects whether the input is a summaries stream and switches into "collectionWriter" mode.

This means that to have your writer handle a "collection" instead of single values you need to pass it a summaries stream

Improve reactor API

At the moment reactors are functions that take inputs and produce outputs. Although in self contained components reactors should just feed of it's own outputs unfortunately this now implies messing with signals merging and flattening them together. It would be nice if API could be designed such that piping outputs to inputs is very natural and would require no knowledge of signals at all.

Is it production ready yet ?

I came across this framework while searching for FRP JS frameworks such as Cycle.js, Mercury.js etc.
Just wanted to know is this library production ready yet ? Does it have all features of elm-lang ?
If it is not complete, would there be any breaking changes in upcoming version ?

Deep nesting for units.

At the moment unit takes id to reactor mapping, but that's not ideal it should be able to define deeply nested structures too like:

unit({
  items: itemsReactor,
  count: {
    completed: completedReactor,
    pending: pendingReactor
  }
})

Status & spiritual successor

I'm curious what the status of the ideas of reflex are.

I've started two spiritual successors. https://github.com/Raynos/graphics and https://github.com/Raynos/mercury

graphics is inspired by reflex & Elm.
mercury is inspired by reflex & om / queiscent / reagant / react.

Would love to know where you plan to take your ideas. Would also love to do some brainstorming collaboration.

I still want to implement the time widget !!

Example of time widget

We talked yesterday about how great it is to have a central app-state stream, one of the most exciting things about it was an ability to buffer updates and state snapshots so that you could interactively manipulate timeline. Well we should do it! We should make a timeline widget that does exactly that, to show off how easy and great it is.

It should be pretty simple to implement too, it will just take an app state as an argument, and keep buffer of last n deltas when slider moves, inverse delta will be pushed to the app state that's all about it. Maybe it should even have a save /load button to let you save it in form of JSON or load in that form.

CODE_OF_CONDUCT.md file missing

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].

(Message COC001)

Tutorial/Guide

Hello
Have you plans for add some tutorial how to use it, like https://guide.elm-lang.org/

Streaming reflex

I'm iterating on the ideas of what the basic components of reflex are.

For simplicity and speed I've implemented the ideas using streams instead of reducers. They will be merged eventually.

I'll document parts that I've written

Written

• State
• Widget
• ListWidget
• Writer

Todo

Merge ideas into reflex

operations are discrete events

The central state is a massive signal.

Where as operations are actually discrete events

We need a way to model both signals and events instead of making events signals and passing them through the state.

`thunk` type annotations are incorrect

We assumed that thunk could take functions that return any kind of Virtual Element. Turns out it needs to be a Node as neither ThunkNode nor TextNode are supported.

Type annotations should reflect that so type checker could catch those errors.

Bundled, minified distribution without node dependency?

Is it possible to create a bundled flat file that you can link in with a simple <script> tag? The goal would be to avoid Node/babel dependency for development.