Hacker News Reader

Comment by jazoom | Hacker News Reader

"Stencil is a new approach to a popular idea: building fast and feature-rich apps in the browser. Taking advantage of new capabilities in the browser, such as Custom Elements V1, Stencil enables developers to write faster and lighter components without the weight of frameworks.
The tooling also a solution to teams and library authors building components that support many frameworks. Stencil components work in Angular, React, Ember, and Vue as well as they work with jQuery or with no framework at all, because they're just standards-based components.

Compared to using Custom Elements directly, Stencil provides extra APIs that makes writing fast components simpler. APIs like Virtual DOM, JSX, and async rendering make Stencil Components easy to approach, while maintaining compatibility with Web Components"

So which browsers would this work in?

View on HN

Hello all! Just to clear up the confusion here. Components built with stencil are, after compiling, just custom elements. Custom elements (the V1 of the spec) are supported in Chrome and Safari natively. According to https://www.w3counter.com/globalstats.php that means about 77.6% of users globally are running a browser that supports custom elements natively. For these browsers stencil will not load the custom elements polyfill. For IE 11, Edge and Firefox we load a 5KB gzipped custom elements polyfill automatically for you. Its also worth mentioning that Firefox and Edge are both working on custom elements, so eventually these browsers will not need the polyfill either.

To add to the other links: we built this to primarily help make Ionic faster, and we target mobile and web. So, it has to work everywhere we run. Some browsers require polyfills but still have improved performance making it worth it. Others, like iOS safari which is a major target for us, support it natively in 2017. The trend is more and more native support.

Custom elements v1: http://caniuse.com/#feat=custom-elementsv1

basically Chrome (I just saved you a click)

Although, their demo works perfectly fine in Firefox: https://corehacker-10883.firebaseapp.com/

It's probably using a polyfill for the functionality.[1]

[1] - https://www.webcomponents.org/polyfills#custom-elements-poly...

If this is true it's not practically useful yet. There must be more to it.

You can use a polyfill to get it working in browsers without custom elements support.

Safari as well.

...and Safari? Which is actually a pretty popular browser (with good reason).

Safari 10.1 = 2.64%

Safari 10.0 = 0.64%

Safari 8.0 = 0.33%

Safari 9.1 = 0.27%

===================

Total = 3.88%

For July 2017 according to NetMarketshare.

I wouldn't call a 3.88% install base "pretty popular". It's also offers a terrible developer experience

cf: https://www.netmarketshare.com/browser-market-share.aspx?qpr...

"desktop market share" != "market share"

Our testing and shown that it works in IE11 and above. Both Safari and Chrome support custom elements natively, so no polyfill is required. Additionally, Edge has it under construction, and Firefox has custom elements behind a flag. For Edge, IE and Firefox the polyfills are downloaded on demand, rather than every browser always downloading every polyfill.

Basicly everything on par with IE11 and above (with polyfills or without).

Reply on news.ycombinator.com