Django React/Redux Base Project (opens in new tab)

I'm 3 months into my first React/Redux project and wouldn't adopt Redux again if I were starting over. Don't get me wrong, it's not horrible, but it's not great either.

Compared with the extreme elegance and simplicity of React itself, Redux is verbose, boilerplatery and the way it integrates with React never feels natural.

I've taken a look at Mobx and had that aha moment of "yes, this is what the solution should look like!" Of course there's a big caveat here: not having really used it I don't know what its problems are yet. I'm comparing the real world warts of Redux with the platonic ideal of Mobx, but still it's definitely what I would try if I were starting a React project now.

Completely agree about Redux - it has a large scope of functionality that also includes a long learning curve. I started using FreezerJS [0] a while back and have loved its simplicity. To my knowledge is the simplest alternative for state management, which you can understand in the ~100 line "Example" they provide.

[0] https://github.com/arqex/freezer

Correct me if I'm misunderstanding, but one thing that worries me about MobX is that it seems leakier than Redux. Something that I really, really care about is that a well-architected React application should hardly care what the data layer is. The bulk of the application is comprised of dumb/presenter components and only the handful of container components know anything about Redux.

Things like this (from the docs) make me nervous:

  const TodoView = observer(({todo}) =>
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            onClick={() => todo.finished = !todo.finished}
        />{todo.title}
    </li>
  )

TodoView is a dumb component that operates simple data passed via props, but now it needs to know that it's an observer and presumably rely on some facet of MobX to work?

I used both Redux and MobX. I can't recommend MobX enough. Redux is just way too much boilerplate code and has a steep learning curve.

Also MobX + TypeScript is just beyond awesome! You don't want to do MobX without TypeScript if you have the chance.

It's been less than 6 months I first heard about Redux. Looking at its issues, it seems to be a little more than 1 year old. Now everyone is talking about MobX. Why not improving Redux in first place? If it's verbose, why not writing more abstractions on top of it to make it easier to use? IMHO we should think more about those questions before writing another framework-of-the-day.

We also use a bootstrapping view for our single page app. It sounds like your application is multiple pages or make a request for every "page"?

The nice thing about react router and client side routing is you can have a very clean separation from your backend data model and your actual UI/website.

I would agree that react router is like a 1000 pound javascript routing gorilla.

Hi

I'm not much of a frontend guy as I concentrate on the backend, but my team is working on a new React UI and I'm thinking of something similar, possibly.

Hopefully you can detail your plan a little more.

The reason our old Angular front-end was complex was because it was firing off dozens of small rest calls to grab every bit of state - drop downs, business logic, props, etc. - every time the route changed. It was a large SPA.

I'm proposing to do something different - break up the SPA into 6 or 7 MVC pages and push as much of the state into the html / JS that is returned, then use React only to update dynamic pieces of the front-end without having to regenerate the whole page.

Is this what you're describing or am I mistaken?

is there a better way to get server side rendering rather than a whole dependency on node for a django project?

hey, I'm one of the developers of this repo. We actually use docker in some of our projects but we never had time to add it to this project. Feel free to send us a PR :)

I wouldn't mind taking a look. I prefer VanillaJS.

I'm currently using .Net/Java/C++ (yeah...) and am wanting to get away from that and switch to Python full time. So, I have been looking at as much Python code as I can lately.

It's always interesting to see how someone elses tackles something. Personally I'd probably have used Pjax or intercooler.js for that. I assume the ajax-ey part is simply to avoid full page reloads and improve the general speed? Other than that it's fairly static content?

(would be interesting to compare the performance of this vs static site generator output on a really fast CDN - my hunch would be that this would probably win unless you were at a geographic disadvantage)

Is there a way to set a pre commit git hook in a project's source code? So that the same hook only runs on that project and not on every project using git.

Are you aware of any boilerplate repos or examples that take this approach? Seemingly every example I've seen assumes Node is the backend.

After thinking about it for a second this could be because I've been looking at universal/isomorphic projects but I'd imagine you should be able to do rendering in Node and still have a completely separate API project.

Token based auth is stateless, so your first assumption stands true -- no need to join them at the hip.

I've tried working with tools like Djangular and whatnot, and no matter how many times I've tried working within that ecosystem, I've always had better results, cleaner and simpler code by keeping the UI and Backend completely separate.

I think I understand what you mean... but basically your data with get put in a store and you access it in your component. Its similar to ember-data its just doing less behind the scenes. For example you do an action, fetch, then reduce, then store your data in immutable objects. In ember this is all done for you so its more code.

Can you clarify the question and your use case?

Hey, check section "Main Project" in out README. Should be clear enough

How come you compare Django - a full-blown web development framework with Go - just a language? You should mention some Go frameworks which go well with React, I'm really curious to hear those.

it's actually pretty annoying in my experience to use the create-react-app with django because of CORS related issues. chrome doesnt like sending ajax requests from localhost:3000 -> localhost:8000

I use https://github.com/owais/django-webpack-loader together with https://www.npmjs.com/package/webpack-bundle-tracker to handle (hashed) file loading from webpack

i do this, i just dump assets (uncompressed) into a build directory and use django pipeline for deployment. works fine for me.

if you want to see it in action look here:

https://github.com/josephmisiti/generic-django-project

Yeah, it's no different to any other setup. Just have webpack dump the assets into a static folder somewhere ready for collectstatic.

ah ups. Thanks!