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
70
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
54
Pimp my terminal
brecke
0
300
coTransit pitch
brecke
0
170
Apresentação da plataforma OST
brecke
0
54
One.Stop.Transport presentation for the RAW Open Data event
brecke
0
100
The One.Stop.Transport pitch
brecke
0
180
One.Stop.Transport presentation
brecke
1
140
The One.Stop.Transport open data platform
brecke
0
98
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
効率的な開発手段として VRTを活用する
ishkawa
0
140
5つのアンチパターンから学ぶLT設計
narihara
1
170
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.5k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
A designer walks into a library…
pauljervisheath
207
24k
Designing for Performance
lara
610
69k
GraphQLとの向き合い方2022年版
quramy
49
14k
Music & Morning Musume
bryan
46
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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