Angular, React and the Controlled Chaos
As a grad fresh out of university I had never touched any sort of frontend frameworks for JavaScript. The most exposure I had at university was utilising html, css and base JavaScript to create webpages. In our third year we had minor exposure to templating with Express along with node.js but that was minor in terms of understanding the broader scope of frontend frameworks.
At the start of the year we are sitting in the office spinning the wheel of fortune one by one. Everyone hoping they get a nice tech stack to use for their personal projects, and up I go and spin the wheel and seal my fate… C# and React. “Not bad” I think to myself, I have experience with C# but had never touched React in the slightest. I was curious and started researching what exactly React is and how it works.
I was pleasantly surprised to find that React offered a much more modular approach to web development, frontend web development in particular. The more I researched it, the more I wondered why we had never covered it before in university or even had it mentioned as an elective of some sort. Then came the Grad Project, and we found out that we are using Angular for it.
Well that's great because I now get to experience two different frontend frameworks and decide which I would like to work with more. Little did I expect Angular to be so vastly different to React at a surface level. TypeScript makes for a far different experience to what I had experienced so far with React.js (yes, I didn’t realise there was a TS version to React until it was too late).
So my experience, at that point, came down to React being reminiscent of standard JavaScript but with far more object based thinking and then Angular being substantially more structured and concrete than React or JavaScript. However, it didn’t take me long to realise that Angular and React are the same in logic and nature but different in execution.
They both function with the concept of components, created in a way that makes them reusable and dynamic. Both have hierarchy within their components, as is usually the case with DOM elements in JavaScript, but both allow for the passing of data between these components in a similar manner. You can pass data straight into a child component and, using callbacks, get children to pass data to parents.
These simple basic related concepts between the two frameworks made it easy to switch between the two and maintain a basic understanding of logic and flow in the applications. The main differences came into play when you looked at what exactly you needed to achieve and how large the scope was.
Angular was a far more structured and packaged framework than React. It made it pleasant to work with knowing that TypeScript would ensure a far more cohesive and stable application than JavaScript could. This structured setup also led to much larger frontends that cater better towards long term projects that need everything in one place without much need for installing additional packages.
React was far more flexible and lightweight. There was still structure, but the structure was maintained more by code consistency from the user than from the framework. It did allow for substantially faster development and progress; however, things get confusing when your files start containing a mix of both JavaScript and HTML thrown in together to just “work”.
These two frameworks made frontend development far more fun than it had ever been before, but, at the end of the day there is one thing that remains constant. JavaScript is still chaotic in nature, and, in a programmer's logical world all you can do is try to control that chaos with a little bit of structure.
