Aphrodite, React and manipulating components at a Player Level

[Billboz]

Hi Kent!

First, thank you for offering to share your thoughts in this manner. I am relatively new to programming and I have a lot to learn. My hope is that you can help me clarify my question and give me a direction to go and learn more about the solution.

I am biting off a lot by using a rather advanced stack as my starting place. https://github.com/ParabolInc/action However, after a lot of research, I think this is a great place for me to begin. My app has a similar layout as Parabolic/Action and I am comfortable with the knowledge that it would be best for me to learn react/redux/graphql/node. That is the short version of how I got to this point.

My app will have players that will earn levels. Levels will determine their influence on the platform as well their user interface and user experience. So a component would possibly display a different color and/or different behavior based on the Players level. I am stuck thinking that variables for CSS would be best but I realize that this will be harder to reason with as the app gets bigger. As well as, reading issues with answers in the Aphrodite repo, that you seem to appear often in :), it is clear that Aphrodite is not intended to be used this way. Based on what I read, I think it is best to write a version of every component for every player level. Nine levels, nine times the number of components.

Khan/aphrodite#141

Is my understanding correct? If not, what would you recommend?

I am willing to use any technologies that will help me accomplish this. However, I am asking you in hopes that you can help me limit the number of libraries I have to learn to achieve the goal.

Is that enough information for you to give me some direction? I look forward to any thoughts you have concerning these questions.

Thanks again and I am looking forward to your thoughts,
Bill

[Billboz]

And after spending some time reading some of your twitter page, I found the great blog post 'Before Searching For That Perfect Boiler Plate' http://gedd.ski/post/boilerplates/! I agree with geddski, and I realize that I will have to start back at the beginning but I am still in a learning phase and without trying to eliminate all mistakes, optimize, I am trying to narrow what I am going to spend time learning.
I intend on getting some well-informed advice and then starting from the basics and build the app one component at a time.

[Billboz]

Well, I just keep reading that for react, inline styles are really the only sensible way to go.
https://medium.com/the-smyte-blog/announcing-jsxstyle-1-0-3ef469d1863a#.8ynhx3vf3

I will likely make a set of components for each player level. The player will be assigned a level through authorization somewhere and routing will load the correct components. I think?

[Billboz]

And then I found this tweet by you, https://twitter.com/kentcdodds/status/735919974007504900 which included a link to another AMA that is discussing this topic. #132

Would you be willing to share a couple thoughts and preferences on https://github.com/smyte/jsxstyle vs https://github.com/Khan/aphrodite, please?

[kentcdodds]

Hi @Billboz!
Sorry it's taken me some time to get back to you on this. Looks like you've been busy learning!

So first off, I would recommend that you stop what you're doing now and read and follow the advice here. Otherwise you'll likely get overwhelmed and you'll definitely have a less pleasant experience. I would say that it's unlikely you need a style abstraction right now. Regular CSS or inline styles (with the normal style attribute) or a combination of the two will probably suit you just fine for now.

Once you bump into scenarios where you need an abstraction like this, then I recommend that you just look at the docs for all abstractions that you find interesting (see this list), choose 3 or 4, and build something simple in each. Then decide which you like best.

You can get a sense of why I like aphrodite from some of my 3 minute podcasts here.

I hope this helps!

[Billboz]

EXCELLENT ADVICE!!
On all accounts!

Thank you, Kent, for your time and thoughts. I have studied a lot about the ecosystem and yes it is overwhelming. It is a crazy time for JS and especially web development. I am surprised that you gave me three resources that I have never seen! They all look great and I will spend the appropriate amount of time digesting them.

Best wishes and thanks again....