React-boilerplate: setup for performance orientated, offline-first React.js apps | Hacker News Reader

React-boilerplate: setup for performance orientated, offline-first React.js apps

github.com

154 pointstilt61 comments

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.

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

Yep, it's dizzying how fast the JS ecosystem is changing; hell, even just the React ecosystem on its own. I went back to a React-based side project I had been working on at the beginning of this year to try to get it up to date with current best practices and tooling, and SO much has changed (Babel/ES6, Webpack, the maturation of the Flux pattern, the React/React DOM split, etc) that I've decided to rewrite it more or less from scratch.

I don't even need a lot of the stuff this particular boilerplate kit has, as my app is designed to run as a static site on Github pages, but having one place to go just to find out what libraries and practices are currently considered the state of the art (or flavor of the month, depending on your level of cynicism) would be wonderful.

Them's the breaks, I guess.

Rewriting a side project app with the latest boilerplate generator and toolkit, IMHO, is an obsession that is just a great way to avoid doing work.

There comes a point in a side project where it gets too big for the usual sole developer to deal with and they think, "If I just upgrade to the next magic stack I'll be able to manage this complexity."

What's usually happened is that the QA load for adding new features has gotten too high and the usually sole developer can't add new features to anything without breaking stuff and at least going through a long test cycle. With a larger team, QA can help patch up the holes. However, if a project has solid TDD, this doesn't become a problem because, if the tests all pass, everything works.

Just my two cents, but that was my experience before I got really into TDD.

Somebody posted about gluestick yesterday (https://www.drivenbycode.com/gluestick-the-future-is-here/) which helps create boilerplates...but also keeps them updated (a next gen Yeoman if you will).

It's not the JS ecosystem. Just the React one.

Ember's ember-cli remains the easiest way to avoid all the build tool/boilerplate annoyances.

I've resorted to subscribing to the atom feed of the package.json file on a few boilerplate projects that look interesting (este, react-boilerplate [1], etc) and researching new packages that are added in. Redux is the in flux implementation right now, and react-router has been great. But just found out there's a redux-simple-router package that binds them together!

  [1]: https://github.com/mxstbr/react-boilerplate/commits/master/package.json.atom

I'm hard at work on v3.0, you might want to use the v3.0.0 branch! :-)

> https://github.com/mxstbr/react-boilerplate/commits/v3.0.0/p...

Subbed, awesome thanks!

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.

We need a developer "celebrity" to make a CLI tool like ember-cli for React.

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.

Not exactly "no value", but risk-aversion is a valuable trait. Balance the small additional value the new shiny brings against the potential fail if it doesn't live up to its promises.

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".

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.

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.)

They already integrated React in! SSR is possible with a few packages. RDBMS is where you got me :)

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/

That's exactly why I first shared this boilerplate. I take care of keeping up and giving you the very best developer experience possible at the time, and you take care of writing great apps!

v3[0] will make this seperation even more pronounced, with a new application structure that hides a lot of the magic and gets out of the way.

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

Does anyone have a growing list of popular React boilerplates?

https://github.com/erikras/react-redux-universal-hot-example

https://github.com/mxstbr/react-boilerplate

https://github.com/xgrommx/awesome-redux#boilerplate

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

https://github.com/xgrommx/awesome-react#boilerplates

React Native w/ Reagent https://github.com/drapanjanas/re-natal

my problem with all these boilerplate is their reliance on tangential technologies. (Babel/Webpack/MaterialUi/etc).

Unbundling these takes a lot of effort, and for me, probably more than the gain from using the boilerplate in the first place.

The whole point of a boilerplate (for me) is that you don't have to care about those tangential technologies.

I take care of setting up Babel and Webpack with hot-reloading, add linting rules that make sense, write a working ServiceWorker script, etc., so you only have to worry about writing your application.

* Disclaimer: I made the boilerplate this post is about.

For me, I try to figure out everything that the code is doing before I use it (using it more as a tutorial/guide) so having a lot of other tech to deal with gets in the way of the "get it working first" version

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 [1]: https://twitter.com/mxstbr

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

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!

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

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...

Why did you decide not to use Immutable(JS or other) as part of the boilerplate?

This is something I've been thinking about recently, I decided that for smaller projects having ImmutableJS included isn't very helpful. It's a lot of code overhead for not that much benefit.
Instead I Object.freeze the state[0], so developers get a warning when they mutate the state directly.
I'm happy to change this though, what do you see as the main benefits of including Immutable(JS or other)?
[0]: https://github.com/mxstbr/react-boilerplate/blob/master/js/r...

Looks like the boilerplate here is ground work for large projects.
Generally Immutable makes the reducers syntax much cleaner and allows to more easily "query" the state.
I am myself torn between using it and thus asked..

I opened an issue in the react-boilerplate repo, feel free to jump in and add your two cents: https://github.com/mxstbr/react-boilerplate/issues/46

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?

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.

I'd like to add to morgante's excellent comment:
You don't need any of these things, but they make it so much nicer and easier to write an application. You can easily write a React app without them, but it's less fun and it takes more time.
The point of the boilerplate is to let you focus on writing your application, and let the boilerplate take care of making that experience a very nice one.

What does "performance orientated" mean?

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.

Service workers or web workers?

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.

Actually, there's no server side rendering in this boilerplate yet. It wouldn't be hard to integrate, I didn't want to alienate the front-end devs who are front-end only and don't want to take care of server stuff.
Might have to revisit that again though...

I use FontFaceObserver (lazy web font loading), minify everything, keep the HTTP requests to a minimum (I'll have to look at that though, now that HTTP/2 is up and coming...), use AppCache and ServiceWorker to make repeat visits almost instant,...
If you have any other ideas how to make this boilerplate even more performance orientated, hmu!

Isomorphic/universal Javascript will insure to have an app SEO friendly and fast rendering times on first visits.

Is it really fast to handle rendering on server side? Why would it be faster than client side?

Because it loads before the JS.

Like any webpage, it is indeed loaded before the JS on client-side. But don't you need to interpret JS on server-side? Why would it be faster than interpreting the React code on client-side?

Client-side: HTML starts loading, browser makes more http requests at various times (JS, CSS, images, etc.), React library loads, data loads, components are initialized, components are rendered.
Server-side: HTML starts loading with component markup already initialized, (other stuff continues.)

I think the GP actually meant that the JavaScript has to be parsed anyway so on the server side you get a delay because the server does it while on the client side you get a delay when the browser does it, so how does this save time in total?

The main problem with client-side rendering is not the parsing time, the problem is the HTTP requests that have to complete before you can start parsing. Whereas parsing on the server side is done in milliseconds by any dynamic document, including this HN page.

While parsing time may not be an issue on client-side, on server-side the situation is a bit different, "server side is done in milliseconds" does not mean it is faster than client side, cf. this presentation [1]. Moreover, I thought that Flux was the solution to the latency introduced by the multiple HTTP requests.
[1] http://www.slideshare.net/nickdreckshage/react-meetup

When this thread started off with the comment saying apps being isomorphic/universal leads to them being "SEO friendly and fast rendering times on first visits" it wasn't about React rendering speed, it was about page load times. First-time visits mean when there the browser hasn't cached various page elements.

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?

You can just start writing JS on an existing page to output components rendered by React.
Fair warning though, React is focused on rendering and initializing, so it doesn't come with a bunch of handy JS functions like YUI or jQuery. But you can use React & other JS libs together, as long as you're careful that the other JS lib doesn't change the markup of a React component (which would take it out of sync.)

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.

One approach would be to rewrite each page completely in react. Using the Rails app as an API.

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

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

Development: npm start
Production: npm run build

hakanito is spot on, I just wanted to add that there's a COMMANDS.md[0] with all the possible npm commands!
I take care of running webpack with the right envs, linting and building your application, you use the npm commands and write a great app!
[0]: See: https://github.com/mxstbr/react-boilerplate/blob/master/docs...

It's worth noting here that "production" is not for literally serving your app. Rather it's used here to provide a production-like build of your app that can be tested on multiple devices before actually deploying it online.

Reply on news.ycombinator.com