Performances #444
Comments
|
Thanks for putting this together! Performance is certainly something that could be improved in styled-system, and if that's one of the main deterrents for you and possibly others, I'd love some help in trying to make that better! If you have time to start a PR (even if just a spike), I think that'd be a great way to see the difference.
Yeah, I think a very early prototype did loop over the props for As a side note, I think we'll want to keep an eye on the API in |
|
Good to hear! I will try to work on a PR in this way! I don't have so much time but I will try. |
|
This is awesome! Happy to help out 👋 I'm using Styled System a lot, and performance was also one of my concerns, so I'd love to help make it better/faster/stronger 💪 |
|
I will submit a PR, as soon as I have a moment! |
Following styled-system#444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one. What have changed? - I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props. - I splitted the logic in several files to make it clearer - I switched to rollup in order to optimize build, provide umd and improve tree shaking What are the breaking changes? - We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963. - We are more strict in breakpoints, we don't accept a non-existing breakpoint - We don't export utilities like get, themeGet, etc... - PropTypes are no longer included, they can be generated from meta - We don't return array, just an object with all props merged - Properties that default to pixels unit (like margin, padding) no longer include it
Following styled-system#444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one. What have changed? - I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props. - I splitted the logic in several files to make it clearer - I switched to rollup in order to optimize build, provide umd and improve tree shaking What are the breaking changes? - We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963. - We are more strict in breakpoints, we don't accept a non-existing breakpoint - We don't export utilities like get, themeGet, etc... - PropTypes are no longer included, they can be generated from meta - We don't return array, just an object with all props merged - Properties that default to pixels unit (like margin, padding) no longer include it
Following styled-system#444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one. What have changed? - I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props. - I switched to rollup in order to optimize build, provide umd and improve tree shaking What are the breaking changes? - We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963. - Object keys or array keys have now equivalent parsing
Following styled-system#444, I bring perf improvements from @smooth-ui/system into styled-system. The goal is to make this library the best one and the universal one. What have changed? - I switched to the core of @smooth-ui/system, more performant especially with multiple compose. Composition is now flat, it means you can compose 10 times and it will not be slower. We are probably in O(n), where "n" is the number of props. - I switched to rollup in order to optimize build, provide umd and improve tree shaking What are the breaking changes? - We now rely on the order of props. ES2015 is here and we can rely on it, see this tweet for context: https://twitter.com/ianstormtaylor/status/1115680037875752963. - Object keys or array keys have now equivalent parsing
Hello, first I would like to thank you for this project. It was a source of inspiration for me, the goal of this issue is to improve this library and make it the default and best solution for styling components.
Problem
I would like to use
styled-systemin Smooth UI instead of using my own system. One of the problem is performance, it was one of my concern when I decided to create my own system, and it is still my concern.As you can see in this benchmark, Smooth UI system is twice faster than styled-system:
https://repl.it/@neoziro/system-benchmarks
https://github.com/smooth-code/smooth-ui/blob/master/benchmarks/system.js
Solution
The problem in your solution is that it iterates on styles instead of iterating on props. There is always more styles than props and if we want to support more CSS properties, it will grow up.
Another problem is the lack of style indexing, by indexing styles on properties, you are always flat and very effective.
The best is to give a look to the
composefunction in smooth-ui/system.The text was updated successfully, but these errors were encountered: