Comments (3)
@mrEvgenX Ah I see, you're right, this is lacking too much elegance for my liking as well. First off, I'd like to thank you for both creating and extending this issue — it has pushed me to rethink of how Moon's functional approach can be used more practically. This is a perfect candidate for a new app structure and API I've been conceptualizing for the past few weeks. I tweeted a code sample that used this approach a few days ago (except with a React driver), so I'm excited to see how it can be applied here!
Basically, you structure an application with two transformations: input to state and state to output. Check this solution out:
const { div, p, button }
= Moon.view.m;
const go = page => input => main({
...input.data,
page
});
const increment = input =>
input.data.page === "index" ?
main({
...input.data,
counter: input.data.counter + 1
}) :
main(input.data);
const pageIndex = state => ({
data: state,
time: {3000: increment},
view: (
<div>
<p>{state.counter}</p>
<button @click=(go("counted"))>Create</button>
</div>
)
});
const pageCounted = state => ({
data: state,
view: (
<div>
<p>Result: {state.counter}</p>
<button @click=(go("thanks"))>Get Thanks</button>
</div>
)
});
const pageThanks = state => ({
data: state,
view: (
<div>
<p>Thank you</p>
</div>
)
});
const main = state => {
switch (state.page) {
case "index": return pageIndex(state);
case "counted": return pageCounted(state);
case "thanks": return pageThanks(state);
}
};
Moon.use({
data: Moon.data.driver,
time: Moon.time.driver,
view: Moon.view.driver("#root")
});
Moon.run(input => main({
page: "index",
counter: 0
}));
In this case, any event handlers transform from input to state and then hand it off to main
, which transforms state back into output. With this, event handlers and the initial run are responsible for the dirty work of converting inputs to a state that reflects an application much more accurately. Then, the main function can transform it back to driver outputs.
As I work on a few changes to the API and codebase structure, I'll be adding this methodology to the docs. If you'd like, you can try adding documentation; the code is on the gh-pages
branch.
Let me know what you think!
from moon.
This is a good exercise. Thanks for posting it, I think some revisions I have of Moon's API can help the ergonomics of things like this. The main problem is that tick
outputs to a driver which sets a timeout, so setting time: undefined
won't cancel any previous timeouts already set. The logic will have to go into tick
or another function. Here's a quick way I was able to get it working:
const { div, p, button }
= Moon.view.m;
const goSeeingCounted = ({ data }) => ({
data: {...data, isTicking: false},
view: <viewSeeCounted counter=data.counter/>
});
const viewCounter = ({ counter }) => (
<div>
<p>{counter}</p>
<button @click=goSeeingCounted>Create</button>
</div>
);
const viewSeeCounted = ({ counter }) => (
<div>
<p>Result: {counter}</p>
</div>
);
const tick = ({data}) => {
const newData = {...data, counter: data.counter + 1};
return {
data: newData,
time: {1000: main},
view: <viewCounter counter=newData.counter/>
}
};
const main = (input) => {
const data = input.data === undefined ?
{counter: 0, isTicking: true} :
input.data;
const newInput = {...input, data};
return data.isTicking ? tick(newInput) : goSeeingCounted(newInput);
};
Moon.use({
data: Moon.data.driver,
time: Moon.time.driver,
view: Moon.view.driver("#root")
});
Moon.run(main);
from moon.
Thanks for your solution. It look quite well and works nice. But another problem begins if I increase delay up to, say, 3 seconds and add the next step. Please, take a look at an example in playground. Try to click "Create" and "Get thanks" whithin 3 seconds.
I think I'm able to fix it now. But I'm sure, a solution for this is gonna look not so nice and pretty. What do you think?
And I'm sure it should be mentioned somewhere on moonjs.org, may be in guide time or examples. May be I can help with it, are moonjs.org's sources available for PRs?
from moon.
Related Issues (20)
- linking of mvl external file HOT 8
- Import libraries to use in components HOT 10
- Update Example HOT 5
- onCreate() doesn't have access to "this" HOT 7
- Q: Pass data to component? HOT 2
- Moon v1 Roadmap HOT 33
- awesome build-less moon (+lazy load components?) HOT 5
- is beta 3 production ready? HOT 2
- Common Editor Support for Syntax HOT 5
- Some attributes have to be set by attribute and not by DOM HOT 3
- Moon compiler does not apply DOM event listeners or attributes to created element by for HOT 4
- ubuntu 16 fasnetmoon HOT 2
- use moon in browser HOT 8
- How to apply DRY principles in example code HOT 3
- Any thoughts on hydrating data with SSR? HOT 3
- Fix environment variables on Windows HOT 1
- 没问题,只是开一下而已! HOT 2
- Just trying example - syntax error HOT 5
- Is this project active or dead? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from moon.