5 ms·

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

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!

dgregd 9y ago
How Stencil will change Ionic (Angular) apps? As far I understand it will add real lazy loading, which should greatly reduce startup time. What are other benefits? What about Ionic v4 apps? Will Angular still be used? How we are going to write our app components, they will be based on Angular or Stencil? What about Cordova hybrid apps? Do you plan to support them or focus exclusively on PWA apps?
- yesimahuman 9y ago
  First of all, Cordova/App Store apps are still our main focus. However, we are incredibly excited about PWAs and will adjust based on where the market goes. This stuff is still new! Second of all, we will continue to support building Ionic apps with Angular. In fact, you shouldn't really notice any difference, we've just turned a number of the Ionic components into web components. It'll be fairly seamless but performance on load and code size should improve by a fair margin. Long term? It's hard to argue against web components being a superior deployment option for both our components and your apps, so if developer preference shifts in that direction we might push stencil/web components as the default. Time will tell
  - andreashansen 9y ago
    First off, thanks for all your work with the Ionic framework! I use it in education as part of an undergraduate course on cross-platform development, and the students thoroughly enjoy the developer experience. Question: Do you have an ETA for release of the "Web Componentized" Ionic components? So looking forward to it, especially the potential of teaching e.g. Vue + Ionic components instead of having to put so much focus and effort on teaching Angular (which is a great framework, but requires a lot).
rident 9y ago
Your github link points to the repo for the site rather than the project. https://github.com/ionic-team/stencil-site https://github.com/ionic-team/stencil-site vs https://github.com/ionic-team/stencil https://github.com/ionic-team/stencil
Siilwyn 9y ago
Hi, wondering what's the main difference between Stencil and [Svelte](https://svelte.technology/ https://svelte.technology/)?
- danbucholtz 9y ago
  They're very similar concepts. Svelte was an inspiration to Stencil. We wanted to take a different approach to developer experience and ship custom elements by default.
danvoell 9y ago
Awesome work Max and team!
- yesimahuman 9y ago
  Thanks Dan! :D
knicholes 9y ago
What kind of events are stencil events? In order to respond to an emitted stencil event, do I have to use the stencil listener, or can I use addEventListener?
- jgw96 9y ago
  Hello! Good question. There are no stencil events, we just use the custom events api that is built into the browser. Therefore, you can use addEventListener.
timeu 9y ago
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 9y ago
  Yeah, as long as you have the polymer as dependency - it should work, you can mix it with vuejs, preact or angular 2+ already.

dgregd 9y ago

How Stencil will change Ionic (Angular) apps? As far I understand it will add real lazy loading, which should greatly reduce startup time. What are other benefits? What about Ionic v4 apps? Will Angular still be used? How we are going to write our app components, they will be based on Angular or Stencil? What about Cordova hybrid apps? Do you plan to support them or focus exclusively on PWA apps?

yesimahuman 9y ago
First of all, Cordova/App Store apps are still our main focus. However, we are incredibly excited about PWAs and will adjust based on where the market goes. This stuff is still new! Second of all, we will continue to support building Ionic apps with Angular. In fact, you shouldn't really notice any difference, we've just turned a number of the Ionic components into web components. It'll be fairly seamless but performance on load and code size should improve by a fair margin. Long term? It's hard to argue against web components being a superior deployment option for both our components and your apps, so if developer preference shifts in that direction we might push stencil/web components as the default. Time will tell
- andreashansen 9y ago
  First off, thanks for all your work with the Ionic framework! I use it in education as part of an undergraduate course on cross-platform development, and the students thoroughly enjoy the developer experience. Question: Do you have an ETA for release of the "Web Componentized" Ionic components? So looking forward to it, especially the potential of teaching e.g. Vue + Ionic components instead of having to put so much focus and effort on teaching Angular (which is a great framework, but requires a lot).

rident 9y ago

Your github link points to the repo for the site rather than the project. https://github.com/ionic-team/stencil-site https://github.com/ionic-team/stencil-site vs https://github.com/ionic-team/stencil https://github.com/ionic-team/stencil

Siilwyn 9y ago

Hi, wondering what's the main difference between Stencil and [Svelte](https://svelte.technology/ https://svelte.technology/)?

danbucholtz 9y ago
They're very similar concepts. Svelte was an inspiration to Stencil. We wanted to take a different approach to developer experience and ship custom elements by default.

danvoell 9y ago

Awesome work Max and team!

yesimahuman 9y ago
Thanks Dan! :D

knicholes 9y ago

What kind of events are stencil events? In order to respond to an emitted stencil event, do I have to use the stencil listener, or can I use addEventListener?

jgw96 9y ago
Hello! Good question. There are no stencil events, we just use the custom events api that is built into the browser. Therefore, you can use addEventListener.

timeu 9y ago

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 9y ago
Yeah, as long as you have the polymer as dependency - it should work, you can mix it with vuejs, preact or angular 2+ already.