Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a couple of great examples #6

Open
wilsonpage opened this issue Aug 26, 2013 · 12 comments
Open

Add a couple of great examples #6

wilsonpage opened this issue Aug 26, 2013 · 12 comments

Comments

@wilsonpage
Copy link
Owner

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

@superplussed
Copy link

+1. Love the library btw.

@paulosborne
Copy link

Backbone view render example would be appreciated :)

@georgecrawford
Copy link
Contributor

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.

@cobbweb
Copy link

cobbweb commented Aug 14, 2014

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?

@serapath
Copy link

serapath commented Feb 6, 2015

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

@petersondrew
Copy link

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). nvd3-community/nvd3#8

@Narretz
Copy link

Narretz commented Jun 6, 2016

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.

@wilsonpage
Copy link
Owner Author

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

@souporserious
Copy link

souporserious commented Oct 25, 2017

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.

@wilsonpage
Copy link
Owner Author

wilsonpage commented Oct 26, 2017

@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.

@souporserious
Copy link

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.

@wilsonpage
Copy link
Owner Author

wilsonpage commented Oct 26, 2017 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants