Design pattern best practices to handle views and locale in a PWA using web components

Question

I'm making my first PWA using web components. I'm making use of the lit-element library. I've got a basic layout and stuff in place, but I want to set up a good system for modular loading of views with the capability of handling locale for strings inside each view.

Are there any best practices guidelines or design patterns that can provide a clear way to handle views and locale that ensures a high level of flexibility and appropriate url / route handling?

I don't want to buy into a framework.

Answer 1

First let's clarify some terms:

• PWA (Progressive Web App) is any web app that provides a native-app-like experience by making use of modern web APIs such as Service Worker, Notifications API, and Web App Manifest.
• SPA (Single Page App) is a web app that redirects it's URLs to index.html and then uses JavaScript to update the content of the page without requesting index.html again.

PWAs can be SPAs or they can be traditional (multi-page) web apps. So, a strict answer to your question could involve any web framework in any language, whether back-end or front end. I imagine you're question relates more to SPAs than multipage apps, though, so the rest of this answer relates to SPA

Now "how to write an SPA" is an area that is very flexible and dynamic, and rife with opinions. There's really no "right way" to do this, but there are preferred outcomes like:

• Web Accesibility (i.e. conformance to WCAG)
• Loading Performance (e.g. small bundle size, fast Time to First Paint, and other metrics)
• Runtime performance (e.g. avoiding jank)
• User Experience

There are plenty of resources for the first three points, for example:

• Google's web.dev page
• Mozilla Developer Network's Accessibility Guide
• Jank Free

The last point, user experience, is perhaps subjective. but there are certain things which could be emphasized:

• Maintaining user expectations like how the back button works
• Using URLs to store the state of your app so it can be shared and reproduced

But asides from that, really the sky's the limit. I can't say that any of the rest of this answer is "canonical" or "best" practice, but these tools and approaches have worked for me.

Routers

Routers are a means by which the SPA responds to changes to the URL to update the page. They typically work by intercepting clicks on the page and preventing the normal browser navigation process.

There are a countless SPA routing libraries that can help you achieve these goals, here are three that I've worked with in the past and can recommend:

• PWA-Helpers Router is Small, simple, and unopinionated
• Vaadin Router is powerful and popular
• Simplr Router is new and promising

State Management

For medium-large apps, it's often recommended to use a state management library to handle the state of the page e.g. which buttons are enabled, which data to fetch and display, etc.

There are many choices here, but some popular options are:

• Redux
• MobX
• Apollo (for GraphQL)

That last one in particular is quite powerful. I wrote a library to help use it with web components: Apollo Elements

The Rest

For other things like

• how to write components
• how to build for production
• how to set up a development workflow,

I whole-heartedly recommend Open Web Components (disclosure: I am a core member)