
Stencil – A reusable web component generator - reimertz
https://stenciljs.com/
======
yesimahuman
Hey all, founder of Ionic (team behind Stencil) here. Didn't expect to see
this up on HN so soon (released this morning), thanks for understanding
there's still rough edges with docs, etc

We built Stencil for a selfish reason: we needed more mobile web performance
for Ionic apps being deployed as PWAs (in addition to App Store apps) and we
were struggling getting that with traditional framework component/bundle
approaches.

We realized web components were a way forward and would let us reach more of
the web dev community that wasn't just using Angular. However, we felt like
there were some big framework features missing from vanilla custom elements
(vdom, react fiber style rendering queue, etc), so we built stencil to make it
easy to generate web components with these features baked in.

Along the way we figured other teams would benefit and pulled it out into its
own project.

Stencil will be used in the next version of Ionic so we are dog fooding this
hard, and web components it generated will be in use by thousands of Ionic
devs soon.

We just announced this at the Polymer Summit in Copenhagen this morning and
the talk is up if you're interested:
[https://youtu.be/UfD-k7aHkQE](https://youtu.be/UfD-k7aHkQE)

Happy to answer any questions!

~~~
timeu
The main selling point of web components is that they are built using platform
features and so they should be compatible with each other.

So in theory I should be able to mix and match web-components that are built
using stencil, skatejs, polymer, or any other future opinionated web component
library.

So is this also possible in practice and specifically can I mix stencil
generated components with polymer ones (say use a paper-button inside a
stencil compoenent) ?

~~~
ergo14
Yeah, as long as you have the polymer as dependency - it should work, you can
mix it with vuejs, preact or angular 2+ already.

------
factsaresacred
This could be amazing, whatever it is. But that's the problem.

I have to squint to see the font, there's two headers with two different
slogans and a paragraph consisting of 12 words that tell me to go to the docs
without providing a link.

The rest of the landing page is white-space.

Come on. Woo the visitor. First impressions are everything, and this fails.

At the very least move 'What is Stencil?' to the landing page.

~~~
yesimahuman
Should be fixed soon thanks.

------
ubersoldat2k7
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.

~~~
manucorporat
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".

~~~
ubersoldat2k7
Great, that makes so much sense. But then, how about other dependencies that
might come into play? For example, underscore, is that "packaged" with this
generated JS file or some other way around?

Thanks for the prompt response BTW.

~~~
manucorporat
No, Stencil.js is like a "real stencil", it is used to produce something, but
it is not in the final product.

There is nothing like "window.stencil" or any stencil related API in the
output of the stencil compiler. It generates vanilla JS web components without
dependencies.

The documentation of stencil linked in this HN post was in fact created with
stencil itself. Just open the Dev Tools!

~~~
ubersoldat2k7
OK, so if I want to use a calendar Stencil (there will be lots of this for
sure), which depends on Moment I would have to include Moment into my
dependencies and manage all the dependency clashing (the stencil used 2.x but
I'm using 1.x)

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

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

~~~
sooheon
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.

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

~~~
Mtinie
Adding a "Yes, but..."

Microsoft's refusal, or inability, to release a version of Edge (or even a
port of an earlier IE) for macOS exacerbates this situation.

I virtualize Windows on my MacBook for IE/Edge testing of my designs and code,
but it requires a workflow and context shifting that I'd perfer I didn't have
to do.

Edit: s/I.E./IE

~~~
mediumdeviation
Ironically we have the exact same problem, except worse with Safari, since it
has (relatively) poor support for some cutting edge APIs, and unlike Edge/IE
we can't even legally test it in a VM because Apple doesn't even allow their
OS to be put in a virtual machine.

At least Microsoft has the good grace to put up free VMs for browser testing -
[https://developer.microsoft.com/en-us/microsoft-
edge/tools/v...](https://developer.microsoft.com/en-us/microsoft-
edge/tools/vms/)

~~~
sampath-lokuge
You can rent a MAC server here:
[http://www.macincloud.com/](http://www.macincloud.com/)

------
jblz
How is this licensed? Perhaps I'm missing it, but I can't seem to find mention
of it on the site or in the repo: [https://github.com/ionic-
team/stencil](https://github.com/ionic-team/stencil)

~~~
yesimahuman
Ah good catch. It's MIT (will get that up soon)

~~~
chrisco255
Have you considered a BSD + PATENTS license? :P

~~~
ergo14
Nothing wrong with that. In fact google releases quite a few projects like
that - the important thing is what is inside the patents clause. Apache 2.0
also has one and no one argues against it.

------
manucorporat
Fact: The website linked in this HN (stenciljs.com) was itself created with
stencil. I encourage you guys to open the Dev Tools and dig into it!

~~~
arxpoetica
nice diamond emoji

------
Vinnl
Huh, that's a rather interesting approach to building Web Components. I'll
have to see if it gets anywhere, but the idea has potential, and feels like it
avoids many of the pain points of Polymer (although I'm not quite sure yet
which you'll get in return).

~~~
ergo14
Yeah, indeed it does look really nice, the API feels a bit weird though, not
sure why lifecycle events are named after react.

~~~
yesimahuman
We are fans of react and think the events fit the component model well, it's
not a perfect 1-1 though

------
timwis
I'm curious, why build this instead of using
[skatejs]([https://github.com/skatejs/skatejs](https://github.com/skatejs/skatejs))?

------
vijaybritto
If we use third party library code in multiple stencils. Will they be included
separately in each one of them. Let's say d3 for graphics?

~~~
yesimahuman
Yes right this second, but next on our list is providing a seamless solution
to dependency dedupe. Not yet ready but it's promising.

~~~
vijaybritto
Okay, that is definitely needed if we want to build serious components. Else
it's gonna go crazy heavy!

~~~
danbucholtz
A simple solution today would be to put the shared, heavy code in it's own
component and call methods directly on that component. That's how we're share
code across components in Ionic.

~~~
ospatil
Could you please add an example of this in the documentation? It looks great
BTW.

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

~~~
andreashansen
Custom elements v1: [http://caniuse.com/#feat=custom-
elementsv1](http://caniuse.com/#feat=custom-elementsv1)

~~~
ubersoldat2k7
basically Chrome (I just saved you a click)

~~~
andreashansen
Although, their demo works perfectly fine in Firefox:
[https://corehacker-10883.firebaseapp.com/](https://corehacker-10883.firebaseapp.com/)

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

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

------
manmal
I see two problems with stenciljs at the moment, but perhaps they can be
fixed? 1, going back and forth in browser history, there is a flash of the
footer being displayed before the actual content is loaded - it's just 1-2
frames, but very noticeable and disturbing. 2, scroll position is lost when
visiting another page and going back.

Those are typical single page app problems, but they will probably not matter
when using the framework for a hybrid app (no back button). If I'm to use this
for a web app though, those would be nice to have addressed.

~~~
asdfgadsfgasfdg
> scroll position is lost when visiting another page and going back

Who ever thought that keeping scroll position was a good idea anyway?

Use #s if the position is relevant.

------
kleptomac
Am I getting this right?

Stenciljs is: * Another way to create web components - using Typescript/JSX. *
Provides SSR support

Other than that: * Is there anything else that we get from stenciljs? * How is
it different from Polymer? * What Polymer problems does it solve?

------
tech-no-logical
content won't show for me (latest firefox beta, 56b05) :

    
    
       Failed to register/update a ServiceWorker for scope ‘https://stenciljs.com/docs/’: Bad Content-Type of ‘text/html’ received for script ‘https://stenciljs.com/docs/sw.js’.  Must be ‘text/javascript’, ‘application/x-javascript’, or ‘application/javascript’.
       Error DOMException [SecurityError: "The operation is insecure."
       code: 18
       nsresult: 0x80530012]  intro:19:41

~~~
jgw96
Refresh on the home page and it should be fixed (:

------
brosky117
What is the browser support for web components? I worry that tools like this
are only targeting the last two versions of the major vendors.

~~~
ergo14
IE11+ will work and everything modern. If you don't have native support things
get polyfilled. Youtube nowdays runs on Polymer, web components and they
support older browsers.

------
tobeeey
This sounds awesome! The Github link on the website should probably link to
the main repo instead of stencil-site?

~~~
yesimahuman
Gah! Thanks, fixing now

------
chrisco255
Does this mean we will be able to use Ionic components with React or Vue in
the not too distant future?

~~~
ergo14
You will be able with Vue and preact, react has some issues (that hopefully
will be adressed soon). [https://custom-elements-
everywhere.com/](https://custom-elements-everywhere.com/) check this site for
more info.

------
Pranz
Does not work in firefox developer addition. Navbars work fine but nothing
else.

------
rajangdavis
Thank you for this, was looking for something like this!

------
sampath-lokuge
Why did it name as stenciljs? Hope it is TS no? Then it should be setncil no?

------
g105b
Here's a new library to solve a problem you don't have yet.

~~~
dmitriid
WebComponents in general are a solution in search of a problem.

Despite being 6 years in development:

\- they basically delivered none of the original promises

\- they are extremely cumbersome to use without a library/framework on top
(Polymer is the jQuery of WebComponents)

\- they are plagued by multiple problems and shifts in the ecosystem (browsers
don't want to support `is=`, HTML imports are being dropped in favour of ES6
imports)

\- they have multiple problems integrating with existing frameworks:
[https://custom-elements-everywhere.com](https://custom-elements-
everywhere.com) (basically any framework that bastardises HTML syntax is ok,
anything relying on Javascript only is in trouble)

Don't hold your breath for the next couple of years as everyone tries to
figure out how to work with them.

~~~
ergo14
> WebComponents in general are a solution in search of a problem

Maybe they don't solve your problem, but they certainly seem to solve Ionic's
or Netflix's problems (or mine for that matter).

~~~
dmitriid
"React seems to solve Facebook's problems (or mine for that matter)"

"Vue.js seems to solve Gitlab's problems (or mine for that matter)"

etc.

Throwing big names around amounts to pretty much nothing.

~~~
ergo14
But thats exactly true, companies build solutions that solve their problems.
No secret knowledge here.

------
hungerstrike
> Stencil components are rendered using JSX...

What's the point? Why not just use React?

Like many others - I dropped Cordova and Ionic in favor of React-Native. So,
what is Ionic trying to do here? Are they throwing in the towel and adopting
React? Will they end up making a kit that renders native components using JSX
just like React-Native?

~~~
dgregd
> Like many others - I dropped Cordova and Ionic in favor of React-Native.

Few years ago PhoneGap apps were really slow and ugly. So I built native
Android app. This year I started building hybrid Ionic 3 app because it has to
work on Android and iOS. It works good enough on Nexus 5 (Snapdragon 800). The
biggest problem is 4-5 seconds startup time. Stencil and component lazy
loading should greatly reduce that startup time (to 1-2 seconds I hope).

~~~
andreashansen
Quick tip, did you remove the hardcoded 3000ms splash screen delay?
[https://github.com/ionic-team/ionic-conference-
app/blob/mast...](https://github.com/ionic-team/ionic-conference-
app/blob/master/config.xml#L80)

------
saltydogdev
As kind of an old dog, I can't help but think of Active X controls from back
in the day. That's what this reminds me of. Kinda.

Are there some guidelines and standardization of the kinds of events
components emit, and what data is passed with the event? So that I don't have
to look up all the variants of event names and data.

~~~
gramstrong
A custom element is just an HTML element, so it is a part of the HTML
standard. If you log the object you can see it has all of the same properties
as an HTML element, plus whatever you've extended it with. So all emitting
events and event callbacks will behave the same as a standard element (except
for any custom event listeners and emitters that you add).

