"hello world" app for mantra

[kctang]

The mantra-sample-blog-app is a good reference for most of Mantra concepts. However, it still takes a bit of time to digest both the draft spec and cross ref the sample blog app.

I think a 5 minute "hello world" type app that "emphasise core values" of Mantra will reduce initial learning curve & boost interest/adoption.

[arunoda]

Okay. This is a good idea. Anyone willing to do this? I'm happy to add it to the mantrajs org.

[rolfnl]

Sure, I think a couple of example like rack/redux would be great and not so hard to do. At the moment though I'm not sure how stable the spec is. I'm not ready yet to commit to a couple of examples when maintaining them takes up too much of my time. @arunoda Maybe you have an idea/roadmap for spec changes the coming months? Things that are still very much open for discussion that you want to tackle first?

I'm thinking simple examples like Hello World, some todo thingy... And I see in the kickstarter the extracted composer directory that abstracts the compose details from containers, which could be another example as well..

[arunoda]

In the spec-wise there won't be many changes. We'll have some easy way to reduce boilerplate code for containers. That's it.

[valentinvichnal]

I have created a clean Mantra app from the sample blog, maybe this is what you need: https://github.com/valentinvichnal/meteor-mantra-hello

I left only the fundamental parts of the Mantra Spec and used this to learn how to make new modules.

It is not a common task just in case I need to do this, what is the preferred way to pass data from children module to parent? In this example I passed a function from the parent to the children, the children can call it on value change. Alternative solution would be to change the LocalState in the children. Which one should I use?

[rolfnl]

@valentinvichnal Well, I have been thinking about the Hello World example and what it should show from the spec. Basically all it would be is the directory structure and not even collections/publications or containers. So maybe that's not that interesting after all, and there could be a "Mantra examples 1, 2 and 3" that step-by-step show the simple "hello world" to something dealing with containers/state and then adding collections/publications. I'm not sure yet..

Now your example, a container wraps a component, usually the container is like a data layer (wrapper) to push data as props to components. In your example component Home you import the container Box. Why do you (try) to do that? Also, you don't pass data form children to parent, from children you can call an action which could modify the props on a parent and then it goes through the children (so, data flow is one direction top down).

So looking at your example I think what you want is an Input component (your Box) that's not wrapped by a container. No need to make it a class with a constructor and super call etc. then it becomes too complicated. You can use a so called functional stateless components (or whatever they're called now) for a lot of things, especially simple things, which is simpler code in most situations.

Can't write any code at the moment, but as soon as I have some time I'll show you what I mean.

[valentinvichnal]

@rolfnl It is not the simplest Hello world example that can be written, it maybe makes sense for a programming language to write the simplest form but for a code structure specification like Mantra I don't think so. But your examples to build on top of the previous and add new things it might be a good idea.

I commented out the most server side code and method-stubs, I left these and the containers only to see the whole layout. After reading these concise left codes many times I could understand the logic of the spec and how to continue.

The Box module purpose is only to try how to pass data from children to parent (calling that callback function). For the simplest Hello word code I would write the reverse. The Box input module would contain the Hello Mantra text modul and pass data via simple props. More simpler write the input and the text in one module, but that is no more a Mantra example more like simple React.

I can guess what you say but if you could write the code that would be awesome! :+1:

[kctang]

Hi all! As part of my learning process to understand mantra, I created hello-mantra.

• It has a functional stateless UI component called line. It is rendered with a width that can be manipulated via grow, shrink actions.
• the grow, shrink actions manipulate width stored in LocalState.
• A line container component is composed using the corresponding line UI component, actions (grow, shrink) and local state (width).

These help to understand core concepts of decoupling UI, actions and "dependency injection". Basically, applications should be using the "composed" component.

To use the composed component:

• The composed line component is exposed via FlowRouter using a layout (MainLayout).
• Route and actions are exposed as the part of the core module. When the core module load(), it sets the initial width for the line component.
• The application defines ReactiveDict as LocalState, among other context data.
• As with all mantra based applications, main.js loads all the modules (only coreModule in this demo).

That's basically what I have for now. I do agree with @rolfnl that this should be a step by step guide rather than a single "Hello, World!" demo app. Current thought is to create separate branch/tag for each concept/step...but I am not sure about this.

Feedback, ideas and corrections (I am v.new to mantra - heard of it just last week) appreciated.

[rolfnl]

@kctang I haven't yet been able to test it, but by reviewing the code it pretty much is what I had in mind; a very simple example but with the basics (application context with router and one component with container + actions) and avoiding unnecessary classes to keep it simple. If I'd nitpick then I'd use const instead of let in the action, because you'r not changing the value really, but hey..

@valentinvichnal did you see this one?

Next could be the same but with Mongo added and then store the values in a Collection or something like that. So then you're expanding the context and can introduce optimistic updates/delays with loading messages or something.

Or a side branch could be implementing redux instead of ReactiveDict as the store.

:+1:

[valentinvichnal]

@rolfnl I have read the code. Thank you for this @kctang it is a great example. I'm beginning to understand how to write Mantra code.