{"id":2359,"date":"2019-04-03T14:47:49","date_gmt":"2019-04-03T12:47:49","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2359"},"modified":"2019-04-03T14:47:49","modified_gmt":"2019-04-03T12:47:49","slug":"angular-react-vue-js-and-co","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/","title":{"rendered":"Angular, React, Vue.Js and Co."},"content":{"rendered":"<div class=\"article\">\n<hr>\n<div style=\"font-size:14px\">\n<b style=\"font-weight: bold\">Table of Contents<\/b><\/p>\n<p>This blog post is part of an article series about Micro Apps:<\/p>\n<ul class=\"toc\">\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2017\/12\/28\/a-software-architect-s-approach-towards-using-angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx\">A Software Architect's Approach Towards Using Angular (And SPAs In General) For Microservices Aka Microfrontends<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">Micro Apps With Web Components Using Angular Elements<\/a><\/li>\n<li>\n    <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/08\/19\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.aspx\">Angular, React, Vue.Js and Co. peacefully united thanks to Micro Apps and Web Components<\/a>\n<\/li>\n<\/ul>\n<p><b style=\"font-weight: bold\">Related series about Web Components with Angular Elements:<\/b><\/p>\n<ul class=\"toc\">\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/13\/angular-elements-part-i-a-dynamic-dashboard-in-four-steps-with-web-components.aspx\">Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/29\/angular-elements-part-ii-lazy-and-external-web-components.aspx\">Angular Elements, Part II: Lazy And External Web Components<\/a><\/li>\n<li><a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/07\/06\/angular-elements-without-zone-js.aspx\">Angular Elements, Part III: Angular Elements without Zone.js<\/a><\/li>\n<\/ul>\n<\/div>\n<hr>\n<p><b><a href=\"https:\/\/github.com\/manfredsteyer\/Angular_MicroApps_Different_Technologies\">Source Code<\/a><\/b><\/p>\n<p>In my article <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">Micro Apps With Web Components Using Angular Elements<\/a> I'm showing how to leverage Angular Elements and Web Components to implement a modern Micro Apps architecture. It shows a shell that loads individual Micro Apps that can be developed as well as deployed separately. Those Micro Apps are provided as Web Components and loaded dynamically at runtime.<\/p>\n<p>In this article I'm going one step further: I'm using different technologies for different micro apps.<\/p>\n<p>Of course, you don't do something like this just for fun. It's rather necessary if your application evolves for a long time like one decade or more and if you have several UI teams. In this case, each team can go with the \"best\" technology for their part and you have not to stick with your original technology decision for ten years or longer.<\/p>\n<h2 id=\"case-study\">Case Study<\/h2>\n<p>To show how to mix and match technologies, I'm using an extend version of the case study from my last post:<\/p>\n<p><img decoding=\"async\" width=\"100%\" src=\"https:\/\/i.imgur.com\/Y6OuQrs.png\" alt=\"Using several technologies in one app\"><\/p>\n<p>Here, you see a shell application with an Angular-based Micro App containing a Vue-based and a VanillaJS-based widget.<\/p>\n<p>You can also mix and match technologies at macro-level for providing different micro apps:<\/p>\n<p><img decoding=\"async\" width=\"100%\" src=\"https:\/\/i.imgur.com\/ffvl4vu.png\" alt=\"Mixing technologies at macro level\"><\/p>\n<p>Besides this, each Micro App can also run standalone:<\/p>\n<p><img decoding=\"async\" width=\"100%\" style=\"max-width:800px\" src=\"https:\/\/i.imgur.com\/TOoXa7j.png\" alt=\"Micro Apps in standalone mode\"><\/p>\n<p>This is important because it allows for separate development, testing and deployment or to put it in another way: You are minimizing dependencies between different UI teams.<\/p>\n<h2 id=\"wrapping-a-micro-app-in-a-web-component\">Wrapping a Micro App in a Web Component<\/h2>\n<p>For wrapping the Angular parts of my example in Web Components, I'm using Angular Elements. <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">Further information<\/a> about this can be found in my article <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">here<\/a>.<\/p>\n<p>For the Vue.JS part, I'm directly using the native Custom Elements API. As an alternative, you could also use the build-in option for providing Web Components which is available since version 3. However, while it seems to be a good fit for widgets, I felt I needed more flexibility for wrapping a whole micro app which also uses the router or other libraries.<\/p>\n<p>The next listing shows how to use the Custom Elements API for wrapping the Micro App:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> Booking <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/components\/Booking.vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> initRouter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/initRouter.js'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> store <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'..\/SimpleStore.js'<\/span>;\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-keyword\">class<\/span> FlightBooking <span class=\"hljs-keyword\">extends<\/span> HTMLElement {\n\n    <span class=\"hljs-keyword\">get<\/span> appState() {\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">this<\/span>._appState;\n    }\n\n    <span class=\"hljs-keyword\">set<\/span> appState(value) {\n        <span class=\"hljs-keyword\">this<\/span>._appState = value;\n        <span class=\"hljs-keyword\">this<\/span>.vue.$data.appState = value;\n    }\n\n    <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">get<\/span> observedAttributes() {\n        <span class=\"hljs-keyword\">return<\/span> [<span class=\"hljs-string\">'app-state'<\/span>];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        <span class=\"hljs-keyword\">this<\/span>.appState = <span class=\"hljs-built_in\">JSON<\/span>.parse(newValue);\n    }\n\n    <span class=\"hljs-keyword\">constructor<\/span>(<span class=\"hljs-params\"><\/span>) {\n        <span class=\"hljs-keyword\">super<\/span>();\n        <span class=\"hljs-keyword\">this<\/span>.attachShadow({ mode: <span class=\"hljs-string\">'open'<\/span> });\n        <span class=\"hljs-keyword\">this<\/span>.render();\n    }\n\n    render() {\n\n        <span class=\"hljs-keyword\">const<\/span> cssBase = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'!to-string-loader!css-loader!..\/assets\/css\/bootstrap.min.css'<\/span>);\n        <span class=\"hljs-keyword\">const<\/span> cssTheme = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'!to-string-loader!css-loader!..\/assets\/css\/paper-dashboard.css'<\/span>)\n\n        <span class=\"hljs-keyword\">this<\/span>.shadowRoot.innerHTML = <span class=\"hljs-string\">`\n            &lt;style&gt;<span class=\"hljs-subst\">${cssBase}<\/span>&lt;\/style&gt;\n            &lt;style&gt;<span class=\"hljs-subst\">${cssTheme}<\/span>&lt;\/style&gt;\n\n            &lt;div id=\"component\"&gt;&lt;\/div&gt;\n        `<\/span>;\n\n        <span class=\"hljs-keyword\">const<\/span> router = initRouter();\n\n        <span class=\"hljs-keyword\">const<\/span> handleMessageEvent = <span class=\"hljs-function\">(<span class=\"hljs-params\">msg<\/span>) =&gt;<\/span> {\n            <span class=\"hljs-keyword\">this<\/span>.dispatchEvent(<span class=\"hljs-keyword\">new<\/span> CustomEvent(<span class=\"hljs-string\">'message'<\/span>, { detail: msg }));\n        }\n\n        <span class=\"hljs-keyword\">this<\/span>.vue = <span class=\"hljs-keyword\">new<\/span> Vue({\n            router, \n            data: { \n                store,\n                appState: <span class=\"hljs-keyword\">this<\/span>.appState\n            },\n            render(r) {\n                <span class=\"hljs-keyword\">return<\/span> r(Booking, {\n                    props: {\n                        appState: <span class=\"hljs-keyword\">this<\/span>.appState\n                    },\n                    on: {\n                        message: handleMessageEvent\n                    }\n                });\n            } \n        });\n\n        <span class=\"hljs-keyword\">const<\/span> comp = <span class=\"hljs-keyword\">this<\/span>.shadowRoot.getElementById(<span class=\"hljs-string\">'component'<\/span>);\n        <span class=\"hljs-keyword\">this<\/span>.vue.$mount(comp);\n    }\n\n}\n<\/div><\/code><\/pre>\n<p>The Web Component is just a subclass of <code>HtmlElement<\/code>. For the communication with the shell, all my Micro Apps come with an <code>appState<\/code> property and a <code>message<\/code> event. For instance, the <code>appState<\/code> contains the passenger and flight in question and the message event informs the system when a flight has been booked.<\/p>\n<p>I'm also syncing the <code>app-state<\/code> attribute with the <code>appState<\/code> property. Every time the <code>appState<\/code> changes, I'm passing it to the current Vue object.<\/p>\n<p>By means of <code>attachShadow<\/code> I'm using Shadow DOM which isolates the component's layout from the rest of the application. Simply spoken, this prevents a global CSS from destroying the component's layout.<\/p>\n<p>The <code>render<\/code> method displays the component by leveraging Vue. To load some CSS instructions just for the component, it creates an own style tag. The CSS itself is loaded using webpack's <code>to-string-loader<\/code> and <code>css-loader<\/code>. They have to be npm-installed separately.<\/p>\n<p>The Vue object gets a configured router, a data object with values for the component (e. g. the <code>appState<\/code>) and a <code>render<\/code> method.<\/p>\n<p>The latter one is a bit confusing. If you would rewrite it using a html element with data binding expressions it would look like this:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">booking<\/span> <span class=\"hljs-attr\">:app-state<\/span>=<span class=\"hljs-string\">\"appState\"<\/span> @<span class=\"hljs-attr\">message<\/span>=<span class=\"hljs-string\">\"handleMessageEvent\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">booking<\/span>&gt;<\/span>\n<\/div><\/code><\/pre>\n<p>For using such a template, we'd need the Vue template compiler at runtime.<\/p>\n<p>However, to get the best performance, it's a best practice to precompile Vue-templates. Hence, we don't need not to put the Vue compiler into our bundles.<\/p>\n<p>While the Vue CLI automatically precompiles all template in vue files we have to provide this render function in our wrapping Web Component instead of the template to get rid of the compiler at runtime.<\/p>\n<h2 id=\"registering-web-components\">Registering Web Components<\/h2>\n<p>To register this web component alongside another one wrapping the basked shown above, we just call <code>customElements.define<\/code> in the application's entry point which is normally called <code>main.js<\/code>:<\/p>\n<pre class=\"hljs\"><code><div><span class=\"hljs-keyword\">import<\/span> Vue <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue'<\/span>\n<span class=\"hljs-keyword\">import<\/span> FlightBookingCE <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/custom-elements\/FlightBookingCE.js'<\/span>\n<span class=\"hljs-keyword\">import<\/span> FlightBasketCE <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/custom-elements\/FlightBasketCE.js'<\/span>\n<span class=\"hljs-keyword\">import<\/span> VueRouter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'vue-router'<\/span>\n\nVue.use(VueRouter);\n\ncustomElements.define(<span class=\"hljs-string\">'flight-booking'<\/span>, FlightBookingCE);\ncustomElements.define(<span class=\"hljs-string\">'flight-basket'<\/span>, FlightBasketCE);\n<\/div><\/code><\/pre>\n<p>We can also use this entry point to register plugins like the router.<\/p>\n<p>To get the bundles, just call the VUE.js CLI: <code>vue-cli-service build<\/code>.<\/p>\n<p>This command gives us two bundles we need to load together. To load them, we can dynamically create script tags and tags for the web components as shown <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">here<\/a>.<\/p>\n<h2 id=\"summary\">Summary<\/h2>\n<p>Micro Apps and Web Components allow for mixing different technologies. This can be important for applications developed over a long time and\/or by different UI teams. You can use the \"best\" technology for each part of the application and you don't need to stick with your technology decision forever.<\/p>\n<p>[1] <a href=\"https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx\">https:\/\/www.angulararchitects.io\/post\/2018\/05\/04\/microservice-clients-with-web-components-using-angular-elements-dreams-of-the-near-future.aspx<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Peacefully United thanks to Micro Apps and Web Components<\/p>\n","protected":false},"author":9,"featured_media":3012,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular, React, Vue.Js and Co. - ANGULARarchitects<\/title>\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.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular, React, Vue.Js and Co. - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Peacefully United thanks to Micro Apps and Web Components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-03T12:47:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1069\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Angular, React, Vue.Js and Co.\",\"datePublished\":\"2019-04-03T12:47:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\"},\"wordCount\":856,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\",\"name\":\"Angular, React, Vue.Js and Co. - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg\",\"datePublished\":\"2019-04-03T12:47:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg\",\"width\":2000,\"height\":1069},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular, React, Vue.Js and Co.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular, React, Vue.Js and Co. - ANGULARarchitects","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.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/","og_locale":"en_US","og_type":"article","og_title":"Angular, React, Vue.Js and Co. - ANGULARarchitects","og_description":"Peacefully United thanks to Micro Apps and Web Components","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/","og_site_name":"ANGULARarchitects","article_published_time":"2019-04-03T12:47:49+00:00","og_image":[{"width":2000,"height":1069,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Angular, React, Vue.Js and Co.","datePublished":"2019-04-03T12:47:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/"},"wordCount":856,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/","name":"Angular, React, Vue.Js and Co. - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg","datePublished":"2019-04-03T12:47:49+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/angular-react-vue-js-and-co-peacefully-united-thanks-to-micro-apps-and-web-components.jpg","width":2000,"height":1069},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/angular-react-vue-js-and-co\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Angular, React, Vue.Js and Co."}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=2359"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/3012"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}