🛠 Opinions and options: Angular, React and others

Frameworks have become the rule of the day, particularly for organizations, from start-ups and enterprises, and individuals, freelancers and learners. Such tools promote opinionated patterns for the development of products and other tools for the benefit of an audience, commercial (trade), residential (real estate), entertainment (games) or scientific (data and geo science), and even when the categories of audience are blended into new innovative types of goals or mash-ups. Generally speaking, a framework in an opinionated approach to handling complexity that is an outcome of human imagination and determination, particularly when complexity involves problems of dual, conflicting intentions (diamond problem) or of choosing the best mental model by which to organize internal workings of a product or tool.

Some developers are opposed to frameworks, since issues of coupling of abstractions become inhibiting factors to the exploration of mental models which do not readily fit within the framework’s intended scope or purpose. Tools like React, Svelte, jQuery are considered libraries while tools like Angular and Vue.js are considered frameworks. The major philosophical distinction is that frameworks come with codematter, intended behaviors, built-in. You call the library for code, the framework calls you to code. Frameworks try to cover boilerplate, which their authors would argue free you to code, while library authors consider such opinions restricting, unfreeing under certain coding experiences or reasoning opportunities when solving problems. Given the underlying language between any two frameworks, they might utilize the same structures: React and Angular provide for Class-based Components, both provide for routing, but React has no opinions about “services”, dependency injection or pipes, as Angular does. Their differences on data-binding are often critical to the learning curve: React provides one-way data-binding, Angular two-way data-binding (is three-way data-binding and more still a thing?). Of course, as we know, Angular comes with various generators baked into it command-line interface, while React has create-react-app; both work rather seamlessly with Ionic Cordova/Capacitor.

At the same time, React provides for a slimmer “virtual” DOM that adds methods beyond the “real” DOM and provides an XML-style variant of HTML such that “HTML-in-JS” is possible (return (<><Button onClick="{function}">Save</Button></>); in “render()” for a “.jsx” file around which more JavaScript or TypeScript code exists) whereas Angular provides for the usual “JS-in-HTML” approach (<button (click)="function()">Save</button> in an HTML file which is named in a JS file as a “template” by URL). It might seem a little odd: React provides for things where Angular doesn’t, whereas Angular provides for things where React doesn’t. It comes down to what areas in which these affordances are being given: Angular tends more so to be concerned with both application architecture opinions (services) as well as utilities (pipes); React, only really concerned with utilities (dangerouslySetInnerHTML). React also talks about “props” and “state” which are boilerplate for Angular’s Class-based Components insofar as @Input decorators and class properties are concerned, and there are restrictions on how to engage these fine details of your code when implemented as such.

At first blush one might not see much of a difference: both React and Angular have an application life cycle and rules for engagement within and around these life cycles.

React says:

And Angular says:

Now of course neither framework demands that developers use the full life cycle in every case. And “FancyStoreHoldingComponent” isn’t an expectation of “vanilla React” (that comes with incorporating whatever state management tool you so desire). What is important to note is that React doesn’t even require that “Components” be extensions of the React.Component. React provides for Higher-Order Functions, for re-using or pre-configuring other components, and Pure Functions as “stateless” components, which many call “dumb” or “presentation” components. Angular has such a similar concept: components that merely listen for events or consume data from a parent component, which might be smart, that interacts with services or the routing subsystem. For both systems there are things you can and cannot do with internal states, can and cannot do inside of certain life cycle events and there are certain methods you must use inside of “Pure Functions” (like useEffect). So it isn’t exactly so clear that React isn’t opinionated, even though it’s called a library, it’s opinionated in ways and areas that Angular, a framework, is not, which isn’t to say Angular doesn’t impose restrictions on development, as its life cycle subsystem suggests a “call” to the developer as to where to do their dirty work.

nobody leaves the cave before the end of a new dawn https://gist.github.com/dualyticalchemy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store