DEV Community

Cover image for Composition in concave
Mats Pfeiffer
Mats Pfeiffer

Posted on • Edited on

Composition in concave

This is a cross-post from my blog.

Composition of components in concave is different to other component based frameworks or compilers. In concave you don't compose entire components you just compose render functions which will return HTML.

Example

I have created a simple Todo App to show you some code.

Both imports list and listItem are just functions that return HTML. Arrays will be automatically joined by the html function for less code in your template.

Pro and contra

I created concave to have a simple framework which isn't hiding complex tasks from me. What I want is to have simple and understandable code without "magic". With template composition I can concentrate on how I want to transform data and show it to my users. With other frameworks you have the ability to have e.g. child components and communicate with them, but this is getting more complex with more components you introduce.

On the other side it's harder to isolate common code in components e.g. lazy-loading of data. That's for sure easier with popular frameworks like React. It's not impossible to do it concave - did it on my portfolio - but it needs more experience to figure out how things are working in concave. At the end it's just JavaScript!

Conclusion

Components in concave are little bit different to other frameworks when you are familiar with the concept. In concave components are composing render functions and render them with props and state. In my opinion the reusability of render functions is a lot better than entire components because I don't need to think of the internals of this components. If you need component-to-component communication you can dispatch an action and react on that with an actionReducer in another component.

Links

Top comments (0)