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
63
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
42
TeamedUp Pixelscamp presentation
brecke
0
52
Pimp my terminal
brecke
0
290
coTransit pitch
brecke
0
170
Apresentação da plataforma OST
brecke
0
51
One.Stop.Transport presentation for the RAW Open Data event
brecke
0
89
The One.Stop.Transport pitch
brecke
0
160
One.Stop.Transport presentation
brecke
1
130
The One.Stop.Transport open data platform
brecke
0
94
Other Decks in Programming
See All in Programming
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
410
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
920
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
0
440
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
9
3.6k
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
150
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
330
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
410
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
Folding Cheat Sheet #8
philipschwarz
PRO
0
140
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Building Applications with DynamoDB
mza
90
6k
Faster Mobile Websites
deanohume
304
30k
Music & Morning Musume
bryan
46
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
GraphQLとの向き合い方2022年版
quramy
43
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Gamification - CAS2011
davidbonilla
80
5k
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