mozilla / reflex Goto Github PK
View Code? Open in Web Editor NEWFunctional reactive UI library
License: MIT License
Functional reactive UI library
License: MIT License
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.
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
Merge ideas into reflex
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.
Did you really create another "Functional reactive UI library" called reflex when there already is an "Functional reactive UI library" called reflex?
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!
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.
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.
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
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:
If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].
(Message COC001)
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 ?
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.
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).
https://github.com/Raynos/reflex-todo/blob/master/reflex/flow.js
flow is a stream of changes to State
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
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.
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
}
})
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:
localStorage
so next time user is there it's in his preferred style.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!
All I see is "Functional reactive UI library" but I'd like to read more before blindly trying it.
What is reflex exactly?
Idea is to implement flash paint like tool that would flush whenever thunk cache is invalidated.
Hello
Have you plans for add some tutorial how to use it, like https://guide.elm-lang.org/
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.
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
}
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.
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.
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.
TodoMVC is great, we should have an architecture example for reflex. Lets collaborate on the fork I have.
Currently calling Effects.batch(Effect, Effect, Effect)
will fail silently. We should make this accidental call an exception or otherwise notify the developer.
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.
Need a proper testing on travis with phantomjs and actual browser stuff. Hopefully we could get some cross browser testing too!
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 !!
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.
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.
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
There is a typo in README.md:
if you want to take take advantage of it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.