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
Happy to answer any questions!
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) ?
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?
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
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).
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.
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.
It's like you're arguing against distributing a large number of files in a zip archive. Actually... that's what a jar is. They're not scary, you can just unzip them to see everything inside.
Thanks for the prompt response BTW.
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!
Everything else sounds terrific, though, especially the ability to do SSR.
14px and a lightweight font does not make for happy reading.
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.
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...
The only way for me to avoid using the Macintosh OS or having to buy a Mac is to switch careers or specialize.
Thankfully, cross-platform kits such as Cordova and React-Native let me use my preferred OS for development most of the time!
-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.
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?
 - https://www.webcomponents.org/polyfills#custom-elements-poly...
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
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.
Who ever thought that keeping scroll position was a good idea anyway?
Use #s if the position is relevant.
* 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?
Error DOMException [SecurityError: "The operation is insecure."
nsresult: 0x80530012] intro:19:41
Fixed that for you :)
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)
Don't hold your breath for the next couple of years as everyone tries to figure out how to work with them.
To me, it doesn't seem like too big of a stretch to think that the popular frameworks of today will move to the custom element spec instead of their own proprietary component model.
Maybe they don't solve your problem, but they certainly seem to solve Ionic's or Netflix's problems (or mine for that matter).
"Vue.js seems to solve Gitlab's problems (or mine for that matter)"
Throwing big names around amounts to pretty much nothing.
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?
We're all in on web tech. We think it's the smarter choice long term.
We're not throwing in the towel at all, rather we're embracing web standards 100% and think Ionic is and will continue to be the best way to build an app that works in the app stores, on the web as a PWA, and increasingly on desktop. Cross-platform is our main focus.
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).
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.