Thinking in views

The missing thing in web apps is good view management. Let's rewind quickly to build some shared context, then we'll get back to web apps and how we can make them better.

A view based UI makes it easy to transition between smaller parts of a UI. As an example, when you go between two screens on your phone, you're actually switching between two views.

Getting this to work is insanely hard. Views need to be loaded and unloaded from memory. Transitions need to be smooth. Gesture support needs to be added. Scroll position and state needs to be maintained. Accessibility is a must.

If every single app had to implement this from scratch, using your phone would be a nightmare. Every app would work differently. Switching between views would be laggy. Developers would waste a ton of time.

This is why the OS provides a view manager.

Efficiently keeps old views in memory. This is called the "view stack".

Renders the current view

Loads new views into memory and renders them

DM
bio
comments
photo
feed

So far, we've looked at push transitions. But the View Manager can support any type of transition between views.

feed
photo

Since the view manager lives on a OS level, you can update all view interactions in the OS with a single update. Need better motion design in the view manager? Just roll it out.

System level view mangers are pretty neat.

On phones, view managers are often full screen and simply go from view A to B. But on bigger screens, many view managers can be visible at the same time. Look at this popover. It contains it's own view manager that elegantly switches between views inside the popover.

The popover contains a local view manager
The rest of the app doesn't have to care

For mobile designers and developers, this is second nature. Both Android and iOS provide simple components that makes it easy to implement a view based layout. For designers and developers with a web background, this is less intuitive. We got some cathing up to do.

"Web pages"

The problem is in the word "page". The entire web is built around the concept of pages. You load a page at a time. When you need more information, you click a link and a new page loads.

For users, a full page refresh is desorientating. After the new page loads, your brain has to anwer a lot of questions: Where am I? Where is the information I need? What changed since the last page load?

To solve this, we made web sites more dynamic using JavaScript. This opened the door to today's advanced web apps. However, there is often no order to how we implement this. We put some things in popovers or modals and other things on separate pages. Sometimes you click outside to dismiss a modal, sometimes you click a "close button".