goatslacker/iso

Tiny helper function for rendering JS on the server side and then bootstrapping on the client

Josh Perez

@goatslacker

a bit overdue

Tim Routowicz

@troutowicz

heh, alt's had you preoccupied

Josh Perez

@goatslacker

sure give me a sec

Tim Routowicz

@troutowicz

thanks!

Josh Perez

@goatslacker

published

Tim Routowicz

@troutowicz

thanks @goatslacker

Michael Benin

@michaelBenin

@goatslacker I'd like iso not to use an element for the data and append the data to the wrapper

Josh Perez

@goatslacker

what do you mean?

Michael Benin

@michaelBenin

Put the data meta and data state attributes on the markup element https://github.com/goatslacker/iso/blob/master/src/iso.js#L39

Josh Perez

@goatslacker

Oh. I used to do that but I wanted to render the markup first

So the browser receives the markup HTML first then the state

Michael Benin

@michaelBenin

Makes sense. I was trying to use <html> as the main element for my app and only have react components drive markup on both client and server; having one templating language.

I've read that's bad practice in react apps, as it's better to render your app in a div inside body.

Josh Perez

@goatslacker

Yes

That is true

Michael Benin

@michaelBenin

I want to be able to generate the <head> context within react, not within express/hapi.

It ends up being inefficient as the same data calls that populate the app contain the context that also populates SEO data in the head.

Josh Perez

@goatslacker

Yeah makes sense. There's no way around that though AFAIK

Maybe you can just react render to static markup the head

And render to string everything else with iso

I wouldn't use iso for static content

Michael Benin

@michaelBenin

Yes everything would be dynamic. Is it a goal to achieve a solution to this problem? I also wanted to bring up how you envision the test strategy for this project. Most likely something similar to alt?

Josh Perez

@goatslacker

yeah testing sounds good, we do none of it right now :)

Michael Benin

@michaelBenin

This weekend I should have some time, it's tough here in NY with only 3 months a year of warm weather.

FTR I prefer browser testing with karma/saucelabs/mocha/browserify and server testing also using mocha, with gulp as the runner with npm aliased scripts. Also how would you feel about adding a shrinkwrap file? It's saved my dev team here tons of time.

Josh Perez

@goatslacker

i dont mind

yeah mocha sounds good

we're using mocha for alt: https://github.com/goatslacker/alt/tree/master/test

exports module, assert from chai for the assertions

Ken Ding

@choonkending

@michaelBenin I think you can use https://github.com/nfl/react-helmet for the purpose of meta tags

I tried using it and it's pretty alright.

Michael Benin

@michaelBenin

Hey thanks choonkending, I'll take a look at helmet.

@goatslacker just got a recruitment email from twitter, looks like they are using alt: The team will be working rebuilding Twitter.com with the latest features of JavaScript in ES6 and ES7, using tools and libraries like React, Alt, Webpack, Babel and others.

Josh Perez

@goatslacker

nice :)

Aldwin Vlasblom

@Avaq

Hey, the readme contains the following snippet of example code:

// server.js
var iso = new Iso()

request.get('/', function (req, res) {
  iso.add('<div>Hello, World!</div>', { someSampleData: 'Hello, World!' }, { id: 'hello' })
  res.render(iso.render())
})

And I'm wondering whether the Iso instance is supposed to be created outside the request handler like that? Since you're adding state to it, it seems like lifecycle per request would make more sense. Or does it do a flush of internal state when you call .render()?

Aldwin Vlasblom

@Avaq

It seems like the examples also implement it as lifecylce-per-request instances.

Josh Perez

@goatslacker

ah yeah, per request is fine

you can also use the static version

Iso.render

that creates the instance and does the rendering

paulwehner

@paulwehner

Hey @goatslacker might you have a suggestion for debugging a checksum invalid error that occurs when using IOS? StackOverflow question here: http://stackoverflow.com/questions/33521047/warning-react-attempted-to-reuse-markup-in-a-container-but-the-checksum-was-inv/33521172#33521172

Josh Perez

@goatslacker

@paulwehner ooo wish I had some useful info...I forget how I've resolved this in the past I know I've logged the server output on the server and compared the HTML with what's being rendered on the client.

I've also logged a separate React.renderToStaticMarkup on the client to make sure it matches

Daniel Deychak

@DanielDeychakiwsky

container is not a DOM Node

in Iso.bootstrap

does anyone have any idea?

the container that it passes via cb

Josh Perez

@goatslacker

not sure. what is it?

Jimmy

@skylinezum

I'm trying to get iso to work in order to bootstrap my alt store, but for some reason alt.bootstrap() and alt.flush() doesn't seem to work.
ex:

res.locals.data = { AStore: { something: value } }
var data = res.locals.data
alt.bootstrap(JSON.stringify(data))
var state = alt.flush()

but state ends up being { } and perhaps an example using the new alt api would be nice

Michael Benin

@michaelBenin

@goatslacker just released the new https://fastcompany.com - couldn't have done it without some of the ideas from Iso

Where communities thrive

People

Repo info

Activity