Whenever I see this question asked I find most articles/blog posts seem to ultimately favour React (at least for now) despite it not really being a fair comparison. Asking to compare the 2 is a bit like comparing a laptop to a monitor. If you’re only interested in the monitor then the laptop is certainly going to seem like overkill.
My Angular History Having worked with Angular for many years, I’ve started taking it for granted just how easy it makes it to build large applications. Now with Angular 2/4 it feels like many of the annoying bits have been fixed and it’s much easier to design and build clean scalable applications. I started playing with Angular in 2012 and could see the benefit immediately however the learning curve was huge and frustrating, but also hindered by the fact I didn’t really get the whole single page application, having spent years building SEO friendly e-commerce applications. Over time more and more portals moved over to SPA architectures and Angular felt like the right decision.
In 2013 (https://github.com/facebook/react/releases?after=v0.3.3) React was released publicly but had some way to go. React unlike Angular is not an entire framework; it’s just the view aspect. To build an application in React you need to tie together other products such as Redux etc.
When I first started looking at React a few years ago I was put off by the jsx. It seemed wrong and the tooling at the time was awful. In fairness I just could not get passed the whole ‘html in code’ idea and continued with Angular and it’s html templates. I think I was wrong to dismiss React but in my defence, the documentation was poor and I liked the ‘Everything Angular’ style, especially after working with Durandal and it’s anything goes approach; I just wanted something a little more opinionated.
Moving forward, I’ve started working with React again and was blown away with just how easy it was to get started and build something. A couple of youtube videos later and I felt like I’d been working with it for years. I do believe that an in depth knowledge of Angular has made the learning curve easier, since many of the concepts feel similar, but just simpler. I’m not sure if a developer starting with React would say the same about Angular (I doubt it).
Now compared with the verbosity around Angular 2 UIs and all the declarations and decorators, React is crazy simple. The one thing I’ve learnt that has really helped me is that React components should be kept as small and simple as possible allowing complex UI’s to be generated through the composition. Angular does encourage small components however the shear amount of boiler plate code required to create a component discourages you from adding another simple component when it could just be added to an existing component.
So which is best? It depends on a few things like what are you building, how will it be used, how big it is and what skills does your team possess. For very large SPA applications I would choose Angular 2+, especially because of the typescript adoption and support for testing. I would also recommend using Redux to manage data (it’s not just for React). For small projects React makes a lot of sense since it’s lightweight and quick to develop in. You’ll probably end up using Redux for data and a couple of other tools. Then there’s the hybrid approach, remember React is just the view part of an application and in my opinion it’s better than Angular for rendering. The thing is I love Angular and especially the dependency injection and I can build applications quickly with Angular due to it’s familiarity but there are certain parts of my applications that would be better in React.
Condelo, a chatbot framework I’m working on was originally written in Node/Angular 1.5 is being ported over to Angular 4 at the moment. One of the issues was the chat interface which became fairly bloated with a big ng-repeat and lots of ng-ifs which would manage how each message was rendered and this resulted in a lot of unused html being managed due to the way angular templates work. To get around this problem I created my own directive and manually compiled the rows to remove all the excess. This worked fine until migrating to Angular 2 where compiling is a big no no. My approach is to look at rewriting the chat panel in React and then call it from the Angular application, which would give me the best of both worlds. It’s early days at the moment and I’ll comment on how it works in a future post…hopefully
In summary, when your making a choice about what to use try to forget about what’s hot and think about things like long term maintenance, developer availability, architectural complexities, testing. I think for most people React’s simplicity and cool virtual dom rendering will make it the first choice however on large complex projects Angular and it’s module/component model makes more sense despite the increased learning curve.