How they should rebuild Twitter Lite

‘How we built Twitter Lite’ is an interesting article written by Nicolas Gallagher. It covers the design decisions behind the poster child of the progressive web app. But the key topic it doesn’t discuss is navigation. Navigation on Twitter Lite isn’t as smooth as it is on native because the scenes don’t animate as they come and go. Twitter should rebuild Twitter Lite using the new Navigation router for React. The Navigation router brings native-like navigation to the web. Run the CodePen below to see it in action.

Stack navigation

The Navigation router achieves this native-like animation by managing a stack of scenes. If you click two successive tweets in the CodePen example, then the Navigation router builds a stack containing three scenes. The home scene sits at the bottom of the stack. Next comes the first tweet you clicked and, at the top of the stack, is the second tweet.

The router provides a NavigationMotion component that lets you animate the scenes as they move through the stack. The NavigationMotion component accepts three style props. One style prop for each position a scene can be in. A scene that’s not on the stack has the unmountedStyle, the current scene has the mountedStyle and each visited scene gets the crumbStyle. As a scene changes its position, the NavigationMotion component interpolates new style values. You provide a child callback that assigns the style to the scene so that it animates into its new position.

<NavigationMotion
  unmountedStyle={{translate: 100, opacity: 1}}
  mountedStyle={{translate: 0, opacity: 1}}
  crumbStyle={{translate: 5, opacity: 0}}>
  {({translate, opacity}, scene, key) => (
    <div
      key={key}
      style={{
        transform: `translate(${translate}%, 0)`,
        opacity
      }}>
      {scene}
    </div>
  )}
</NavigationMotion>

Stack navigation has advantages besides native-like animation. You can navigate back through the stack of visited scenes. Because the scenes come from the stack, they appear exactly as you left them. In the CodePen example, navigating back through the stack preserves your scroll position. Twitter wrote a dedicated list component to preserve scroll position across scenes. If they rebuild Twitter Lite with the Navigation router they can delete all that code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s