"Think Redux, MobX, Cerebral, React Context, etc. but without having library imports everywhere and being tied to a framework API. Instead, just plain functions and objects. All you need is a simple stream library such as Flyd or Mithril Stream"
So you don't need to have library imports ... but you do need a library ;)
the code of mithril-stream is here from Isiah Meadows Mithril's maintener.
/* eslint-disable */;(function(){"use strict"/* eslint-enable */Stream.SKIP={}Stream.lift=liftStream.scan=scanStream.merge=mergeStream.combine=combineStream.scanMerge=scanMergeStream["fantasy-land/of"]=StreamvarwarnedHalt=falseObject.defineProperty(Stream,"HALT",{get:function(){warnedHalt||console.log("HALT is deprecated and has been renamed to SKIP");warnedHalt=truereturnStream.SKIP}})functionStream(value){vardependentStreams=[]vardependentFns=[]functionstream(v){if(arguments.length&&v!==Stream.SKIP){value=vif(open(stream)){stream._changing()stream._state="active"dependentStreams.forEach(function(s,i){s(dependentFns[i](value))})}}returnvalue}stream.constructor=Streamstream._state=arguments.length&&value!==Stream.SKIP?"active":"pending"stream._parents=[]stream._changing=function(){if(open(stream))stream._state="changing"dependentStreams.forEach(function(s){s._changing()})}stream._map=function(fn,ignoreInitial){vartarget=ignoreInitial?Stream():Stream(fn(value))target._parents.push(stream)dependentStreams.push(target)dependentFns.push(fn)returntarget}stream.map=function(fn){returnstream._map(fn,stream._state!=="active")}varendfunctioncreateEnd(){end=Stream()end.map(function(value){if(value===true){stream._parents.forEach(function(p){p._unregisterChild(stream)})stream._state="ended"stream._parents.length=dependentStreams.length=dependentFns.length=0}returnvalue})returnend}stream.toJSON=function(){returnvalue!=null&&typeofvalue.toJSON==="function"?value.toJSON():value}stream["fantasy-land/map"]=stream.mapstream["fantasy-land/ap"]=function(x){returncombine(function(s1,s2){returns1()(s2())},[x,stream])}stream._unregisterChild=function(child){varchildIndex=dependentStreams.indexOf(child)if(childIndex!==-1){dependentStreams.splice(childIndex,1)dependentFns.splice(childIndex,1)}}Object.defineProperty(stream,"end",{get:function(){returnend||createEnd()}})returnstream}functioncombine(fn,streams){varready=streams.every(function(s){if(s.constructor!==Stream)thrownewError("Ensure that each item passed to stream.combine/stream.merge/lift is a stream")returns._state==="active"})varstream=ready?Stream(fn.apply(null,streams.concat([streams]))):Stream()varchanged=[]varmappers=streams.map(function(s){returns._map(function(value){changed.push(s)if(ready||streams.every(function(s){returns._state!=="pending"})){ready=truestream(fn.apply(null,streams.concat([changed])))changed=[]}returnvalue},true)})varendStream=stream.end.map(function(value){if(value===true){mappers.forEach(function(mapper){mapper.end(true)})endStream.end(true)}returnundefined})returnstream}functionmerge(streams){returncombine(function(){returnstreams.map(function(s){returns()})},streams)}functionscan(fn,acc,origin){varstream=origin.map(function(v){varnext=fn(acc,v)if(next!==Stream.SKIP)acc=nextreturnnext})stream(acc)returnstream}functionscanMerge(tuples,seed){varstreams=tuples.map(function(tuple){returntuple[0]})varstream=combine(function(){varchanged=arguments[arguments.length-1]streams.forEach(function(stream,i){if(changed.indexOf(stream)>-1)seed=tuples[i][1](seed,stream())})returnseed},streams)stream(seed)returnstream}functionlift(){varfn=arguments[0]varstreams=Array.prototype.slice.call(arguments,1)returnmerge(streams).map(function(streams){returnfn.apply(undefined,streams)})}functionopen(s){returns._state==="pending"||s._state==="active"||s._state==="changing"}if(typeofmodule!=="undefined")module["exports"]=Streamelseif(typeofwindow.m==="function"&&!("stream"inwindow.m))window.m.stream=Streamelsewindow.m={stream:Stream}}());
So you need to learn how think in terms of streams and observables (I think RxJS is a famous library in this area) ... if you're not familiar with that paradigm yet then it's definitely a learning curve compared to the way you'd normally do things with Redux or Context.
Thanks, excellent, yes I get the idea ... I only mentioned RxJS because that's how I ever heard about streams and observables :-)
So can I put it like this: Streams provide a different approach (paradigm, if you will) to working with state in an "immutable" way?
Because that's basically what Redux and Context (and all of React, for that matter) tell us:
Do NOT modify state directly - return a new copy of your state, so treat it as 'immutable' ... streams do just that, but in a different (and probably easier or more powerful) way.
Much has been said on Svelte the "javascript compiler".
I can only agree with the speed and tiny apps it produces.
But for my needs I don't see what it brings more than Mithril
Mithril is only Javascript, with Svelte you have to learn a new syntax,
and you can't start without tooling, so integrate it into existing applications is not obvious
For example I needed to extends functionality to an Editor by adding a 'photo' button
with Mithril it was a piece of cake, It would not been that easier with Svelte.
Right, yes I understand that they're different philosophies, more or less the opposite ...
Mithril is something you can drop into an existing page to enhance it, Svelte is more something you use to build a complete standalone app, it doesn't easily integrate, and it introduces its own tooling and syntax (a bit comparable with Vue with its template syntax, while React takes pride in sticking closer to standard JS, at least that's what it claims).
Hello, look at the Meiosis pattern.
Regards
Search Meiosis on Dev to
First time I hear about it: dev.to/artydev/frontend-state-mana...
The explanations are terse, but yes I saw this:
meiosis.js.org/
"Think Redux, MobX, Cerebral, React Context, etc. but without having library imports everywhere and being tied to a framework API. Instead, just plain functions and objects. All you need is a simple stream library such as Flyd or Mithril Stream"
So you don't need to have library imports ... but you do need a library ;)
No :-)
All you need is two streams functions map and scan that you can implement yourself or use the simple implementation mithril-stream
And the function I use to merge states is a thirty lines of code called mergerino, which extends Object.assign.
I would not call them library, they are so tiny and very specialised
You can use whathever you want for the view (event document.innerHTML)
Here I use JQuery
MeiosisJS
Look at this for a starting pont :
observables
Regards
code for mergerino
the code of mithril-stream is here from Isiah Meadows Mithril's maintener.
So you need to learn how think in terms of streams and observables (I think RxJS is a famous library in this area) ... if you're not familiar with that paradigm yet then it's definitely a learning curve compared to the way you'd normally do things with Redux or Context.
Think of streams as Excel cells and you will have a good starting point.
I have written a few lines as introduction here
streams
You absolutely don't need RxJS, as I said earlier you only need map and scan for Meiosis
Here is very simple stream implementaion with a map function :
You can test it here :
StreamMap
Regards
Thanks, excellent, yes I get the idea ... I only mentioned RxJS because that's how I ever heard about streams and observables :-)
So can I put it like this: Streams provide a different approach (paradigm, if you will) to working with state in an "immutable" way?
Because that's basically what Redux and Context (and all of React, for that matter) tell us:
Do NOT modify state directly - return a new copy of your state, so treat it as 'immutable' ... streams do just that, but in a different (and probably easier or more powerful) way.
:-)
I am in favor of simplicity, If you are creating a project for your own needs, you really don't need heavy tools.
Use Meiosis with whatever view library you want or nothing eventually.
May I suggest you to use Mithril ?, simple, light and a very kind community :-)
Regards
I've heard about Mithril, but I also heard that Svelte is the greatest thing since sliced bread ... can you compare those two?
Much has been said on Svelte the "javascript compiler".
I can only agree with the speed and tiny apps it produces.
But for my needs I don't see what it brings more than Mithril
Mithril is only Javascript, with Svelte you have to learn a new syntax,
and you can't start without tooling, so integrate it into existing applications is not obvious
For example I needed to extends functionality to an Editor by adding a 'photo' button
with Mithril it was a piece of cake, It would not been that easier with Svelte.
JoditMithril
The more you use Mithril the more you know Javascript, I am not sure this is the case for all the well known frameworks
Right, yes I understand that they're different philosophies, more or less the opposite ...
Mithril is something you can drop into an existing page to enhance it, Svelte is more something you use to build a complete standalone app, it doesn't easily integrate, and it introduces its own tooling and syntax (a bit comparable with Vue with its template syntax, while React takes pride in sticking closer to standard JS, at least that's what it claims).
Totally different beasts really :-)
:-) you can also build complete apps with Mithril.
Among Mithril's users Nike.
Look carefully to this page :-)
Who use Mithril
Regards
Yeah. Looks similar.