{"id":1438,"date":"2021-04-26T12:58:33","date_gmt":"2021-04-26T12:58:33","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?p=1438"},"modified":"2021-04-26T12:58:34","modified_gmt":"2021-04-26T12:58:34","slug":"web-components-part-2","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/","title":{"rendered":"Web Components (Part 2) \u2013 Integration into React"},"content":{"rendered":"\n

In the first part of this series <\/a> we looked at how to build your own web components. Now, let\u2019s take a look at the integration in React applications.<\/p>\n\n\n\n

According to their idea, web components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.<\/a>\u200b Why this is so and how to solve the problem is explained in more detail below.<\/p>\n\n\n\n

In principle, web components can also be fully used in React. However, in certain cases additional effort is required and deviate from the usual React conventions. Usage is no longer necessarily what React developers would expect.<\/p>\n\n\n\n

Essentially, there are two problem areas: On the one hand, it is the problem \u201cAttribute vs. Properties\u201d, which we will address in this article. On the other hand, there is the problem of \u201ccustom events\u201d \u2013 this is discussed in the next part of this series.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Description of the problem \u201eAttribute vs. Properties\u201c<\/h2>\n\n\n\n

As we saw in the first part of the series, there are two ways to pass data to a Web component \u2013 as an HTML attribute or as a JavaScript property.<\/p>\n\n\n\n

In this code example, the value is defined as an attribute in HTML:<\/p>\n\n\n\n

<my-component value=\"something\"><\/my-component><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Here, on the other hand, the property of the same name is set using JavaSript:<\/p>\n\n\n\n
const myComponent = document.createElement(\"my-component\")\n\nmyComponent.value = \"something\"<\/pre>\n\n\n\n
<\/div>\n\n\n\n
In JavaScript, however, it is also possible to explicitly set the attribute:<\/p>\n\n\n\n
myComponent.setAttribute(\"value\", \"something\")<\/pre>\n\n\n\n
<\/div>\n\n\n\n
JavaScript is more flexible in this respect, because in HTML only attributes are possible \u2013 properties cannot be set in HTML.<\/p>\n\n\n\n
It is important to understand: Whether and how attributes and properties are processed or taken into account by the component is entirely up to the implementation of the component. While there is a best practice<\/a>\u200b, to offer both attributes and properties and keep them in sync, technically, no one is bound to do so. It would therefore be possible to accept either only attributes or properties, or to give them completely different names (which would certainly cause the resentment of the users of the component).<\/p>\n\n\n\n
On the other hand, however, there are also solid reasons for deliberately deviating<\/a> from this best practice in some cases.<\/p>\n\n\n\n
An important factor is that attributes and properties have different power: Attributes only allow values that can be represented as a string, i. e. strings and numbers. In addition, Boolean values can be represented by the presence or absence of an attribute. More complex data such as JavaScript objects or functions cannot be passed as an attribute, or would have to be serialized.<\/p>\n\n\n\n
JavaScript properties naturally do not have this limitation. However, properties have the disadvantage that they are always imperative and not declarative when used. Instead of simply declaring, as with HTML, which state you want to have, you have to use commands to set properties in sequence. From a developer\u2019s point of view, this is rather unattractive, because frameworks such as React and (with slight derogations) Angular have made you accustomed to the benefits of declarative work.<\/p>\n\n\n\n
Another difference between attributes and properties concerns performance: Both attributes and properties are used not only to input data into the component from outside, but also to access component information. A nice example of this is the standard HTML tag <video>, which offers the current playback position of the video being played using the JavaScript property \u201ccurrentTime\u201d. When querying these properties, you get the position in seconds as a decimal number. A matching HTML attribute does not exist. Otherwise, such an attribute would have to be constantly updated with the current playback time, which would be a relatively expensive operation in the DOM. The query via a JavaScript property, on the other hand, can be solved quite efficiently, since a Lazy-Getter method can be implemented for this purpose, which is only triggered when the position is actually queried.<\/p>\n\n\n\n
In web components, we have two different mechanisms for a very similar purpose, but they are quite different in some respects.<\/p>\n\n\n\n
Attribute<\/strong><\/td>Properties<\/strong><\/td><\/tr>
declarative<\/td>imperative<\/td><\/tr>
String, Number, Boolean<\/td>String, Number, Boolean, Date, Object, Function<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
React Props<\/h2>\n\n\n\n
With React, things look a little more straightforward: React only knows so-called \u201cprops\u201d. Since React places a strong focus on declarative programming, the use of HTML attributes is similar:<\/p>\n\n\n\n
<MyComponent value=\"something\" \/><\/pre>\n\n\n\n
<\/div>\n\n\n\n
However, React props are not limited to certain data types, but allow transfer of arbitrary data and functions. For this purpose, a syntax with curved brackets is used instead of quotation marks:<\/p>\n\n\n\n
<MyComponent\n    aDate={ new Date() }\n    aNumber={ 12 }\n    aComplexObject={ {firstname: \"Hugo\", lastname: \"Meier\" } }\n    aFunction={ () => console.log(\"some action\") }\n\/><\/pre>\n\n\n\n
<\/div>\n\n\n\n
In a way, React combines the positive aspects of attributes and properties in a single concept. <\/p>\n\n\n\n
In the component, the data arrives in a \u201cprops\u201d object, which contains the passed values as key value pairs:<\/p>\n\n\n\n
const MyComponent = (props) => {\n    const aDate = props.aDate\n    const aNumber = props.aNumber\n    const aComplexObject = props.aComplexObject\n    const aFunction = props.aFunction\n    \/\/...\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Or a little more compact by means of destructurin<\/a>\u200bg:<\/a><\/p>\n\n\n\n
const MyComponent = ({ aDate, aNumber, aComplexObject, aFunction}) => {\n    \/\/ ...\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
As a React developer I have to say that I personally like the React variant with props much better than the distinction between attributes and properties with their respective characteristics in web components \u2013 but this is a matter of taste.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Web Components in React<\/h2>\n\n\n\n
Now the API of web components is just as it is. So the question is: What happens when I use a web component in React? Are \u201cprops\u201d passed to the web component as attributes or properties?<\/p>\n\n\n\n
Initially, React decides whether the tag is case-sensitive or not, and whether it is a React component (starting with uppercase letters) or an HTML tag, which includes web components. With the exception of some special cases for some standard HTML tags, React Props always uses \u201csetAttributes\u201d for HTML tags and web components. This means that using attributes in web components in React does not cause any problems. It is different when JavaScript properties have to be explicitly used, e. g. because complex data or functions are to be added to the Web Component. React is currently unable to do this in a declarative way. In about 90% of cases, this is not a problem because, as already mentioned above, it is considered best practice to keep attributes and properties synchronous, and to support both variants if possible. Only in the remaining 10% of cases where properties are necessary (because either the authors of the Web Component did not follow the best practice, or some other reason prevents the use of attributes) do we have to come up with something.<\/p>\n\n\n\n
However, this does not mean that such web components cannot be used in React at all! We simply cannot go down the usual, purely declaratory path, but must resort to the mandatory API, which is also supported by React. We will look at how this works in the following.<\/p>\n\n\n\n
React abstracts from concrete instances of DOM nodes. Even independently of web components, you have to access DOM nodes directly in some cases, for example if you want to call a method like \u201c.focus()\u201d. For this purpose, React uses so-called \u201crefs\u201d and we can use this mechanism to set JavaScript properties on our web components. In the code, for example, it looks like this:<\/p>\n\n\n\n
import React, { useRef, useEffect } from \"react\"\n\nconst MyReactComponent = () => {\n    const elementRef = useRef(null)\n\n    useEffect(() => {\n        if(elementRef.current) {\n            elementRef.current.someProperty = \"value\"\n        }\n    }, [elementRef])\n\n    return <my-custom-element ref={elementRef} \/>\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
With “const elementRef = useRef(null)<\/code>” we create a kind of container into which React will put the reference to the DOM node after it has been made. “useEffect<\/code>\u200b” can be used to execute a function once certain variables have been changed. To do this, we give the “elementRef\u200b<\/code>” variable (wrapped into an array) as a second parameter to the\u200b “useEffect<\/code>“-Hook-function. As soon as React has rendered the component for the first time, the specified function is executed, so our property is set accordingly. As you can see, the code is a lot more complicated than just setting an attribute directly on the tag. The example shows, however, that it is possible to use web components in React. In the fourth part of this series of articles, we will look at another variant, which scales better especially for larger applications where certain web components are to be used again and again. In the next article in the series, however, we will then take a closer look at the second problem of web components with React: The processing of custom events.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
As an interim conclusion, the situation of web components with React is complicated. On the one hand, React is ideally suited for the development of comprehensive web applications and is therefore widely used. On the other hand, it is extremely annoying that React has such problems with a modern web technology like web components.<\/p>\n\n\n\n
There are at least two reasons for this: On the one hand, React was created at a time when web components or \u201ccustom elements\u201d were still a mere idea and far from being implemented in practice. At the same time, the React team places great emphasis on backward compatibility and understandably shies away from incompatible changes in the way React components are written. The discussion about which options are available to make React compatible with web components can be followed if you are interested in the issue tracker of the project<\/a>\u200b.<\/p>\n\n\n\n
The second factor I want to highlight is: The concepts of web components and React are quite different when it comes to how components are used. React is designed entirely for declarative programming, while web components and standard HTML tags provide a mixed form that is partly declarative, but in some places imperative. And since React developers like this declarative character of React, it is not the solution to simply blindly adopt the imperative API of web components. Instead, ways need to be found to enable these two \u201cworlds\u201d to work together. Unfortunately, the process of finding a solution has been going on for quite some time now, and in the meantime the discussion within the React-developer community seems to have fallen asleep a bit.<\/p>\n\n\n\n
It is therefore only to be hoped that this process will pick up speed again, so that web components can be used in React projects easily and without any hassle.  <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
According to their idea, Web Components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.\u200b Why this is so and how to solve the problem is explained in this blog post.<\/p>\n","protected":false},"author":70,"featured_media":1182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[8],"tags":[261,298,309,398,612,675,696,697,698,699,700,702,703,704],"topics":[701],"class_list":["post-1438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-angular","tag-web-components","tag-react","tag-web","tag-web-application","tag-zeiss-digital-innovation","tag-attribute","tag-properties","tag-attribute-vs-properties","tag-props","tag-react-props","tag-web-applications","tag-ui-components","tag-spa-frameworks-2","topics-web-components"],"acf":[],"yoast_head":"\nWeb Components (Teil 2) - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"In principle, with some effort Web Components can also be fully used in React. This blog posts explains how that works.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Components (Part 2) \u2013 Integration into React\" \/>\n<meta property=\"og:description\" content=\"According to their idea, Web Components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.\u200b Why this is so and how to solve the problem is explained in this blog post.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-26T12:58:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-26T12:58:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1182\" \/>\n\t<meta property=\"og:image:height\" content=\"666\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manuel Mauky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Web Components (Part 2) \u2013 Integration into React\" \/>\n<meta name=\"twitter:description\" content=\"According to their idea, Web Components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.\u200b Why this is so and how to solve the problem is explained in this blog post.\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manuel Mauky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/\",\"name\":\"Web Components (Teil 2) - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"datePublished\":\"2021-04-26T12:58:33+00:00\",\"dateModified\":\"2021-04-26T12:58:34+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/9ebfb0f3f562d20f6156630b4d1e5ff5\"},\"description\":\"In principle, with some effort Web Components can also be fully used in React. This blog posts explains how that works.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"width\":1182,\"height\":666},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Components (Part 2) \u2013 Integration into React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/9ebfb0f3f562d20f6156630b4d1e5ff5\",\"name\":\"Manuel Mauky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg\",\"caption\":\"Manuel Mauky\"},\"description\":\"Manuel has been working as a software developer at ZEISS Digital Innovation in G\u00f6rlitz since 2010. In addition to Java, he mainly deals with JavaScript and TypeScript and the development of modern web applications. He is also interested in functional programming and regularly gives lectures on these topics. Manuel studied computer science in G\u00f6rlitz and organizes the Java User Group G\u00f6rlitz.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enmanuelmauky\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Components (Teil 2) - ZEISS Digital Innovation Blog","description":"In principle, with some effort Web Components can also be fully used in React. This blog posts explains how that works.","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:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/","og_locale":"en_US","og_type":"article","og_title":"Web Components (Part 2) \u2013 Integration into React","og_description":"According to their idea, Web Components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.\u200b Why this is so and how to solve the problem is explained in this blog post.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/","og_site_name":"Digital Innovation Blog","article_published_time":"2021-04-26T12:58:33+00:00","article_modified_time":"2021-04-26T12:58:34+00:00","og_image":[{"width":1182,"height":666,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","type":"image\/png"}],"author":"Manuel Mauky","twitter_card":"summary_large_image","twitter_title":"Web Components (Part 2) \u2013 Integration into React","twitter_description":"According to their idea, Web Components can be used independently of JavaScript frameworks. While this works with Angular, for example, with just a few steps without problems, the situation with React is unfortunately a bit different.\u200b Why this is so and how to solve the problem is explained in this blog post.","twitter_misc":{"Written by":"Manuel Mauky","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/","name":"Web Components (Teil 2) - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","datePublished":"2021-04-26T12:58:33+00:00","dateModified":"2021-04-26T12:58:34+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/9ebfb0f3f562d20f6156630b4d1e5ff5"},"description":"In principle, with some effort Web Components can also be fully used in React. This blog posts explains how that works.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","width":1182,"height":666},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/web-components-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/"},{"@type":"ListItem","position":2,"name":"Web Components (Part 2) \u2013 Integration into React"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/9ebfb0f3f562d20f6156630b4d1e5ff5","name":"Manuel Mauky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-content\/uploads\/sites\/3\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg","caption":"Manuel Mauky"},"description":"Manuel has been working as a software developer at ZEISS Digital Innovation in G\u00f6rlitz since 2010. In addition to Java, he mainly deals with JavaScript and TypeScript and the development of modern web applications. He is also interested in functional programming and regularly gives lectures on these topics. Manuel studied computer science in G\u00f6rlitz and organizes the Java User Group G\u00f6rlitz.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enmanuelmauky\/"}]}},"author_meta":{"display_name":"Manuel Mauky","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/author\/enmanuelmauky\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi-600x338.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Angular<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Web Components<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">React<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web application<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Attribute<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Properties<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Attribute vs. Properties<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">Props<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">React Props<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">web applications<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">UI components<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/category\/web\/\" class=\"advgb-post-tax-term\">SPA frameworks<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Angular<\/span>","<span class=\"advgb-post-tax-term\">Web Components<\/span>","<span class=\"advgb-post-tax-term\">React<\/span>","<span class=\"advgb-post-tax-term\">web<\/span>","<span class=\"advgb-post-tax-term\">web application<\/span>","<span class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/span>","<span class=\"advgb-post-tax-term\">Attribute<\/span>","<span class=\"advgb-post-tax-term\">Properties<\/span>","<span class=\"advgb-post-tax-term\">Attribute vs. Properties<\/span>","<span class=\"advgb-post-tax-term\">Props<\/span>","<span class=\"advgb-post-tax-term\">React Props<\/span>","<span class=\"advgb-post-tax-term\">web applications<\/span>","<span class=\"advgb-post-tax-term\">UI components<\/span>","<span class=\"advgb-post-tax-term\">SPA frameworks<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5 years ago","modified":"Updated 5 years ago"},"absolute_dates":{"created":"Posted on April 26, 2021","modified":"Updated on April 26, 2021"},"absolute_dates_time":{"created":"Posted on April 26, 2021 12:58 pm","modified":"Updated on April 26, 2021 12:58 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/users\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/comments?post=1438"}],"version-history":[{"count":8,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1438\/revisions"}],"predecessor-version":[{"id":1451,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/posts\/1438\/revisions\/1451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media\/1182"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/media?parent=1438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/categories?post=1438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/tags?post=1438"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/wp-json\/wp\/v2\/topics?post=1438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}