Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A React.js yearly calendar component

github.com

Post reply on HN
Print view View original

31–40 of 49 posts

Re: Show HN: A React.js yearly calendar component

#31

Post by jkkramer »

GiovanniFrigo wrote: post #11
exizt88 wrote: post #9

100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013 MBP. Seems a bit too much for making a number bold.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

Things would also be significantly sped up if you compiled in production mode. From looking at your source, all the dev mode checks are still being performed. See:

https://facebook.github.io/react/downloads.html (the note under npm section)

https://github.com/facebook/react/issues/1772

http://stackoverflow.com/questions/22118915/how-to-turn-on-o...

Re: Show HN: A React.js yearly calendar component

#32

Post by GiovanniFrigo »

jkkramer wrote: post #31
GiovanniFrigo wrote: post #11

Earlier quoted context omitted.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

Things would also be significantly sped up if you compiled in production mode. From looking at your source, all the dev mode checks are still being performed. See: https://facebook.github.io/react/downloads.html (the note under npm section) https://github.com/facebook/react/issues/1772 http://stackoverflow.com/questions/22118915/how-to-turn-on-o...

Thanks! Useful links, I didn't know anything about this. Will surely start using the `NODE_ENV=production` environment variable from now on!

Re: Show HN: A React.js yearly calendar component

#34

Post by GiovanniFrigo »

GiovanniFrigo wrote: post #32
jkkramer wrote: post #31

Earlier quoted context omitted.

Things would also be significantly sped up if you compiled in production mode. From looking at your source, all the dev mode checks are still being performed. See: https://facebook.github.io/react/downloads.html (the note under npm section) https://github.com/facebook/react/issues/1772 http://stackoverflow.com/questions/22118915/how-to-turn-on-o...

Thanks! Useful links, I didn't know anything about this. Will surely start using the `NODE_ENV=production` environment variable from now on!

That reduced the click delay from approx 90ms to 67ms, that's a pretty solid -25% there! Thanks for the suggestion, @jkkramer!

Re: Show HN: A React.js yearly calendar component

#35

Post by klkvsk »

bmelton wrote: post #29
klkvsk wrote: post #21

Earlier quoted context omitted.

I can tell from your own previous submissions that you are somehow affiliated with "belka.us", same company that open-sourced this calendar widget, so I am sure you were first here to upvote, and I understand why you are being so passive-aggresive now. But I really do not want HN to be a platform for such kind of self-promotion.

It's a "Show HN" article. From the "Show HN" rules: > Show HN is for something you've made that other people can play with. HN users can try it out, give you feedback, and ask questions in the thread. https://news.ycombinator.com/showhn.html There is nothing even remotely inappropriate being done here, except for your comment, which violates the self-same rules: > Be respectful. Anyone sharing work is making a contri…

So when you'll find yourself looking at front page full of "woo look at my helloworld app btw here's our website"-like posts, would you still think the same? Every tolerance should have its limits.

Re: Show HN: A React.js yearly calendar component

#36

Post by n0us »

hueking wrote: post #13

Sorry for asking this here, but I'm trying wrap my head around React. With the fact that we want to isolate styles for each component, how do we go about theming the components later on?

If you are using something like browserify you could create a module that defines the variables you want to use for theming or something and then import that module to achieve change once/ show everywhere.

You could also just not do inline styles, it isn't required.

Re: Show HN: A React.js yearly calendar component

#37

Post by GiovanniFrigo »

eterm wrote: post #33

I'd like to see an option to move the start of the week (first column and bolded column) to Monday (for those of us who prefer w/c monday). I'll have a go myself when I get home, if I'm successful I'll submit a pull request.

Great! yeah that was definitely something I wanted to add, here in Italy we usually use Monday as week start.

Feel free to submit a pull request then! I just kindly ask you if you could use airbnb's Javascript and React style guides, that is a pretty good standard IMHO https://github.com/airbnb/javascript/tree/master/react

Re: Show HN: A React.js yearly calendar component

#38

Post by guscost »

GiovanniFrigo wrote: post #11
exizt88 wrote: post #9

100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013 MBP. Seems a bit too much for making a number bold.

Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?

One common optimization is to strategically use shouldComponentUpdate to limit the number of components that render each time the state changes. In this case you could create a Month component which renders a single element. This component would then implement shouldComponentUpdate to check if the state used to render that month has changed. If not, shouldComponentUpdate returns false and the month does not re-render. This means that clicking on a Day should re-render two Months at most.

The same shouldComponentUpdate optimization could be added to both Calendar and Day, but in this case clicking a Day would always require the Calendar to re-render, and running through 365 shouldComponentUpdate functions (returning false from at least 363 of them) without first limiting by Month would not be ideal.

If the state is managed with ImmutableJS or a similar library, shouldComponentUpdate would only have to do a single reference equality check. Either way you should see a big improvement from any implementation that allows the individual Month components to skip rendering:

http://facebook.github.io/react/docs/advanced-performance.ht...

Re: Show HN: A React.js yearly calendar component

#39

Post by bmelton »

klkvsk wrote: post #35
bmelton wrote: post #29

Earlier quoted context omitted.

It's a "Show HN" article. From the "Show HN" rules: > Show HN is for something you've made that other people can play with. HN users can try it out, give you feedback, and ask questions in the thread. https://news.ycombinator.com/showhn.html There is nothing even remotely inappropriate being done here, except for your comment, which violates the self-same rules: > Be respectful. Anyone sharing work is making a contri…

So when you'll find yourself looking at front page full of "woo look at my helloworld app btw here's our website"-like posts, would you still think the same? Every tolerance should have its limits.

Unlikely, but considering we have a Show HN section that is specifically intended for that, which garners its own interest, and competes against the other, non-Show articles for front page space, if the front page were filled with Show HN content, it would either be due to a slow news day, or because people were cranking out worthwhile-enough apps to merit front page supremacy.

Either way, your parade of horribles is unlikely to occur, or be that horrible if it were. To each their own though.

Re: Show HN: A React.js yearly calendar component

#40

Post by haxeny1 »

GiovanniFrigo wrote: post #20
alexmuro wrote: post #16

Earlier quoted context omitted.

imho, this is worth showing as a piece of design. Its an innovative calendar layout and while I don't know if I would use it in time / data selection, in terms of visualizing data inside of a year it has a lot of potential.

You definitely won't use this for date selection, but we found it useful to layout the whole year and to review it at a glance. Thanks for your kind words anyway! :)

I liked the layout. The main take away for me was the in Red. It may be a trivial feature,but with so many widgets pounding my eye, it was nice to zoom in to todays date. I can see master planners (in inventory world) sticking with this layout, though I am sure you guys must have already done your market research.
Post reply on HN