Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Intro to Web Components
Miguel Laginha
August 29, 2019
Programming
0
45
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
23
TeamedUp Pixelscamp presentation
brecke
0
37
Pimp my terminal
brecke
0
260
coTransit pitch
brecke
0
130
Apresentação da plataforma OST
brecke
0
34
One.Stop.Transport presentation for the RAW Open Data event
brecke
0
72
The One.Stop.Transport pitch
brecke
0
130
One.Stop.Transport presentation
brecke
1
85
The One.Stop.Transport open data platform
brecke
0
67
Other Decks in Programming
See All in Programming
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.4k
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
oniak3ibm
PRO
0
320
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
540
Android Architecture Design With Koin
agiuliani
0
210
Keep Your Cache Always Fresh With Debezium
gunnarmorling
0
180
From Java 11 to 17 and beyond
josepaumard
0
290
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
takehitogoto
0
390
Where and how to run UI tests (Droidcon London, 2021)
nonews
0
200
Named Document って何?
harunakano
0
240
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.5k
Language Summit 2022: WebAssembly: Python in the browser and beyond
tiran
2
310
Improve Build Times in Less Time
zacsweers
6
2.8k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
4 Signs Your Business is Dying
shpigford
169
20k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
Code Reviewing Like a Champion
maltzj
506
37k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Robots, Beer and Maslow
schacon
152
7.1k
The Language of Interfaces
destraynor
148
20k
Happy Clients
brianwarren
89
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
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