Improve performances #479

gregberge · 2019-05-05T07:20:48Z

Following #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

See #470 for all history and original code.

codecov-io · 2019-05-05T07:22:22Z

Codecov Report

Merging #479 into master will decrease coverage by 1.82%.
The diff coverage is 97.22%.

@@            Coverage Diff             @@
##           master     #479      +/-   ##
==========================================
- Coverage     100%   98.17%   -1.83%     
==========================================
  Files           1        1              
  Lines         173      219      +46     
==========================================
+ Hits          173      215      +42     
- Misses          0        4       +4

Impacted Files	Coverage Δ
src/index.js	`98.17% <97.22%> (-1.83%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update af33c08...3d671b3. Read the comment docs.

gregberge · 2019-05-08T18:41:55Z

@jxnblk are we ready to merge?

jxnblk

Sorry for the delay! It's been a busy week 😬 This is looking good! I left some comments, and I'm happy to help out with some of these changes. I don't think you needed to close the previous PR and open a new one, so feel free to keep all the work in this one from now on. I did start a couple branches to separate the rollup config, but they might have conflicts now (see https://github.com/styled-system/styled-system/tree/smooth-perf-only & https://github.com/styled-system/styled-system/tree/smooth-rollup)

If you don't have time to tackle some of these changes, we can merge this into another working branch to continue forward

jxnblk · 2019-05-11T13:42:43Z

package.json

  "sideEffects": false,
  "scripts": {
-    "prepare": "mkdirp dist && npm run build:cjs && npm run build:esm",
+    "prepare": "rollup -c",


This should still be separated into a separate PR before landing

jxnblk · 2019-05-11T13:43:31Z

test/index.js

-  })
-})
+// Impossible to ensure, due to perf issues
+// test('long form prop trumps aliased props', t => {


This commented code should be removed

jxnblk · 2019-05-11T13:44:24Z

test/index.js

 test('parses object values', t => {
  const style = width({
    width: {
-      _: '100%',
-      2: '50%',
+      0: '100%',


If the _ key no longer works, this would mean a breaking change. Is there anyway to support the current functionality and plan for changing this in v5?

In fact, the previous behaviour was not correct for me. An object was like an array:

// previous behaviour { _: '100%', 2: '50%' } // ['100%', '50%'] // current behaviour { _: '100%', 2: '50%' } // [, , '50%']

For me it is the correct and the expected behaviour, it is more a bug fix than a breaking change.

jxnblk · 2019-05-11T13:44:58Z

test/index.js

-      _: '100%',
-      2: '50%',
+      0: '100%',
+      1: '50%',


The 2 key was used to demonstrate skipping a breakpoint. Can this change be reverted?

See previous comment.

jxnblk · 2019-05-11T13:45:22Z

test/styles.js

@@ -11,7 +11,7 @@ import {
  textStyle,
  colorStyle,
  borders,
-} from '../src'
+} from '../src/index'


nb: this change is unnecessary

jxnblk · 2019-05-11T14:01:57Z

src/index.js

@@ -398,39 +487,39 @@ export const size = mapProps(props => ({

 export const verticalAlign = style({ prop: 'verticalAlign' })

-// flexbox
+// Flexboxes


Suggested change

// Flexboxes

// flexbox

jxnblk · 2019-05-11T14:02:13Z

src/index.js

 export const flexDirection = style({ prop: 'flexDirection' })
 export const flex = style({ prop: 'flex' })
 export const justifySelf = style({ prop: 'justifySelf' })
 export const alignSelf = style({ prop: 'alignSelf' })
 export const order = style({ prop: 'order' })

-// grid
+// Grid


Suggested change

// Grid

// grid

jxnblk · 2019-05-11T14:02:48Z

src/index.js


-// variants
+// Variants


Suggested change

// Variants

// variants

jxnblk · 2019-05-11T14:04:25Z

.npmignore

-CODE_OF_CONDUCT.md
+/*
+!/dist/**/*.js
+!/props.js


nb: personally I prefer not using negation for the ignore files

jxnblk · 2019-05-11T14:05:14Z

benchmarks/v4.1.0.js

@@ -0,0 +1,688 @@
+"use strict";


Since this is copypasta dist code from the current version, I don't think this should be checked in

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

gregberge · 2019-05-12T13:22:08Z

Hello @jxnblk, I made the changes and I rebased. One test is not passing, the merge of variant, it was not part of the library initially. Also using your merge method instead of the deepmerge package makes a significant less of perf (according to benchmark).

At start, when I come with this PR, I wanted to migrate Smooth UI System to styled-system. But I think it would not be possible, even if the philosophy is very close, we are not going in the same direction. There is a lot of points where we disagree:

Jest VS ava
Rollup vs Microbundle
Split code in several files (code readability)
Use of external packages (why copying deepmerge instead of including it?)
References in theme (it costs nothing to support it)
Naming of properties (color vs textColor?)
Breakpoints array (why not specifying 0?)
...

Also, performance seems to not be something very important for you since a lot of other stuff was implemented and merged before this PR. I try to keep up with rebase but it is difficult (eg. the compose of variant).

I understand your choices, but there are different from mines. So I think we can share the same "theming specification" but I will not use styled-system in Smooth UI or in my projects. I use it professionally, and I have my own roadmap, I can't stick to yours sorry.

Thank you for your time, I hope my contribution helped you!

jxnblk · 2019-05-13T15:14:06Z

@neoziro I'd really love to figure out how to get this landed, and I'd appreciate some patience here. This is a substantial PR and like any large code change, I expect it to take longer than some of the other smaller PRs that have been merged in. I can chip in to help with parts that you aren't interested in working on, but it sounds like maybe this PR's base should change to a next branch so that this can land as a major version change instead of in v4.

As for the requested changes, you originally proposed a performance refactor, but also chose to include changes to the build and file structure – and are proposing changing the testing library as well. I'm not opposed to these changes, but they weren't discussed beforehand and make this PR harder to evaluate. I need to make sure changes in v4 do not break for the current users of this library, and I hope you can understand where I'm coming from here

gregberge · 2019-05-13T16:56:59Z

@jxnblk yeah sorry for including these changes, it was not part of perf issue. I think it is going to slow for me, anyway I could continue to submit issues and changes. About the PR, I don’t have time to invest more on it, but the core is here, feel free to iterate on it! Thanks for your time and your patience 🙏

jxnblk · 2019-05-27T15:37:38Z

Going to close this out since it seems like it's not moving forward. Thanks again for all the work on this and sorry this PR didn't work out. Hopefully we can collaborate in the future, and I'll definitely be taking some inspiration from this for the next version of styled-system

gregberge · 2019-05-27T15:53:08Z

@jxnblk no problem. You have the PR for history with the flattening of props in compose. It is the key for keep perf constants with several composes. Always happy to help! Thanks for this great library!

gregberge mentioned this pull request May 5, 2019

Improve performances #470

Closed

jxnblk requested changes May 11, 2019

View reviewed changes

jxnblk mentioned this pull request May 11, 2019

Optimize space mapProps function #457

Closed

gregberge added 2 commits May 12, 2019 15:07

Remove rollup, simplify code

3d671b3

gregberge force-pushed the smooth-system-2 branch from e34dab9 to 3d671b3 Compare May 12, 2019 13:08

jxnblk closed this May 27, 2019

D1no mentioned this pull request Feb 5, 2022

What's going to happen with this project? #1986

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve performances #479

Improve performances #479

gregberge commented May 5, 2019

codecov-io commented May 5, 2019 •

edited

gregberge commented May 8, 2019

jxnblk left a comment

jxnblk May 11, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

gregberge May 12, 2019

jxnblk May 11, 2019

gregberge May 12, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

jxnblk May 11, 2019

gregberge commented May 12, 2019

jxnblk commented May 13, 2019

gregberge commented May 13, 2019

jxnblk commented May 27, 2019

gregberge commented May 27, 2019

Improve performances #479

Improve performances #479

Conversation

gregberge commented May 5, 2019

codecov-io commented May 5, 2019 • edited

Codecov Report

gregberge commented May 8, 2019

jxnblk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gregberge commented May 12, 2019

jxnblk commented May 13, 2019

gregberge commented May 13, 2019

jxnblk commented May 27, 2019

gregberge commented May 27, 2019

codecov-io commented May 5, 2019 •

edited