
React-boilerplate: setup for performance orientated, offline-first React.js apps - tilt
https://github.com/mxstbr/react-boilerplate
======
hoodoof
There really should be a "this month's boilerplate/starter kit" site that has
a starter kit using the current state of the art technology set.

Whilst this comment might sound facetious, it isn't intended to be.

The JavaScript ecosystem moves quickly and starter kits are outdated almost
immediately as the JS world develops better ways to do things.

At any given month there tends to be a community accepted (to a greater or
lesser extent) set of technologies that are the "current best". It would be
great to be able to go there and pick up a "January 2016" ReactJS starter kit
built around the "current best".

Another related idea is a website listing JavaScript technologies and every
month a new poll shows how many people favor one technology over another.

Or a list that allows people to use checkboxes to select the JS technologies,
with a grid showing which starter kits use that tech.

~~~
modarts
This is more a React community thing. It actually moves faster and re-invents
wheels at a more rapid pace than the broader JS ecosystem.

A lot of this re-invention happens when a community "celebrity" decides it's
time to (yet again) move to the latest new and shiny way of doing state
management or data fetching. It's pretty annoying and exhausting at this point
to attempt to keep up.

~~~
hoodoof
I've heard this term "new and shiny" used many times as a derogatory term.

"New and shiny" implies that there is no real value in the newest tool, that
it's just a trend for hipsters to follow.

IMO developers rapidly move to new tools and technology because they are
better - simpler, more full featured, easier to use or take a new approach
that solves problems in existing approaches.

The "celebrity" suggestion here appears to be that sheep like developers just
go and do something ecause some known person has built something. This
suggests that developers are stupid. Who has time to learn something only
because of the name of the developer? Developers use things because it makes
sense to do so.

~~~
soundoflight
I think that's in opposition to "battle hardened". A wiseman wouldn't take
"new and shiny" over "battle hardened".

With that said even with some years under its belt yet the react community is
still in a state of flux (no pun intended), and one is signing up for new and
shiny for the next couple of years. One should know that and embrace it going
in. There is nothing wrong with that. I feel like we are currently in the
"walking" phase with React and have stepped out of "crawling". These tools are
helping us learn to "run".

------
acjohnson55
I'm working on an app now that started from a similar boilerplate. The
React+Redux ecosystem is very exciting right now. Both of those libraries are
brilliant in their elegance,and the ecosystem is a testament to that.

On the other hand, the fact that apps end up being a stack of loosely
integrated libraries can make the process of developing in the ecosystem
rather overwhelming. It's hard to keep up with the progression of
microlibraries and features.

One thing's for sure though: it's a fun time to be a Web developer.

~~~
firasd
Along the same lines, I was making a web app with React and found that while
the ability to be creative in putting together components is exciting, I'd
like a more integrated stack I can reuse for other apps.

While I haven't tried it out yet, it seems that Meteor is pretty close to what
I think of as ideal, and the news that they are going to integrate React is
great. (Now if only they announced native RDMBS support. Also, I care about
server-side rendering and would have to double-check whether that's possible
in Meteor.)

~~~
MatthewPhillips
DoneJS[1] a fully integrated solution that's still modular (you can use only
parts of it if you want). It also has the most full-featured SSR solution of
any framework out there (even goes as far as to include the correct CSS for a
given page).

[1] [http://donejs.com/](http://donejs.com/)

------
simple10
Does anyone have a growing list of popular React boilerplates?

[https://github.com/erikras/react-redux-universal-hot-
example](https://github.com/erikras/react-redux-universal-hot-example)

[https://github.com/mxstbr/react-boilerplate](https://github.com/mxstbr/react-
boilerplate)

~~~
dexwiz
[https://github.com/xgrommx/awesome-
redux#boilerplate](https://github.com/xgrommx/awesome-redux#boilerplate)

~~~
gpmcadam
Maybe non-redux-specific would be useful, too?

[https://github.com/xgrommx/awesome-
react#boilerplates](https://github.com/xgrommx/awesome-react#boilerplates)

------
mxstbr
Hey everybody,

I'm the main contributor behind this boilerplate. I'm currently hard at work
getting v3 out, which you can see in the v3.0.0[0] branch of the repo.

The biggest changes are: A new application structure to keep most of the
webpack magic hidden from users, stateless components across the board, a npm
run pagespeed command and much better documentation.

This was posted while I was sleeping (thanks tilt!), so I'll go through this
thread to answer any questions/concerns. If you can think of any more
questions you have, reply to this comment so I get a notification!

Cheers!

Minor Edit: You can also follow me on twitter[1] under the same handle stay up
to date with changes to the boilerplate!

[0]: [https://github.com/mxstbr/react-
boilerplate/tree/v3.0.0](https://github.com/mxstbr/react-
boilerplate/tree/v3.0.0) [1]:
[https://twitter.com/mxstbr](https://twitter.com/mxstbr)

~~~
hoodoof
Is your webpack config compatible with Windows? Most of them set environment
variables in a way that is not cross platform.

~~~
mxstbr
I honestly haven't tried it, that's a very very good point.

How would I set them so it works on Windows as well? I'll change it asap!

~~~
mg74
If you want to do Windows, consider using [https://github.com/kentcdodds/argv-
set-env](https://github.com/kentcdodds/argv-set-env) for a cross-platform
solution to setting enviroment variables

~~~
mxstbr
Thanks, it's now fixed for the master branch using kentcdodds/cross-env.[0]

[0]: See this commit: [https://github.com/mxstbr/react-
boilerplate/commit/ea5794333...](https://github.com/mxstbr/react-
boilerplate/commit/ea57943338c47c673a8a1d815fee0b5f8f3bfc84)

------
gravypod
I think I see a slight problem here. Should we not consider the fact that we,
seemingly, need all of this to start a project?

I feel that simplicity, and ease of use should rain supreme over features. The
fact that this takes such a huge amount of other files to setup worries me.

Am I the only one with this concern?

~~~
morgante
You absolutely don't need all of this to start a project. It's perfectly
possible to start using React without any sort of build tools, boilerplate, or
additions.

It's just that these additions are things you end up wanting once a project
grows, so you might as well start with them.

------
bahador
What does "performance orientated" mean?

~~~
simple10
I think performance is referring to apps that load fast (server side rendering
+ AppCache + hot module loading) and using service workers for keeping the
main thread running fast.

~~~
wanda
Service workers or web workers?

~~~
skulbuny
simple10 said service works and the repo that we're all discussing mention
only service workers. I think it'd be safe to assume we're all talking about
service workers.

------
rdoherty
Related to this, how would someone who has _existing_ websites built with
various other libraries start a migration to React?

I have a lot of legacy YUI code in a Rails app (using Rails' asset pipeline)
that I want to rewrite. Anyone have resources on how to get setup and refactor
in pieces?

~~~
mercurial
I'm doing exactly that at work.

When you write React code (whether for a single-page React application or a
mostly-legacy application), there is a point where you need to tell React to
start rendering a root component inside a given, existing DOM element. Your
legacy application should NOT mess with anything under this DOM element, as
this will be solely managed by React. However, it is entirely possible to have
several of these root components on the same HTML page. It makes it possible
to refactor a complex page progressively. You're still going to run into
issues if you need communication between legacy and Reactified UI elements,
though. You will need to setup, eg, listeners manually. In the case where you
need to update parts of a form, just tell your React store to write to hidden
input fields instead of doing Ajax with the server.

------
nanoojaboo
It has two webpack configs (one for dev, one for production), how do you
indicate which one you are using when you run webpack?

~~~
hakanito
Check the package.json, there are several npm scripts. The author of this
library probably wants you to run `npm run start` for development and `npm run
serve` for production

