{"id":2612,"date":"2019-02-18T17:30:51","date_gmt":"2019-02-18T17:30:51","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2612"},"modified":"2023-07-18T11:51:44","modified_gmt":"2023-07-18T15:51:44","slug":"5-reasons-web-components-are-perfect-for-design-systems","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems","title":{"rendered":"5 Reasons Web Components Are Perfect for Design Systems"},"content":{"rendered":"<p><em>This post is contributed by Kevin Ports, designer and front-end developer at Ionic. He&#8217;s passionate about pixels, code, and the space in between.<\/em><\/p>\n<p>If you\u2019re building a handful of apps in a startup or small business, delivering a consistent user experience across teams and projects is relatively easy. But if you represent a global corporation with hundreds of developers and designers distributed throughout the world, enforcing a set of design standards can get messy. Having a Design System can help.<\/p>\n<p>A Design System is a centralized library of components that can be shared across teams and projects to simplify design and development while ensuring consistent brand experiences, at scale. In some cases, a Design System is nothing more than a collection of visual design specs. But for the purposes of this post, we\u2019re going to talk about Design Systems as a collection of real-code components that front-end developers drop in their projects like Lego blocks, to quickly build new user experiences without having to worry about the core design of each component.<\/p>\n<p>The HubSpot team, a pioneer in Design Systems, <a href=\"https:\/\/product.hubspot.com\/blog\/how-building-a-design-system-empowers-your-team-to-focus-on-people-not-pixels\" rel=\"noopener\" target=\"_blank\">explains<\/a> why this is valuable:<\/p>\n<blockquote><p>\n  <em>&#8220;That\u2019s the beauty of building a design system. By deciding on a detail once, you free up your entire product development team to focus on solving actual customer problems.&#8221;<\/em><\/p><\/blockquote>\n<p>Of course, for <a href=\"https:\/\/medium.com\/hubspot-product\/people-over-pixels-b962c359a14d\" rel=\"noopener\" target=\"_blank\">HubSpot<\/a>, it took 34+ designers and over two years of work to perfect their Design System. For most businesses, that kind of commitment just isn\u2019t feasible.<\/p>\n<p>Enter: Web Components. In this post, I\u2019ll explain the five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.<br \/>\n<!--more--><\/p>\n<h2>1. They work everywhere<\/h2>\n<p>Web Components use a set of standardized APIs that are natively supported in all modern browsers. These UI components run on nearly all mobile devices and desktop browsers today.<\/p>\n<p>Through the use of a hybrid mobile framework like Ionic, you can deploy Web Components across just about any platform or device, from native iOS and Android apps, to Electron and desktop web apps, or even Progressive Web Apps.<\/p>\n<p>For anyone building a Design System, the big benefit of this is that it finally addresses the need for a <a href=\"https:\/\/www.figma.com\/blog\/state-of-design-systems-2018\/#_6-today-it-s-design-vs-code-but-tomorrow-it-ll\" rel=\"noopener\" target=\"_blank\">single source of truth<\/a>\u2014one standardized library that works everywhere.<\/p>\n<h2>2. They&#8217;re easy to customize<\/h2>\n<p>By definition, a Design System implies a customized collection of UI components that match your specific brand standards and style guidelines. While there are no limits to what your designers can conceptualize, implementing those customizations in some development environments and frameworks can be tricky.<\/p>\n<p>For example, let\u2019s say you\u2019re using React Native to build a mobile application and you want to change the border around a button. If React Native doesn\u2019t open up customization for that border, you\u2019d be unable to modify it without going directly into the native implementation to manually program it. That doesn\u2019t mean you can\u2019t change the border, it just means it will be harder to do so in some situations. Check out <a href=\"https:\/\/ionicframework.com\/resources\/articles\/ionic-vs-react-native-a-comparison-guide\" rel=\"noopener\" target=\"_blank\">our guide comparing Ionic and React Native<\/a> for more on this topic.<\/p>\n<p>In contrast, Web Components can be styled and customized to match any design pattern you want to achieve. With the simple use of HTML, JavaScript, CSS, you can build a library of UI components that match whatever your designers dream up. You can start with a ready-made Web Component library like Ionic and then customize from there, or use a tool like <a href=\"https:\/\/stenciljs.com\/\" rel=\"noopener\" target=\"_blank\">Stencil<\/a> to build your own Web Components from scratch.<\/p>\n<h2>3. They help drive adoption<\/h2>\n<p>A Design System is only valuable to the extent that it\u2019s actually adopted by your team. Having a brilliant style guide that is widely praised but always ignored is of no value. Web Components can help to address this challenge in a few key ways.<\/p>\n<p>First, the simplicity of Web Components (just a few lines of HTML) makes development faster and easier. And, because they run on any platform or device, a single library will serve any development project. All of that adds up to a great developer experience. And happy developers are more likely to adopt your Design System.<\/p>\n<p>Second, if you\u2019re using Ionic\u2019s library of components, we offer solutions to help drive adoption, like building your own collection of robust developer docs (modeled after our own world-class Docs) and tools like <a href=\"https:\/\/ionicframework.com\/studio\" rel=\"noopener\" target=\"_blank\">Studio<\/a>, which offers a customizable library of components that developers can drop right into their development project.<\/p>\n<h2>4. They&#8217;re future-proof<\/h2>\n<p>Perhaps the most appealing benefit of Web Components is that they liberate us from the highly volatile landscape of front-end frameworks and tooling. By using a consistent set of web standards, Web Components are not dependent on a specific front-end framework like Angular, React, or Vue. Sure, you can use Web Components with any of these frameworks, and we encourage you to do so in order to take advantage of the many benefits they provide. But, the great thing is that you won\u2019t be dependent on that framework for your components to work.<\/p>\n<p>This is awesome news for development teams. First, as much as we love the hot frameworks of today, who knows what tomorrow will bring? By choosing Web Components, you insulate yourself from the threat of tech churn and no longer have to worry about picking the right horse.<\/p>\n<p>Second, you will give your development teams the flexibility to choose the underlying frameworks and tools that they prefer. One of the great challenges of implementing a universal Design System is getting all of your development teams to standardize on just one set of technologies. Given the varied interests of most developers, that pretty much guarantees that someone will be unhappy because their tool of choice wasn\u2019t selected. With Web Components, each team can use what works best for them, giving them complete freedom to use the tools they love\u2014today and tomorrow.<\/p>\n<h2>5. There are plenty of WC libraries to leverage<\/h2>\n<p>Building a Design System from scratch is no easy task. I already mentioned that it took the HubSpot team two years and over 34 designers to build their Design System.<\/p>\n<p>The great news is that there are already a number of Web Component-based UI libraries out there for you to start with: Ionic being one of the biggest and most well known. In fact, as our CEO, Max, argued in <a href=\"https:\/\/ionicframework.com\/build-your-next-design-system-with-web-components\/\" rel=\"noopener\" target=\"_blank\">his post<\/a> from a few weeks ago, Ionic is a Design System. You can start with our library of components and easily customize them to suit your needs.<\/p>\n<h2>How to get started<\/h2>\n<p>If you\u2019re ready to start building a Design System with Web Components, start by checking out our library of totally free, <a href=\"https:\/\/ionicframework.com\/docs\/components\/\" rel=\"noopener\" target=\"_blank\">open source UI components<\/a>. Or schedule a <a href=\"https:\/\/ionicframework.com\/strategysession\" rel=\"noopener\" target=\"_blank\">Strategy Session<\/a> with one of our team members to see how Ionic can help you build a customized Design System that your developers will love.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post is contributed by Kevin Ports, designer and front-end developer at Ionic. He&#8217;s passionate about pixels, code, and the space in between. If you\u2019re building a handful of apps in a startup or small business, delivering a consistent user experience across teams and projects is relatively easy. But if you represent a global corporation [&hellip;]<\/p>\n","protected":false},"author":61,"featured_media":2613,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123,223],"tags":[140,76,82],"class_list":["post-2612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-perspectives","category-stencil","tag-design-systems","tag-stencil","tag-web-components"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 Reasons Web Components Are Perfect for Design Systems - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Reasons Web Components Are Perfect for Design Systems\" \/>\n<meta property=\"og:description\" content=\"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-18T17:30:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:51:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kevin Ports\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@kevinports\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin Ports\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\"},\"author\":{\"name\":\"Kevin Ports\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/1cad0078ff6faff112e729442fe51012\"},\"headline\":\"5 Reasons Web Components Are Perfect for Design Systems\",\"datePublished\":\"2019-02-18T17:30:51+00:00\",\"dateModified\":\"2023-07-18T15:51:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\"},\"wordCount\":1164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png\",\"keywords\":[\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"Perspectives\",\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\",\"url\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\",\"name\":\"5 Reasons Web Components Are Perfect for Design Systems - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png\",\"datePublished\":\"2019-02-18T17:30:51+00:00\",\"dateModified\":\"2023-07-18T15:51:44+00:00\",\"description\":\"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png\",\"width\":1440,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Reasons Web Components Are Perfect for Design Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/1cad0078ff6faff112e729442fe51012\",\"name\":\"Kevin Ports\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/kports-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/kports-150x150.jpg\",\"caption\":\"Kevin Ports\"},\"sameAs\":[\"https:\/\/x.com\/kevinports\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/kevinports\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Reasons Web Components Are Perfect for Design Systems - Ionic Blog","description":"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems","og_locale":"en_US","og_type":"article","og_title":"5 Reasons Web Components Are Perfect for Design Systems","og_description":"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.","og_url":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems","og_site_name":"Ionic Blog","article_published_time":"2019-02-18T17:30:51+00:00","article_modified_time":"2023-07-18T15:51:44+00:00","og_image":[{"width":1440,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","type":"image\/png"}],"author":"Kevin Ports","twitter_card":"summary_large_image","twitter_creator":"@kevinports","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Kevin Ports","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems"},"author":{"name":"Kevin Ports","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/1cad0078ff6faff112e729442fe51012"},"headline":"5 Reasons Web Components Are Perfect for Design Systems","datePublished":"2019-02-18T17:30:51+00:00","dateModified":"2023-07-18T15:51:44+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems"},"wordCount":1164,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","keywords":["Design Systems","stencil","web components"],"articleSection":["Perspectives","Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems","url":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems","name":"5 Reasons Web Components Are Perfect for Design Systems - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","datePublished":"2019-02-18T17:30:51+00:00","dateModified":"2023-07-18T15:51:44+00:00","description":"Five reasons why Web Components are the perfect way to quickly bootstrap a new Design System, with a future-proof design that will benefit you for years to come.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","width":1440,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/5-reasons-web-components-are-perfect-for-design-systems#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"5 Reasons Web Components Are Perfect for Design Systems"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/1cad0078ff6faff112e729442fe51012","name":"Kevin Ports","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/kports-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/kports-150x150.jpg","caption":"Kevin Ports"},"sameAs":["https:\/\/x.com\/kevinports"],"url":"https:\/\/ionic.io\/blog\/author\/kevinports"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/02\/5-reasons-web-components-design-systems.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2612"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2612\/revisions"}],"predecessor-version":[{"id":4726,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2612\/revisions\/4726"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2613"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}