This is more of a full boilerplate project example than a redux-router example

[irae]

There is a lot of value in this repo and I really appreciate the time you took to help the community with sharing this codebase. Kudos for that.

I think though, this is an opinionated project, not a minimal example in the likes of the redux docs, that are very minimal and try to be less opinionated. The Readme already explains some decisions, which I think is very nice. But I would suggest a bit more explanation.

This is outputting a very large bundle of about 100k compressed Javascript, and I dig a bit to analyze it. It's easier for people already familiar with all this technologies to reason and learn from this repo, but beginners would probably have a hard time understanding all of it. A bit of documentation might be the only thing it needs, or maybe extracting a minimal example on a different repo might be a good idea too.

Once more, please don't take this negatively. I really appreciate the project and it was very valuable to me. It is just some things to think about if you intend to work a bit more on this repo.

For reference, this is some of the things I did to analyze the bundle size:

$NODE_ENV=production webpack --json --config webpack.config.production.js | analyze-bundle-size
react: 609.67 kB (56.1%)
  fbjs: 32.87 kB (5.39%)
    <self>: 32.87 kB (100%)
  <self>: 576.8 kB (94.6%)
react-intl: 121.01 kB (11.1%)
  intl-messageformat: 53.26 kB (44.0%)
    intl-messageformat-parser: 36.08 kB (67.7%)
      <self>: 36.08 kB (100%)
    <self>: 17.18 kB (32.3%)
  intl-relativeformat: 14.66 kB (12.1%)
    <self>: 14.66 kB (100%)
  intl-format-cache: 2.86 kB (2.36%)
    <self>: 2.86 kB (100%)
  intl-relativeformat .: 15 B (0.0121%)
    <self>: 15 B (100%)
  intl-messageformat .: 15 B (0.0121%)
    <self>: 15 B (100%)
  <self>: 50.2 kB (41.5%)
react-router: 79.71 kB (7.33%)
  warning: 1.76 kB (2.21%)
    <self>: 1.76 kB (100%)
  invariant: 1.5 kB (1.89%)
    <self>: 1.5 kB (100%)
  <self>: 76.44 kB (95.9%)
history: 57.55 kB (5.29%)
  qs: 12.58 kB (21.9%)
    <self>: 12.58 kB (100%)
  deep-equal: 3.8 kB (6.61%)
    <self>: 3.8 kB (100%)
  warning: 1.76 kB (3.07%)
    <self>: 1.76 kB (100%)
  invariant: 1.5 kB (2.61%)
    <self>: 1.5 kB (100%)
  <self>: 37.91 kB (65.9%)
webpack: 45.85 kB (4.22%)
  <self>: 251 B (0.535%)
redux-router: 23.67 kB (2.18%)
  deep-equal: 3.8 kB (16.1%)
    <self>: 3.8 kB (100%)
  <self>: 19.86 kB (83.9%)
redux: 18.54 kB (1.71%)
  <self>: 18.54 kB (100%)
react-redux: 17 kB (1.56%)
  invariant: 1.5 kB (8.85%)
    <self>: 1.5 kB (100%)
  hoist-non-react-statics: 854 B (4.91%)
    <self>: 854 B (100%)
  <self>: 14.66 kB (86.2%)
babel-runtime: 12.52 kB (1.15%)
  core-js: 7.87 kB (62.8%)
    <self>: 7.87 kB (100%)
  <self>: 4.65 kB (37.2%)
whatwg-fetch: 9.69 kB (0.891%)
  <self>: 9.69 kB (100%)
parse-link-header: 1.38 kB (0.127%)
  xtend: 384 B (27.2%)
    <self>: 384 B (100%)
  <self>: 1 kB (72.8%)
classnames: 1.08 kB (0.0994%)
  <self>: 1.08 kB (100%)
redux-thunk: 375 B (0.0337%)
  <self>: 375 B (100%)
react-dom: 63 B (0.00566%)
  <self>: 63 B (100%)
<self>: 89.41 kB (8.22%)

You can also save the JSON output and upload to the visual analyzer here: http://webpack.github.io/analyse/ It might be a bit overwhelming tho.

[emmenko]

There is a lot of value in this repo and I really appreciate the time you took to help the community with sharing this codebase. Kudos for that.

Really glad to hear that, thanks!

I think though, this is an opinionated project, not a minimal example in the likes of the redux docs, that are very minimal and try to be less opinionated.

Yes, it's not meant to be one of those "boilerplates" but a real application with opinionated use cases. There are different reasons for that, one is that those examples are usually "easy" to understand but at the same time "too easy" for a real world use case (e.g.: who the hell needs a counter app when an application usually needs to do API calls and so on). In my opinion there is always something missing in those "general" examples.
What I'm trying to do here is to provide a real-world scenario with different use cases / functionalities that usually apply to such applications and to demonstrate how they play well together.

The Readme already explains some decisions, which I think is very nice. But I would suggest a bit more explanation.
It's easier for people already familiar with all this technologies to reason and learn from this repo, but beginners would probably have a hard time understanding all of it. A bit of documentation might be the only thing it needs, or maybe extracting a minimal example on a different repo might be a good idea too.

Yes, this is currently lacking a bit, and when I find some time I want to provide comments / documentation about decisions and so on. Refs #18

Once more, please don't take this negatively. I really appreciate the project and it was very valuable to me. It is just some things to think about if you intend to work a bit more on this repo.

Not at all :) Feedback is always good! And yes, like I said I'll add documentation which is something I've been meaning to do from the beginning.

You can also save the JSON output and upload to the visual analyzer here: http://webpack.github.io/analyse/ It might be a bit overwhelming tho.

Cool, didn't know about that. Thanks!

---

Hope this answer your questions, and thanks again for the feedback!! 👍

[PrimozRome]

I am about to re-write a large scale "admin" app with React/Redux. I am now on the learning curve on how to structure the whole app, which development tools to use and how to setup the entire workflow. It's a very mind-blobing process if you are new to this React/Redux thing. I used to develop "standard" PHP web application for about 15 years and now switching to this bandwagon.

I found your project and I think it's the most complete resource from where to begin from. I have tried many other starter packages and boilerplates and as you mention "counter" and "fuel calculator" apps do not help me understand much on how to structure a full blown SPA application. I will learn from you and I am greatly appreciate for putting this together.

I do wish there was a little better documentation for everything as currently I don't even know what is what and where the application code execution "starts". But I can understand how much time needs to be put into this... Still very glad I found this, will make my life much easier.

Also what I would suggest for future versions is to include some tools for better development workflow. I found this React-slingshot boilerplate a good example of nice modern workflow https://github.com/coryhouse/react-slingshot. It uses Browsersync and react-transform-hmr for hot reloading and lightweight webserver. Both are very useful development tools.

[emmenko]

@PrimozRome I hope to finally provide some documentation any time soon. And other useful use cases for a more complex application. Stay tuned.
In the meantime, just ask any question if you have troubles ;)

[PrimozRome]

@emmenko thanks! I am sure I will have plenty of questions :), but first I need to read plenty of docs before I start asking some questions that make sense :).

[irae]

React Router was updated and shipped 2.0 this week. I think this project might be outdated. Apart from that, the Router integration was missing from the Redux official documentation. Redux compatibility was one of the goals of React Router update, as stated on the changelog, so I believe there might been waiting for this.

I am glad this project was useful for @PrimozRome, but the reason this is all overwhelming is precisely why, IMHO, it's better to have more minimal examples out there and this one clearly documented as a full project boilerplate.

@PrimozRome, you are migrating from PHP to NodeJS and React precisely at a point that the whole Javascript/Node/React/Ember community are talking about "build tools fatigue", and you can get a gist of the discussion here. I highly recommend you to start small. I have a fairly good experience in bootstrapping this kind of environment, but the truth is: You only need it when you need it. I suggest, that you follow the following path:

1. Familiarize yourself with Node and NPM, only use it for server, go with the lowest denominator Javascript features, pick the browser with worst Javascript support you are required to cover and that's the baseline. Don't jump on the ES6/7/2015/2016 saga right away. It is not needed, it is an improvement for whoever is already familiar with everything.
2. Use React and other libraries as a global on front-end, go without Flux/Redux if you think that's challenging, roll your own stuff and you will be fine.
3. Use a Makefile if you are familiar with that to concatenate your files and minify it using whatever command line tool you already know. If you don't know Makefiles learn Grunt or Gulp instead.
4. When you have everything rocking, feeling good, safe about the above steps, choose one of the following and learn: Transpiring code with Babel, browser packaging (browserify, webpack, rollup), Flux/Redux and keep only once you get some of those start following JS news and bleeding edge stuff.

[PrimozRome]

@irae thank you for your suggestion. I think it makes a lot of sense what you said and the steps you have suggested. I will take that for granted. I have read that blog post on Medium - had a good lough and I think the guy is point on. I tried numerous starter packages and since I am new to all this ecosystem it is a huge mind-f**k to me. My head literally hurts from all the tools, modules, packages, configurations, ES6 that these starter projects use. It's very hard to get started.

Our app is a large scale enterprise app with a big relational database behind. It is made mainly with PHP and jQuery and was developed for the need of our company business process. We get very nice feedbacks from our partners/suppliers/friends and also a lot of "we need this" requests for this app. We saw opportunity here and we are now making a spinoff company which will make product out of this. I am the product/technical manager for development and I am currently making design decisions.

App will not be rewritten in NodeJS. PHP backend will stay (Laravel) but will be rewritten to function like a restful API. So at list most of the backend business logic, models and stuff will stay the same and will not needed to be rewritten.

The front-end of app is my biggest concern. We want to rewrite the front-end and make SPA application that will communicate with our backend API written in PHP. First I was thinking Angular but there is just to much of code needed to be written in Angular (controller, models, views, directives, ...) and things get messy quickly. I was looking at Angular 2 as well but I don't think it's ready yet so I left that behind as well. The strong point of Angular is that it gives you clear direction on how to write SPA application.

Then I jumped on this React bandwagon since it gets a lot of attention from development community recently but it is really really hard because literally I don't know how to setup a project, what tools I need and what is the right way to go! That's why I find this starter package useful. It literally has the elements I need - authentication, authorisation, pages, backend data calls. So I am thinking this might help me figure out how to rewrite my front-end SPA. I am now looking at the code for a day but still haven't figure out what's happening and most importantly why is something made like it is. I need a lot of reading and teaching.

I am also reviewing VueJS which I like a lot from the first look. Looks a lot easier to understand then React/Redux, so I still haven't 100% decided yet what to use. I am in evaluation phase now and will probably be here for the next month until I get a good understanding and feeling of what I am doing.