search

gss / engine

GSS engine
http://gss.github.io
MIT License
2.87k stars 103 forks source link

Is gss virtual-dom compatible? How about server side rendering? #193

Closed ArnoBuschmann closed 9 years ago

ArnoBuschmann commented 9 years ago

First off and to be honest, today I stumbled the first time over gss and I am not familiar with its implementation details.

Now I wonder about two things:

Inviz commented 9 years ago

GSS is two projects, engine and document. Engine is not tied to DOM in any way, while Document tries to wrap around a single HTML page. I think window object is never required, and window width/height accessors can be easily overriden.

Document needs DOM to flow text. But you dont have to use text measurements in your layouts, and can work with boxes and in theory run with jsdom and virtual dom.

Fresheyeball commented 9 years ago

Would be possible to use gss together with virtual-dom -> https://github.com/Matt-Esch/virtual-dom

It should work just fine with virtual dom. The Grid is using GSS with Reactjs components and working well. Reactjs of course being a virtual DOM based approach. GSS uses mutation observers and so should work out of the box regardless of DOM update strategy.

For what I see, gss needs the window object, so am I right to say it can't be used for server side rendering?

You absolutely should be able to with something like Phantomjs. There is even a project to make this a pre-process build task. https://github.com/gss/gss2css. This strategy should also handle any text measurement needed on the server-side as its a full browser runtime.

(psst, I don't work here, and could be wrong)

ArnoBuschmann commented 9 years ago

Thanks @Inviz and @Fresheyeball for your quick responses. Sounds good, so I'll dig a bit deeper and try GSS to see how it'll work out for me :)

Inviz commented 9 years ago

Just a record, that gss2css is surely outdated. Try running this instead:

?export=1440x770,770x450&export-output on any gss page. It'll output CSS with media queries via document.write(). Listen to export event to receive that css in the code - just dont provide export-output parameter. That's what we use internally to convert pages to static css. It generates all measurements in REM units, so you can scale the whole page by adjusting font size on <html>. To get 100%, set 100px of font size.

paulyoung commented 9 years ago

@ArnoBuschmann - just a note to say that since separating the engine and document repos they haven't been tagged with a release yet, so that's something to watch out for.

Also, gss2css is an earlier incarnation of some techniques to remove the runtime. Some info on that here: https://github.com/gss/engine/issues/178#issuecomment-94021858