Notes on how React and Angular work

I got this question from a Praxis participant last night: “Hey Chuck quick general question: do frameworks like angular and react compile to JS? How exactly do they work?”

Here is my response:

This took me a little research because I didn’t quite know. Here is what I found: First, React is a library and Angular is a framework. Seems like a small distinction, but it has big consequences. See this link: https://stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and-a-library

If you write React in plain javascript, everything should run as-is. If you write your React code in JSX, babel first finds the JSX, parses and generates the corresponding javascript code, then evaluates it. The big-picture of React is that it is kind of like the view layer in MVC, with a few more bells and whistles added. Everything renders to a virtual DOM first, which is significantly faster than the real DOM. Changes are then compared with the real DOM and then the differences are sent to the real DOM.

It looks like you can write Angular code in javascript or Typescript (which then compiles to javascript). Here is a great high-level architecture overview of Angular that explains how it works: https://angular.io/guide/architecture