React to Angular — a beginner’s perspective
I am now a Developer. In many ways, I always was. But now it’s my job title, and someone is even paying me to do it. I am living the dream, people. As those who have followed my blog will know, I have dabbled with React, and I liked it. I liked it a lot. However, my new place of employment is an Angular house. Which is a bit like realising that after a dalliance with a Montague, you’re actually a Capulet.
It would seem the geek universe is very passionate about the whole React vs Angular thing. As a coding beginner, stumbling like a newborn foal into my first dev role, I am not going to claim any authoritative view as to which is “better”. But what I can do is share my first impressions of Angular, and the key differences between Angular and React that are worth wrapping your head around as a beginner to both.
A rose by any other name..
So what are the differences?
Angular is often referred to as a framework, whereas React is a library. Which basically means that Angular is a lot more opinionated about how you should structure your codebase, and will manage your whole front-end for you, including the flow of data going in, out and around it.
React is focussed on serving up views, and the logic needed to serve up those views. Unless your website is very simple, you will probably want to add on extras such as Redux to manage the data flowing around your app. Or you could choose from all sorts of other add-ons; React is a piece of the jigsaw that does it’s own thing without caring about the rest of the picture. This allows you to experiment with different options to try and acheive the perfect tech stack for your needs.
An Angular state of mind
As mentioned earlier, Angular is quite opinionated about how you should structure your app. The diagram below is taken from their website..
The traditional React approach to file structure is to combine display data and logic into one file for any given component, but break components down into their smallest possible sub-components to keep this clean and tidy. However, this will lead to an unwieldy number of components for a complex web app, which could be tricky to manage and maintain.
The Angular way requires you to separate your HTML from your component logic, with a hearty dose of dependancy injection coming from services and modules. While this separation of concerns will bring joy to fans of the Single Responsibility Principle, this does mean that a bit more boilerplate is required to link all the separate elements of a component together.
Modules and Services
Module files are there to tell Angular how your app or component fits together. This is where you can specify the other modules that your component requires (imports), the components that you want to make available for re-use elsewhere in your app (exports), the components it needs to display (declarations), the services it makes use of (providers) and the root component that needs to be inserted into the host web page (bootstrap).
Services are there to manage the flow of data, either providing a structure for your app to interact with a database or API, or abstracting any static or mock data from the rest of your logic. This is also where you can rope RxJS into the mix to make a lovely reactive data flow using the Observer pattern. You can read more about this here and here.
Wisely and slow; they stumble that run fast