Beginner’s Guide to Web Development
7 minute read
The term “single-page application” (or SPA) is usually used to describe applications that were built for the web. These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.
The most notable difference between a regular website and an SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX — a way to communicate with back-end servers without doing a full page refresh — to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.
Single-page App Cons
While building SPAs is trendy and considered a modern development practice, it’s important to be aware of its cons, including:
- The browser does most of the heavy lifting, which means performance can be a problem — especially on less capable mobile devices.
- Careful thought must be put into search engine optimization (SEO) so your content can be discoverable by search engines and social media websites that provide a link preview.
Mitigating Cons With Server-side Rendering
Server-side rendering can alleviate some of the burden browsers have to go through when rendering pages, and will also help with the problem of SEO and content discoverability.
The list could go on and on — but let’s dive a bit more into the first two here: Angular and React.
With inadequacies like this in mind, the Angular team at Google rewrote the framework from scratch. The new and improved version of Angular (known as Angular 2) is very promising. Angular’s overall proposition has not changed: It provides a holistic solution to writing apps. Built right into the framework is a way to do application routing, communicating with web servers, and more. You won’t need any extra packages to get a basic but fully functioning web app up and running.
Angular also provides a whole ecosystem (Angular CLI) for actually building apps that includes a tool to scaffold applications, as well as a solution for building mobile web apps with performance in mind as a first-class citizen (Angular Mobile).
React is not considered a framework, per se — rather, it touts itself as a view library. But don’t let that fool you, as React was built to solve user interface problems at a very large scale.
In the time since React was released, other popular frameworks, such as Angular and Ember, have also moved toward a more component-based architecture, as well as applied similar ideas React brought to light, such as the virtual DOM, which is how React applies changes to the view.
React’s overall approach to building apps is different than Angular and Ember because it is just a view library — it does not provide a way to do client-side routing or even a way to load data from a back-end server bundled with the library. This means that to get a simple yet fully functioning app (that needs these missing features) to work, you will need to look into other libraries that are not maintained by the same Facebook core team that maintains React.
Don’t be intimidated by the idea of relying on outside libraries, though. There are many popular community-backed libraries that have even been adopted by teams inside of Facebook, including react-router, which provides a way to client-side routing; axios, which has a system to make AJAX calls that easily integrate into React apps; and redux, which is a state container that helps developers handle the flow of data in React apps.
Finding the Right Framework for You
You’ll also have to decide how much control you want over your application’s architecture. If you want to make most of the architecture decisions yourself, then you might be more interested in bringing different libraries together, which is more compatible with how React works. But if you prefer to have most decisions made for you, and you’re okay with giving up a bit of flexibility, then maybe Angular or Ember will be the best choice, as they both provide more opinionated ways of writing your app right out of the box.