DEV Community

loading...
Cover image for i18n in web components

i18n in web components

btopro profile image Bryan Ollendyke ・2 min read

I18N is short for Internationalization which means the process of designing projects to be more accessible to a global audience. I've worked on large open source projects before and contributed to others (Drupal, Sakai) and know that i18n is a big deal for multiple reasons:

  • It helps on-board those of languages other than your own
  • It allows users of languages other than your own to adopt
  • It is part of Section 508 accessibility standards
  • It helps improve diversity of who can be involved
  • It signals software / platform maturity and encourages more participation as a result of the previous bullets.

The HAXTheWeb project team was faced with a unique problem with regards to i18n which caused us to have it on the back burner awhile (longer than we should have).

  • Time: We were busy putting out other fires / building architectural underpinnings. i18n for a very small project team was always a "We'll get there"
  • How: Web components provided a unique forefront to attempt to solve i18n which is exciting but also daunting as there is little work in this area to reference
  • State: We needed HAX, our editor of the future, to have solid state management (which is does now, shout out to MobX). When State management was solidified, I knew it opened up pathways to solving i18n holistically.
  • unbundler: We fundamentally do not believe in building one-off applications. The web is made of thousands of lego pieces, and our unbundled approach to development keeps everything as small parts. All i18n solutions in the space we were reviewing, assuming a singular application.

But no longer...

Introducing a series of posts that discuss the considerations when applying i18n to web components. This will document in written, code samples, and video form how we went about solving this problem in a way that tries to find the right balance of developer experience and end user performance. This is not THE solution, it's one of several, so first we'll start with a review of solutions and why we didn't go with them.

Enjoy and hope to HAXing on our project soon!

Discussion (0)

Forem Open with the Forem app