HTML Web Components

>With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it.

I wouldn't say that React's component model is being ported to the browser, just that a component model is being implemented in the browser, independent of and different than React.

Microsoft ActiveX Dynamic HTML Behavior Components (HTC files, introduced in IE5, after DHTML finally started working well) allowed you to augment HTML in the same way, and that's very old technology (circa 1999 or so) compared to React.

https://news.ycombinator.com/item?id=27405137

>[...] At the time that NSAPI came around, JavaScript wasn't really much of a thing, and DHTML didn't exist, so not many people would have seriously thought of actually writing practical browser extensions in it. JavaScript was first thought of more as a way to wire together plugins, not implement them. You were supposed to use Java for that. To that end, Netscape developed LiveConnect.

>Microsoft eventually came out with "ActiveX Behavior Components" aka "Dynamic HTML (DHTML) Behaviors" aka "HTML Components (HTCs)" that enabled you to implement ActiveX controls with COM interfaces in all their glory and splendor, entirely in Visual Basic Script, JavsScript, or any other language supporting the "IScriptingEngine" plug-in interface, plus some XML. So you could plug in any scripting language engine, then write plug-ins in that language! (Easier said than done, though: it involved tons of OLE/COM plumbing and dynamic data type wrangling. But there were scripting engines for many popular scripting languages, like Python.) [...]

HTML Components:

https://en.wikipedia.org/wiki/HTML_Components

HTC Reference:

https://learn.microsoft.com/en-us/previous-versions/ms531018...

I used them to implement nested piemenu components in a way that let you easily augment them with html in the browser (which was the wall I'd hit with OLE, not being able to easily use an animated gif or html table as a pie menu item, for example, having to draw everything myself with Win32), so you could embed snippets of HTML to define the menu background, center, items, and dynamic feedback.

That worked nicely in conjunction with XSLT to transform XML models into HTML pages with embedded trees of HTML components.

For example, the Punkemon Pie Menus used an XML database of Punkeland regions and Punkemon characters to make a tree of nested pie menus.

JavaScript Pie Menus - Punkemon Pie Menus:

https://youtu.be/R5k4gJK-aWw?t=177

Pie Menu ActiveX Behavior Control (htc file as text):

https://donhopkins.com/home/PieMenu/piemenu.htc.txt

Punkemon Pie Menus XML Database (xml file as text):

https://donhopkins.com/home/PieMenu/punkemon.xml.txt

XSL Style Sheet (xsl file as text):

https://donhopkins.com/home/PieMenu/punkemon.xsl.txt

For example the XSLT transforms the XML Punkemon database into HTML with embedded nested and arbitrary html, like a table inside one of the items to make a gigantic pie menu item at the bottom, whose purpose is more like an info panel than a menu item, just showing you some information about the magnified animated gif of the character in the top item.

ActiveX Pie Menus that "hit the wall" (discussion near end of video):

https://www.youtube.com/watch?v=nnC8x9x3Xag

>Well, I ran into a wall of complexity with this ActiveX control, and I wanted to be able to have as the menu items animated gifs, mpeg movies, fonts with nice attributes, and things like that. The first thought was "well let's just put a web browser in every item!", but that was a little heavy-handed. So instead I put the pie menus into the web browser as dynamic HTML components, which I'll show next.

All this stuff I explained in the video is incredibly obvious now, but it seemed really cool at the time in 2001, and it was a hell of a lot better and more web-centric than binary OLE/ActiveX controls. (Pardon my unabashed XML and Microsoft technology advocacy, but it really was a step up from what came before it, and you couldn't do anything remotely similar in Java!)

But it illustrates that the idea of augmenting and embedding html in components like that goes way back, and that HTML Web Components were obviously influenced by Microsoft ActiveX Behavior Controls more than they were React.

JavaScript Pie Menus: example of augmenting neste piemenu components with html:

https://youtu.be/R5k4gJK-aWw?t=339

Transcript:

Now the really convenient thing for user interface designers is that the way these pie menus are specified in XML markup language.

This test pie menu has eight items here, and North has a sub menu with four items. Now that map's very nicely into an XML tree. It has a piemenu element, and that has a name and ID.

The neat things is that you can put arbitrary HTML inside of the XML, and that is just copied and just dumped right into the middle of the menu to make it look any way you want. And then the menu, this pie menu item, contains, besides this stuff to display in the middle an item, an item.

It contains eight items, and this item's name is north, and that's its name to the program, which could be different, and that's what is displayed to the user here. Now it contains the sub piemenu, which is the North menu, and has even more.

You can see how you can intersperse XML and HTML to specify all this that you need to describe for the pie menu.

One of the really great advantages of using XML for the piemenu is that there are many ways to generate XML and many things that are represented by XML that you might want to make and then use for. In the case of the punkemon pie menus I really didn't want to make all those pie menus directly.

So maybe I'm making a card game and I have this XML file that I use to print all the cards and maybe do the online game and everything. I've defined the markup language for punkemon cards. There's the punkeverse contains punkeland where they live, and that contains a bunch of punkemons.

Now all these give information that is needed to make the menu for that. It's an application specific markup style, but it has information for menus in it. Basically all this gets translated into all this very automatically by an XSL stylesheet.

That's a macro language for XML that takes the nice clean to the point punkemon xml file and then transforms it into a piemenu tree and a web page that pops that pie menu up.

punkemon.xml:

https://donhopkins.com/home/PieMenu/punkemon.xml.txt

    
    

    

      

        
                                                                                                                                                                                             
            The youngest and perkiest denizens of the Rave Caves, Candibis                                                                                                                                
            spend much of their time spinning around in circles with one                                                                                                                                  
            hand high in the air and the other hand tightly clutching a                                                                                                                                   
            large stuffed animal. Naturally shy, these cuddly creatures                                                                                                                                   
            can often be enticed into a Punkeball with large amounts of                                                                                                                                   
            candy, especially if the candy comes in perforated sheets."                                                                                                                                   
          
         [...]

The header of the punkemon.xml file says "hey this is my stylesheet, if you want to display me, run me through this style sheet!" And what that style sheet does is expand to a web page with a title that says what it is.

punkemon.xsl:

https://donhopkins.com/home/PieMenu/punkemon.xsl.txt

    
    
      

        

          
            Punkemon Pie Menus
          

          

        

        

          
            Punkemon Pie Menus!
            
          

          

            

              
                Punkemon

                Pie Menus
              

               [...]

And then, the nice part is, this is how a web designer puts the pie menu on the page. You make a div, which is like just a section. And I'm giving it a width and height, and I give it a behavior.

The behavior attaches this JavaScript code to it and allows it to receive input events and translate them to a higher level semantics and then send these output events like the pie menu changed, and it's going to call my JavaScript function that's on this web page to handle it.

Now this div is the thing that's presented on the page that you click on, so it's got a little picture of the island there. Inside the div besides its presentation is an XML data island, which is just embedded XML that instead of being displayed on the page is just data that can be referred to.

The pie menu looks in there, finds the XML, pulls out the pie menu definition in it, and uses it. You can pack these things nicely together. You can also point to another file that contains the pie menus externally. But in this case we're going to have them inline.

The Punkemon piemenu contains the words "Punkemon Pie Menus". And then it uses the XSL macro language to loop over all of the punkelands, making items for each one of them. And that item is made by extracting fields from that punkeland, and just sticking them into HTML as either properties or content.

You can get the value of the name of this guy and stick it into that guy, and put a bold marker around it, and make a div. This is just a bunch of nested loops that loops over the database and renders it out as dynamic HTML embedded in a piemenu tree embedded in a web page.

And it works! That's what you're seeing over here.

There's a lot of other really neat applications of automatically generating the piemenus or any other kind of user interface from an XML specification, that could also be used for a lot of other things. And you're just describing your data in one place, and then algorithmically rendering it out to all sorts of other things.

The Cami page already mentions htmx.

ctrl+f htmx

"For folks who have an existing server-rendered application, you can use Cami to add interactivactivity to your application, along with other MPA-oriented libraries like HTMX, Unpoly, Turbo, or TwinSpark."

If you don't care about UI/UX then I agree. I do and even if I didn't the companies I work for absolutely do and the customers expect a certain level of UI/UX that is absolutely not possible with no script. I also work primarily on web apps which cannot be done without JS.

I've recently just started playing with Web Components without a build environment. Meaning, no npm, no bun, no webpack, etc, and no dependencies; in typescript. Intellij can autocompile down to js and the browser view injects a small onchange handler for live updates when developing. So far no problems.

The only thing holding web components back seems to be HTML Modules; being able to link to a .html file instead of a .js file to import a web component. Because of this if you want to use templates or anything more complicated you need to do the ugly inject of .innerHtml = `...`, which I thought would be a problem but the IDE parses the template string very nicely. It would be great to make a component in HTML and any javascript you would put in a tag. It seems like there a lot of bureaucracy involved in getting HTML Modules out the door since its been eight years.

https://github.com/WICG/webcomponents/blob/gh-pages/proposal...

You cannot, last I checked. JavaScript is required for Web Components and lack of SSR support is the only reason I moved away from them.