-1

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.

Samuel Frost
  • 17
  • 6
  • I'm currently thinking about using a locale handler that accepts file directories, prepends the active locale and imports from the defined directory. Then to keep things organized have views locale directories/names match to view directories/names. But PWA development is new to me so I don't want to overlook important things or easy solutions. – Samuel Frost Oct 23 '20 at 06:07
  • As a PWA newbie, a couple of months ago I had to abandon `lit-element` for almost the same reasons in favor of more mature and popular Vue.js with tons of third-party libraries. They're similar in structure, so the migration was a breeze. https://www.npmtrends.com/@polymer/lit-element-vs-vue – andbi Oct 23 '20 at 06:10
  • Yeah, it's understandable to move on, but I think I'll stick with it as I want to be as close to vanillaJS as possible so my skills don't become irrelevant when the framework dies. Also I think there was a name change a while back so the trends aren't as abysmal as you might've thought. https://www.npmtrends.com/lit-element-vs-vue – Samuel Frost Oct 23 '20 at 09:54

1 Answers1

2

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:

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:

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:

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)

Benny Powers
  • 5,398
  • 4
  • 32
  • 55