Use nested components instead of simple html. #2
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In our app, we'd love to double down a little more on using components to wrap simple components. They rarely do a ton. Lots of times it's just sugar for adding various classnames:
Which comes out with relatively simple, and not even necessarily needing-to-be-bound html wrappers:
This is a nice way to abstract the less pretty parts of css component frameworks and grid systems as well as a really cool way to abstract your desired markup for certain repeated components so you can make a single update to the component markup and have all instances upgrade at once (imagine the bootstrap 2 to 3 upgrade).
All that to say, I really like the idea of using components everywhere.
The problem we run into is that nested components take so long to initialize that it becomes by far the most expensive part of our render time. So what we did was use some of the private htmlbars APIs to create block helpers that don't require a view creation. We just make dom elements by hand and inject text nodes. It's unbound, but that's usually fine for a lot of these less-complex ones.
The problem with those were that the APIs were private, and thus broke during every upgrade.
So the reason I'm submitting all this here, is that I think as part of ember's speed goals, having a bunch of components in a list shouldn't be a big perf hit. It seems like Glimmer will likely clean up most update costs to components, but my gut says that the initialization cost won't likely change much. I'd also be cool with some sort of 'less-features-mode' that you could put 'wrapper components' into.
Notes about this repo:
classNameBindings
doesn't appear to work anymore. Could be me being dumb, or an API switch that I'm unaware of. I added some spots that use it, but currently they just evaluate to false, no matter what.