React Molecule - A breeze of fresh air

announce
1

Hello guys,

I’ve started working on a framework to build generators of complex components that are extendable & hackable. However the tooling around it was lacking or very complicated. My plan was to build something simple.

While working on that project I’ve identified several building blocks that would allow me to build it, so I had to write a framework to allow proper modularisation of the components. That’s now React Molecule.

Currently the documentation is focused on the learning curve and it’s our next point to adapt it to also offer a proper API documentation + Video Tutorials!

I’m very curious to find out what you guys think so far!

PS: We’ve actually build this to do something super-awesome in Meteor. So stay tuned! :smiley:

9 Likes
2

Awesome. Currently I do these kind of communication by using ref to access child methods and props function to access parent methods.

3

Very cool! Message passing for inter-component communication is super powerful and underrated in my opinion. It looks like you have already covered a lot of ground in the examples.

I am curious how you think about making clear the possible messages that an Atom can emit and receive. With standard props, there’s the option of using prop types to help programmers understand what a component expects. Is there a similar declarative system for the messages a component can pass through the molecule?

For example in the hybrid approach example:

const Events = {
  USER_SEARCH: 'user_search', // { userId: String, value: String }
}

The comment indicating the shape of the data there seems like an opportunity for type checking :slight_smile:

I’m excited to see the API docs take shape!

1 Like
4

The documentation is a little unclear to me. You start an example using molecule.emit but then you never show how to fetch the value you passed with emit as far as I can tell.

5

@diaconutheodor You bring a new perspective into the community. You have truly breathed fresh air into Meteor through your amazing tools Grapher, Mutation, Redis Oplog, and now React Molecule. Great work! Going through the docs already…

6

Update

API has been added, documentation has been a little bit improved here and there.

@ottobonn it is super powerful indeed. Regarding your question, making clear what an Atom can emit or receive. I think the only way to enforce that is to kind-of go how redux-react did it, by injecting a sort of mapDispatchToProps like:

<Atom handleUpdate={() => molecule.emit('xxx')} />

The type checking is done via the extension of the eventemitter3. You have to read this part too: https://github.com/cult-of-coders/react-molecule/blob/master/docs/ADVANCED.md#lets-talk-events

@bmanturner you’re right, Event Emitters may not be super familiar to everyone, I added a comment to do a bit of reading first to make sure it’s well understood before continuing.

@martineboh thanks for the kind words but you’re exaggerating a bit. I’m just following a vision. Hope you will enjoy react-molecule it’s still a baby, released it yesterday, but hopefully it will reach maturity in the next weeks.

1 Like
7

@diaconutheodor Sorry for my ignorance here, but I still don’t understand how to access something emitted from molecule in another component. Isn’t that what this is supposed to help with? I think it would go a long way to show the counterpart to this snippet:

e => molecule.emit('search', { value: e.target.value })
8

@bmanturner all is explained here: https://github.com/cult-of-coders/react-molecule/blob/master/docs/EXAMPLES.md it’s not a long way at all, it’s just the next chapter. First we somehow need to clarify the basic concepts, not understand how to use it, maybe I need to change the strategy, I’ll think about it

9

That was exactly what I needed to see. Thanks for your help!

10

Updates

  • Added Molecule Tree concept
  • Better explained the concepts on the main README
  • Increased coverage a bit

If you want to play with it with a live example feel free to check it out here:

We now have completed the backbone of the next adventure. The one I talked about at the end of my talk in Meteor Night. :smiley:

Cheers!

3 Likes
11

Hello everyone!

We’re heavily working on Apollo Tutorials. React Molecule was the very piece that allowed us to bring everything together. We’re gonna release a tool that allows you to build fully customisable, full-featured and hackable CRUD components in under 30 seconds.

This work has started 2 years ago, when we wanted to create an “Admin” for Meteor like we had in Symfony2 Framework. (SonataAdmin for those who ever heard of it). And it was much harder because when you step into the SinglePageApp realm, you have to really think about how components work together. Additional logic.

So, what we needed a lot was that boring List with Filters, Pagination, Search, Edit & Create Forms, Actions ability. And we realised we were spending a lot of time on it, time our clients paid, but we should have a way to do it quicker and make our clients save money and our developers do more meaningful things.

But this approach took a lot of time to mature for us. We created concepts, we started back from scratch.

React Molecule is a way of having fully hackable components that work together with ease. It’s like oil in an engine. I want you to read through the documentation and try it for yourself, because as the past showed, feedback from Meteor community is extremely valuable.

5 Likes
12

I’m using this awesome package in my new project which will be released in the next few month. Thank you.

1 Like