React: A proposition to refactor for Isomorphism

[ChrisCates]

Hey guys just wanted to leave this here as a proposition for the project!

https://github.com/ChrisCates/An-Open-Letter-to-Facebook-and-Webpack

Chris

[jimfb]

Thanks for your interest in helping solve these issues!

Unfortunately, this is not the right place for such a proposal. This repository is discussing the React core. The React core has nothing to do with routing nor do we have any control over webpack, so neither of your proposals could be addressed in this repository.

Proposal 1: The first inherent design issue with Webpack is that it's designed ONLY for client side rendering...

Not something that can be solved in this repository. Perhaps post in the webpack repository?

Proposal 2: The second issue is with all this documentation coming out that is telling people to server side render with solutions that won't work with webpack... While match and RouterContext are great tools. They do however have some serious flaws in terms of implementation...

I don't think we do that anywhere in our documentation (let me know if we do, on reactjs.com). We are unopinionated about your packager (webpack or otherwise), so I doubt that we are telling people to do Server Side Rendering with webpack.

To be clear: match and RouterContext are NOT concepts in the React core. I think they might be react-router concepts. Regardless, this is not an actionable bug within this repository. Perhaps the react-router repository?

If you have ideas about how to make these projects better, I encourage you to pursue your ideas!

One great way to do that is to implement your ideas. For instance, if you believe the documentation is lacking in a particular area, feel free to write better documentation and publish it. There is a long history of people writing blog posts about various features that they feel were underdocumented (eg. https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html and https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.bx6nhocln). If those articles become popular enough, they are often transformed into official documentation.

Similarly, if you have ideas about how server side rendering could be done better, feel free to create a project/library. By releasing your own libraries, you have the opportunity to fully control them, and people vote for your library by using it instead of the existing alternatives.

Another option is to start contributing to existing open source projects. My recommendation would be to start simple (https://github.com/facebook/react/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+bug%22) and work your way up to bigger tasks, as you learn about the development process of that project, and learn about why things are designed the way they are (often there are underlying reasons you may not have been aware of).

Anyway, there are lots of ways to get involved in open source development, and I encourage you to do so!

Unfortunately, this github issue is not relevant to this repository, and is therefore not actionable by us. For this reason, I'm going to close it out. If you're interested in getting started contributing to React, I would encourage you to take a look at the good-first-bugs list I linked above. Happy coding!

[ChrisCates]

Thanks for the awesome response @jimfb.
Unfortunately, the inherent issues with webpack would require heavy refactoring in order to achieve this.

The point of this proposal is to couple a custom tailored solution that transpiles JSX to prerendered HTML while also rendering client side. The problem with precompiled webpack code is that there are interpolation issues and is incompatible with ReactDOM.renderToString()

I am seriously considering creating my own AMD module bundler designed for Isomorphism in order to achieve this. Elsewise I would create an isomorphic transpiler that works directly with webpack.

Hopefully you understand the context of the situation. And I suggest you send this to other people.

Cheers, Chris

[keyz]

Hey @ChrisCates, I think this library might be of interest to you: https://github.com/halt-hammerzeit/webpack-isomorphic-tools

[gaearon]

I would like to address this in case it’s not quite clear:

Dear Facebook and Webpack,

I truly want to help contribute to your projects, but you guys need to be open to my work. I feel insulted and disrespected when one of your Jr. Developers does not answer correctly and/or when reading my proposed solution to resolve the issue was not regarded at all.

See: https://github.com/reactjs/react-router/issues/3550

Neither @taion nor @timdorr work at Facebook (I’m also not sure if they identify as “Jr. Developers”). They are maintainers of React Router, a community project.

You asked a question specifically about Webpack. “Importing” image files is a Webpack feature, and thus it isn’t supported in Node environments. There are ways to work around this (e.g. precompiling the app for Node environment with Webpack itself). StackOverflow is a much better place to ask about this.

React Router project maintainers use its issue tracker for tracking bugs. Your issue was not about a bug in React Router—it was a usage question about Webpack. So closing it wasn’t an act of disrespect or an attempt to insult you. It was a technical decision to close an issue that isn’t related to the project. Same goes for this repo as well.

But again, I would like to stress that “React Community Member” badge does not mean the person is a Facebook employee, or works on React. It only means that they help maintain one or more packages in the reactjs community GitHub organization.

[timdorr]

React Router project maintainers use its issue tracker for tracking bugs. Your issue was not about a bug in React Router—it was a usage question about Webpack. So closing it wasn’t an act of disrespect or an attempt to insult you. It was a technical decision to close an issue that isn’t related to the project. Same goes for this repo as well.

Correct. The exactly the reason for the actions I took. @ChrisCates, you were doing a disservice to yourself because we were discussing unrelated concepts in a closed issue, where only 2 people were looking at your problems. I'm not a super huge expert on all things Webpack, so you would only get limited utility from me. Stack Overflow has thousands of people browsing React and Webpack issues all day, and there are currently just over 500 people sitting in Reactiflux at the moment. Way more people who can help you out! I was simply trying to direct you over to the places where you should be trying to get help that will be the most effective for you.

As @keyanzhang pointed out, you're probably looking for webpack-isomorphic-tools or something like assets-webpack-plugin. If you want to see the former in action, I highly recommend browsing through React Redux Universal Hot Example for some excellent patterns you can use to set up your Webpack config.

[ChrisCates]

Thanks for the awesome feedback guys! Appreciate it.

I'll try out the library and I'll give my thoughts on terms of implementation.

[ChrisCates]

So I've looked over everything and I feel like you guys are not understanding the proposal.

The proposal is to create a seamless continuous delivery flow that enables you to transpile Webpack code into plain HTML. This would enable you to send server side rendered code on request while also gracefully becoming a client side rendered script once the DOM is registered.

I understand your intentions and they are good. And sorry for making the assumption that "Jr. @reactjs developer" meant they were part of Facebook.

Hopefully we can discuss this in more detail soon as I sketched out a rough idea of the architecture and flow in my proposal.

Chris