SlideShare a Scribd company logo
Flaws of the Web Components in
2019 and how to address them
Vladlen Fedosov, Director of R&D @Namecheap, Inc
Hint: prepare your QR code scanners 😉
Vlad Fedosov
Director of R&D @Namecheap
TL;DR:
● 10 years in the industry
● Went path from Junior to Architect
● Use JS since Mootools era
● Amateur DevOps evangelist
● AWS ninja
● Believe in self-organized, cross-functional teams
“Opening the door for everyone to
a free and open Internet”
Our use case & concerns
● Browser support
● Frameworks compatibility
● SSR + SEO
● Styling
● Accessibility
● Versioning
● Delivery
● Solution of choice
● Integration path
Web Components
Quick refresh of the subject
Web Components – In the nutshell
Web components is a set of web platform APIs that allow you to create new
custom, reusable, encapsulated HTML tags to use in web pages and web apps.
Custom components and widgets build on the Web Component standards, will
work across modern browsers, and can be used with any JavaScript library or
framework that works with HTML.
Core specifications: Custom Elements, Shadow DOM
Important note: you may opt out Shadow DOM and stick to the
Custom Elements only.
Attention – WCs can be used in production
All major frameworks that exist nowadays fully support Web Components (only React has
are some issues with advanced integration).
Browser support:
● IE 10–11 and Edge (Chakra based) are out of the game as they do not support Shadow
DOM.
● All other browsers (Chrome, FF, Safari, iOS, Android, considering 2 latest versions) work
just fine with all major techs we need.
Mobile: Ionic 4 heavily uses Web Components
But they’re still not perfect
Let’s go through the main issues you may face and ways to handle them
Growth problems
Growth problems – Young ecosystem
Web Components as a standard is under development during last several years.
And it was changed quite drastically in V1 (comparing to V0). Also the adoption
just recently grown to acceptable point. And so the tools are rapidly evolving and
changing. Let’s looks at the most relevant examples:
● Stencil – 1.0 version released few months ago, under active development,
documentation need to be improved, relatively low adoption
● LitElement – was started just ~1 year ago, under active development, just
recently published their roadmap.
● React support is far from being perfect
Growth problems – Browser support
Every major browser has open Web Components related issues nowadays. Some
of them major some of them don’t. But be ready to learn most of them at some
point.
The best browser to run them is Chrome, surprise, surprise 😅
Growth problems – Coming specs
As time comes HTML Imports spec was removed while Shadow DOM and Custom
Elements specs were evolved from V0 to V1. And I expect to see new
specifications being adopted as there are still gaps (which we’ll discuss later) in
the architecture. Let’s look at the examples I like:
● Declarative Shadow DOM
● CSS Modules V1
● Scoped Custom Element Registries
● CSS Shadow Parts
CSS inside Shadow DOM
Shadow DOM - brief introduction
CSS inside Shadow DOM – How to load it?
CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and
page styles don't bleed in. But how should I load styles for my markup? Two
options here:
● Constructible Stylesheets (Chrome only, future spec)
● Loading via <link> or <style> tag (performance hit)
CSS inside Shadow DOM – Performance hit
Time, ms
CSS inside Shadow DOM – Performance hit
Devices count
Time, ms
CSS inside Shadow DOM – Way to load it now
● Include only CSS your component really need (extra CSS causes
performance issues)
● Keep WCs related CSS inside JS bundle to prevent FOUC
● How to inject CSS:
1. If available: Use Constructible Stylesheets, for Chrome users (~70% of desktop
users)
2. If Firefox: Use <link> with CSS Blob (Until Mozilla will fix this issue)
3. Else: Use inline CSS via <style> tag (Webkit has optimization for this)
Server Side Rendering
Server Side Rendering (SSR)
It’s theoretically possible to fully render WC at server side (and it even works for
simple ones), but...
There is no stable implementation yet, as well as way to represent Shadow DOM
in HTML 😟 But guys are actively working on a solution.
So what should we do then…? 🤯
Server Side Rendering (SSR) - YAGNI
YAGNI! Keep your content in Light DOM, put WC related code to client bundle and
communicate via DOM attributes/props/events. Treat your WCs as native HTML elements.
You can agree that you’re not rendering Shadow DOM for example for <input
type="text"> element. If components are well designed, crawlers do not need a flattened
tree to get text contents. And use ARIA attributes to add semantic meaning to your custom
elements
<good-components>hello world</good-components>
// It’s shadow tree is using a slot to get text contents
<bad-components></bad-components>
// "hello world" is hard-coded in its shadow tree.
Server Side Rendering (SSR) - YAGNI
<x-tab-group aria-label="My test tabs">
<x-tab role="tab" slot="tab">Title for tab 1</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Content 1</x-tab-panel>
<x-tab role="tab" slot="tab">Title for tab 2</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Content 2</x-tab-panel>
<x-tab role="tab" slot="tab">Title for tab 3</x-tab>
<x-tab-panel role="tabpanel" slot="panel">Content 3</x-tab-panel>
</x-tab-group>
Server Side Rendering (SSR) - Experimental way
But if you really want somehow render your web components, try to experiment with
prerendering (medium complexity) or real server side rendering (hard complexity).
But keep in mind that serialization (including Shadow DOM) and hydration is up to you to
implement. Also server side Web API implementation needed for SSR.
Take a look at the Stencil and SkateJS implementation (scan QR codes).
Versioning
Versioning – What’s wrong with it?
Currently (and it will likely remain) all WCs must be registered in global registry. So
you can’t have 2 versions of the same component on a single page. This follows
approach that Browser use for the DOM, you have single version of it at a time.
This may become an issue if you have multiple teams working on different apps at
the same website (microservices at frontend pattern).
Versioning – Options we have
Let’s look at the options we have here:
1. Never do breaking changes. This is the principle that Browsers use. And while it’s
possible to do it and it even may be the best option to start with, it’s obvious that it
contradicts to the principle “fail fast, fail safe” and doesn’t facilitate innovations.
2. Tag based versioning. So instead of having <x-button> you would have
<x-button-v1> to accommodate further major versions. So if Microservice 1 requires
button@1.1.5 and Microservice 2 requires button@1.2.1 – button@1.2.1 only will
be used. And if MS1 needs v1.1.5 and MS2 needs 2.0 – both components will be
registered.
3. Microservice based scoping. So instead of having <x-button>
you would have <x-button-mymicroservice>
Summing up… 🤯
Our use case & concerns
● Browser support 🙂 (good)
● Frameworks compatibility 😀 (very good)
● SSR + SEO 🧐 (non trivial, needs verification)
● Styling 😅(good, but can be better)
● Accessibility 😀 (very good)
● Versioning 🙃 (tricky)
● Delivery 😎 (no major changes)
● Solution of choice 😜 (your choice, try LitElement first)
● Integration path 😜 (your choice)
Bonus point
Don’t try to get rid of your favourite framework
Web Components vs Frameworks
To be short: they’re different. Don’t try to replace good old frameworks like Vue.js
or React with Web Components.
Use cases for Web Components:
● Design System / Pattern library implementation
○ Especially valuable if you have to deal with multiple frameworks or want it to be
used by your B2B clients.
● Use them internally to build next-gen framework 😅
○ Like Google did with AMP and Ionic made Stencil
● Bring our own use case 🙋‍♂
Thank you for coming,
you rock 🔥 🤘
Vlad Fedosov
Director of R&D
@Namecheap, Inc
vlad.fedosov@gmail.com
Slides:
Or just scan it: Related
article:
bit.ly/2lYh8eB
bit.ly/2mRZCJa

More Related Content

What's hot

Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Implementing Web Services In Java
Implementing Web Services In JavaImplementing Web Services In Java
Implementing Web Services In Java
Edureka!
 
Web components the future is here
Web components   the future is hereWeb components   the future is here
Web components the future is here
Gil Fink
 
How To Create Theme in Magento 2 - Part 1
How To Create Theme in Magento 2 - Part 1How To Create Theme in Magento 2 - Part 1
How To Create Theme in Magento 2 - Part 1
Magestore
 
Angular 2 interview questions and answers
Angular 2 interview questions and answersAngular 2 interview questions and answers
Angular 2 interview questions and answers
Anil Singh
 
Magento 2 Theme Trainning for Beginners | Magenest
Magento 2 Theme Trainning for Beginners | MagenestMagento 2 Theme Trainning for Beginners | Magenest
Magento 2 Theme Trainning for Beginners | Magenest
Magenest
 
How to create theme in Magento 2 - Part 2
How to create theme in Magento 2 - Part 2How to create theme in Magento 2 - Part 2
How to create theme in Magento 2 - Part 2
Magestore
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
Edureka!
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
Laurence Svekis ✔
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
Maurice De Beijer [MVP]
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
Laurence Svekis ✔
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
yuvaraj72
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
IT Geeks
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
Murat Doğan
 
SharePoint Web part programming
SharePoint Web part programmingSharePoint Web part programming
SharePoint Web part programming
Quang Nguyễn Bá
 
Html 5
Html 5Html 5
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
Patrick Buergin
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
Horacio Gonzalez
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
Sayed Ahmed
 
AngularJS 2.0
AngularJS 2.0AngularJS 2.0
AngularJS 2.0
Boyan Mihaylov
 

What's hot (20)

Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
Implementing Web Services In Java
Implementing Web Services In JavaImplementing Web Services In Java
Implementing Web Services In Java
 
Web components the future is here
Web components   the future is hereWeb components   the future is here
Web components the future is here
 
How To Create Theme in Magento 2 - Part 1
How To Create Theme in Magento 2 - Part 1How To Create Theme in Magento 2 - Part 1
How To Create Theme in Magento 2 - Part 1
 
Angular 2 interview questions and answers
Angular 2 interview questions and answersAngular 2 interview questions and answers
Angular 2 interview questions and answers
 
Magento 2 Theme Trainning for Beginners | Magenest
Magento 2 Theme Trainning for Beginners | MagenestMagento 2 Theme Trainning for Beginners | Magenest
Magento 2 Theme Trainning for Beginners | Magenest
 
How to create theme in Magento 2 - Part 2
How to create theme in Magento 2 - Part 2How to create theme in Magento 2 - Part 2
How to create theme in Magento 2 - Part 2
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
 
Monster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applicationsMonster JavaScript Course - 50+ projects and applications
Monster JavaScript Course - 50+ projects and applications
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
 
SharePoint Web part programming
SharePoint Web part programmingSharePoint Web part programming
SharePoint Web part programming
 
Html 5
Html 5Html 5
Html 5
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
AngularJS 2.0
AngularJS 2.0AngularJS 2.0
AngularJS 2.0
 

Similar to KharkivJS: Flaws of the Web Components in 2019 and how to address them

LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
Vlad Fedosov
 
Building Web Applications Without a Framework
Building Web Applications Without a FrameworkBuilding Web Applications Without a Framework
Building Web Applications Without a Framework
All Things Open
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and Polymer
FITC
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Web Components
Web ComponentsWeb Components
Web Components
FITC
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Lachlan Hardy
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
Austin Gil
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
RapidValue
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
Manuel Garcia
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
Html5
Html5Html5
Html5
mikusuraj
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
Sara Moccand-Sayegh
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
Ravi Raj
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fps
IntexSoft
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded:  improve your app now! and get ready for 2.0Angular 1.x reloaded:  improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Carlo Bonamico
 
Dust.js
Dust.jsDust.js

Similar to KharkivJS: Flaws of the Web Components in 2019 and how to address them (20)

LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
Building Web Applications Without a Framework
Building Web Applications Without a FrameworkBuilding Web Applications Without a Framework
Building Web Applications Without a Framework
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and Polymer
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Web Components
Web ComponentsWeb Components
Web Components
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Html5
Html5Html5
Html5
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
How to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fpsHow to write an application and not roll down to 1 fps
How to write an application and not roll down to 1 fps
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded:  improve your app now! and get ready for 2.0Angular 1.x reloaded:  improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
 
Dust.js
Dust.jsDust.js
Dust.js
 

Recently uploaded

20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
Rohit Gautam
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Large Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial ApplicationsLarge Language Model (LLM) and it’s Geospatial Applications
Large Language Model (LLM) and it’s Geospatial Applications
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

KharkivJS: Flaws of the Web Components in 2019 and how to address them

  • 1. Flaws of the Web Components in 2019 and how to address them Vladlen Fedosov, Director of R&D @Namecheap, Inc Hint: prepare your QR code scanners 😉
  • 2. Vlad Fedosov Director of R&D @Namecheap TL;DR: ● 10 years in the industry ● Went path from Junior to Architect ● Use JS since Mootools era ● Amateur DevOps evangelist ● AWS ninja ● Believe in self-organized, cross-functional teams
  • 3. “Opening the door for everyone to a free and open Internet”
  • 4. Our use case & concerns ● Browser support ● Frameworks compatibility ● SSR + SEO ● Styling ● Accessibility ● Versioning ● Delivery ● Solution of choice ● Integration path
  • 6. Web Components – In the nutshell Web components is a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Core specifications: Custom Elements, Shadow DOM Important note: you may opt out Shadow DOM and stick to the Custom Elements only.
  • 7. Attention – WCs can be used in production All major frameworks that exist nowadays fully support Web Components (only React has are some issues with advanced integration). Browser support: ● IE 10–11 and Edge (Chakra based) are out of the game as they do not support Shadow DOM. ● All other browsers (Chrome, FF, Safari, iOS, Android, considering 2 latest versions) work just fine with all major techs we need. Mobile: Ionic 4 heavily uses Web Components
  • 8. But they’re still not perfect Let’s go through the main issues you may face and ways to handle them
  • 10. Growth problems – Young ecosystem Web Components as a standard is under development during last several years. And it was changed quite drastically in V1 (comparing to V0). Also the adoption just recently grown to acceptable point. And so the tools are rapidly evolving and changing. Let’s looks at the most relevant examples: ● Stencil – 1.0 version released few months ago, under active development, documentation need to be improved, relatively low adoption ● LitElement – was started just ~1 year ago, under active development, just recently published their roadmap. ● React support is far from being perfect
  • 11. Growth problems – Browser support Every major browser has open Web Components related issues nowadays. Some of them major some of them don’t. But be ready to learn most of them at some point. The best browser to run them is Chrome, surprise, surprise 😅
  • 12. Growth problems – Coming specs As time comes HTML Imports spec was removed while Shadow DOM and Custom Elements specs were evolved from V0 to V1. And I expect to see new specifications being adopted as there are still gaps (which we’ll discuss later) in the architecture. Let’s look at the examples I like: ● Declarative Shadow DOM ● CSS Modules V1 ● Scoped Custom Element Registries ● CSS Shadow Parts
  • 14. Shadow DOM - brief introduction
  • 15. CSS inside Shadow DOM – How to load it? CSS defined inside shadow DOM is scoped to it. Style rules don't leak out and page styles don't bleed in. But how should I load styles for my markup? Two options here: ● Constructible Stylesheets (Chrome only, future spec) ● Loading via <link> or <style> tag (performance hit)
  • 16. CSS inside Shadow DOM – Performance hit Time, ms
  • 17. CSS inside Shadow DOM – Performance hit Devices count Time, ms
  • 18. CSS inside Shadow DOM – Way to load it now ● Include only CSS your component really need (extra CSS causes performance issues) ● Keep WCs related CSS inside JS bundle to prevent FOUC ● How to inject CSS: 1. If available: Use Constructible Stylesheets, for Chrome users (~70% of desktop users) 2. If Firefox: Use <link> with CSS Blob (Until Mozilla will fix this issue) 3. Else: Use inline CSS via <style> tag (Webkit has optimization for this)
  • 20. Server Side Rendering (SSR) It’s theoretically possible to fully render WC at server side (and it even works for simple ones), but... There is no stable implementation yet, as well as way to represent Shadow DOM in HTML 😟 But guys are actively working on a solution. So what should we do then…? 🤯
  • 21. Server Side Rendering (SSR) - YAGNI YAGNI! Keep your content in Light DOM, put WC related code to client bundle and communicate via DOM attributes/props/events. Treat your WCs as native HTML elements. You can agree that you’re not rendering Shadow DOM for example for <input type="text"> element. If components are well designed, crawlers do not need a flattened tree to get text contents. And use ARIA attributes to add semantic meaning to your custom elements <good-components>hello world</good-components> // It’s shadow tree is using a slot to get text contents <bad-components></bad-components> // "hello world" is hard-coded in its shadow tree.
  • 22. Server Side Rendering (SSR) - YAGNI <x-tab-group aria-label="My test tabs"> <x-tab role="tab" slot="tab">Title for tab 1</x-tab> <x-tab-panel role="tabpanel" slot="panel">Content 1</x-tab-panel> <x-tab role="tab" slot="tab">Title for tab 2</x-tab> <x-tab-panel role="tabpanel" slot="panel">Content 2</x-tab-panel> <x-tab role="tab" slot="tab">Title for tab 3</x-tab> <x-tab-panel role="tabpanel" slot="panel">Content 3</x-tab-panel> </x-tab-group>
  • 23. Server Side Rendering (SSR) - Experimental way But if you really want somehow render your web components, try to experiment with prerendering (medium complexity) or real server side rendering (hard complexity). But keep in mind that serialization (including Shadow DOM) and hydration is up to you to implement. Also server side Web API implementation needed for SSR. Take a look at the Stencil and SkateJS implementation (scan QR codes).
  • 25. Versioning – What’s wrong with it? Currently (and it will likely remain) all WCs must be registered in global registry. So you can’t have 2 versions of the same component on a single page. This follows approach that Browser use for the DOM, you have single version of it at a time. This may become an issue if you have multiple teams working on different apps at the same website (microservices at frontend pattern).
  • 26. Versioning – Options we have Let’s look at the options we have here: 1. Never do breaking changes. This is the principle that Browsers use. And while it’s possible to do it and it even may be the best option to start with, it’s obvious that it contradicts to the principle “fail fast, fail safe” and doesn’t facilitate innovations. 2. Tag based versioning. So instead of having <x-button> you would have <x-button-v1> to accommodate further major versions. So if Microservice 1 requires button@1.1.5 and Microservice 2 requires button@1.2.1 – button@1.2.1 only will be used. And if MS1 needs v1.1.5 and MS2 needs 2.0 – both components will be registered. 3. Microservice based scoping. So instead of having <x-button> you would have <x-button-mymicroservice>
  • 28. Our use case & concerns ● Browser support 🙂 (good) ● Frameworks compatibility 😀 (very good) ● SSR + SEO 🧐 (non trivial, needs verification) ● Styling 😅(good, but can be better) ● Accessibility 😀 (very good) ● Versioning 🙃 (tricky) ● Delivery 😎 (no major changes) ● Solution of choice 😜 (your choice, try LitElement first) ● Integration path 😜 (your choice)
  • 29. Bonus point Don’t try to get rid of your favourite framework
  • 30. Web Components vs Frameworks To be short: they’re different. Don’t try to replace good old frameworks like Vue.js or React with Web Components. Use cases for Web Components: ● Design System / Pattern library implementation ○ Especially valuable if you have to deal with multiple frameworks or want it to be used by your B2B clients. ● Use them internally to build next-gen framework 😅 ○ Like Google did with AMP and Ionic made Stencil ● Bring our own use case 🙋‍♂
  • 31. Thank you for coming, you rock 🔥 🤘
  • 32. Vlad Fedosov Director of R&D @Namecheap, Inc vlad.fedosov@gmail.com Slides: Or just scan it: Related article: bit.ly/2lYh8eB bit.ly/2mRZCJa