Conclusions about this method of theming

episode17 commented 7 years ago

We're currently dealing with the issues of building a flexible theming solution for a big React app and when I landed on react-toolbox I found the style as a dependency pattern to be very close to our needs. We're also heavily invested in styled-components so whenever I see it mentioned on toolbox I get excited.

Seeing the react-toolbox-core package makes me think you might find this solution appropriate for the future so I'm curious if you drew any particular conclusions from this experiment? Do you find yourself writing too much wiring/boilerplate? How can you be sure the dependencies passed to a factory are appropriate? How do you convey that to the theme developer?

javivelasco commented 7 years ago

Hi @episode17 !

I'm still working on this. This repository is just an example to test if this approach of writing components makes sense, it's flexible, etc. Until now, I've found this fucking awesome!! As you can check here it even works to create components for React Native. The calendar animations are built with React Motion and every component is really extensible.

Still it's an early stage and I'm changing a lot of stuff as I experiment with React Native, complex components, event adapters, and stuff like that. That's the reason why this repository has a fixed package version of react-toolbox-core with a 0.0.0-alpha.hashed version. I plan to finish a stable approach by the end of this week sending a PR to react toolbox with a full restructure in a monorepo with multiple packages. React Toolbox will be a material design implementation of React Toolbox Core using Styled Components but it will be extensible to any other look and feel/implementation.

I will try to push a react-toolbox-airbnb native DatePicker similar to the one they have in their app. I'm very close to it. Of course I will publish an article developing the idea. Some answers to your questions:

I think you can't skip too much boilerplate. You have to provide styled components and declaration is pretty straightforward with styled components. Sometimes you might need to do more work for example with animations but I think it's good enough.
A problem is how components are wired between each other. It's not discoverable so the solution is to have an exhaustive documentation for every "Node Component", how is it connected, rendered, etc. You can't assert everything is passed fine either, sometimes you might want to skip a component so you must pass a dummy () => null.
The real theming ie changing primary colors and stuff like that should be delegated to the implementation so if you use styled components you can use ThemeProvider. This implementation should be 100% agnostic from the styles platform.

One thing is sure: this is very very close to the final strategy! Feedback welcome.

episode17 commented 7 years ago

Thanks for your response! I'm a bit late sorry.

This is good stuff. I'm still in the process of implementing this across our whole project.

It makes it so core components become very barebone which is nice, but also puts a lot of responsibility on the theme implementer side. If I have a bunch of core components that expect a Button of some sorts, nothing stops a theme from passing a different one to each factory. It's more flexible than usual, but demands greater discipline I feel.

Still find the solution very clever, let's see how it goes :)

** Forgot to mention that 3rd point is the first thing I thought about when I saw this and it's very easy to implement with styled-components, which makes this method super compelling. Not sure how to name these 2 levels of "theming" though.

javivelasco commented 7 years ago

That sounds very good and it's on the right direction indeed! I'm sorry it's taking this long, I'm currently searching for an apartment in BCN and it's a nightmare. I hope to get back to work soon.

olegstepura commented 7 years ago

@episode17 so it seems like you should have tested the method deeply till now.

What can you tell about performance? Are the components so responsive as they are in the dev branch of react-toolbox (or at http://react-toolbox.com/#/components which uses 1.x version of react-toolbox I believe)?

javivelasco / react-toolbox-airbnb

Conclusions about this method of theming #1