Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to Web Components
Search
Miguel Laginha
August 29, 2019
Programming
0
72
Intro to Web Components
Not so short presentation for the Brighton webdev meetup on web components.
Miguel Laginha
August 29, 2019
Tweet
Share
More Decks by Miguel Laginha
See All by Miguel Laginha
A case for explicitness in open source
brecke
0
52
TeamedUp Pixelscamp presentation
brecke
0
56
Pimp my terminal
brecke
0
300
coTransit pitch
brecke
0
170
Apresentação da plataforma OST
brecke
0
56
One.Stop.Transport presentation for the RAW Open Data event
brecke
0
100
The One.Stop.Transport pitch
brecke
0
190
One.Stop.Transport presentation
brecke
1
140
The One.Stop.Transport open data platform
brecke
0
100
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
260
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
CSC509 Lecture 02
javiergs
PRO
0
410
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
980
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.8k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
0
110
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Site-Speed That Sticks
csswizardry
11
890
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Producing Creativity
orderedlist
PRO
347
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GitHub's CSS Performance
jonrohan
1032
470k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Context Engineering - Making Every Token Count
addyosmani
5
220
Transcript
INTRO TO WEBCOMPONENTS
ABOUT ME ▸ Miguel Laginha ▸ Apereo Foundation ▸ Open
Academic Environment (OAE) ▸ ESUP-Portail
2018 WAS A LEAP YEAR FOR THE WEB.
YET NO ONE NOTICED. WHY?
WE'VE BEEN TOO BUSY DISCUSSING WHICH FRAMEWORK IS BEST
WHAT HAPPENED? FIREFOX 63
None
WE CAN ALL BE BFFS AND LEVERAGE EACH OTHER'S WITHOUT
ADOPTING EVERY ASPECT OT EACH OTHER'S WORK
ENTER WEB COMPONENTS =)
WHAT IS THAT?
1ST ANSWER IT'S NOT ANOTHER FRAMEWORK
2ND ANSWER IT'S A SET OF W3C STANDARDS
3RD ANSWER YES, IT'S AVAILABLE TODAY, EVERYWHERE
None
4TH ANSWER IT'S NOT EVEN A NEW IDEA! THERE'S PROOF
5TH ANSWER (FAV) THE WEB AS THE PLATFORM
<your-tag></your-tag> <!-- - Custom, reusable, encapsulated HTML tags - For
use in web pages and web apps - Work in all major browsers - JS agnostic -->
HTML TEMPLATE <template> CUSTOM ELEMENTS <your-tag/> ES MODULES <script type="module">
SHADOW DOM <slot>
ALRIGHT, BUT HOW?
LIBRARY DIFFERENCES EXAMPLE
HELLO WORLD EXAMPLE // taken from https://lit-element.polymer-project.org/ import { LitElement,
html } from 'lit-element'; class SimpleGreeting extends LitElement { static get properties() { return { name: { type: String } }; } constructor() { super(); this.name = 'World'; } render() { return html`<p>Hello, ${this.name}!</p>`; } } customElements.define('simple-greeting', SimpleGreeting);
WHAT'S IN IT FOR DEVS? ▸ CSS is scoped ▸
Custom HTML is semantic ▸ JS scoping is simpler ▸ Re-usable code ▸ Accessibility becomes manageable ▸ WC keeps design intentional
WHAT'S IN IT FOR MANAGERS? ▸ Lower maintenance costs ▸
Cost of development collapses ▸ Lower boilerplate and churn for future projects ▸ Extensibility ▸ It's a W3C standard, no legacy
I'M SOLD, LET'S TRY IT
A GLIMPSE INTO THE FUTURE!
A GLIMPSE INTO THE FUTURE ▸ video players ▸ dropdown
menus ▸ timelines ▸ animations ▸ all sorts of visual and non visual components
ADVANTAGES IN A NUTSHELL ▸ 100% re-usable components (style, business
logic or mixed) ▸ Split work among teams ▸ CDN served components ▸ No need for greenfield projects, upgrade step by step! ▸ No need for a framework ▸ Avoid (platform) lock-in
BARRIERS TO ADOPTION ▸ Lots of libraries already (litElement, skateJs,
Stencil, slimJS, etc) ▸ Requires proper JS knowledge ▸ Requires tooling (webpack, lerna, rollup, npm, git, etc...) ▸ Deployment ▸ Documentation
WHO'S USING? ▸ Youtube: https://www.youtube.com/ ▸ EA: https://www.ea.com/en-gb ▸ https://www.webcomponents.org/
▸ https://www.byu.edu/
COMMUNITY RESOURCES ▸ OpenWC ▸ WebComponents.org ▸ Try litElement ▸
Polymer ▸ Compatibility ▸ dev.to
THANK YOU. Q&A TIME
None