Notes on how React and Angular work

August 29, 2017

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?”</p>

Here is my response:</p>

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</p>

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. </p>

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

Find this post useful?

Buy me a coffeeBuy me a coffee