We Use Web Components at GitHub

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • soci-frontend

    Discontinued [Moved to: https://github.com/jjcm/nonio-frontend]

    GitHub also has in my opinion made the correct choice to make their own base element rather than using a standard library one like lit-html. A good base element has two things in my mind - styled component functions and shared util functions specific to your app. It’s amazingly easy to make a simple set of styled component base functions. Here’s the one I made for my project: https://github.com/jjcm/soci-frontend/blob/master/components... (lines 6-32 for the styled component functions). The rest of your component should be shared functions specific to your use case. Once that base class is there they’re so easy to use.

    Two caveats with webcomponents however. The first is Safari will be the bane of your existence. You should dev in safari if you can. If it works there it will work in all other browsers. The second is stay away from form elements, for now. Or if you do, use an encapsulating component that inserts a slotted input into the light dom. The form registration api isn’t fully supported yet except by chrome, and even then it’s a bit rough around the edges.

  • Would love to see why they did not choose lit-element, it was one of the best I tried in a recent experiment of ~5 solutions.

    The big thing holding back webcompinents at this point is a data sharing strategy, and I think we could get away with actually using components to store and manage data:

    https://www.vadosware.io/post/sade-pattern-services-as-dom-e...

    The github repo (which also happens to contain how to write a web component in lit-element, slim.js, tonic, vue, svelte):

    https://gitlab.com/mrman/services-as-dom-elements

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • community-protocols

    Cross-component coordination protocols

    I’m pretty actively following a lot of the web components community so I thought I would jump in here with some hopefully helpful information. Depending on what you mean by SEO it’s worth noting that for a while now Google and I believe Bing and a few others haven’t had any kind of requirement to pre-render content. You can just serve standard web components or any kind of SPA style front end and it will get indexed just fine, no penalties and no real issues unless you’re doing something particularly strange.

    However, one of the more exciting projects in the web components space (lit.dev) now also supports proper SSR as well which is a very new thing in the world of web components. They are trying to build it in such a way that any other library can take advantage of through a common interface.

    In fact there are some kind of early stage talks happening over here https://github.com/webcomponents/community-protocols where a bunch of companies like Google, Adobe, ING and others are trying to develop some open protocols on a whole bunch of topics to improve interoperability between various libraries so that no one has to buy in 100% to any one setup.

  • view_component

    A framework for building reusable, testable & encapsulated view components in Ruby on Rails.

    For my sideproject (profilehunt.net) I have been using a somewhat similar approach. I use Github ViewComponents (https://github.com/github/view_component) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS (https://stimulus.hotwire.dev/) for Javascript interactivity. Stimulus is great, it allows me to write more structured reusable JS controllers without global event listeners and ids. For my project I have heavily used these two to create a Trello like board which behaves like an SPA. State and routing still is on server. I just fetch HTML on clicks and render it using Stimulus. It is usually fast enough as only fetch small components and append them to DOM, but in case where it is not the case I use loading animations.

  • Stimulus

    A modest JavaScript framework for the HTML you already have

    For my sideproject (profilehunt.net) I have been using a somewhat similar approach. I use Github ViewComponents (https://github.com/github/view_component) for componentization of Rails views. It helps with more modular views which are easier to debug (errors usually point directly to the line in view code, unlike Rails views). I use StimulusJS (https://stimulus.hotwire.dev/) for Javascript interactivity. Stimulus is great, it allows me to write more structured reusable JS controllers without global event listeners and ids. For my project I have heavily used these two to create a Trello like board which behaves like an SPA. State and routing still is on server. I just fetch HTML on clicks and render it using Stimulus. It is usually fast enough as only fetch small components and append them to DOM, but in case where it is not the case I use loading animations.

  • web3-sign-msg

    Discontinued web3-sign-msg is a modern web component built with ficusjs to sign messages with your eth private key in Metamask

    - The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components.

    That last one IMO is web components killer feature. I can now wrote a mini component and then I tugg it in with the other 99% of my page that is rendered server side.

    It means, I'm able to serve my users quickly. I have SEO'd everything too. Cool!

    -1: https://github.com/TimDaub/web3-sign-msg

    - 2: https://docs.ficusjs.org/

    -3: https://github.com/developit/htm

  • ficusjs

    FicusJS is a set of lightweight functions for developing applications using web components

    - The web component concept is great. Especially for mixing server-side rendering and JavaScript-powered components.

    That last one IMO is web components killer feature. I can now wrote a mini component and then I tugg it in with the other 99% of my page that is rendered server side.

    It means, I'm able to serve my users quickly. I have SEO'd everything too. Cool!

    -1: https://github.com/TimDaub/web3-sign-msg

    - 2: https://docs.ficusjs.org/

    -3: https://github.com/developit/htm

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • React

    The library for web and native user interfaces.

    https://github.com/facebook/react/issues/18390

    Unfortunately it seems facebook isn't prioritizing fixing issues like this.

    I'd suggest using preact if you want a framework that's more compatible with web components but gives you the React experience.

  • open-wc

    Open Web Components: guides, tools and libraries for developing web components.

    Check out https://open-wc.org/

    Especially their code examples

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts