Let’s Architect! Architecting for front end

{"value":"Many workloads in the cloud need a front-end interface for interacting with APIs, either for populating content or for consuming it. This edition of Let’s Architect! shows you how to scale your front-end applications and serve data across multiple devices.\n\n\n#### **[Micro-frontend Architectures on AWS](https://aws.amazon.com/blogs/architecture/micro-frontend-architectures-on-aws/)**\n\n\nMicro-frontends are the technical representation of a business subdomain, they allow independent implementations with the same or different technology.\n\nThey help minimize the code shared with other subdomains and are owned by a single team. This blog post shows you how to apply client-side rendering micro-frontends in AWS.\n\n\n\nMicroservices backend with the micro-frontends\n\n\n#### **[Building serverless micro frontends at the edge](https://www.youtube.com/watch?v=fT-5RHTtFNg)**\n\n\nMicroservice architectures use techniques like canary releases or blue-green deployments to reduce the blast radius of issues deployed in production. In this video, you’ll learn how Ryanair scaled their front-end practice across their website and how to implement these techniques using [Lambda@Edge](https://aws.amazon.com/lambda/edge/) and [Amazon CloudFront](https://aws.amazon.com/cloudfront/).\n\n\n\nA serverless architecture designed using [AWS Step Functions](https://aws.amazon.com/cn/step-functions/?trk=cndc-detail) for SEO integration of micro-frontends\n\n\n#### **[Introduction to GraphQL](https://www.youtube.com/watch?v=zxvaE1b9x_w)**\n\n\nMany companies build APIs with [GraphQL](https://graphql.org/) because it gives front-end developers the ability to query multiple databases, microservices, and APIs with a single GraphQL endpoint.\n\nThis video introduces asynchronous APIs, GraphQL, and the most common architectural patterns to work with. It also provides a starting point for understanding the differences between REST and GraphQL as well as mental models to identify the right tool for each job.\n\n\n\nSome recommended practices to consider while getting a GraphQL API into production\n\n\n#### **[Mocking and Testing Serverless APIs with AWS Amplify](https://www.youtube.com/watch?v=OxrHplxZ8BA)**\n\n\nThis video covers how to write successful tests against an API backend using [AWS Amplify](https://aws.amazon.com/amplify/). Amplify speeds up the development of your front-end and serverless backend applications.\n\nThanks to its low-code approach, you can focus on writing the business logic of your applications without the need to create the plumbing between services. If you need to add more configurations using Amplify, review its [custom resources](https://aws.amazon.com/blogs/mobile/extend-amplify-backend-with-custom-aws-resource-using-aws-cdk-or-cloudformation/).\n\n\n\nThe Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage cloud services for your application\n\n\n#### **See you next time!**\n\n\nThanks for reading! See you in a couple of weeks when we discuss technological lock-in.\n\n\n#### **Other posts in this series**\n\n- [Let’s Architect! Using open-source technologies on AWS](https://aws.amazon.com/blogs/architecture/lets-architect-using-open-source-technologies-on-aws/)\n- [Let’s Architect! Architecting for Sustainability](https://aws.amazon.com/blogs/architecture/lets-architect-1-architecture-and-sustainability/)\n- [Let’s Architect! Architecting for Machine Learning](https://aws.amazon.com/blogs/architecture/architecting-for-machine-learning/)\n- [Let’s Architect! Architecting for Security](https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-security/)\n- [Let’s Architect! Tools for Cloud Architects](https://aws.amazon.com/blogs/architecture/lets-architect-tools-for-cloud-architects/)\n- [Let’s Architect! Architecting for Blockchain](https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-blockchain/)\n- [Let’s Architect! Architecting microservices with containers](https://aws.amazon.com/blogs/architecture/lets-architect-architecting-microservices-with-containers/)\n- [Let’s Architect! Serverless architecture on AWS](https://aws.amazon.com/blogs/architecture/lets-architect-serverless-architecture-on-aws/)\n- [Let’s Architect! Creating resilient architecture](https://aws.amazon.com/blogs/architecture/lets-architect-creating-resilient-architecture/)\n- [Let’s Architect! Architecting for governance and management](https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-governance-and-management/)\n\n\n#### **Looking for more architecture content?**\n\n\n[AWS Architecture Center](https://aws.amazon.com/architecture/) provides reference architecture diagrams, vetted architecture solutions, [Well-Architected](https://aws.amazon.com/architecture/well-architected/) best practices, patterns, icons, and more!\n\n\n\n\n\n#### **Luca Mezzalira**\n\n\nLuca is Principal Solutions Architect based in London. He has authored several books and is an international speaker. He lent his expertise predominantly in the solution architecture field. Luca has gained accolades for revolutionizing the scalability of front-end architectures with micro-frontends, from increasing the efficiency of workflows, to delivering quality in products.\n\n\n\n\n#### **Laura Hyatt**\nLaura Hyatt is a Solutions Architect for AWS Public Sector and helps Education customers in the UK. Laura helps customers not only architect and develop scalable solutions but also think big on innovative solutions facing the education sector at present. Laura's specialty is IoT, and she is also the Alexa SME for Education across EMEA.\n\n\n\n\n#### **Vittorio Denti**\n\n\nVittorio Denti is a Solutions Architect at AWS based in London. After completing his M.Sc. in Computer Science and Engineering at Politecnico di Milano (Milan) and the KTH Royal Institute of Technology (Stockholm), he joined AWS. Vittorio has a background in Distributed Systems and Machine Learning, and a strong interest in cloud technologies. He’s especially passionate for software engineering, building ML solutions, and putting ML into production.\n\n\n\n\n#### **Zamira Jaupaj**\n\n\nZamira is an Enterprise Solutions Architect based in the Netherlands. She is highly passionate IT professional with over 10 years of multi-national experience in designing and implementing critical and complex solutions with containers, serverless, and data analytics for small and enterprise companies.","render":"<p>Many workloads in the cloud need a front-end interface for interacting with APIs, either for populating content or for consuming it. This edition of Let’s Architect! shows you how to scale your front-end applications and serve data across multiple devices.</p>\n<h4><a id=\\"Microfrontend_Architectures_on_AWShttpsawsamazoncomblogsarchitecturemicrofrontendarchitecturesonaws_3\\"></a><strong><a href=\\"https://aws.amazon.com/blogs/architecture/micro-frontend-architectures-on-aws/\\" target=\\"_blank\\">Micro-frontend Architectures on AWS</a></strong></h4>\n<p>Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with the same or different technology.</p>\n<p>They help minimize the code shared with other subdomains and are owned by a single team. This blog post shows you how to apply client-side rendering micro-frontends in AWS.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/2def07d151a544e8a30926d3d033d600_image.png\\" alt=\\"image.png\\" /></p>\n<p>Microservices backend with the micro-frontends</p>\n<h4><a id=\\"Building_serverless_micro_frontends_at_the_edgehttpswwwyoutubecomwatchvfT5RHTtFNg_15\\"></a><strong><a href=\\"https://www.youtube.com/watch?v=fT-5RHTtFNg\\" target=\\"_blank\\">Building serverless micro frontends at the edge</a></strong></h4>\n<p>Microservice architectures use techniques like canary releases or blue-green deployments to reduce the blast radius of issues deployed in production. In this video, you’ll learn how Ryanair scaled their front-end practice across their website and how to implement these techniques using <a href=\\"https://aws.amazon.com/lambda/edge/\\" target=\\"_blank\\">Lambda@Edge</a> and <a href=\\"https://aws.amazon.com/cloudfront/\\" target=\\"_blank\\">Amazon CloudFront</a>.</p>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/b34cbc746a9a4627975adc07dc0874e1_image.png\\" alt=\\"image.png\\" /></p>\n<p>A serverless architecture designed using AWS Step Functions for SEO integration of micro-frontends</p>\n<h4><a id=\\"Introduction_to_GraphQLhttpswwwyoutubecomwatchvzxvaE1b9x_w_25\\"></a><strong><a href=\\"https://www.youtube.com/watch?v=zxvaE1b9x_w\\" target=\\"_blank\\">Introduction to GraphQL</a></strong></h4>\n<p>Many companies build APIs with <a href=\\"https://graphql.org/\\" target=\\"_blank\\">GraphQL</a> because it gives front-end developers the ability to query multiple databases, microservices, and APIs with a single GraphQL endpoint.</p>\\n<p>This video introduces asynchronous APIs, GraphQL, and the most common architectural patterns to work with. It also provides a starting point for understanding the differences between REST and GraphQL as well as mental models to identify the right tool for each job.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/4ec4c4de60ba4a73a5b0b240ebcbb66e_image.png\\" alt=\\"image.png\\" /></p>\n<p>Some recommended practices to consider while getting a GraphQL API into production</p>\n<h4><a id=\\"Mocking_and_Testing_Serverless_APIs_with_AWS_AmplifyhttpswwwyoutubecomwatchvOxrHplxZ8BA_37\\"></a><strong><a href=\\"https://www.youtube.com/watch?v=OxrHplxZ8BA\\" target=\\"_blank\\">Mocking and Testing Serverless APIs with AWS Amplify</a></strong></h4>\n<p>This video covers how to write successful tests against an API backend using <a href=\\"https://aws.amazon.com/amplify/\\" target=\\"_blank\\">AWS Amplify</a>. Amplify speeds up the development of your front-end and serverless backend applications.</p>\\n<p>Thanks to its low-code approach, you can focus on writing the business logic of your applications without the need to create the plumbing between services. If you need to add more configurations using Amplify, review its <a href=\\"https://aws.amazon.com/blogs/mobile/extend-amplify-backend-with-custom-aws-resource-using-aws-cdk-or-cloudformation/\\" target=\\"_blank\\">custom resources</a>.</p>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/2bb457eaf12d4f9aacca85a56a559766_image.png\\" alt=\\"image.png\\" /></p>\n<p>The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage cloud services for your application</p>\n<h4><a id=\\"See_you_next_time_49\\"></a><strong>See you next time!</strong></h4>\\n<p>Thanks for reading! See you in a couple of weeks when we discuss technological lock-in.</p>\n<h4><a id=\\"Other_posts_in_this_series_55\\"></a><strong>Other posts in this series</strong></h4>\\n<ul>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-using-open-source-technologies-on-aws/\\" target=\\"_blank\\">Let’s Architect! Using open-source technologies on AWS</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-1-architecture-and-sustainability/\\" target=\\"_blank\\">Let’s Architect! Architecting for Sustainability</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/architecting-for-machine-learning/\\" target=\\"_blank\\">Let’s Architect! Architecting for Machine Learning</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-security/\\" target=\\"_blank\\">Let’s Architect! Architecting for Security</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-tools-for-cloud-architects/\\" target=\\"_blank\\">Let’s Architect! Tools for Cloud Architects</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-blockchain/\\" target=\\"_blank\\">Let’s Architect! Architecting for Blockchain</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-architecting-microservices-with-containers/\\" target=\\"_blank\\">Let’s Architect! Architecting microservices with containers</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-serverless-architecture-on-aws/\\" target=\\"_blank\\">Let’s Architect! Serverless architecture on AWS</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-creating-resilient-architecture/\\" target=\\"_blank\\">Let’s Architect! Creating resilient architecture</a></li>\\n<li><a href=\\"https://aws.amazon.com/blogs/architecture/lets-architect-architecting-for-governance-and-management/\\" target=\\"_blank\\">Let’s Architect! Architecting for governance and management</a></li>\\n</ul>\n<h4><a id=\\"Looking_for_more_architecture_content_69\\"></a><strong>Looking for more architecture content?</strong></h4>\\n<p><a href=\\"https://aws.amazon.com/architecture/\\" target=\\"_blank\\">AWS Architecture Center</a> provides reference architecture diagrams, vetted architecture solutions, <a href=\\"https://aws.amazon.com/architecture/well-architected/\\" target=\\"_blank\\">Well-Architected</a> best practices, patterns, icons, and more!</p>\\n<p><img src=\\"https://dev-media.amazoncloud.cn/2583855f467f47a6a039d5e04ca4c7a2_image.png\\" alt=\\"image.png\\" /></p>\n<h4><a id=\\"Luca_Mezzalira_78\\"></a><strong>Luca Mezzalira</strong></h4>\\n<p>Luca is Principal Solutions Architect based in London. He has authored several books and is an international speaker. He lent his expertise predominantly in the solution architecture field. Luca has gained accolades for revolutionizing the scalability of front-end architectures with micro-frontends, from increasing the efficiency of workflows, to delivering quality in products.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/94484549ab194045b4d406ad636ceb4b_image.png\\" alt=\\"image.png\\" /></p>\n<h4><a id=\\"Laura_Hyatt_86\\"></a><strong>Laura Hyatt</strong></h4>\\n<p>Laura Hyatt is a Solutions Architect for AWS Public Sector and helps Education customers in the UK. Laura helps customers not only architect and develop scalable solutions but also think big on innovative solutions facing the education sector at present. Laura’s specialty is IoT, and she is also the Alexa SME for Education across EMEA.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/0f9559785f59459b814ba7d8cb6f9f9d_image.png\\" alt=\\"image.png\\" /></p>\n<h4><a id=\\"Vittorio_Denti_92\\"></a><strong>Vittorio Denti</strong></h4>\\n<p>Vittorio Denti is a Solutions Architect at AWS based in London. After completing his M.Sc. in Computer Science and Engineering at Politecnico di Milano (Milan) and the KTH Royal Institute of Technology (Stockholm), he joined AWS. Vittorio has a background in Distributed Systems and Machine Learning, and a strong interest in cloud technologies. He’s especially passionate for software engineering, building ML solutions, and putting ML into production.</p>\n<p><img src=\\"https://dev-media.amazoncloud.cn/b15aef0c49354b5b81dd46d45fa19d97_image.png\\" alt=\\"image.png\\" /></p>\n<h4><a id=\\"Zamira_Jaupaj_100\\"></a><strong>Zamira Jaupaj</strong></h4>\\n<p>Zamira is an Enterprise Solutions Architect based in the Netherlands. She is highly passionate IT professional with over 10 years of multi-national experience in designing and implementing critical and complex solutions with containers, serverless, and data analytics for small and enterprise companies.</p>\n"}