If you have an Ionic/Angular background, "components" are not exactly a new concept – the entire Angular framework is based on creating components like this. Instead of creating a template inline or in a separate file, we define it inside of a render() function that returns the template using JSX. In Stencil, we can create web components using the following syntax: import to render out data in our template. Stencil can help us create these web components. This element does not exist in standard HTML, but we can define a "custom element" using a web component. We might create a web component called that we want to use in templates to easily format profile pictures. To put it simply:Ī web component is basically a custom HTML element that we can define, and we can attach some behaviour to that element. Now let's take a couple of steps back and talk a little more specifically about what StencilJS is all about. Hopefully, the introduction section will have given you a decent overview of how Stencil fits into the Ionic ecosystem. It doesn't need to concern you how that package is created. If you are building Ionic applications right now, then you are all the way at the bottom of that chart using Angular, and the package that is supplied to it. You can, more or less, just continue building your Ionic applications as you have been and ignore everything I'm talking about here. There have been updates to accommodate this ecosystem change in but the way you build applications with Ionic/Angular has remained mostly the same. But let me clear one thing up first: If you have happily been building Ionic/Angular applications and have no interest in changing your tech stack - don't worry. If that doesn't make sense, the rest of this article should help clear things up. The Ionic team are also building out specific integrations for React with and Vue with These framework specific packages are useful, but they are not required in order to use Ionic. There is a special library called which is the Ionic library framework that is specific to Angular (the one we have been using for a long time) and can help with integration specifically with Angular. The bundle of web components that constitutes Ionic can then be used by any framework, and it can also be used without a framework at all. Stencil can also be used to create web components for any purpose, it is not only used to create Ionic components. StencilJS helps us create web components, and the Ionic team have created a bunch of web components with Stencil which have become Ionic Core. As a start, here is a simplistic diagram of the ecosystem as I see it now to give you an overview: I hope to address most of these questions in detail, without adding to the confusion, in this article. Does this mean that I shouldn't build a PWA with Ionic/Angular anymore? No.Why would I build a PWA with Stencil when I can build one with Ionic/Angular? Preference, mostly.Do we need to learn Stencil to build PWAs with Ionic? No.Are we going to need to learn Stencil to use Ionic now? No.I thought Stencil was a "behind the scenes tool" for Ionic 4? It is.Some questions that might be popping into your head now might include:
HOW TO USE SCRIPTCASE YOUTUBE SERIES
You will still be able to progress through this tutorial series if you are not already familiar with Ionic/Angular, but you may find that some sections are light on details if the concept is something that Ionic or Angular developers would already be familiar with.įor those of you who have been building Ionic/Angular applications, and especially those of you who recently read my series on building a PWA using Ionic/Angular, it may be hard to get a handle on the new ecosystem that we find ourselves in. The reason for this is that this series was originally written around the time when Ionic/Angular was the only way to build Ionic applications. This tutorial series is targeted at people who are already familiar with building Ionic/Angular applications – many concepts will be explained in that context. Given a lot of the recent developments, I want to tread carefully in explaining everything, because it will be very easy to become lost in A Sea of Frameworks and Acronyms (surely, George R. However, I think we need to talk about a few things before we get there. The end result of this article series is going to be Progressive Web Application built with the StencilJS web component compiler. Part 1: An Introduction to Stencil (this tutorial)
0 kommentar(er)
