6 ms·
The tooling is woefully inadequate, and the premiere Web Component tool is stringly typed to all heck which makes it a non-starter for me. I don't want giant bl
by AaronFriel 8y ago
The tooling is woefully inadequate, and the premiere Web Component tool is stringly typed to all heck which makes it a non-starter for me. I don't want giant blobs of runtime parsed text with no validation, syntax highlighting, and obviously no type checking.
But yet, here's Polymer 3:
static get template() {
return html`
<style>
.response { margin-top: 10px; }
</style>
<paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox>
<div hidden$="[[!liked]]" class="response">Web components like you, too.</div>
`;
}
Cool. What an enormous regression over TypeScript with React and Vue. My editor just sees components as enormous blobs of text, and what do you know, so does my build system.
- staticvar 8y agoPolymer is deprecated in favor of LitElement which comes with TypeScript decorators.
- chmln 8y agoWith LitElement you are still encoding markup in strings and only the interpolated expressions are typechecked [1]. Not to mention that LitElement is far more clunkier and tedious. [1] https://lit-element.polymer-project.org/guide/start#use-litelement-typescript-decorators https://lit-element.polymer-project.org/guide/start#use-lite...
- spankalee 8y agoThe lit-plugin VS Code extension provides type-checking and code-completion for lit-html temptlates. The approach can be adopted for a tsc plugin.
- chmln 8y agoLooks like there is a typescript plugin already [1], meaning this is not restricted to VS Code and should theoretically work in any editor with LSP support. That's better than I thought. [1] https://www.npmjs.com/package/ts-lit-plugin https://www.npmjs.com/package/ts-lit-plugin
- dmitriid 8y agoIt’s still opaque string blobs no matter how you try to dress them up. —- I should probably edit this: It’s still string blobs that are totally opaque to the browser, and that are parsed with regular expressions[1] at runtime[2] and dumped into DOM via innerHtml[3]. [1] https://github.com/Polymer/lit-html/blob/61c08a615abadbe58bc3cc06edaab1e8e4aa094d/src/lib/template.ts#L232 https://github.com/Polymer/lit-html/blob/61c08a615abadbe58bc... [2] http://exploringjs.com/es6/ch_template-literals.html http://exploringjs.com/es6/ch_template-literals.html [3] https://github.com/Polymer/lit-html/blob/61c08a615abadbe58bc3cc06edaab1e8e4aa094d/src/lib/template-result.ts#L101 https://github.com/Polymer/lit-html/blob/61c08a615abadbe58bc...
- cletusw 8y agoHonest question: How is React/vue/etc. different in this regard?
- dmitriid 8y agoReact is pure JS, no string parsing is involved at runtime (JSX is just function calls [1]). Vue has its own templating language that gets compiled to function calls that are very similar to React’s [2]. I have my fair share of criticisms against Vue (as any templating system, it’s quite inconsistent[3]). I don’t think any of them just dump string blobs via innerHtml. And I doubt any of them parse strings with regexps at runtime. [1] https://reactjs.org/docs/react-without-jsx.html https://reactjs.org/docs/react-without-jsx.html and https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/ (specifically section on React elements) [2] https://vuejs-tips.github.io/compiler/#v-else https://vuejs-tips.github.io/compiler/#v-else [3] https://news.ycombinator.com/item?id=19199423 https://news.ycombinator.com/item?id=19199423
- omegabravo 8y ago> React is pure JS, no string parsing is involved at runtime (JSX is just function calls [1]). Why does this matter? React still eventually compiles down to DOM operations whether that be innerHTML or XML modifications.
- westbrookjo 8y agoTypes are cool, TypeScript is cool, and types with JSDocs are cool, https://dev.to/dakmor/type-safe-web-components-with-jsdoc-4icf https://dev.to/dakmor/type-safe-web-components-with-jsdoc-4i... and what's more, they're all cool with web components.
- AaronFriel 8y agoI'm confused, I scrolled down and still saw this: return html` <h1>${this.format(this.title)}</h1> <div class="dot" style=${`left: ${this.bar.x}px; top: ${this.bar.y}`} title=${this.bar.title} ></div> `; That is not type checked. I can change any of the HTML tags in there, any of the attributes on the HTML tags, I can make the template ill-formed HTML, and nothing in my editor or build system will check that. const el = /** @type {TitleBar} */ (document.querySelector('title-bar')); Why would I do that instead of this, if I'm using TypeScript? const el: TitleBar = document.querySelector('title-bar'); Moreover, this is an unsafe type coercion, we have no witness that the return value is a TitleBar. document.querySelector returns an HTMLElement, and if you were using strict TypeScript types this assignment would not type check.
- no_way 8y agoThere exists plugin for VSCode which checks for attributes inside template literal https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin https://marketplace.visualstudio.com/items?itemName=runem.li...
- AaronFriel 8y agoThat looks extremely useful though it's definitely in the "early adopter" phase of utility. It looks like this extension and the underlying TypeScript plugin that allows typechecking are being developed by a single person, and I think a team or individual would have to make a judgment call on whether to depend on it.
- ernsheong 8y agoIf you are starting a new project today, use LitElement. Only use Polymer 3 if you're coming from Polymer 2.