fastdom icon indicating copy to clipboard operation
fastdom copied to clipboard

Add a couple of great examples

Open wilsonpage opened this issue 11 years ago • 12 comments

Pick a couple of examples and link to them on gh-pages.

wilsonpage avatar Aug 26 '13 23:08 wilsonpage

+1. Love the library btw.

superplussed avatar Oct 05 '13 17:10 superplussed

Backbone view render example would be appreciated :)

paulosborne avatar Oct 06 '13 13:10 paulosborne

Does anyone have any great examples of problematic Layout Thrashing in a real project, which Fastdom clearly helps to solve? If we could demonstrate a before/after along the lines of http://wilsonpage.github.io/fastdom/examples/animation.html with a real project, that would be an awesome introduction to how simple and powerful the library is.

georgecrawford avatar Oct 12 '13 11:10 georgecrawford

A pattern I'm using (which I'm not sure it's a good idea), is nesting my writes inside my reads (to avoid variable scope issues). Any reason not to do this?

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

window.addEventListener('scroll', function() {
  fastdom.read(function() {
    var fooHeight = foo.offsetHeight;
    var barHeight = bar.offsetHeight;

    if (fooHeight > barHeight) {
      fastdom.write(function() { bar.style.height = fooHeight + 'px'; })
    }
  });
});

It seems to work without issues for me (no layout thrashing), not sure if theres other perf concerns? This could be a good pattern to include in the README?

cobbweb avatar Aug 14 '14 04:08 cobbweb

i would also be interested in the answer to that question :-)

serapath avatar Feb 06 '15 19:02 serapath

I added optional support for fastdom to nvd3. There are serious performance benefits to doing so (not as noticeable in chrome, but definitely in IE/FF). https://github.com/nvd3-community/nvd3/pull/8

petersondrew avatar Feb 06 '15 23:02 petersondrew

I have to say that the README / exampls doesn't do a a very thorough job in showing which DOM APIs profit from fastdom, as they only show reading / writing properties on DOM nodes, and not that fastdom can / should also be used when adding or removing elements. Maybe this can be added, too.

Narretz avatar Jun 06 '16 16:06 Narretz

@Narretz good point. Would you be able to submit an example(s) to merge?

wilsonpage avatar Jun 06 '16 16:06 wilsonpage

Just came across this library that I'd like to use in a constraints layout library I'm building, but I'm curious if there are any concerns about nesting calls, similar to what @cobbweb asked? Seems that it could be perf gain to not preform a write if it isn't necessary.

souporserious avatar Oct 25 '17 19:10 souporserious

@souporserious nesting calls is perfectly acceptable. You can see in these tests that we have all those cases covered. It's also handy to see the specced behaviour for each case.

wilsonpage avatar Oct 26 '17 09:10 wilsonpage

Awesome! Thank you for the quick reply 🙏 I read your article, and I'm really stoked to see if I get any perf gains in my layout calculations/rendering.

souporserious avatar Oct 26 '17 14:10 souporserious

Sweet! Let me know how it goes 👌

On Thu, Oct 26, 2017 at 3:02 PM, Travis Arnold [email protected] wrote:

Awesome! Thank you for the quick reply 🙏 I read your article, and I'm really stoked to see if I get any perf gains in my layout calculations/rendering.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wilsonpage/fastdom/issues/6#issuecomment-339676154, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-Sh2VuJ0xglHT-U8RdGa6BwKES6Po_ks5swJD8gaJpZM4A7_Ec .

wilsonpage avatar Oct 26 '17 14:10 wilsonpage