Stencil – A reusable web component generator • Hacker News Board

Stencil – A reusable web component generator

#1

Post by reimertz » Wed, Aug 23, 2017, 10:26 AM UTC

Stencil – A reusable web component generator
stenciljs.com

Re: Stencil – A reusable web component generator

#2

Post by KevanM » Wed, Aug 23, 2017, 11:03 AM UTC

Gosh, the content is illegible on Chrome and Windows 8.

14px and a lightweight font does not make for happy reading.

Re: Stencil – A reusable web component generator

#3

Post by sooheon » Wed, Aug 23, 2017, 11:06 AM UTC

KevanM wrote: post #2

Gosh, the content is illegible on Chrome and Windows 8. 14px and a lightweight font does not make for happy reading.

It's more the OS than the font choice, different OSes render text better or worse. The site looks great on a 15 inch macbook pro.

Re: Stencil – A reusable web component generator

#4

Post by ubersoldat2k7 » Wed, Aug 23, 2017, 11:15 AM UTC

I'm not sure I'm understanding the point behind this. If the main point is to allow people to reuse components (i.e. a calendar widget) across frameworks, then good, but it's going to be quite messy when things start to get complicated and we start hitting integration problems, because some guy on the Internet writing a widget is not going to test & maintain it on all frameworks.

It also bothers me the whole Typescript deal. I might be wrong, but I don't want to have Typescript installed & integrated into my build process so I can use a widget. The only way I can see this working out is that I suck it and follow the Typescript paradigm or widget creators can distribute their widgets on some sort of "built" pure JS file, something like JAR files... and we know how well that goes.

Re: Stencil – A reusable web component generator

#5

Post by jazoom » Wed, Aug 23, 2017, 11:16 AM UTC

"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?

Re: Stencil – A reusable web component generator

#6

Post by eat_veggies » Wed, Aug 23, 2017, 11:17 AM UTC

sooheon wrote: post #3

KevanM wrote: post #2

Gosh, the content is illegible on Chrome and Windows 8. 14px and a lightweight font does not make for happy reading.

It's more the OS than the font choice, different OSes render text better or worse. The site looks great on a 15 inch macbook pro.

Designers only looking at their sites on their MacBook Pros is exactly what produces these pretty but unreadable websites.

Re: Stencil – A reusable web component generator

#7

Post by mrmondo » Wed, Aug 23, 2017, 11:17 AM UTC

sooheon wrote: post #3

KevanM wrote: post #2

Gosh, the content is illegible on Chrome and Windows 8. 14px and a lightweight font does not make for happy reading.

It's more the OS than the font choice, different OSes render text better or worse. The site looks great on a 15 inch macbook pro.

And on an iPhone 7 running iOS 11.

Re: Stencil – A reusable web component generator

#8

Post by KevanM » Wed, Aug 23, 2017, 11:18 AM UTC

sooheon wrote: post #3

KevanM wrote: post #2

Gosh, the content is illegible on Chrome and Windows 8. 14px and a lightweight font does not make for happy reading.

It's more the OS than the font choice, different OSes render text better or worse. The site looks great on a 15 inch macbook pro.

Well, I'd disagree and say they are the ones who picked the fonts:

-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

And have picked one on Windows that does not render well at the size and weight they want to display the text.

They could have had a more universal font selection like Arial.

Re: Stencil – A reusable web component generator

#9

Post by andreashansen » Wed, Aug 23, 2017, 11:20 AM UTC

jazoom wrote: post #5

" 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 Angula…

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

Re: Stencil – A reusable web component generator

#10

Post by manucorporat » Wed, Aug 23, 2017, 11:22 AM UTC

ubersoldat2k7 wrote: post #4

I'm not sure I'm understanding the point behind this. If the main point is to allow people to reuse components (i.e. a calendar widget) across frameworks, then good, but it's going to be quite messy when things start to get complicated and we start hitting integration problems, because some guy on the Internet writing a widget is not going to test & maintain it on all frameworks. It also bothers me the whole Typescri…

Here an engineer at Ionic. You don't need to integrate typescript to use a "widget" generated with Stencil. Stencil is a compiler that generates vanilla web components in javascript. You can just import the generated .js and use the component just like a "button" or native "input".