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
69
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
50
TeamedUp Pixelscamp presentation
brecke
0
54
Pimp my terminal
brecke
0
300
coTransit pitch
brecke
0
170
Apresentação da plataforma OST
brecke
0
53
One.Stop.Transport presentation for the RAW Open Data event
brecke
0
98
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
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
330
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
550
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.7k
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
84
21k
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
0
140
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
meteatamel
0
120
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
440
ビカム・ア・コパイロット
ymd65536
1
160
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
VitestのIn-Source Testingが便利
taro28
9
2.5k
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Visualization
eitanlees
146
16k
Facilitating Awesome Meetings
lara
54
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Unsuck your backbone
ammeep
671
58k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
It's Worth the Effort
3n
184
28k
Designing for humans not robots
tammielis
253
25k
GraphQLとの向き合い方2022年版
quramy
46
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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