DEV Community

loading...

Discussion on: Why the React community is missing the point about Web Components

bennypowers profile image
Benny Powers 🇮🇱🇨🇦
var h = require('react-hyperscript');
var React = require('react');

var AnotherComponent = require('./another-component');

module.exports = React.createClass({
  render: function render() {
    return (
      h('div.example', [
        h('h1#heading', 'This is hyperscript'),
        h('h2', 'creating React.js markup'),
        h(AnotherComponent, {foo: 'bar'}, [
          h('li', [
            h('a', {href: 'http://whatever.com'}, 'One list item')
          ]),
          h('li', 'Another list item')
        ])
      ])
    );
  }
});
Enter fullscreen mode Exit fullscreen mode
import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';
import './another-component.js';
const tpl = html`
  <div class="example">
    <h1 id="heading">This is lit-html</h1>
    <h2>Creating HTML Markup</h2>
    <another-component foo="bar">
      <li>
        <a href="http://whatever.com">One List Item</a>
      </li>
      <li>Another List Item</li>
    </another-component>
  </div>
` 
render(tpl, container)
Enter fullscreen mode Exit fullscreen mode

🤷‍♂️

Thread Thread
dmitriid profile image
Dmitrii 'Mamut' Dimandt

The difference is obvious, isn't it? One is just JS functions. You can refactor them. Lint them. Runs code analysis tools on them. Split them out. Move to a different module.

The other one is a string blob.

Thread Thread
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

You have fun with that... I'll be writing HTML

Thread Thread
dmitriid profile image
Dmitrii 'Mamut' Dimandt

It's not HTML though. It's a string blob inside Javascript code. You can wish it away, but the reality remains.

🤷‍♂️

Thread Thread
thesdev profile image
Samir Saeedi

If your problem is tooling then maybe this extension can help. Does it have to say .html on the file extension to be more than a "string blob"? HTML is text after all, it's literally in the name.

Thread Thread
dmitriid profile image
Dmitrii 'Mamut' Dimandt

That extension doesn't negate the fact that it remains a string blob inside Javascript. Having a string inside a programming language and calling it something else doesn't make it something else.

Thread Thread
thesdev profile image
Samir Saeedi

I wonder how do you feel about writing inside <script> and <style> tags in HTML. In which ways <script> alert("hi") </script> differs from template.innerHTML = "<div> hi </div>"? (Provided that there's tooling support and that the browser knows it has to parse the latter string as HTML not JavaScript.)

Thread Thread
dmitriid profile image
Dmitrii 'Mamut' Dimandt

I wonder if people actually know what tagged literals are in JS.

Hint:

html`string`
Enter fullscreen mode Exit fullscreen mode

is nothing more than a single function call with, you guessed it, a string

html('string', ...)
Enter fullscreen mode Exit fullscreen mode

No amount of word twisting and wishful thinking can change that. I really advise you to look at what lit-html does such as diligently parsing this string looking for tags and markers: github.com/Polymer/lit-html/blob/m...

And no. the browser does not know how to "parse this string as HTML". Because it's just a string, it's handled as a string, and is used a string, and nothing else.

Thread Thread
progrium profile image
Jeff Lindsay

Unsubscribe

Thread Thread
oenonono profile image
Junk • Edited

You all realize that JavaScript is just a string in a file without an engine to parse, compile, and execute it, right?

Thread Thread
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Well, it's a drop more complicated than that. Tagged template literals know about their static and dynamic parts. And lit-html uses template tags and weakmaps for fast parsing and efficient storage.

thepassle profile image
Pascal Schilp

Im fine with it being string blobs, string parsing is much faster than html parsing.

Forem Open with the Forem app