jackcallister/react-simple

Warn about avoid this in production

Closed this issue · 9 comments

React's getting started guide shows off a example just like this.

Plus: I think it is convenient to warn newcomers about using this only for experimental purposes and take some time to hack on a Babel build process for production. Bullshit build tools aren't there for nothing ;)

@leocavalcante Good point, I was about to put that in. Now I'm thinking could you answer for me - what makes this non production ready? Just for the readme.

You should never use babel's transpiling/polyfills on the client side, this is slow and error-prone. It should always be done with a build tool like gulp or babel's official CLI, and then use something like browserify to bundle the assets, and then once it's compiled just include the one bundled script tag in your html.

@jarsbe
You can start saying that Babel Browser isn't supported anymore and people will be using a deprecated solution.

Also, Babel authors themselves does recommend pre-comping in production cases:

If you are working on a production site you should be precompiling your scripts server-side

Compiling sources on the browser means a lot more process and time-load for the users. It's the same as loading LESS/SASS files and parsing them on the browser before displaying any CSS.

@Nehero Understand it being slow, I wonder if that stops it being production ready though? Our opinion of production ready is different from that of a complete beginner.

For example if my little sister wants to learn to build an app, push it online and share it with her friends I don't think taking her through a build tool setup, npm environment and node server is worth the small increase in page speed. For a large site with a few users YES - definitely spend the effort to have a server and pre-compile your assets.

Perhaps it would be simpler to use ES5?

@leocavalcante good catch. Looks like https://github.com/Daniel15/babel-standalone is picking up the slack. What do you think about opting for ES5 instead?

Looks like https://github.com/Daniel15/babel-standalone is picking up the slack

Yeah, babel-standalone is designed for use cases like this (quick prototyping). It doesn't yet support automatically parsing and executing scripts with the text/babel type though, as I haven't had time to implement that. For now you need to manually call Babel.transform then eval the resulting code. Always happy to take pull requests to make that better, though :)

@jarsbe I think the project can go if ES6 and the updated @Daniel15 's babel-standalone, IMHO there is no problem with that, what I see and the purpose of my issue, is the lack of a warning about the drawbacks of using it on production grade app as this is target for newcomers I guess.

This cant be for real, this is far worse overhead than a real react setup. You are planning on using babel-core inlined in production? I laughed at this like it was a joke, but looks like you are taking it too serious.

@leocavalcante Yeah fair call, definitely hijacked the issue to discuss what production ready means for a beginner use case.

@Daniel15 Cool, that would be a sweet addition, I'll take a look at how babel browser does the trick.

@AlexKvazos If the over head of this two file project is too much for you, look elsewhere.

@leocavalcante Just added a disclaimer.