May 20, 2020

Single-Page Applications (SPA) and Vue.js: What It Is and Why It Matters

Single-page applications and JavaScript frameworks, like Vue.js, are game-changers for developers, enabling complex web, mobile and desktop apps from a shared codebase.
Source: Pixabay

In the two and a half decades since its release, JavaScript has become one of the fundamental building blocks of the web. In recent years, however, it has evolved past its original purpose and is now an integral part of websites, web applications, mobile apps and desktop software.

An important step in that evolution is the development of single-page applications and the frameworks, such as Vue.js, that make them possible.

What Is a Single-Page Application?

In the early days of the web, JavaScript was used to retrieve information from a web server and present it to the user’s web browser in the form of web pages. The earliest web applications all followed this basic principle.

As JavaScript and its frameworks became more powerful, however, a whole new way of presenting information became possible. Rather than simply retrieving the information for each and every action, a process that would normally trigger a new page load, JavaScript now has the ability to intercept the browser events and calls to the server. Behind the scenes, the client retrieves whatever information the server provides and JavaScript dynamically changes the Document Object Model (DOM) elements on the page the user is viewing.

As a result, the page never reloads or forwards to a new page. Instead, the screen is dynamically changed and updated as needed, just like a desktop application.

SPA Use Cases

Because of its ability to emulate the paradigm most people are familiar and comfortable with, SPA is ideal for complex web apps. Perfect examples are sites like Gmail, Google Maps, Twitter, Facebook and GitHub.

In each of the above cases, the web app updates, changes and adapts to what the user is doing without leaving the page or forwarding to another. For example, when a user browses Gmail, clicking on a mailbox or an individual message loads the corresponding content without the entire page redrawing and without sending them to a new page.

There are a number of advantages to this approach. Beyond the obvious advantage of simulating a desktop application, SPAs are often more responsive and faster for the user. With a traditional website or web application, there is much more data being sent back and forth between client and server. Because the server is generating HTML pages for each request, each page has the basic HTML tags and information common to all HTML pages.

As a result, a lot of duplicate information is passed to the client. While it may not be noticeable on a fast connection, on slower connections or mobile devices, that additional data can add up. In contrast, an SPA only sends the updated information, reducing the amount of network traffic. This has the added benefit of reducing the load on the server, since it doesn’t have to serve pre-formatted pages.

While it is still important for the programmer to properly code the application for optimal speed, even if there is little visible speed improvement, visual cues can be added to give the appearance of a faster, smoother experience, much like a desktop environment.

With modern JavaScript frameworks, however, potential use cases go far beyond traditional web applications. Modern frameworks make it possible to use web technologies to create full-fledged desktop applications and many of the mobile apps individuals use on a daily basis. This, in turn, can be a boon for companies and developers that specialize in web-based development, as it provides a way for them to deploy web, desktop and mobile versions of their applications based, at least in part, off of the same code base. Projects that would have required bringing on additional developers, or farming out the desktop and mobile development to outside firms, can now be done by the same web developers that are responsible for the web applications.

Vue.js: The New Kid On the Block

While there are several frameworks that open the door to desktop and mobile development, Vue.js (Vue) is one of the newer ones. As such, it has some positives and negatives, when compared with its competitors.

Vue.js was initially created by Evan You from Google. Following his experience working with another JavaScript framework, AngularJS, You wanted to take the things he liked about Angular and create a lightweight version. As a result, Vue embodies that approach, providing a fast, lightweight framework for developers.

Given that one of the advantages of an SPA is increased performance, the size of the JavaScript library is an important factor. In the case of Vue, the entire framework comes in at a mere 20 kilobytes. Vue also emphasizes simplicity, trying to achieve maximum results with minimum code. These features make it an ideal framework for SPAs.

At the same time, because of its relative youth and its strong focus on speed and simplicity, Vue may not always be the best option for larger, more complex projects.

The Takeaway

One thing is certain: In an age of ever-evolving technology and development environments, SPAs are an important addition to a developer’s repertoire and JavaScript frameworks are the building blocks of those SPAs.

New or existing developers would do well to take a look at Vue to see how its simple, performance-based approach can help.

Tags SPA Single-page applications JavaScript Vue.js
Matt Milano
Technical Writer
Matt is a tech journalist and writer with a background in web and software development.

Related Articles