Slide 1
Slide 1 text
Building Web Components Using
Slide 2
Slide 2 text
Development head at Robusta
Instructor at AlMakinah
Writing front-end code for more than I can remember
Accessibility and Web standards fanatic
Love teaching, StarCraft, good puns and memes
Currently trying to write my own book
Slide 3
Slide 3 text
You can reach me via:
ahmadalfy @Facebook, Twitter, ASK.fm, LinkedIn
Email: [email protected]
Slide 4
Slide 4 text
We’re hiring Senior Frontend Developer
Slide 5
Slide 5 text
Outline
• Introduction to Web Components
• What is Stencil
• How Stencil works
• Getting started
Slide 6
Slide 6 text
Web components are a set of APIs that allow us to create
new custom, reusable, encapsulated HTML tags to use in
web pages and web apps. It works across modern
browsers, and can be used with any JavaScript library or
framework.
Web Components
Slide 7
Slide 7 text
https://www.webcomponents.org/element/GoogleWebComponents/google-map
Slide 8
Slide 8 text
Source: https://dzone.com/articles/web-components-a-new-perspective-to-web-developmen
Slide 9
Slide 9 text
HTML template
• Elements inside the tag are inert:
• Content within the tag are not rendered. You cannot
select it using document.querySelector
• ![]()
won’t fire a request even if has a src
• and other focusable elements aren’t accessible
using tabs
• Events aren’t attached to elements inside it.
Slide 10
Slide 10 text
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
Slide 11
Slide 11 text
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
Slide 12
Slide 12 text
Shadow DOM
• Shadow DOM API allow us to encapsulate parts of our
document to prevent clashing between it and the rest of
the code on the page.
• Example: a widget on a page that should have its own
style and behavior and shouldn’t be affected by the global
nature of the CSS/JavaScript
Slide 13
Slide 13 text
HTML Imports
Imports allow us to bring true dependency management
to the browsers without hacks.
Slide 14
Slide 14 text
Let’s take bootstrap as an example
What about this?
Shared resources are downloaded once
Slide 15
Slide 15 text
Custom Elements
Custom Elements allow us to create new HTML elements
or extend existing ones.
It’s the foundational API of the Web Component that most
of our work is based upon.
Slide 16
Slide 16 text
https://www.webcomponents.org/
Slide 17
Slide 17 text
What the heck is
Slide 18
Slide 18 text
Stencil is a Compiler that allows you to
use its API to write standard compliant
web components through concepts and
tools you are already familiar with.
Built by the team who built Ionic
Slide 19
Slide 19 text
STENCIL IS NOT A FRAMEWORK
Slide 20
Slide 20 text
AGAIN
IT IS NOT A FRAMEWORK
Slide 21
Slide 21 text
NO, SERIOUSLY
IT IS NOT A FRAMEWORK
Slide 22
Slide 22 text
When you are creating a web component
with Stencil, you are writing TSX;
TypeScript and JSX
It brings the best of the two worlds
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Similarity with Angular:
• Uses TypeScript
• Uses similar decorators to the ones used in Angular
@Component @Component
@Prop @Input
@Event @Output
@Listen @HostListener
@Element @ElementRef
Slide 25
Slide 25 text
Similarity with React:
• Uses JSX
• Uses the concept of state / props
• Have similar life cycle
componentWillLoad componentWillMount
componentDidLoad componentDidMount
componentWillUpdate componentWillUpdate
componentDidUpdate componentDidUpdate
componentDidUnload componentDidUnmount
Slide 26
Slide 26 text
• Performant
• Lazy loading
• Virtual DOM
• Reactive
• Async rendering similar to react
fiber
• Stable
• Familiar
• Interoperable
Why Stencil
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Demo Time
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
HOW IS STENCIL DIFFERENT FROM X?
• Angular/React/Vue/etc.: Stencil builds standards-based
web components that run natively in the browser.
• Polymer: Stencil works primarily at build rather than
runtime. Outputs vanilla web components. Opinionated
around JSX, Virtual DOM, and other framework features.
• Vanilla Web Components: Stencil provides complicated
framework features as if you wrote them yourself in vanilla
Web Components.
Slide 37
Slide 37 text
Questions?