I’m curious about the preference for React / Redux over Angular2, particularly given the pre-refactor was Angular1 and I recall that although very different, there is a lot of help for people moving from A1 to A2 that might well make it an easier refactor.
I know very little about frameworks, and wanting to understand MaidSafe’s approach was what lead me to learn a little about A1 (so I could fiddle with the Launcher code), and at that point I read a bit about A2 (then in beta, now at RC5).
So when I read the refactor was switching to React / Redux I was interested and excited to learn about them and read up a little this week. Naturally I then read a couple of comparison articles. Its nice to have read stuff from people who know this stuff very well and who write about these two without flaming etc.
Anyway, I found one comparison article very helpful - both the article and what seem like very informed comments. (The article was written in January 2016, based on the A2 beta, so many of the unknowns and concerns raised by the author are now less of a concern or known to be resolved - such as tooling, files sizes and performance - at least that’s my take on the comments and some small amount of other reading.)
The author is honest about his preference for React / Redux, but by the end of the comments (many of which he accepts and used to update the article) I’m thinking Angular2 feels like a better choice to me - particularly when the tooling, size, performance issues seem not to be born out, and one is left with a choice between a complete framework that should always “just work” (A2) and libraries (RR) which will require ongoing integration testing with supplementary libraries you’re likely to be including to handle other areas of functionality.
So with my meagre knowledge I’m interested to learn a bit more about any perceived advantages and disadvantages that fed into the MaidSafe decision, and if it comes down to personal preference and leveraging available skills, that would be completely valid too.
So what lead MaidSafe to prefer React / Redux over Angular2?
I haven’t been part of the decision process for this, but during my interview about the launcher, we’ve discussed this aspect and I can share a few important things about this.
For once the old code base already contained both React and Angular1 – not only angular. In particular Angular was used for state changes/transitions while many (especially newer) UI-parts where React Components. Thus React kinda acted like the rendering layer, which is a totally legit use of it. As the article states, Angular is a full-blown (decisions already made) framework, while React itself is only a “rendering” library (opinionated in a different way).
Doing these reusable component, thought that was a key point of Angular and Ember, is much easier and better with React (with way less code) than in most frameworks – because of the patterns of totally enclosed entities with explicit information exchange to the outside world. React has a much more “functional” (-feeling) approach to many of these aspects. And there has been quite some argument for a while that functional programming (or at least stateless programming) should be taken as a key approach for UI development – which is almost entirely about state.
Considering that Angular(1) was therefore mostly doing state transition and management – and isn’t particularly good at it – while react is already responsible for bigger parts of the rendering the question naturally was to either scrap all of it and replace it with Angular2 or replace that transitioning system with Redux/Reflow or alike. Most of the “angular just works” parts aren’t really applicable to us, as they are about toolings and systems for more classical Rest-Style-Server-Infrastructure. This doesn’t play nice with our, rather different system. And the further you come to the borders of the framework you are in, because you are doing things differently than the opinions/ideas of the framework inventors were when they designed it, the harder it gets. With the Launcher we are most certainly out of the scope of what Angular was meant to work with and the ways it is meant to interact and it clearly stands more in the way than it helps.
I’ve been doing a lot of Web-Programming for the last few years and when asked that question I highly recommended going for React/Redux system – it is much more predictable, allows much more introspection and complex use cases (like ours). Sure others give more opinions and let you start quicker, but those aren’t features for our case: a) we already have stuff in place and quick starting doesn’t matter to use, and b) we have skilled engineers that can do make the right decisions and are faster doing it themselves than having to work-a-round a was-thought-of-differently solution. We are better of with a more flexible, even if not-that-easy, system that allows us to achieve what we need to do efficiently and without being in the way.
Does that mean I’d necessarily recommend using Angular2 (not 1!) over React? No. For the case of the launcher: yes. If you built your own App on top of SafeNet, I think Angular2 offers quite a few things that make it easier and better to manage for a lot of cases. It for sure is easier to pick up/get started with. I have not used Angular2 myself, I think they have a range of higher-horse problems (trying to not use “Javascript”, doing things not really the “webby” way [like TypeScript]), which means they are missing a lot of adoption from the classical web-development-sphere, but they have a bunch of interesting ideas and concepts.
Thanks Ben, very helpful for me at this point in my learning. The problem with these things is not having the time to dig into one properly, let alone more than one to figure out the ins and outs oneself!
I do like what you highlighted about the functional nature of React - this came out in my reading before I got to that article. I liked the model but don’t know enough about Angular2 in that respect.
Do you have any “tooling” recommendations for React / Redux. Most of the MaidSafe guys seem to use cat > filename [kidding - that’s just how I used to write Unix device drivers ]
Well, using BabelJS (to transpile JSX and from es2015 to es5), I use webpack and its respective tooling (like uglifiers and stuff – can’t wait to see tree-shaking coming ins webpack2!). Also standard-JS for linting and jest or chai for testing. As per Editor both Sublime Text 3 and Atom have good support for JSX/es2016 syntax highlighting. Is that what you mean?
]