{"id":21060,"date":"2017-07-12T09:45:20","date_gmt":"2017-07-12T08:45:20","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=3348"},"modified":"2022-12-01T08:38:13","modified_gmt":"2022-12-01T07:38:13","slug":"re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/","title":{"rendered":"Re-usable Web Interfaces with client-side Frameworks and Web Components (Part 1)"},"content":{"rendered":"<p>In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage. Why shouldn\u2019t we develop highly interactive applications with standardized user interfaces? To answer this question, we will elaborate fundamental problems with the examples of Angular (2+) and Polymer (1.x).<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Background\" >Background<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Web-Components-and-Polymer\" >Web Components and Polymer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Using-Angular-and-Polymer-together\" >Using Angular and Polymer together<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Problems%E2%80%94A-deeper-view\" >Problems?\u2014A deeper view<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Angular-Rendering-Architecture\" >Angular Rendering Architecture<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Where-are-the-problems-now\" >Where are the problems now?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#A-failing-use-case-%E2%80%93-the-google-chart-element\" >A failing use-case \u2013 the google-chart element<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Background\"><\/span>Background<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the last ten years, the technological progress made interactive web applications more necessary than ever. To reach this goal and to close the gap between needed features and existing technologies of current web standards, client-side web frameworks came up. They often provide functions which go beyond the implementation of user interfaces. For instance, Angular allows us to implement entire Single-Page Applications (SPA). Nevertheless, the main focus of client-side frameworks are of course highly interactive user interfaces.<\/p>\n<p>Therefore, they usually go along with a component based application development where interfaces are divided into enclosed and reusable components. And since they are normally based upon native web technologies, their resulting solutions aren\u2019t far away from each other.<\/p>\n<p>However, from a general point of view, each framework adds an abstraction layer to provide different design patterns and architectures. For instance, Angular uses \u201cangularized\u201c HTML templates for its components while React offers JSX for this purpose. These differences cause incompatibilities and result in interface components that become practically unusable outside the frameworks\u2019 bounds. If we change our web framework, we have to re-implement the majority of our interface components.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Web-Components-and-Polymer\"><\/span>Web Components and Polymer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In contrast to the web frameworks above, <a href=\"https:\/\/www.webcomponents.org\/\" target=\"_blank\" rel=\"noopener\">Web Components<\/a> are a way to implement interface components natively. The topic describes four different specifications named HTML Templates, HTML Imports, Custom Elements and Shadow DOM. Although these specifications are still under an ongoing specification process (except HTML Templates), most modern browsers have already implemented them.<\/p>\n<p>However, the Web Components specifications implicate a loss of programming efficiency. Since the specifications are completely separated, the given ways of communication are limited. For instance, there isn\u2019t a standardised data binding mechanism between Custom Elements and HTML Templates.<\/p>\n<p>For this reason, frameworks like Google\u2019s <a href=\"https:\/\/www.polymer-project.org\/\" target=\"_blank\" rel=\"noopener\">Polymer<\/a> simplify the programming of Web Components. The crucial difference between Polymer and web frameworks like Angular is that Polymer still uses the native specifications. In fact, it just provides an abstraction layer to define Web Components but still uses the native technologies under the hood.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-Angular-and-Polymer-together\"><\/span>Using Angular and Polymer together<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Since there are huge differences between client-side web frameworks and as mentioned above, we want to focus on Angular (2+). Also, we will use Polymer to implement Web Components. However, it isn\u2019t the goal of this post to introduce the usage of Polymer elements within Angular applications. In fact, we want to elaborate problems and their respective backgrounds.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Problems%E2%80%94A-deeper-view\"><\/span>Problems?\u2014A deeper view<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>At first glance, it seems to be obvious that Polymer shouldn\u2019t cause crucial problems. This assumption relies on the fact that it only uses native DOM specification for its communication. Outputs of elements can be read out with events (Change events), whereas inputs can be transmitted via properties (or attributes). Since Angular can listen on events and set properties, we will focus on the communication from the Angular to the Polymer side.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular-Rendering-Architecture\"><\/span>Angular Rendering Architecture<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For better understanding, we have to take a deeper look at the rendering architecture of Angular. A general goal of Angular is the separation of its application logic and the underlying platform (here: the browser). Between these layers, a renderer handles requests and translates them into platform specific code (here: DOM operations). In the figure below, you can see parts of Angular mapped to their corresponding layer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3394\" src=\"https:\/\/www.inovex.de\/blog\/wp-content\/uploads\/2017\/07\/application-logic-1024x630.png\" alt=\"application and platform logic\" width=\"800\" height=\"492\" \/><\/p>\n<p>Besides the fact that Angular can be run in native platform (e.g. using NativeScript) as well, Angular reaches a second goal with the separation of concerns: it can and it does pre-compile its application logic. Main parts of this compilation process are the translation of \u201cangularized\u201c templates into runnable JavaScript code and the extraction of needed information for the change detection mechanism. This results in huge performance boosts since for instance the change detection mechanism can check for differences without comparing values using DOM operations.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Where-are-the-problems-now\"><\/span>Where are the problems now?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you focus on the above figure again, you will recognize that native elements are part of the platform layer, whereas directives are located inside the application layer. This fact shouldn\u2019t surprise you since Directives are Angular\u2019s way to add application logic to elements referenced in its templates (e.g. for DOM elements or Angular components).<\/p>\n<p>So, whenever we use Polymer elements (or Web Components) inside an Angular application, they\u2019re native elements and only part of the platform layer. This means that elements work fine only while they\u2019re independent from functionality provided within Directives (f. e. integration to the change detection). If the element has to be integrated in the application logic, we have to assume unexpected behaviours.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"A-failing-use-case-%E2%80%93-the-google-chart-element\"><\/span>A failing use-case \u2013 the google-chart element<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One example which fails without additional synchronisations between Angular and Polymer occurs if non-primitive types (f. e. objects) are bound to polymer elements\u2019 properties. As an example we&#8217;ll use <a href=\"https:\/\/www.webcomponents.org\/element\/GoogleWebComponents\/google-chart\" target=\"_blank\" rel=\"noopener noreferrer\">Polymer\u2019s google-chart element<\/a> which receives an object containing diagram entries and internally creates charts by passing the data to the <a href=\"https:\/\/developers.google.com\/chart\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Chart API<\/a>. Also the element encapsulates the functionality that diagrams redraw automatically after their entries have changed.<\/p>\n<p>A use-case which integrates the google-chart element inside an Angular application can be seen in <a href=\"https:\/\/github.com\/pfecht\/generator-angular-polymer-demo\" target=\"_blank\" rel=\"noopener noreferrer\">this Repository<\/a>. The element is referenced in an Angular template and its data (containing the entries) is bound via data binding. The data itself is retrieved from the template\u2019s corresponding component.<\/p>\n<p>The element initially draws the diagram. So far so good, but what happens if our data changes afterwards? As mentioned above, the diagram should redraw, but it doesn\u2019t!<\/p>\n<p>The reason is quite clear. JavaScript objects are mutable and because of this, the reference of the data object is identical even after changes. Since we have bound the entire object (respectively its reference) to the google-chart element and Angular doesn\u2019t hold application logic about the element, it ignores the applied change.<\/p>\n<p>On the side of Polymer, we have to notify <a href=\"https:\/\/www.polymer-project.org\/1.0\/docs\/devguide\/data-system#observable-changes\" target=\"_blank\" rel=\"noopener noreferrer\">changes of mutable objects<\/a> explicitly. But since we don\u2019t do this in this example, the element doesn\u2019t redraw. Therefore, we have to call the notification methods after applying changes which can be done within the change detection mechanism. However, since the change detection is part of the application and thus pre-compiled before runtime, we can\u2019t simply manipulate it. In fact, we have to implement the missing logic before Angular renders its application.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The integration of Polymer elements works fine until we have to extend the application logic of Angular at runtime. Since each Polymer element has different behaviour, we have to add functionalities for them individually before the application renders. We have treated one case in which the usage of Angular and Polymer doesn\u2019t work as expected. But there are several other non-trivial areas, especially when talking about forms and their validation.<\/p>\n<p>If we apply the integration aspects known from Angular and Polymer to the general topic of Web Components and web frameworks, we can definitely see a regularity. Whenever frameworks add an abstraction layer to include their architecture and patterns, it results in compatibility issues with native specifications like Web Components.<\/p>\n<p>Because of this, it is the responsibility of framework developers to decide whether their internal functions are reconcilable with the Web Components specifications. In my opinion, no changes will happen until the specification process has been accomplished.<\/p>\n<p>In the second part of this series we will try to solve the problems mentioned. Therefore, we will focus on possible solutions to synchronise between Angular and Polymer. In the meantime, have a look at our <a href=\"https:\/\/www.inovex.de\/de\/leistungen\/modern-web\/\" target=\"_blank\" rel=\"noopener\">web<\/a> and <a href=\"https:\/\/www.inovex.de\/de\/leistungen\/uiux\/\" target=\"_blank\" rel=\"noopener\">UI portfolio<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage. Why shouldn\u2019t we develop highly interactive applications with standardized user interfaces? To answer this question, we will elaborate fundamental problems with the examples of Angular (2+) and Polymer (1.x).<\/p>\n","protected":false},"author":59,"featured_media":13102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[444],"coauthors":[{"id":59,"display_name":"Pascal Fecht","user_nicename":"pfecht"}],"class_list":["post-21060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Interfaces with client-side Frameworks and Web Components (Part 1)<\/title>\n<meta name=\"description\" content=\"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Interfaces with client-side Frameworks and Web Components (Part 1)\" \/>\n<meta property=\"og:description\" content=\"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-12T08:45:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-01T07:38:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2300\" \/>\n\t<meta property=\"og:image:height\" content=\"678\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pascal Fecht\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer-1024x302.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pascal Fecht\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Pascal Fecht\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/\"},\"author\":{\"name\":\"Pascal Fecht\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/8d749cbeb5212517fd4b27c45f5323f5\"},\"headline\":\"Re-usable Web Interfaces with client-side Frameworks and Web Components (Part 1)\",\"datePublished\":\"2017-07-12T08:45:20+00:00\",\"dateModified\":\"2022-12-01T07:38:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/\"},\"wordCount\":1311,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/angular-polymer.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"English Content\",\"General\",\"Infrastructure\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/\",\"name\":\"Web Interfaces with client-side Frameworks and Web Components (Part 1)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/angular-polymer.png\",\"datePublished\":\"2017-07-12T08:45:20+00:00\",\"dateModified\":\"2022-12-01T07:38:13+00:00\",\"description\":\"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/angular-polymer.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/angular-polymer.png\",\"width\":2300,\"height\":678,\"caption\":\"Angular-Polymer-Web-Components Headerbild\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Re-usable Web Interfaces with client-side Frameworks and Web Components (Part 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/8d749cbeb5212517fd4b27c45f5323f5\",\"name\":\"Pascal Fecht\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=gd60589c65d60352f316d07e8c6ba0240\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=g\",\"caption\":\"Pascal Fecht\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/pfecht\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Interfaces with client-side Frameworks and Web Components (Part 1)","description":"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.","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:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/","og_locale":"de_DE","og_type":"article","og_title":"Web Interfaces with client-side Frameworks and Web Components (Part 1)","og_description":"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.","og_url":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2017-07-12T08:45:20+00:00","article_modified_time":"2022-12-01T07:38:13+00:00","og_image":[{"width":2300,"height":678,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png","type":"image\/png"}],"author":"Pascal Fecht","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer-1024x302.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Pascal Fecht","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten","Written by":"Pascal Fecht"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/"},"author":{"name":"Pascal Fecht","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/8d749cbeb5212517fd4b27c45f5323f5"},"headline":"Re-usable Web Interfaces with client-side Frameworks and Web Components (Part 1)","datePublished":"2017-07-12T08:45:20+00:00","dateModified":"2022-12-01T07:38:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/"},"wordCount":1311,"commentCount":1,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png","keywords":["Web"],"articleSection":["English Content","General","Infrastructure"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/","url":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/","name":"Web Interfaces with client-side Frameworks and Web Components (Part 1)","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png","datePublished":"2017-07-12T08:45:20+00:00","dateModified":"2022-12-01T07:38:13+00:00","description":"In the first part of our series we will clear up the differences between web frameworks and Web Components and motivate their common usage.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2017\/08\/angular-polymer.png","width":2300,"height":678,"caption":"Angular-Polymer-Web-Components Headerbild"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/re-usable-web-interfaces-with-client-side-frameworks-and-web-components-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Re-usable Web Interfaces with client-side Frameworks and Web Components (Part 1)"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/8d749cbeb5212517fd4b27c45f5323f5","name":"Pascal Fecht","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=gd60589c65d60352f316d07e8c6ba0240","url":"https:\/\/secure.gravatar.com\/avatar\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/74fdacbda8dec937236631d015771512e6e5d8595fef0200e4533a606147d3d6?s=96&d=retro&r=g","caption":"Pascal Fecht"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/pfecht\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=21060"}],"version-history":[{"count":1,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21060\/revisions"}],"predecessor-version":[{"id":39733,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21060\/revisions\/39733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/13102"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=21060"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=21060"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=21060"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=21060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}