Client-side

Single Page Application (SPA) and Web API

Ever since AngularJS was released in 2010, SPA and Web API combination gradually became the most popular way to write modern web applications. And with some good reasons. With this pattern, the entire client side part of the application is loaded just once rather than loading each page from the server. The routing is done entirely on the client side. The server provides just the API for data.

There are many advantages to this approach:

• Sine the entire client is loaded once in the browser, the page navigation is immediate and the web application experience becomes more like a desktop application experience.

• Separation between client-side and server-side. There’s no longer necessity for full-stack developers (that know both server-side and client-side).

• Testing both the client and server is easier because they are separate.

• Your Web API server is reusable for any type of application – web, desktop, and mobile.

And some disatvantages:

• Initial project setup is slower. Instead of creating one "new project" in your favorite MVC framework, you now have separate projects for the client-side and server-side. You’ll have to deal with more technologies overall.

• Slower first-page load. In a SPA we are loading the entire client-side for the first page.

• You’ll have to use bundlers like webpack for a decent develop experience. This adds some overhead like having to deal with bundler configuration. However, this is also an advantage because the bundler allows to easily add more tools to the build chain, like babel and a linter.

Choosing a Single Page Application (SPA) Framework

If you chose to use a Web API and SPA (not MVC), then the next decision is to choose a SPA Framework.

Just a few years ago, a new JavaScript framework sprouted about once a week. Luckily, those days are behind us and the field stabilized a bit.

The most notable SPA frameworks of all times (well, since 2010) are:

• React

• AngularJS

• Angular (2+)

• Vue.js

• Ember.js

• Polymer

• Aurelia

• Backbone.js

Let’s do our usual trick with StackOverflow:

Single page applications comparison

So this chart shows a few conclusions at a glance:

1. All past frameworks except for React, AngularJS, Angular, and Vue.js are dead. If you’ve been following web development news in the past few years, that should come as no surprise.

2. AngularJS has the most questions but the least new questions. Even though there’s probably a huge amount of code written with AngularJS, it’s a legacy framework. It’s not recommended to choose it for new projects.

3. React and Angular dominate the market with Vue.js a distant 3rd. React in particular has the most interest.

This means your best choice in 2019 is between React, Angular, and Vue.js. These frameworks have the best community support, the most documented issues, and the best component/library support. With React and Angular having the most support.

Here are a few more points to consider:

• Angular was built as a sort of "enterprise" framework that considered everything and forces you into a particular mode of work. React and Vue.js are more separated into components and allow you to pick and choose development approaches.

• React won the "Most loved web framework" title in StackOverflow survey of 2019, with Vue.js a close second.

Model-View-Controller (MVC)

The server-side MVC pattern got popular in 2005 with the release of Ruby on Rails and Django frameworks.

In MVC, each route request goes to a Controller on the server. The Controller interacts with the Model (the data) and generates a View (the HTML/CSS/JavaScript client-side). This has several advantages. It creates a nice separation of concern between the client, server, and the different components. As a result, more developers can work on the same project without conflicts. It allows to reuse components. Since the Model is separate, you can replace it with a testable data set.

Some popular MVC frameworks are Ruby on Rails, ASP.NET MVC, Django, Laravel, and Spring MVC

You can somewhat combine between MVC and SPAs. One View can be a single page application on its own. This is best done with thin SPA frameworks like Vue.js.

Others

There are a couple of other ways you can go, which aren’t considered great options nowadays. They are old technologies, which were replaced for a reason. Some of those are:

• Classic ASP

• Classic PHP (without MVC)

• WebForms

• Static pages and Web API (this is still valid for static content, but not for a web application)

You might have heard the terms LAMP, MEAN, and LYME stack somewhere. These are technology combinations. LAMP stands for Linux, Apache, MySQL, PHP, and MEAN is MongoDB, Express.js, Angular, and Node.js. These are absolutely not exclusive. For example, you can use MongoDB with any SPA framework and any programming language. And Linux is the OS for pretty much all modern servers, not just for PHP and MySQL.