-
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.
-
InfluxDB
Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.
-
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
-
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.
-
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
-
- 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
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
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.
-
Check out https://open-wc.org/
Especially their code examples
