{"id":14128,"date":"2021-04-02T09:00:00","date_gmt":"2021-04-02T07:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=14128"},"modified":"2022-01-05T20:03:10","modified_gmt":"2022-01-05T19:03:10","slug":"microservice-architecture-front-end","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/","title":{"rendered":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience"},"content":{"rendered":"\n<p>If you need to develop highly scalable applications, you need to consider the risks of a badly designed architecture. This is particularly true if your goal is to optimize the <strong>customer experience<\/strong>, adopting a user-centered design approach that is not limited by any technical constraints.&nbsp;<\/p>\n\n\n\n<p><strong>Microservices <\/strong>can help with scalability and flexibility in development projects as they allow large applications to be broken down into smaller services. These communicate with each other through APIs rather than directly through code, making it easier for teams to work simultaneously on different parts of an app.&nbsp;<\/p>\n\n\n\n<p>The result is faster development cycles and more efficient collaboration between developers across multiple teams within an organization. In addition, overall software quality is improved because there are fewer opportunities for bugs when individual components are less tightly coupled together.&nbsp;<\/p>\n\n\n\n<p>In a recent project, NTT DATA developed a complex ecosystem made up of mobile and web apps, in which the whole design process was primarily based on the needs of customers. This was made possible by a microservice-based architecture in the back-end, making front-end design choices extremely flexible and free of technical constraints.<\/p>\n\n\n\n<p>This article demonstrates why such architectures are a winning choice, and how they can help in building scalable applications for both back- and front-end solutions.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-7c481404      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#the-ntt-data-case-study\" class=\"uagb-toc-link__trigger\">The NTT DATA case study<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#the-solution\" class=\"uagb-toc-link__trigger\">The solution<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#building-an-application-as-a-service\" class=\"uagb-toc-link__trigger\">Building an application as a service<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#design-definition\" class=\"uagb-toc-link__trigger\">Design definition<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#mobile-app\" class=\"uagb-toc-link__trigger\">Mobile app<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#front-end-web\" class=\"uagb-toc-link__trigger\">Front-end Web<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#conclusions\" class=\"uagb-toc-link__trigger\">Conclusions<\/a><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-ntt-data-case-study\">The NTT DATA case study<\/h2>\n\n\n\n<p>Before discussing the technologies adopted in more detail, as well as the architectural design choices, let&#8217;s consider a bit of background. NTT DATA is known for providing high-quality <strong>system integration<\/strong> services to its customers, which usually means developing very complex applications, often distributed and in constant evolution.<\/p>\n\n\n\n<p>This process often involves both front-end and back-end development, and some architectural choices can have an impact on both of these areas.<\/p>\n\n\n\n<p>A recent NTT DATA project &#8211; for a company active in the energy market &#8211; required the design of a significant infrastructure to allow the combinaton of several application modules. The goal was to allow users and operators to manage everything to do with the ecosystem of rechargeable electric vehicles.&nbsp;<\/p>\n\n\n\n<p>From a user\u2019s point of view, this meant booking charging stations, checking remaining balance, setting billing options, and so on. As for the operators, the infrastructure needed to allow them to monitor the usage of charging stations, manage users\u2019 tickets and many other similar tasks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-solution\">The solution<\/h3>\n\n\n\n<p>In order to implement such a complex idea, the design choice to <strong>separate front-end and back-end <\/strong>as much as possible is critical. This concept allows the creation of front-end applications that are completely agnostic in regards to the technical needs of back-end technologies.&nbsp;<\/p>\n\n\n\n<p>At the same time, leveraging this paradigm can make such an infrastructure <strong>extremely maintainable<\/strong>, and potentially highly scalable. Once the system is implemented using this paradigm, you can decide to replace a front-end module without affecting the back-end, which is a particular plus when the applications you need to design are quite complex.<\/p>\n\n\n\n<p>NTT DATA implemented these ideas by building a set of <strong>microservices<\/strong>, each of which can be queried for specific data or actions while remaining isolated from the actual client modules (i.e. the front-end).<\/p>\n\n\n\n<p>A microservice architectural style is an approach to developing a single application as a <strong>suite of small services<\/strong>, each running its own process and <a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/backend-dev\/api-economy-code-api-money\/\" class=\"ek-link\">communicating with each other using HTTP<\/a> (typically using the REST paradigm).&nbsp;<\/p>\n\n\n\n<p>These services are independently deployable, and each of them can represent a module of the whole architecture. Consequently, all the infrastructure can be easily made highly scalable.&nbsp;<\/p>\n\n\n\n<p>This was the fundamental idea behind the application system developed by NTT DATA; various client applications (such as mobile apps, or web-based dashboards) can access each of the available microservices via REST API. This idea is depicted in the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"386\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/various-front-end-apps-can-access-a-set-of-independent-microservices.png\" alt=\"various front-end apps can access a set of independent microservices\" class=\"wp-image-14129\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/various-front-end-apps-can-access-a-set-of-independent-microservices.png 512w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/various-front-end-apps-can-access-a-set-of-independent-microservices-300x226.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption><em>The architecture shows how the various front-end apps can access a set of independent microservices.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-building-an-application-as-a-service\">Building an application as a service<\/h2>\n\n\n\n<p>A microservice architecture like the one described above is particularly effective for <strong>front-end development<\/strong>; there&#8217;s no need to worry about what\u2019s inside each microservice, and there are no constraints on the technology you can use. The only thing you need is Internet access and the ability to perform HTTP requests.<\/p>\n\n\n\n<p>Thanks to this facility, the NTT DATA front-end development team could focus solely on the interface design and implementation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-design-definition\">Design definition<\/h3>\n\n\n\n<p>The first problem to solve was understanding what the customer actually needs. To this end, the team started <strong>collecting user feedback<\/strong>, and organizing their ideas in response to the comments received. The team then started mocking up some UIs. The resulting interfaces were <a href=\"https:\/\/www.codemotion.com\/magazine\/dev-hub\/designer-cxo\/multi-armed-bandits-a-better-way-to-a-b-test\/\" class=\"ek-link\">tested<\/a> in order to gather comments on the specific functionalities provided, as well as to <strong>understand the user experience<\/strong> of the various client applications.<\/p>\n\n\n\n<p>Focusing on user needs before starting the actual development is crucial if a team wants to <strong>avoid design issues that may be difficult to fix later in the process<\/strong>. Despite this, many software development teams seem to forget about users, diving straight into development at the risk of building something that is only minimally usable.&nbsp;<\/p>\n\n\n\n<p>Luckily, this was not the case in the NTT project we are focusing on here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/avoid-design-issues.jpg\" alt=\"avoid design issues in UX\" class=\"wp-image-14130\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/avoid-design-issues.jpg 512w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/avoid-design-issues-300x200.jpg 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption><em>Focusing on users\u2019 needs before starting the actual development is essential to avoiding design issues that may be difficult to fix later in the process.<\/em><\/figcaption><\/figure>\n\n\n\n<p>This process produced the design of the mobile and web apps required by the project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-mobile-app\">Mobile app<\/h3>\n\n\n\n<p>The team developed a first version of the mobile app three years ago using <strong>Xamarin<\/strong>, a framework known to allow the development of a cross-platform application with a single codebase. At that time, NTT DATA considered Xamarin a smart solution to avoid the need for two parallel development teams for iOS and Android.<\/p>\n\n\n\n<p>More recently, thanks to experience gained in recent years on other technologies, the team decided to develop the new version of the app using Google&#8217;s <strong>Flutter<\/strong>, which is now considered the best technological choice for cross-platform mobile development framework.<\/p>\n\n\n\n<p>There are many reasons behind this choice. First and foremost, Flutter applications are <strong>more performant<\/strong> by default: Flutter is easy to use with a variety of APIs, and its graphic libraries make it faster and higher performing, especially when <strong>rendering<\/strong> graphic components.<\/p>\n\n\n\n<p>In addition, Flutter allows for a <strong>more rapid development<\/strong>, thanks to a feature &#8211; <a href=\"https:\/\/www.codemotion.com\/magazine\/articles\/events\/flutter-mobile-web-dev\/\" class=\"ek-link\">also known as \u201chot wheel code\u201d<\/a> &#8211; that allows applications to be tested directly on the device and while development is ongoing.<\/p>\n\n\n\n<p>These features make it likely that Flutter will replace Xamarin in such situations &#8211;  NTT DATA shows this is already happening.<\/p>\n\n\n\n<p>It is also worth mentioning that Xamarin still has plus points for anyone who doesn\u2019t want to move into a different programming language, especially if you consider that learning <strong>Dart<\/strong> is necessary for Flutter development. Any developer who already has some knowledge of <strong>C#<\/strong> can easily learn how to develop a Xamarin application.<\/p>\n\n\n\n<p>On the other hand, Flutter allows the creation of mobile applications with the same performance as a native app.<\/p>\n\n\n\n<p>Regardless of the technology used, the main focus of&nbsp; the NTT Data team is the development of high quality mobile apps with extreme performance, that are fluid and stable. The realized product has to offer the best service to the final users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-front-end-web\">Front-end Web<\/h3>\n\n\n\n<p>While mobile apps were intended for the final users, there were two different web applications for this project:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The first was developed with end users in mind, to provide features similar to those of the mobile app<\/li><li>The second was developed to provide a control dashboard directly to the customer.&nbsp;<\/li><\/ol>\n\n\n\n<p>The latter of these web apps needed to be modular to allow for easy integration of future sections.<\/p>\n\n\n\n<p>NTT DATA\u2019s team needed to make a choice from among the three most used <strong>web development frameworks<\/strong> (React, Angular, and Vue).  It is interesting to understand the reasons behind their choice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"288\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/React-Angular-and-Vue.jpg\" alt=\"React, Angular and Vue\" class=\"wp-image-14131\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/React-Angular-and-Vue.jpg 512w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/React-Angular-and-Vue-300x169.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/React-Angular-and-Vue-400x225.jpg 400w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption><em>The NTT DATA team needed to choose from the three most used web development frameworks: React, Angular and Vue.<\/em><\/figcaption><\/figure>\n\n\n\n<p><strong>Angular<\/strong> was immediately excluded; its nature is considered too structured for this particular project. Considering the microservice architecture described above, in this context NTT DATA simply needed a fast way to present data.<\/p>\n\n\n\n<p>The remaining choices, <strong>Vue<\/strong> and <strong>React<\/strong>, were both used. React was used to define the UI of the web app intended for the end users. This choice was supported by the need to provide a richer experience, similar to that offered by the mobile apps.&nbsp;<\/p>\n\n\n\n<p>At the other end, Vue was used to develop the dashboard, chosen primarily for its ability to support faster development in respect to React and Angular.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusions\">Conclusions<\/h2>\n\n\n\n<p>When your focus is on customer experience with a user-centered design approach, the technology used needs to be an enabling factor and not a constraint. That\u2019s why the back-end architecture must support UI design needs; in fact, any <strong>poor architectural design choice might have a significant impact on the end user experience.<\/strong><\/p>\n\n\n\n<p>A microservice-based architecture like that developed by NTT DATA can easily allow the development of front-end applications that are completely agnostic to the technical needs of back-end technologies. This allows teams to focus on user requirements in the design process, with <strong>high flexibility<\/strong>.<\/p>\n\n\n\n<p>Even in terms of <strong>scalability<\/strong>, microservices enable developers to apply significant future changes without compromising the rest of the architecture. Introducing a new client, or completely rewriting an existing one is always possible, making such an infrastructure <strong>extremely maintainable<\/strong>, and potentially highly scalable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you need to develop highly scalable applications, you need to consider the risks of a badly designed architecture. This is particularly true if your goal is to optimize the customer experience, adopting a user-centered design approach that is not limited by any technical constraints.&nbsp; Microservices can help with scalability and flexibility in development projects&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\">Read more<\/a><\/p>\n","protected":false},"author":3,"featured_media":14134,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":6,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3355],"tags":[7085],"collections":[],"class_list":{"0":"post-14128","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-microservices","8":"tag-service-oriented-architecture","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.\" \/>\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.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience\" \/>\n<meta property=\"og:description\" content=\"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-02T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-05T19:03:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vito Gentile\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ViGentile\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vito Gentile\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\"},\"author\":{\"name\":\"Vito Gentile\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\"},\"headline\":\"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience\",\"datePublished\":\"2021-04-02T07:00:00+00:00\",\"dateModified\":\"2022-01-05T19:03:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\"},\"wordCount\":1608,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg\",\"keywords\":[\"Service Oriented Architecture\"],\"articleSection\":[\"Microservices\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\",\"name\":\"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg\",\"datePublished\":\"2021-04-02T07:00:00+00:00\",\"dateModified\":\"2022-01-05T19:03:10+00:00\",\"description\":\"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313\",\"name\":\"Vito Gentile\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g\",\"caption\":\"Vito Gentile\"},\"description\":\"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!\",\"sameAs\":[\"https:\/\/vitogentile.it\",\"https:\/\/www.linkedin.com\/in\/vitogentile\/en\",\"https:\/\/x.com\/ViGentile\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience - Codemotion Magazine","description":"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.","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.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/","og_locale":"en_US","og_type":"article","og_title":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience","og_description":"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.","og_url":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2021-04-02T07:00:00+00:00","article_modified_time":"2022-01-05T19:03:10+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg","type":"image\/jpeg"}],"author":"Vito Gentile","twitter_card":"summary_large_image","twitter_creator":"@ViGentile","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Vito Gentile","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/"},"author":{"name":"Vito Gentile","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313"},"headline":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience","datePublished":"2021-04-02T07:00:00+00:00","dateModified":"2022-01-05T19:03:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/"},"wordCount":1608,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg","keywords":["Service Oriented Architecture"],"articleSection":["Microservices"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/","url":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/","name":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg","datePublished":"2021-04-02T07:00:00+00:00","dateModified":"2022-01-05T19:03:10+00:00","description":"Learn how leading edge front-end technologies and microservices can be adopted to enhance digital customer experience.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/microservices\/microservice-architecture-front-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Discover Leading Edge Front-end Technologies and Microservices Architecture that will enhance Digital Customer Experience"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/f9c99d8dfb99900d709bb8199225d313","name":"Vito Gentile","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ebcb5b885a4f1669578d08a55deb81064893c07c1b35b7b36eb059cce730ae90?s=96&d=mm&r=g","caption":"Vito Gentile"},"description":"I\u2019m a data scientist, tech writer, software developer with experience in mobile, web (full-stack) and Python programming, and former researcher with interests in human-computer interaction. I thus have a multi-faceted experience in the area of software development, and that\u2019s why I love my job(s)!","sameAs":["https:\/\/vitogentile.it","https:\/\/www.linkedin.com\/in\/vitogentile\/en","https:\/\/x.com\/ViGentile"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-600x600.jpg","author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg",1200,628,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-300x157.jpg",300,157,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-768x402.jpg",768,402,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-1024x536.jpg",1024,536,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg",1200,628,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg",1200,628,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX.jpg",100,52,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2021\/03\/Frontend-Techn-and-Microservices-Enhance-CX-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Vito Gentile","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/vito-gentile\/"},"uagb_comment_info":0,"uagb_excerpt":"If you need to develop highly scalable applications, you need to consider the risks of a badly designed architecture. This is particularly true if your goal is to optimize the customer experience, adopting a user-centered design approach that is not limited by any technical constraints.&nbsp; Microservices can help with scalability and flexibility in development projects&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/14128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=14128"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/14128\/revisions"}],"predecessor-version":[{"id":15133,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/14128\/revisions\/15133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/14134"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=14128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=14128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=14128"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=14128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}