Have you recently learned HTML, CSS, and Javascript basics and want to level up your UI? I found myself in this position recently and the most popular options were React and Angular. Successful corporations seemed to use both of them. Facebook, Netflix, and DropBox use React meanwhile, IBM, PayPal, and Delta use Angular. “What is the difference, how do I choose between them?”, I wondered. So I tried making sites on both of them concurrently and I hope my reflection provides you with a little insight.
Wait, what are we talking about?
React is a Javascript library while Angular is an interface mostly using Typescript for building responsive UI. Typescript is a superset of Javascript that is compiled instead of interpreted (you can find out more about those differences here). Both Angular (maintained by Google) and React (maintained by Facebook) are open source and revolve around the idea of having reusable smaller components.
Components
By components, I am referring to anything that you may have more than one of (think modals, search bars, cards, etc.). This also allows compartmentalization of features to avoid having one daunting block of HTML. For those who aren’t interested in spending hours fine tuning CSS styling, they both offer components ready to use out of the box (I am counting React Bootstrap here) for all your basic needs. So, what is the big deal then… Why choose one over the other?
Reflection
INstallation
Both are pretty hefty and can take a few minutes to get installed. The process can be completed with a simple terminal command (technically, two commands for Angular).
Getting Started: REACT
If the project was made with create-react-app, everything is set up to get started with a single page application. The App component is the root and new components resemble the same structure as the App. It is best to keep those in separate JS files and import them as necessary. Each component basically looks like a function that returns an HTML element (this can be one element with several other encapsulated within like a div). JSX , a “syntax extension” is helpful here and bridges functionality of Javascript with HTML elements.
Getting Started: Angular
There is undeniably a learning curve here. Angular components are more modular. Each component typically has a Typescript file that holds all the behaviors, an HTML file, CSS file, and a testing file. Of course, there is a single command (generate) that will provide all of these as a skeleton ready to set up. The HTML file is more advanced and can be used with text interpolation, and binding. The syntax of how to achieve these isn’t immediately obvious. I found myself doing a lot of Googling at first to figure out the creation of a simple form, for example.
Basic Development: React
There is a lot that React can accomplish, but as a complete beginner, it is easy to get started quickly with only understanding a few concepts. The state of components (achieved through useState) is straight forward to manage (think, if a user enters something from an input it can be displayed in real time somewhere else). The rendering of components can be handled by one call to useEffect. Data can be passed around from different components by assigning different arguments (props) when “calling” your component from its parent. If this sounds, tricky, trust me it is not. One ten-twenty minute YouTube video can explain all this and more.
Basic Development: Angular
There are more moving pieces to Angular. Achieving an API call from a component isn’t as simple as calling upon fetch like one might do in a React script. Connecting to a database and routing took more time to figure out. Various Typescript files were necessary to create a model for the structure of data that was expected, a service to communicate between components, and a resolver. Angular has impressive lifecycle hooks for what to do upon initiation, multiple state checks, and destruction. The form validation is also very customizable and has useful presets to track pristine, dirty, etc. ( touched or untouched). Both Angular and React have development servers to locally build your project with one command. Changes are viewable upon each save.
The Decision
Try them both if you have the interest! I know that is not incredibly helpful, but what better way to find out. I can say that if you are short on time, the rumors are true, go with React. However, if you like to be able to control the minutia of how your components respond to user interaction with a streamlined system, it may be worth your time to learn Angular. At the end of the day, there may be someone accessing your website from their terminal and your fancy interface will not matter either way. 🙂
