Angular or React: Maintenance - 8th Sphere

Stas Demchuk

by Stas Demchuk on 09/16/2015

Maintenance

Angular will provide you with the components you need to create a well-formed app. But as your application grows, you might get into trouble if you don't adhere to a coding styleguide. If you follow general recommendations from Angular team and use styleguides in your day-to-day work, you will get a solution which is easy to maintain and extend.

The only problem you'll have is performance, but again, this is something that might be tweaked and controlled. Remember to structure your application modules in appropriate folders, keep your controllers thin, use factories and services to provide reusable methods and properties, and NEVER manipulate the DOM from the controller. Use directives for any interaction with the DOM. This will make your application easy to unit test.

Speaking of testing, Angular works well with different test frameworks like Jasmine and Mocha. End-to-end testing can be done using Protractor, a framework developed on top of WebdriverJS specifically for Angular.

React is a set of independent loosely-coupled components from the very beginning, unlike Angular, in which you need to spend some time decomposing your app. If you use Flux or any other React pattern, you'll benefit from having a clean and structured code with nicely separated concerns.

Some people might argue about Separation of Concerns in React, and the guys at Facebook usually tell them that JS and HTML cannot live without each other in large apps. That's why they use JSX to keep everything in one component and make extending an app with new features just a matter of adding another component to the hierarchy. Whether this is good or not - it's your call.

React's components are very easy to create since component's logic and UI is coupled in one place. I also like the idea of Flux's Dispatcher, a slightly different pub-sub system which allows you to use events and listeners to control different aspects of your app. Unidirectional data flow also makes it easy to debug the application since you know how things behave in your app and there are little to no caveats (unless you created them yourself).

In terms of testing, it might be difficult to test React with a framework like Jasmine because isolation of one component for unit testing can be quite difficult in a situation where you have components composed into other components.

Facebook uses Jest, which is built on top of Jasmine specifically for React. Its syntax is similar to Jasmine, which means you won't spend much time figuring out how it works. You can still use things like jasmine-react and mocha-react if you don't like Jest, but be ready to face some issues you'll need to overcome.

What was your experience with maintaining angular and react? Let us know in the comments below!

Previous article in this series: Angular or React: Performance - 8th Sphere
Next article in this series: Angular or React: Summary - 8th Sphere