{"id":2384,"date":"2018-04-03T15:16:10","date_gmt":"2018-04-03T13:16:10","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=2384"},"modified":"2018-04-03T15:16:10","modified_gmt":"2018-04-03T13:16:10","slug":"a-lightweight-and-solid-approach","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/","title":{"rendered":"A Lightweight And Solid Approach"},"content":{"rendered":"
\n

Even though the word iframe causes bad feelings for most web devs, it turns out that using them for building SPAs for micro services -- aka micro frontends<\/a> -- is a good choice. For instance, they allow for a perfect isolation<\/strong> between clients and for a separate deployment. Because of the isolation they also allow using different SPA frameworks. Besides iframes, there are other approaches to use SPAs in micro service architectures -- of course, each of them has their own pros and cons. A good overview<\/a> can be found here<\/a>. Another great resource comparing the options available is Brecht Billiet<\/a>'s presentation about this topic<\/a>.<\/p>\n

In addition to this, I've written another blog post comparing several approaches by evaluating them against some selected architectural goals<\/a>.<\/p>\n

As Asim Hussain<\/a> shows in this blog article<\/a>, using iframes can also be a nice solution for migrating an existing AngularJS application to Angular.<\/p>\n

For the approach described here, I've written a \"meta router\" to load different spa clients for micro services in iframes. It takes care about the iframe's creation and about synchronizing their routes with the shell's url. It also resizes the iframe dynamically to prevent a scrolling bar within it. The library is written in a framework agnostic way.<\/p>\n

The router can be installed via npm<\/a>:<\/p>\n

npm install meta-spa-router --save\n<\/code><\/pre>\n
The source code and an example<\/a> can be found in my GitHub account<\/a>.<\/p>\n
In the example I'm using VanillaJS for the shell application and Angular for the routed child apps.<\/p>\n
This is how to set up the shell with VanillaJS:<\/p>\n
\n
var<\/span> MetaRouter =<\/span> require<\/span>('<\/span>meta-spa-router'<\/span><\/span>).MetaRouter<\/span>;\n\nvar<\/span> config =<\/span> [\n    {\n        path:<\/span> '<\/span>a'<\/span><\/span>,\n        app:<\/span> '<\/span>\/app-a\/dist'<\/span><\/span>\n    },\n    {\n        path:<\/span> '<\/span>b'<\/span><\/span>,\n        app:<\/span> '<\/span>\/app-b\/dist'<\/span><\/span>\n    }\n];\n\nwindow<\/span>.addEventListener<\/span>('<\/span>load'<\/span><\/span>, function<\/span>() { \n\n    var<\/span> router =<\/span> new<\/span> MetaRouter<\/span>();\n    router<\/span>.config<\/span>(config);\n    router<\/span>.init<\/span>();\n    router<\/span>.preload<\/span>();\n\n    document<\/span>.getElementById<\/span>('<\/span>link-a'<\/span><\/span>)\n            .addEventListener<\/span>('<\/span>click'<\/span><\/span>, function<\/span>() { router<\/span>.go<\/span>('<\/span>a'<\/span><\/span>) });\n\n    document<\/span>.getElementById<\/span>('<\/span>link-b'<\/span><\/span>)\n            .addEventListener<\/span>('<\/span>click'<\/span><\/span>, function<\/span>() { router<\/span>.go<\/span>('<\/span>b'<\/span><\/span>) });\n\n    document<\/span>.getElementById<\/span>('<\/span>link-aa'<\/span><\/span>)\n            .addEventListener<\/span>('<\/span>click'<\/span><\/span>, function<\/span>() { router<\/span>.go<\/span>('<\/span>a'<\/span><\/span>, '<\/span>a'<\/span><\/span>) });\n\n            document<\/span>.getElementById<\/span>('<\/span>link-ab'<\/span><\/span>)\n            .addEventListener<\/span>('<\/span>click'<\/span><\/span>, function<\/span>() { router<\/span>.go<\/span>('<\/span>a'<\/span><\/span>, '<\/span>b'<\/span><\/span>) });        \n\n}); <\/pre>\n<\/div>\n
And here is the HTML for the shell:<\/p>\n
\n
<div<\/span>>\n    <a<\/span> id<\/span>=\"<\/span>link-a\"<\/span><\/span>>Route to A<\/a<\/span>> |\n    <a<\/span> id<\/span>=\"<\/span>link-b\"<\/span><\/span>>Route to B<\/a<\/span>> |\n    <a<\/span> id<\/span>=\"<\/span>link-aa\"<\/span><\/span>>Jump to A within A<\/a<\/span>> |\n    <a<\/span> id<\/span>=\"<\/span>link-ab\"<\/span><\/span>>Jump to B within A<\/a<\/span>>\n<\/div<\/span>>\n\n<!--<\/span> placeholder for routed apps --><\/span><\/span>\n<div<\/span> id<\/span>=\"<\/span>outlet\"<\/span><\/span>><\/div<\/span>><\/pre>\n<\/div>\n
The router creates the iframes as children of the element with the id outlet<\/code> and allows switching between them using the method go<\/code>. As you see in the example, it also allows to jump to a subroute within an application.<\/p>\n
The routed applications use the RoutedApp<\/code> class to establish a connection with the shell. This is necessary to sync the client app's router with the shell's one. As I'm using Angular in my example, I'm registering it as a service. Instead of this, one could also directly instantiate it when going with other frameworks.<\/p>\n
To register this service that comes without Angular Metadata for AOT because its framework agnostic, I'm creating a token in a new file app.tokens.ts<\/code>:<\/p>\n
\n
import<\/span> { RoutedApp<\/span> } from<\/span> '<\/span>meta-spa-router'<\/span><\/span>;\nimport<\/span> { InjectionToken<\/span> } from<\/span> '<\/span>@angular\/core'<\/span><\/span>;\n\nexport<\/span> const<\/span> ROUTED_APP =<\/span> new<\/span> InjectionToken<\/span><RoutedApp<\/span>>('<\/span>ROUTED_APP'<\/span><\/span>);<\/pre>\n<\/div>\n
Then I'm using it to create a service provider for the RoutedApp<\/code> class:<\/p>\n
\n
import<\/span> { RoutedApp<\/span> } from<\/span> '<\/span>meta-spa-router'<\/span><\/span>;\n[...<\/span>]\n\n@NgModule<\/span>({\n  [...<\/span>],  \n  providers: [{ provide: ROUTED_APP<\/span>, useFactory<\/span>: () =><\/span> new<\/span> RoutedApp<\/span>() }],\n  bootstrap: [AppComponent<\/span>]\n})\nexport<\/span> class<\/span> AppModule<\/span> { }\n<\/pre>\n<\/div>\n
In the AppComponent<\/code> I'm getting hold of a RoutedApp<\/code> instance by using dependency injection:<\/p>\n
\n
\/\/<\/span> app.component.ts in routed app<\/span>\n<\/span>\nimport<\/span> { Router<\/span>, NavigationEnd<\/span> } from<\/span> '<\/span>@angular\/router'<\/span><\/span>;\nimport<\/span> { Component<\/span> } from<\/span> '<\/span>@angular\/core'<\/span><\/span>;\nimport<\/span> { filter<\/span> } from<\/span> '<\/span>rxjs\/operators'<\/span><\/span>;\nimport<\/span> { RoutedApp<\/span> } from<\/span> '<\/span>meta-spa-router'<\/span><\/span>;\n\n@Component<\/span>({\n  selector: '<\/span>app-root'<\/span><\/span>,\n  templateUrl: '<\/span>.\/app.component.html'<\/span><\/span>,\n  styleUrls: ['<\/span>.\/app.component.css'<\/span><\/span>]\n})\nexport<\/span> class<\/span> AppComponent<\/span> {\n  title =<\/span> '<\/span>app'<\/span><\/span>;\n\n  constructor<\/span>(\n    private<\/span> router<\/span>:<\/span> Router<\/span>, \n    @Inject<\/span>(ROUTED_APP<\/span>) private<\/span> routedApp<\/span>:<\/span> RoutedApp<\/span>) {\n    this<\/span>.initRoutedApp<\/span>();\n  }\n\n  initRoutedApp() {\n\n    this<\/span>.routedApp<\/span>.config<\/span>({ appId: '<\/span>a'<\/span><\/span> });\n    this<\/span>.routedApp<\/span>.init<\/span>();\n\n    this<\/span>.router<\/span>.events<\/span>.pipe<\/span>(filter<\/span>(e<\/span> =><\/span> e<\/span> instanceof<\/span> NavigationEnd<\/span>)).subscribe<\/span>((e<\/span>:<\/span> NavigationEnd<\/span>) =><\/span> {\n      this<\/span>.routedApp<\/span>.sendRoute<\/span>(e<\/span>.url<\/span>);\n    });\n\n    this<\/span>.routedApp<\/span>.registerForRouteChange<\/span>(url<\/span> =><\/span> this<\/span>.router<\/span>.navigateByUrl<\/span>(url<\/span>));\n  }\n\n}<\/pre>\n<\/div>\n
I'm assigning an appId<\/code> which is by convention the same as the child app's path in the shell. In addition to that, I'm also synchronizing the meta router with the child's apps one.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Towards Micro Frontends (Micro Service Clients) With Angular And\/Or Other Frameworks<\/p>\n","protected":false},"author":9,"featured_media":2997,"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-2384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"\nA Lightweight And Solid Approach - 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\/a-lightweight-and-solid-approach\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Lightweight And Solid Approach - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Towards Micro Frontends (Micro Service Clients) With Angular And\/Or Other Frameworks\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-03T13:16:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\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=\"4 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\/a-lightweight-and-solid-approach\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"A Lightweight And Solid Approach\",\"datePublished\":\"2018-04-03T13:16:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\"},\"wordCount\":454,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\",\"name\":\"A Lightweight And Solid Approach - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"datePublished\":\"2018-04-03T13:16:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg\",\"width\":1280,\"height\":853},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Lightweight And Solid Approach\"}]},{\"@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":"A Lightweight And Solid Approach - 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\/a-lightweight-and-solid-approach\/","og_locale":"en_US","og_type":"article","og_title":"A Lightweight And Solid Approach - ANGULARarchitects","og_description":"Towards Micro Frontends (Micro Service Clients) With Angular And\/Or Other Frameworks","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/","og_site_name":"ANGULARarchitects","article_published_time":"2018-04-03T13:16:10+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"A Lightweight And Solid Approach","datePublished":"2018-04-03T13:16:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/"},"wordCount":454,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/","name":"A Lightweight And Solid Approach - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","datePublished":"2018-04-03T13:16:10+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2019\/04\/blog-2355684-1280.jpg","width":1280,"height":853},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/a-lightweight-and-solid-approach\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"A Lightweight And Solid Approach"}]},{"@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\/2384","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=2384"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/2384\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/2997"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=2384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=2384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=2384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}