10. Built in vanilla Javascript - native support, runs in
every framework
Provides a reusable transferable element - great for
âpatternâ library approaches
Need polyfills for Firefox and Edge
Built from the lowest possible level - all behaviours
we are used to (Angular/React/Vue) have to be built
from the ground up e.g. virtual dom/data binding
+
+
-
-
14. The magical, reusable web component
compiler
Component: transferable distributable module
App: starter for basic app or website
Ionic-PWA: fast production ready PWA
16. â Reactive components - data binding
â Virtual DOM for speed
â Typescript
â Shadow DOM
â Lazy load polyfilling including CSS vars for
Firefox, Edge and IE11 as needed
20. Added Extras...
â Pre rendering
â Service workers
â Unit testing
â @stencil/router similar to React router for
building in navigation behaviour in app
21. How to get started...
â https://stenciljs.com
â https://stencilcomponents.com/
â https://github.com/jagreehal/jag-reehal-stencil-tutorial
â https://speakerdeck.com/ahmad/building-web-
components-with-stencil
â https://www.recallact.com/presentation/stenciljs-and-
universal-components
And now to our topic - custom elements and stencil
Letâs start with looking at what we mean by a custom element
Here is an example of the start of a web component
Google Polymer - early advocates
One of the very first custom elements was the video tag built into the HTML5 spec (3 years ago) along with other media related tags
As a tag it is implemented like this
1 mins
But underneath it is actually this
Inside the Shadow DOM the underlying elements and styles are encapsulated
Pros and cons of native custom element support
NOT a framework - a compiler
#obligatory cat gif
Developed by ionic
Release 1 year ago at Google Polymer Summit
Extends basic web component development for easier production
V 0.12.3
Stencil website is built in stencil
Still in development but likely to be released to beta alongside ionic 4
Unlike if done natively, Stencil provides a base line set of features that anyone working with Angular or React will be familiar with
Ionic were influenced by angular, react, vue and polymer when building so In fact writing for stencil is kind of a cross between both Angular and React
Virtual Dom - reconciliation of changes between the non rendered dom and the actual Dom
Typescript - Type safe JS :)
Shadow DOM - scoping/encapsulation
Max 8 mins
Npm, may need to install stencil with npm install @stencil/core
If you want to start with a clean build remove the my component assets, update the index and update the package.json with appropriate naming and stencil.config.js.
Pre rendering (generating static files at build time) improves performance. Can also do server side rendering but pre rendering is default in order to reduce server workload (Express with Node.js)
Service workers - using Workbox simplified creation of service workers. Great for producing websites/PWA as provides offline mode out the box
Unit testing via Jest