Conf 2018 Track 2 - Custom Web Elements with Stencil
Download as PPTX, PDF0 likes134 views
The document provides an overview of custom elements and the Stencil framework for web development. Custom elements are built with vanilla JavaScript and offer reusable components for various frameworks, requiring polyfills for some browsers. Stencil is a compiler for creating web components with features like reactive components, virtual DOM, TypeScript support, and lazy loading, along with additional resources to get started.
Conf 2018 Track 2 - Custom Web Elements with Stencil
- 1. Custom Elements with Stencil Becky Veater Head of Web Development at Elixel @ryveata
- 6. What is a custom element?
- 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 + + - -
- 12. What is Stencil?
- 13. Is it another framework?
- 14. The magical, reusable web component compiler Component: transferable distributable module App: starter for basic app or website Ionic-PWA: fast production ready PWA
- 15. Why Stencil?
- 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
- 17. Kick off...
- 18. Demo
- 19. Distribute... Scope your package to you/your organisation Register for npm npm login npm build npm publish
- 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
Editor's Notes
- #6: 2 mins
- #7: And now to our topic - custom elements and stencil Let’s start with looking at what we mean by a custom element
- #8: Here is an example of the start of a web component Google Polymer - early advocates
- #9: 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
- #10: 1 mins But underneath it is actually this Inside the Shadow DOM the underlying elements and styles are encapsulated
- #11: Pros and cons of native custom element support
- #14: NOT a framework - a compiler #obligatory cat gif
- #15: 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
- #17: 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
- #18: 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.
- #21: 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