DevTools architecture refresh: migrating to Web Components
source link: https://developers.google.com/web/updates/2020/12/migrating-to-web-components
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
DevTools architecture refresh: migrating to Web Components
When DevTools was first created many, many years ago the team chose to build a bespoke UI framework. This was a reasonable choice at the time and has served DevTools well.
But since then various features have landed in the platform and one of those, Web Components, is a great fit for building new UI elements in DevTools. By leaning on what the platform provides we can greatly reduce the amount of bespoke UI code we have to maintain and invest more in building features for DevTools, rather than supporting bespoke infrastructure.
To help with the transition, we created a guide to building UI elements in DevTools to share with the wider DevTools team. Some of the guide is bespoke to DevTools and its architecture, which brings its own set of constraints, but some of it are generic guidelines on the approaches we’ve used to build, structure and test Web Components.
Today, we’re making this document publicly available at goo.gle/building-ui-devtools. If you’ve ever wondered more about how Web Components are used in large, real world applications, or some of the challenges that come with integrating components into a large, pre-existing codebase, this document could help and provide some answers. If you have any questions about our guidelines, feel free to tweet me.
Feedback
To discuss the new features and changes in this post, or anything else related to DevTools:
- File definite bug reports and feature requests at Chromium Bugs.
- Discuss possible features, changes, and bugs on the Mailing List.
- Get help on how to use DevTools on Stack Overflow.
- Tweet us at @ChromeDevTools.
- File bugs on this document in the Web Fundamentals repository.
Discover DevTools engineering content
Below is a list of everything that's been covered in the Chrome DevTools Engineering Blog series.
rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!
Recommend
-
5
Closed Bug 1681890 Opened 2 months ago Closed 24 days ago...
-
3
By ...
-
6
axe DevTools - Web Accessibility TestingOffered by: www.deque.com
-
4
0:00 / 26:23 ...
-
3
Blog Post Migrating Our Web Codebase from Flow to TypeScript In summer 2021, we migrated our codebase from Flow to TypeScript. There were many reasons for doing this, but the biggest ones were TypeS...
-
2
Optimize Core Web Vitals with Lighthouse and DevTools February 20, 2021 Today, we'll cover some of the tools the Lighthouse & DevTools teams in Chrome worked on to help identify...
-
2
Migrating architecture to the cloudToday’s organizations need to be more agile to respond to customer demands, which requires the ability to quickly scale up to millions of customers and scale down as needed without impacting the budget. Orga...
-
11
Migrating Architecture Blueprints to Jetpack ComposeAs part of our effort to modernize the app architecture guidance, we want to experiment with different UI patterns to...
-
1
›Recent PostsAt PrestoCon Day we heard from Bolt, a ride sharing app with 100 million users across 45 countries in Eastern Europe, who shared why they chos...
-
5
Migrating an Android app to iOS with KMP — Part I: First steps and architecture
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK