DEV Community

Discussion on: What Web technologies are required to draw a Pie Chart in 2021? (spoiler alert: a standard Web Component will do) 🥧

Collapse
 
westbrook profile image
Westbrook Johnson

Really like the use of HTML elements as "data model" here, this is something I spend a lot of time trying to get working well. For features like this, it is such a no brainer and I'm happy to see it in use over the data="[]" example you shared. I've been playing with the Reactive Controller paradigm proposed by the Lit team in their pending announcement to position this as something a little more reusable: webcomponents.dev/edit/F4jBbQpeMSu... would love to hear your thoughts!

Side note: I was struck by how much time I spent confirming for myself that <slice> is not a native HTML element. I'd say, beyond the possibility of leveraging observedAttributes, that it's possible a custom element would reduce confusion around what's natively available vs added via your code. Was certainly cool to see the simplicity, but wonder how others with less custom element experience actually consume that data.

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

It depends on what the team needs. If you do not have the JS team, than HTML opens up a lot of possibilities.
You can pick anyone off the street, hand them the Web Component documentation and they will be productive within a day.

THAT is what made the Web huge and great in the 90s. There were plenty of other technologies available. Before I became a Web-Developer, I was a Gopher-Developer for years.

"other technologies" is why I am reluctant to use Lit. There are still too many alternatives.
I had to ditch 500K (euros.. not dollars) of MooTools development in 2009, because my CTO predecessor had allowed two 24 year old contractors to select the technology for the CEO his pet-project.
When I asked "What about jQuery?" they answered: "What is that?"
(And when we CTO and CFO in Good Cop Bad Style put the CEO on the spot...
the CTO was fired; and the CFO quit her job the next day)

It learned me the game is not played on the board...

Lit is Google and the WHATWG is Google, Mozilla, Microsoft and Apple.
And both Ryosuke Niwa (Apple) and Anne van Kesteren (Mozilla) have shown in their responses, it is no longer the V0 party where Google throws something against the wall, hoping it sticks.
Ofcourse progress is slow with 4 parties having to agree; but its slow and sure
I have never seen co-operation like this between Internet companies in the past 31 years.

Now, I am in the position to spend that extra 10%? 15%? 20%? time to do everything with Vanilla.
I can ask clients: "Do you want software that will run for sure for the next 25 JavaScript years?"
And have the financial freedom to decline clients that don't.
Because I learned one thing in all those years:
Software needs to be maintained, and developers spent 50% trying to understand previous developers code.

That's why I plea for HTML skills, the power of the Web to everyone who can type and save a document.

But is it really 10% to 20% extra?
Guess how much time it took me to restore the Drupal blog I used 17 years ago;
because stupid me preferred a better technical solution over WordPress

I have my "Game Board" pet-project/Web Component test-project hexedland.com
that is going to run for the next 25 years without problems.
Because I am building with ZERO dependencies... well only one.. The Web

And since the W3C handed the keys to the WHATWG in 2019; that future is in the hands of 4 companies... and to date, they haven't invited Facebook.
So I am no longer wasting energy on React; not even answering React questions on StackOverflow. (I try to answer every Web Component question, because it makes me learn)

And that Drupal site with all my old blogs? I stopped trying after 2 hours.

My next post will detail on the pros and cons of UNknown Elements.
Or the risk of using (new) WHATWG defined Elements ( <progress> is an existing HTML tag)

The Base Class is the <pie-chart> from the first post:

<progress-circle>
  <progress value="75%" stroke="green">SEO</progress>
  <progress value="60%" stroke="orange">Social</progress>
  <progress value="65%" stroke="teal" edge="black">Maps</progress>
  <progress value="50%" stroke="orangered">Traffic</progress>
</progress-circle>
Enter fullscreen mode Exit fullscreen mode