search

iphong / react-portal-frame

Rendering components inside iframes using react portal.
MIT License
24 stars 1 forks source link

Add a caveats section #3

Open wmertens opened 6 years ago

wmertens commented 6 years ago

I found your project after hearing about CSS Element Queries (which would allow writing CSS queries for parent sizes) and then reading the rebuttal which explains why that will likely never happen, but to use iframes instead.

Using portal-frame, it seems to me that responsive design based on element width will be easy, but I'm worrying about performance etc; are there any reasons not to use portal-frame? Browser support, memory use, that kind of thing? It would be great to have that in the readme.

Thanks :)

wmertens commented 6 years ago

Maybe http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/ is still applicable… I don't see why it would not…

wmertens commented 6 years ago

Ah I just found a non-starter for me: you can't really embed iframes in html, so Server-Side-Rendering can't create a portal element like this :(

iphong commented 6 years ago

Hi, you have raised a very interesting idea about using iframe for CSS Element Queries!!! And I think if you use iframe for the right purpose, it can improve performance. When browser render an iframe, it create an entirely new process for that frame that runs on a seperated CPU thread. it helps spreading out the CPU resource to multiple CPU cores. And I think the reason where most people use iframe is that it can be isolated from global CSS while having its own CSS without affecting other elements on page. It's reason why i created this project.

And for your concern, you can embed iframe in html using srcdoc attribute. Here is the picece of HTML.

<h3>This is top frame</h3>
<iframe srcdoc='
    <h3>This is frame 1</h3>
    <p style="color: red;">Lorem ipsum dolor sit amet</h3>
'></iframe>

About server-side rendering, to be honest I don't use server-side rendering that very often. I think I need to look more into it.