Architecture

It's valuable to understand how JavaScript applications are architected. In particular, it's valuable to understand how JavaScript application architecture is different from other web frameworks.

Web application architectures

Server-side web application architecture

  • Java Spring
  • ASP.NET
  • Ruby on Rails
  • PHP (Laravel, CodeIgniter)
  • Python (Django)

Server-side web app architecture

Single-page web application architecture

  • React
  • Angular
  • Vue
  • AngularJS
  • Ember
  • Backbone

SPA Architecture

Why a Single-page web application architecture?

So why are single-page web application architectures so popular? I think it can be summed up in the following statement.

JavaScript libraries and frameworks provide an interactive user experience similar to a desktop or native application that is as easy to update as a web application.

In the past, developers have commonly used technologies from Microsoft (Windows Forms, WPF, Silverlight), Oracle (Java Swing), Adobe (Flash, Flex ) and/or mobile solutions such as iOS or Android development to provide rich interactive user experiences. These technologies were never easy to deploy or update for a large number of users. Which is why the business applications are built as web applications today.

These JavaScript libraries and frameworks allow developers to "have their cake and eat it to" by enabling an interactive user experience while remaining a web application.

React Architecture

Lots of my students struggle with how everything comes together in a React application.
Below is a diagram that helps answer that question.

React Architecture

Edit this page