Hacker News new | ask | show | jobs
by mxstbr 3689 days ago
Thanks for sharing this here neuling!

We've been working on this complete overhaul of react-boilerplate for several months. Based on the combined experiences of tons of collaborators, we've created the strongest foundation to build your next React.js application with.

The biggest changes are:

- Revamped architecture: Following a bunch of incredible discussions (thanks everybody for sharing your thoughts!), we now have a weapons-grade, domain-driven application architecture.

- Scaffolding: Generate components, routes and more parts of your application directly from the command line, skipping all the boilerplate writing!

- Performance: We've got the best code splitting setup currently available, giving you the leanest, meanest payload. (The fastest code is the one you don't load!)

- JS utilities: We now include redux-saga, ImmutableJS, reselect and react-router-redux to make sure your application scales to the size it needs.

- CSS improvements: We use CSS modules for truly modular and reusable styles, code split your styling based on the page the user is on and make sure your code style is in order automatically!

I think this is by far the best boilerplate currently available, both for starting your next project and for simply getting inspiration into what's possible.

Let me know what you think everybody, I'm beyond excited to finally share this with the world!

3 comments

I've built a small project using v2 and it really helped me get up to speed and learn some of the best practices for React front-end development. I'm looking forward to trying v3, because it addresses a several things that I felt could be improved in my current project. Specifically, Component tests, CSS organization, & integration with utilities like ImmutableJS & reselect.
That's so great to hear, you're going to love v3!

v2 to v3 is like stone age to modern times. :)

So far this feels really nice, kudos!

Quick question - what does the HMR work with? If I change a component it seems ok, if I change a reducer it blows up in my face.

EDIT is there a walkthrough of getting set up with this anywhere? After about 30 minutes playing I think I'm going to put this down until there's an obvious way of building a simple app with it.

I ran into this same issue when setting up my own Redux/React with Hot reloading. The solution I found involved adding this to the store initializer:

  if (process.env.NODE_ENV !== 'production' && module.hot) {
  module.hot.accept('./reducer', () => {
    store.replaceReducer(require('./reducer'));
  });
I still have issues with getting actions to hot reload, but from what I understand this will work once Hot Reloader 3 is released, so I'll just wait for that.
Thanks!

I've decided to skip on boilerplate for the moment. I found that it wasn't very clear as to how to manage the code and I didn't find any obvious walkthroughs. Maybe for people with a little more experience it's useful but I found that it made everything a little murky for me.

Since yesterday I've made good progress on my own app and I have have a much better understanding of how everything fits together. It might well be that boilerplate has the answers to some of my questions on how to manage the codebase but I just need to go through the process of figuring it all out for myself.

Yeah, I found that approach to be much better even if it feels like it takes longer. Only now that I've got a working todo app (based on a particular system) working, with a decent understanding of every part, I might look into this boilerplate (or another) to see what might be some 'best practices' and to see where I might've taken a suboptimal approach.

I find that this generally is the best approach.

Of course, the mistake I usually end up making, and one I made in this case, is that I try to learn too many things at once. For the current project: Redux, React (+ router stuff), Flowtype, Typescript, hot reloading, and something else I forget. Certainly didn't make things easier or more efficient, but it was hella fun!

(Flowtype in particular is going to stick around for future projects where I don't want to go all-in on types. Typescript seems like a better long-term bet though, FWIW).

Does this provide universal/isomorphic rendering?
Not yet, but it's the next big feature on our roadmap!

We've actively been working towards it, we realise it's a really important one too, so it won't be long.

Chime into the discussion here if you have thoughts about it: https://github.com/mxstbr/react-boilerplate/issues/174

We added that to https://github.com/TrueCar/gluestick. Plus it gives you a cli and much better upgrade path when you need to change things in the future