29 februari 2016
29 februari 2016
In order to create smooth interfaces, functionality has been gradually moved from the server to the browser. This started with client-side form validation, but nowadays, entire front-ends are built in React, which talk to headless Drupal back-ends, for example.
Note that the core of the application has not been made faster, it just feels faster. This is what user perceived performance is all about. Instead of waiting for the browser to load a page with search results, the user will get a spinner or some other kind of animation. The server can take the same amount of time returning the actual results, but because of the instant feedback it feels shorter.
A good example of the use of SPAs is the Airbnb site. If you look at the network monitor, you’ll see that everything you see is on the same page, right up to the moment you click a room. No doubt this increases the conversion.
One downside of SPAs is SEO. SPAs are not nearly as easy to crawl as traditional web applications, but this problem will no doubt be solved as more and more SPAs are built.
The choice between an SPA or a traditional web application is far from black and white. There is an entire spectrum in between. I haven’t been able to find good names for the different levels, so I’ll try to give them names myself.
The next level are AJAX applications. One way to do this is to download data or snippets of HTML rendered by the server. The user interface stays smooth because there’s no page refresh, but the application still runs on the server.
Then there is a group of applications in a weird sort of in-between level. Most of the pages belong to one of the first two levels, except for one or more pages that have a bit more interaction. For those pages, you can use an MV* framework. You don’t have to go all the way. For example: no routing, just one view, just one controller… but it prevents your front-end from turning into spaghetti. I call this the MV* level, for lack of a better name.
Finally, there are single page applications (SPA) that run almost completely on the client. For these applications, you would also use an MV* framework.
For each of these levels, you’ll need some server-side code that exposes the web API that the front-end needs. The difference between the levels is in the balance between the server-side and the client-side.