Blueprints for [an awesome] web-app
Tags: webapps, javascript, bestpractices
Published: 2019-07-25 19:02:07

---
title: Blueprints for [an awesome] web-app
published: true
description: What makes web applications fun and easy to use?
tags: web apps, javascript, best practices
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5xpcsxk1ump9je93inqq.jpg
---

What makes web applications fun and easy to use? Following the best practices of a regular website can make Single-Page-Applications shine.

Here are a few **little-big details** we use at [Torii](https://toriihq.com) to make our users a bit more happy 😀.

## Links everywhere

Just like in a regular [website](https://en.wikipedia.org/wiki/Website), anything we can drill into should be a [link](https://en.wikipedia.org/wiki/Hyperlink) to the page where more information is available. This makes the usage of the applications much more fluent, as you can pretty much **get from anywhere to anywhere relevant with a single click**.

This is similar to [Wikipedia](https://www.wikipedia.org/), where every article has many links inside to other relevant articles. This is what keeps readers in Wikipedia for hours.

Examples:

* When the application says “Configure this from the Settings page”, make sure Settings page is a link, instead of sending the user in search of the “Settings” option somewhere in your app.

* When showing a message such as “your email was sent to 20 users”, clicking the 20 users text should lead to a page (or popup) where the list of users is displayed.

## Every page is shareable

No matter where you are in our app, if you copy (⌘+C) the link and send it to a friend who has the same permissions as you — you will both see the same screen. That was very important to us, as people can easily share pages without a complex sharing feature. They can just copy the page URL and send away in their favorite channel: email, Slack, etc….

We also get the other benefits of regular links:

* Refresh the current page and stay in the same place (⌘+R)

* Bookmark the current page for later (⌘+D)

* Open each feature in a new tab (⌘+⇧+T)

* Copy the link address (⌘+C)

## Every page is completely searchable

Searching (⌘+F) on a single page of a website is a very popular feature of any browser. I also use it in web applications — to find content on the page, find menu items, find where the settings page link is, and other things I expect to be on the page.

**Sometimes web applications make optimizations that break the built-in search option.** One such optimization is called windowing (or virtualization) — displaying 1,000,000 table rows on a page can slow down your browser, so apps only show a small “window” of the table and move that window as you scroll the page.

This breaks the built-in find option, as some results may not currently be displayed and therefore will not be found.

Our  solution was to add a search box to every page that works by using… ⌘+F. This keyboard shortcut will now lead to a dedicated search box. Don’t like our search box? Another ⌘+F will bring up the browser’s search option. **Best of both worlds.**

## Everything is copyable

**Any element you have should be selectable and copyable**. Lots of interfaces today will fire a click on a button if you try to select its text, but sometimes the interesting data is right there on that button.

There’s nothing more frustrating when a web application prevents us from doing what we’re trying to achieve.

## Every page is printable

What’s a better way of taking a snapshot of your website other than simply printing the page (⌘+P) into a PDF? We make sure to **include styling specific for printing** that gets rid of all the menus and give the content maximum space.

## Less loaders, instant content

Web applications require data to show their content. When users visit a page for the first time, a loader is usually unavoidable. However, the next visit can immediately display the cached information and run an update in the background. So **switching between pages is instantaneously** and avoids showing loaders all the time.

This is **quite simple to achieve** with state management libraries like [Redux](https://redux.js.org/), where the data is stored when moving from one page to another.

## Conclusion

Build great websites, build great apps.