Moon v1 Roadmap

[kbrsh]

After a few betas, I think it's time to lay out the final list of features or changes that still need to be implemented for the next release.

• Moon Executor

  • Perform view and diff phases over multiple frames.
  • Perform patch phase in one synchronous batch.

• Allow custom children to be set on data.
  Example:

  <div children={ children }/>

• <if>, <else-if>, and <else> components.

• <for> component.

  Example:

  <for={ $item in items }>
    <p>{ $item }</p>
  </for>

• Hoist static data, events, and children.

EDIT: This roadmap is outdated. The API referenced in this issue description has had a significant overhaul and is being iterated on! The current beta documentation is at moonjs.org.

[anonimusprogramus]

Hi @kbrsh.

Some minor comments:

1. For, If, Else be lowercase, easier to type.

2. For has Else too, just in case Array or Object is falsy.

3. Built-in router, assuming Moon has already props and methods as Store.

4. Discord channel, maybe.

Thanks

[kbrsh]

Hey @anonimusprogramus!

Thanks for the feedback.

1. I've considered this and I think I'll for it since it'll be consistent with the <text> component used internally.
2. I'm not sure about this one. It's a rare construct and the only other language that I know that implements this is Python. It can make things confusing to read, and can be replaced with an if/else component with the for loop inside of one clause.
3. The router isn't essential to the core so I likely won't include it in the core moon package. However, I am planning on making an official router library.
4. Moon has a Slack channel.

[anonimusprogramus]

Thanks for your reply.

#2, actually I borrow the idea from Svelte 😅

#3, officals/ecosystems would be awesome

Thanks, nice to have you back again.

Cheers!

[kbrsh]

Interesting. I personally think that it's more clear to have an explicit if/else with a for inside because for/else can be easily confused as a mistake.

[sadeghbarati]

I'm still waiting for the word beta to be removed from moon.js
in new version

wish I could help you do this...
but Good Job any way dude 👍

Love You From IRAN ❤️

[kbrsh]

I'm working on it haha — currently I'm working on the performance and removing any deoptimizations from v8 along with the documentation.

After that, the only thing left is to make an official router module.

[sadeghbarati]

pls add this list after router module done :

1. Fix moon-cli coz its generate Weird things.
2. or just create a best boilerplate for it instead of moon-cli
3. Add moon-compiler for bundlers like webpack and rollup
4. Live example of moon-ssr with parcel , webpack or rollup

PS3. webpack and rollup have faster compile than parcel

[kbrsh]

Yup! I'm working on the CLI and boilerplates. I'll likely add webpack and rollup support as well, but those can progressively be released after v1's core modules are released.

[sadeghbarati]

awesome 🥂

pls update Moon in js-framework-benchmark
to see what happening in new version

thanks 😄

[kbrsh]

I'm actually working on a new implementation of it now, and I have been tuning the compiler and executor to be as efficient as possible while also being asynchronous (similar to React's time slicing).

For example:

• 03ced07 two-phase executor
• 808ff50 view-patch executor
• 816f1bf optimizing node creation
• 0819ef2 optimizing children property access
• 00a2e6e diff-patch executor (most recent revision)

I've gotten the performance up quite a bit — I'm just working on making it more consistent because the results can vary by a lot sometimes.

[kbrsh]

Here are some preliminary performance results! Keep in mind that these ran on my machine, and the results will likely be different when made official. However, it is useful for getting a good idea on where Moon stands.

I tested Moon, Inferno, Vanilla, and React. Moon appears to be the fastest! Still, I think that when these are ran on the official js-framework-benchmark machine, the results will differ. Specifically, I think that Vanilla along with some of the other low-level libraries will be faster.

[anonimusprogramus]

Hi Kabir and everyone..

Let's keep this discussion going on.

Bring you some ideas,

1. Moon provides shorthand key that will assign the right event based on the element type (like: @call instead of @click @submit or @change)

so, <button @call={function()}>, <form @call={}, <select @call={} etc

2. Moon provides official Router and State Manager. These two shall be required first to develop something with Moon. We learn how useful Vue provides vue-router and vuex.

I find tiny libs like navaid and litestate to be cool examples, ymmv.

3. Moon encourages key in loops.

That's all for now. Thanks

[kbrsh]

Hey @anonimusprogramus, thanks for the suggestions!

1. I’m not sure if this will be beneficial for code clarity and convenience because it can be ambiguous (e.g. @click vs @dblclick). I think being explicit with the event type is the way to go, but I’m curious as to what you think.
2. Moon will have an official router and data driver. V1 has a functional design, where your app is a function that takes driver inputs and returns driver outputs.
3. Since components are stateless, keys aren’t required because not having them doesn’t create any issues. However, I may add a keyed children algorithm to the virtual DOM, but it’s lower priority right now.

For now, I’m mostly working on documentation. Thanks again for your input! 🙏

[kbrsh]

Alright everyone, I finished most of the documentation! I still have to write examples and add more content to the landing page, but the bulk of the core documentation is done. On top of that, there is an interactive playground for trying Moon live in the browser.

Check it out here: moon-v1.surge.sh.

Let me know what you think!

[LeviSchuck]

The playground is pretty nice.

Though I wonder, how are you getting from tags-in-javascript to browser friendly js?
I'm used to the idea that JSX will transform this to a bunch of React.creatElement calls and that's usually made clear by their docs.

[kbrsh]

@LeviSchuck It's the same thing as with JSX, but it is converted into Moon.view.m calls instead. It's explained in the Under the Hood section of the view guide. This compilation is handled by the moon-compiler package.

[anonimusprogramus]

Well done @kbrsh !

Here's what I found (ymmv)

• The code's theme needs bigger font and a brighter color, especially comment, lil hard to read
• It's a breaking change in concept (driver, state tree, functional approach), I need more time to chew :P
• and now in lowercase, love it!

[kbrsh]

Thanks @anonimusprogramus!

I'll look into making it more readable using color. I'm not sure about the correct font size though, as other documentation sites usually use a size around 15px. It's small but meant to be dense.

And you're right, it's a very new concept and even I'm still discovering its' full potential, let me know how you feel about it :)

[kbrsh]

Moon v1 beta 3 is out! 🎉

Let me know what you all think :)

[sadeghbarati]

C:\Users\SYSTEM\AppData\Roaming\npm\node_modules\moon-cli\dist\moon-cli.s:65
if (err) throw err;
^

Error: Command failed: tar -xzf C:\Users\SYSTEN\AppData\Roaming\npm\node_
modules\moon-cli\dist\moon-template.tar.gz -C D:\moon\wtf --strip=1
'tar' is not recognized as an internal or external command,
operable program or batch file.

at ChildProcess.exithandler (child_process.js:294:12)
at ChildProcess.emit (events.js:198:13)
at maybeClose (internal/child_process.js:982:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)

thanks for new version but moon-cli still doesn't work nevermind
i can create my boiler
but i have to report this 👍

regards

[kbrsh]

@Riiccardo Looks like your version of Windows doesn't have tar. Moon CLI depends on tar being available, but I can maybe look into a fix. For now, the boilerplate template is available here if you want to clone that instead.

[anonimusprogramus]

Almost v1, please make Moon's twitter account, easier to tweet and be searched.

[kbrsh]

@anonimusprogramus @moonjs_

[sadeghbarati]

Hey @kbrsh
pls include more example in single-file-components in moon-template
how to Moon.use and Moon.run(Root); (separate Data for a component) in another js file like Todo.js
and import in Index.js html view like

import Moon from "moon";
import "./Index.css";

import "./Todo.js";

export default ({ data }) => (
	<div class="Index">
		<Todo data={separateData}></Todo>
		<img class="Index-image" src="/img/moon-logo.png" alt="Moon logo"/>
		<h1 class="Index-title">{data.name}</h1>
		<p class="Index-paragraph">Jump into the <a href="https://kbrsh.github.io/moon/doc/guide.html" target="_blank">guide</a> to get started.</p>
	</div>
);

[kbrsh]

@Riiccardo Components don't have local state and shouldn't use Moon.use or Moon.run. Those are in index.js because they are only ran once to kick off the application.

If you want to make a component, then it will look just like Index.js and Index.css. You can import them and use it as a view. I'd recommend checking out the guide for more information. Moon is more like Elm where components don't have local state because they are just view functions.

[anonimusprogramus]

Hi Kabir,

is Moon going to use that Capitalized Index.js or Index.css naming?

I agree with Components, but with files, what if Moon sticks with lowercase?

I mean, just like if/else/for that now lower-ed, file name isn't new things too.

What do you think? Thanks

[kbrsh]

@anonimusprogramus It's just convention, since the Index.js file exports a component named Index. Capital letters is how Moon detects components, and builtins are all lowercase. It's just like React (even the file naming convention), and you don't have to follow it if you don't like it :)

[sandorTuranszky]

Any plans to use TypeScript?

[kbrsh]

@sandorTuranszky There are currently no plans to rewrite Moon in Typescript.

[shanoaice]

Is there any plans to provide a TypeDcript declaration file? If there's no declaration provided for TypeScript, it will be hard to use Moon in TypeScript.

[haikyuu]

Great library and clean concepts. Good luck with the future.

I saw there are no plans to rewrite this library in typescript. And that's to be expected. It's hard to justify a rewrite.

But I was thinking about using Typescript to write moon UIs. I see this can be problematic since moon uses its proper language. But since typescript supports JSX out of the box, this can be achieved.

The other advantage of using Typescript and JSX is ease of migrating from React. Gathering a community of enthusiats is one thing. But bringing industry users is another.

I'm saying this because i see a lot of potential in Moon to be used alongside existing apps since it's only 2kb of size.

Other than types and their safety and easily including moon in an existing project, there is the question of mobile support:

Are there any plans/ideas to have moon work in mobile? that's very interesting thing to explore as well. Maybe a mobile driver?
I took a look at the source for view and route and they are pretty slim (amazing work by the way). So i think it's not very hard to achieve. Maybe starting by Android and then tackling iOS?

Finally, congratulations on this amazing and small library. And thank you @kbrsh

[kbrsh]

@haikyuu Thank you!

TypeScript support and integration is definitely something to have on the roadmap once Moon is more stable. Like you said, it'll help with adoption and make Moon more approachable to existing apps.

And you're totally right about a mobile driver! Something like that should be possible to do with Moon, although I don't have too much experience with developing native mobile stuff — it should be an interesting learning experience and it'll likely work similar to React Native.

For now, I'm iterating on Moon's API as I build more side projects with it and learn about some of the common struggles that a different API design might mitigate. Thanks for the feedback and support, I really appreciate it :)

[j354374]

Do I need to put the ugly HTML in my code or can I use things like:

const newDiv = document.createElement("div"); 
const newLabel = document.createElement("label");
newLabel.innerHTML = "Event Registered";
fieldEl.appendChild(newDiv);
newDiv.appendChild(newLabel);
const newEl = document.createElement("textarea");
newEl.id = "textarea";
newEl.innerHTML = "none";
newEl.disabled = true; 

I want to avoid using the dependencies in React and avoid using anything that looks like JSX as I want to make my code look nice. Is moonjs right for me?