[{"data":1,"prerenderedAt":589},["ShallowReactive",2],{"bootstrap":3,"blog-composable-commerce-with-micro-frontends":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","payment-api-redesigned","Introducing our new Payments API. For humans and agents.","\u003Cp>Introducing our new Payments API. For humans and agents.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":299,"featured":11,"seoMetaTags":300,"layout":364,"blogPostCarousel":484,"_seoMetaTags":550,"authors":584},{"text":279,"isExternal":11,"url":280,"link":281},"Composable commerce with micro frontends.","",{"_modelApiKey":212,"slug":282},"composable-commerce-with-micro-frontends","December 23, 2022",{"name":285,"picture":286},"Filippo Conforti",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614874449-commercelayeravatarsquare212f3f.png","Filippo Conforti — CEO at Commerce Layer",1280,"png",{"x":292,"y":292},0.5,{},[],"circles-three-plus","Micro frontends are an architecture style that extends the composable nature of microservices to the user interface. See them in action and start using micro frontends in your projects today.",{"color":298,"name":8},"gray","portrait",[301,305,309,312,316,319,322,326,330,334,337,341,345,349,353,356,360],{"attributes":302,"tag":303,"content":304},null,"title","Composable Commerce with Micro Frontends",{"attributes":306,"tag":308,"content":302},{"property":307,"content":304},"og:title","meta",{"attributes":310,"tag":308,"content":302},{"name":311,"content":304},"twitter:title",{"attributes":313,"tag":308,"content":302},{"name":314,"content":315},"description","Micro frontends are an architecture style that extends the composable nature of microservices to the user interface. See them in action!",{"attributes":317,"tag":308,"content":302},{"property":318,"content":315},"og:description",{"attributes":320,"tag":308,"content":302},{"name":321,"content":315},"twitter:description",{"attributes":323,"tag":308,"content":302},{"property":324,"content":325},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1671636288-introducing-microfrontends.jpg?auto=format&fit=max&w=1200",{"attributes":327,"tag":308,"content":302},{"property":328,"content":329},"og:image:width","1200",{"attributes":331,"tag":308,"content":302},{"property":332,"content":333},"og:image:height","630",{"attributes":335,"tag":308,"content":302},{"name":336,"content":325},"twitter:image",{"attributes":338,"tag":308,"content":302},{"property":339,"content":340},"og:locale","en",{"attributes":342,"tag":308,"content":302},{"property":343,"content":344},"og:type","article",{"attributes":346,"tag":308,"content":302},{"property":347,"content":348},"og:site_name","Commerce Layer",{"attributes":350,"tag":308,"content":302},{"property":351,"content":352},"article:modified_time","2025-10-08T16:39:59Z",{"attributes":354,"tag":308,"content":302},{"property":355,"content":280},"article:publisher",{"attributes":357,"tag":308,"content":302},{"name":358,"content":359},"twitter:card","summary_large_image",{"attributes":361,"tag":308,"content":302},{"name":362,"content":363},"twitter:site","@commercelayer",[365,371,381,384,390,393,400,403,410,413,416,419,422,427,430,432,435,438,440,443,446,448,451,453,456,459,461,464,467,469,472,475,481],{"_modelApiKey":366,"copy":367,"listStyle":368,"darkTheme":11,"buttons":369,"color":370,"indent":7},"wysiwyg","\u003Cp>During the last few years, headless architectures have gained a lot of traction and are now becoming the new standard for brands looking to build exceptional customer experiences. By separating the frontend layer from the backend, headless commerce promises faster, more scalable, and more secure websites. However, headless backends are still monoliths, and monolithic architectures lack flexibility. Thus, \u003Cstrong>headless commerce has evolved into composable commerce, a design pattern that breaks the backend into several specialized business capabilities\u003C\u002Fstrong>. Each capability is provided by one or more microservices (MS), typically orchestrated by a Backend For Frontend (BFF).\u003C\u002Fp>\n","directional",[],"violet",{"_modelApiKey":372,"border":11,"caption":280,"image":373,"size":380,"darkTheme":11,"rounded":11,"color":370},"image_block",{"url":374,"alt":375,"title":375,"width":376,"height":377,"format":378,"focalPoint":302,"customData":379},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1669734854-the_rise_of_composable_commerce.svg","The rise of composable commerce",1040,352,"svg",{},"standard",{"_modelApiKey":366,"copy":382,"listStyle":368,"darkTheme":11,"buttons":383,"color":370,"indent":11},"\u003Cp>Due to their specialization, microservices are more powerful than their monolithic counterparts and offer more flexibility to build new features, and as a result, the customer experience becomes more optimized. Even so, \u003Cstrong>the frontend also remains monolithic, minimizing the benefits of microservices\u003C\u002Fstrong>. At scale, making changes to a website and evolving the customer experience is not as easy as it should be. There is a tight coupling between everything, and every upgrade forces developers to re-deploy the entire application.\u003C\u002Fp>\n",[],{"_modelApiKey":372,"border":11,"caption":280,"image":385,"size":380,"darkTheme":11,"rounded":11,"color":370},{"url":386,"alt":387,"title":387,"width":376,"height":388,"format":378,"focalPoint":302,"customData":389},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672153993-monolithic.svg","Monolithic product page",563,{},{"_modelApiKey":366,"copy":391,"listStyle":368,"darkTheme":11,"buttons":392,"color":370,"indent":11},"\u003Cp>\u003Cstrong>Enter micro frontends, an architecture style that extends the composable nature of microservices to the user interface.\u003C\u002Fstrong> With \u003Ca href=\"https:\u002F\u002Fmicro-frontends.org\u002F\" target=\"_blank\">micro frontends\u003C\u002Fa> (MFEs), a website or web app is viewed as a collection of self-contained features that are owned by independent cross-functional teams. Each team develops the entire sub-product end-to-end, from the database to the user interface, with a product team putting everything together and \u003Cem>composing\u003C\u002Fem> the desired experience.\u003C\u002Fp>\n",[],{"_modelApiKey":372,"border":11,"caption":280,"image":394,"size":380,"darkTheme":11,"rounded":11,"color":370},{"url":395,"alt":396,"title":396,"width":397,"height":398,"format":378,"focalPoint":302,"customData":399},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672153971-composable.svg","Composable product page",1039,568,{},{"_modelApiKey":366,"copy":401,"listStyle":368,"darkTheme":11,"buttons":402,"color":370,"indent":11},"\u003Ch3>Benefits of micro frontends\u003C\u002Fh3>\n\n\u003Cp>Micro frontends represent the state of the art of modern web development. It's as if microservices and Jamstack met, creating the perfect match. This architectural style has many benefits (and some challenges) which are outlined below.\u003C\u002Fp>\n\n\u003Ch4>1. Faster time to market\u003C\u002Fh4>\n\n\u003Cp>Unlike monolithic websites, micro frontends are individually deployable applications that can be managed by autonomous teams. \u003Cstrong>By eliminating team dependencies, the release management cycle is simplified. This makes shipping new features easier and faster.\u003C\u002Fstrong> For example, the product discovery team can make changes to product listings without depending on the commerce team, which handles inventory, price lists, and promotions. With this level of flexibility, brands can deliver faster time to market and have a huge competitive advantage over those who stay stuck in their traditional workflows.\u003C\u002Fp>\n\n\u003Ch4>2. Simpler code bases\u003C\u002Fh4>\n\n\u003Cp>By definition, \u003Cstrong>micro frontend code bases are smaller, which makes them easier to develop, maintain, and test.\u003C\u002Fstrong> Since each micro frontend can be developed separately from the others, there is less chance of unintentional and inappropriate coupling between components, resulting in cleaner code and separation of concerns.\u003C\u002Fp>\n\n\u003Ch4>3. Better error isolation\u003C\u002Fh4>\n\n\u003Cp>\u003Cstrong>Decoupled code bases and independent dev teams also make debugging much easier and faster.\u003C\u002Fstrong> As an example, if a product image goes wrong, the media team is responsible for fixing that issue. Alternatively, if a promotion fails to trigger at the right time, it is clearly the commerce team's responsibility. Bug fixing on one functionality does not affect the rest of the website, which can keep being deployed independently.\u003C\u002Fp>\n\n\u003Ch4>4. Ease of implementation\u003C\u002Fh4>\n\n\u003Cp>Micro frontends are reusable apps that can be embedded in multiple websites, eliminating the need to reinvent the wheel time and again. \u003Cstrong>You can think of micro frontends as a collection of reusable micro experiences that you can share across different projects.\u003C\u002Fstrong> A great example would be embedding the same shopping cart app into multiple websites, which can be styled according to each site’s stylesheet while keeping the same behavior.\u003C\u002Fp>\n\n\u003Ch4>5. No framework lock-in\u003C\u002Fh4>\n\n\u003Cp>It is possible to develop micro frontends using a variety of technologies and frameworks and combine them into one digital product. Each team can pick the programming language they prefer. You can use React, Vue.js, and Svelte to build the same website. Even though minimizing the number of technologies and sharing common patterns is a good practice for organizations, \u003Cstrong>this framework-agnostic approach future-proofs your stack and gives developers the freedom to always try new things\u003C\u002Fstrong> without being tied to a specific vendor.\u003C\u002Fp>\n\n\u003Ch4>6. Incremental upgrades\u003C\u002Fh4>\n\n\u003Cp>It is common for brands to feel forced into complete overhauls, especially when it comes to legacy code that’s barely functional. Nevertheless, \u003Cstrong>big-bang rewrites are rarely the best choice.\u003C\u002Fstrong> We'd rather \u003Ca href=\"https:\u002F\u002Fmartinfowler.com\u002Fbliki\u002FStranglerFigApplication.html\" target=\"_blank\">strangle the old application\u003C\u002Fa> piece by piece, extracting micro frontends from it until either the monolith "dies" or becomes just another micro frontend with a specialized focus.\u003C\u002Fp>\n",[],{"_modelApiKey":372,"border":11,"caption":280,"image":404,"size":380,"darkTheme":11,"rounded":11,"color":370},{"url":405,"alt":406,"title":406,"width":407,"height":408,"format":378,"focalPoint":302,"customData":409},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1669734569-strangler_pattern.svg","Strangler fig pattern",1501,663,{},{"_modelApiKey":366,"copy":411,"listStyle":368,"darkTheme":11,"buttons":412,"color":370,"indent":11},"\u003Cp>\u003Cstrong>The possibility of progressing incrementally reduces the risk of modernization and guarantees the business continuity you need.\u003C\u002Fstrong> Starting with one micro frontend will give you immediate results. When one team has successfully deployed a feature without any significant changes to the old world, other teams will want to do the same and join the new world. As described in the \u003Cem>Ship of Theseus\u003C\u002Fem> thought exercise, after some iterations the original platform will no longer be the same "ship".\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":414,"listStyle":368,"darkTheme":11,"buttons":415,"color":370,"indent":11},"\u003Ch3>How about the challenges?\u003C\u002Fh3>\n\n\u003Cp>As with any technology, micro frontend architecture has its own challenges, with cross-application communication being one of them. Generally, \u003Cstrong>we suggest that micro frontends communicate as little as possible\u003C\u002Fstrong>, since this often reintroduces the type of inappropriate coupling that we're hoping to prevent.\u003C\u002Fp>\n\n\u003Cp>However, cross-app communication is often necessary when building any site. The thing to keep in mind is preserving independence between micro frontends; \u003Cstrong>just as a shared database across microservices is a bad practice, micro frontends also shouldn’t share any state\u003C\u002Fstrong>. Instead, they should communicate by exchanging messages or events with each other.\u003C\u002Fp>\n\n\u003Cp>Another factor that needs to be considered is visual consistency. It's essential to \u003Cstrong>develop a library of shared, reusable UI components so that everyone uses the same design system\u003C\u002Fstrong> and the website looks consistent.\u003C\u002Fp>\n\n\u003Cp>A few other pitfalls include performance optimization, testing, and the lack of best practices in the fields. Generally speaking, micro frontends require the same development discipline as monolithic code bases. \u003Cstrong>Micro frontends are not foolproof and do not fix the issues of lax code, but they do set developers up for success\u003C\u002Fstrong> by making it easier to make better, more sustainable decisions when building a site.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":417,"listStyle":368,"darkTheme":11,"buttons":418,"color":370,"indent":11},"\u003Ch3>Micro frontends in action\u003C\u002Fh3>\n\n\u003Cp>To demonstrate how micro frontends work, we'll use Commerce Layer to turn this blog post into a shoppable page. Specifically, we will use our new \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdrop-in.js\" target=\"_blank\">drop-in library\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fcommercelayer.github.io\u002Fdrop-in.js\" target=\"_blank\">micro frontends\u003C\u002Fa> to embed shopping cart and checkout functionality with just some HTML markup.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":420,"listStyle":368,"darkTheme":11,"buttons":421,"color":370,"indent":11},"\u003Ch4>Configuration\u003C\u002Fh4>\n\n\u003Cp>As the first step, we need to include our drop-in library and configure an API client. We'll connect an existing \u003Ccode>drop-in-js\u003C\u002Fcode> organization and put a market in scope, which will determine the current price list, active promotions, shipping options, payment gateways, and more. The \u003Ccode>returnUrl\u003C\u002Fcode> parameter within the \u003Ccode>defaultAttributes\u003C\u002Fcode> object will be used to populate the "back to cart" link in the checkout page.\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":424,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"code_block","\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@commercelayer\u002Fdrop-in.js@2\u002Fdist\u002Fdrop-in\u002Fdrop-in.esm.js\">\u003C\u002Fscript>\n\n\u003Cscript>\n\t(function() {\n    window.commercelayerConfig = {\n      clientId: 'kuSKPbeKbU9LG9LjndzieKWRcfiXFuEfO0OYHXKH9J8',\n      scope: 'market:code:usa',\n\t    defaultAttributes: {\n\t      orders: {\n\t        return_url: 'https:\u002F\u002Fcommercelayer.io\u002Fblog\u002Fcomposable-commerce-with-micro-frontends'\n\t      }\n\t    }\n    }\n  }());\n\u003C\u002Fscript>","html","Wide",{"_modelApiKey":366,"copy":428,"listStyle":368,"darkTheme":11,"buttons":429,"color":370,"indent":11},"\u003Ch4>Displaying a price\u003C\u002Fh4>\n\n\u003Cp>Imagine you are showcasing a product and would like to display its price. All you have to do is integrate the following HTML elements in your page:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":431,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Ccl-price code=\"BACKPACKFFFFFF000000XXXX\">\n  \u003Ccl-price-amount type=\"price\">\u003C\u002Fcl-price-amount>\n\u003C\u002Fcl-price>",{"_modelApiKey":366,"copy":433,"listStyle":368,"darkTheme":11,"buttons":434,"color":370,"indent":11},"\u003Cp>Using this SKU code, the drop-in library will fetch the current price from Commerce Layer, as defined in the current market's price list. The price will then be used to populate the HTML element as follows:\u003C\u002Fp>\n\n\u003Cp>\u003Ccl-price code=\"BACKPACKFFFFFF000000XXXX\">\n  \u003Ccl-price-amount type=\"price\">\u003C\u002Fcl-price-amount>\n    \u003Cspan style=\"color: grey;\">← This price comes from Commerce Layer!\u003C\u002Fspan>\n\u003C\u002Fcl-price>\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":436,"listStyle":368,"darkTheme":11,"buttons":437,"color":370,"indent":11},"\u003Ch4>Displaying an availability message\u003C\u002Fh4>\n\n\u003Cp>The following code snippet displays whether a SKU is available or not, along with its delivery lead time when available:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":439,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Ccl-availability code=\"BACKPACKFFFFFF000000XXXX\">\n  \u003Ccl-availability-status type=\"available\">\n    \u003Cspan style=\"color: green;\">Available\u003C\u002Fspan>\n    — ready to be shipped in\n\t\t\u003Ccl-availability-info type=\"min-days\">\u003C\u002Fcl-availability-info> to\n\t\t\u003Ccl-availability-info type=\"max-days\">\u003C\u002Fcl-availability-info>\n\t\tdays\n  \u003C\u002Fcl-availability-status>\n  \u003Ccl-availability-status type=\"unavailable\" style=\"color: red;\">\n    Out of stock\n  \u003C\u002Fcl-availability-status>\n\u003C\u002Fcl-availability>",{"_modelApiKey":366,"copy":441,"listStyle":368,"darkTheme":11,"buttons":442,"color":370,"indent":11},"\u003Cp>Using this element, the drop-in library will retrieve availability information for the related SKU code, based on the current market's inventory model:\u003C\u002Fp>\n\n\u003Cp>\u003Ccl-availability code=\"BACKPACKFFFFFF000000XXXX\">\n  \u003Ccl-availability-status type=\"available\">\n    \u003Cspan style=\"color: green;\">Available\u003C\u002Fspan>\n    — ready to be shipped in\n        \u003Ccl-availability-info type=\"min-days\">\u003C\u002Fcl-availability-info> to\n        \u003Ccl-availability-info type=\"max-days\">\u003C\u002Fcl-availability-info>\n        days\n  \u003C\u002Fcl-availability-status>\n  \u003Ccl-availability-status type=\"unavailable\" style=\"color: red;\">\n    Out of stock\n  \u003C\u002Fcl-availability-status>\n\u003C\u002Fcl-availability>\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":444,"listStyle":368,"darkTheme":11,"buttons":445,"color":370,"indent":11},"\u003Ch4>Embedding a shopping cart\u003C\u002Fh4>\n\n\u003Cp>A shopping cart can be embedded in several ways. One of those is to include a mini cart experience, such as a link that opens a preview of the cart with a nice slide-in effect. To enable this option, we can include a stylesheet that takes care of the required CSS animations:\u003C\u002Fp>\n\n\u003Cp>\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@commercelayer\u002Fdrop-in.js@2\u002Fdist\u002Fdrop-in\u002Fminicart.css\" rel=\"stylesheet\" \u002F>\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":447,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@commercelayer\u002Fdrop-in.js@2\u002Fdist\u002Fdrop-in\u002Fminicart.css\" rel=\"stylesheet\" \u002F>",{"_modelApiKey":366,"copy":449,"listStyle":368,"darkTheme":11,"buttons":450,"color":370,"indent":11},"\u003Cp>The next step is to embed a cart link and a counter that shows the number of items in the shopping cart:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":452,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Ccl-cart-link>\n\t\u003Cspan>Your shopping cart\u003C\u002Fspan> (\u003Ccl-cart-count>\u003C\u002Fcl-cart-count>)\n  \u003Ccl-cart open-on-add=\"true\">\u003C\u002Fcl-cart>\n\u003C\u002Fcl-cart-link>",{"_modelApiKey":366,"copy":454,"listStyle":368,"darkTheme":11,"buttons":455,"color":370,"indent":11},"\u003Cp>Here is what it looks like. To open the cart preview, click the cart link below. The counter (in brackets) will be updated as you add an item to the cart or change its quantity:\u003C\u002Fp>\n\n\u003Cp>\u003Ccl-cart-link>\n    \u003Cspan style=\"text-decoration: underline;\">Your shopping cart\u003C\u002Fspan> (\u003Ccl-cart-count>\u003C\u002Fcl-cart-count>)\n  \u003Ccl-cart open-on-add=\"true\">\u003C\u002Fcl-cart>\n\u003C\u002Fcl-cart-link>\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":457,"listStyle":368,"darkTheme":11,"buttons":458,"color":370,"indent":11},"\u003Ch4>Adding a product to shopping cart\u003C\u002Fh4>\n\n\u003Cp>If the SKU is available, it is possible to add it to the shopping cart. The following element renders an add to cart link:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":460,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Ccl-add-to-cart code=\"BACKPACKFFFFFF000000XXXX\">\n  Add to shopping cart\n\u003C\u002Fcl-add-to-cart>",{"_modelApiKey":366,"copy":462,"listStyle":368,"darkTheme":11,"buttons":463,"color":370,"indent":11},"\u003Cp>By clicking the link below, you'll add the SKU to the shopping cart. The minicart will open, showing the new line item, and the cart counter in the previous section will be incremented:\u003C\u002Fp>\n\n\u003Cp>\u003Ccl-add-to-cart code=\"BACKPACKFFFFFF000000XXXX\" style=\"text-decoration: underline;\">\n  Add to shopping cart\n\u003C\u002Fcl-add-to-cart>\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":465,"listStyle":368,"darkTheme":11,"buttons":466,"color":370,"indent":11},"\u003Ch4>Completing a purchase\u003C\u002Fh4>\n\n\u003Cp>The last step is to click the checkout button within the cart preview or by embedding a checkout link anywhere in your page with the simple snippet below:\u003C\u002Fp>\n",[],{"_modelApiKey":423,"code":468,"showLineNumbers":11,"highlightLines":280,"language":425,"size":426},"\u003Ccl-checkout-link target=\"_blank\">\n  Proceed to checkout\n\u003C\u002Fcl-checkout-link>",{"_modelApiKey":366,"copy":470,"listStyle":368,"darkTheme":11,"buttons":471,"color":370,"indent":11},"\u003Cp>Clicking the checkout link opens our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fmfe-checkout\" target=\"_blank\">hosted checkout application\u003C\u002Fa>, a fully customizable micro frontend allowing you to purchase the featured SKU in just a few clicks:\u003C\u002Fp>\n\n\u003Cp>\u003Ccl-checkout-link target=\"_blank\" style=\"text-decoration: underline; color: #101111;\">\n  Proceed to checkout\n\u003C\u002Fcl-checkout-link>\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":473,"listStyle":368,"darkTheme":11,"buttons":474,"color":370,"indent":11},"\u003Ch3>It's easy to get started!\u003C\u002Fh3>\n\n\u003Cp>Commerce Layer micro frontends are standard web components that can be injected into any webpage, with no coding required.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>If you are moving from a monolithic platform such as Shopify, Magento, Hybris, or Salesforce Commerce Cloud, you can progress incrementally\u003C\u002Fstrong>, starting by replacing your platform's transactional engine. Due to the client-side nature of our micro frontends, you can integrate them directly into existing websites using tools such as Google Tag Manager, Google Optimize, or Optimizely, without even touching your platform's code.\u003C\u002Fp>\n",[],{"_modelApiKey":372,"border":11,"caption":280,"image":476,"size":380,"darkTheme":11,"rounded":11,"color":370},{"url":477,"alt":478,"title":478,"width":397,"height":479,"format":378,"focalPoint":302,"customData":480},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1672160860-gtm.svg","Commerce Layer with Google Tag Manager",503,{},{"_modelApiKey":366,"copy":482,"listStyle":368,"darkTheme":11,"buttons":483,"color":370,"indent":11},"\u003Cp>Additionally, you can consider taking advantage of this new approach outside of your primary ecommerce site. A use case could be to add ecommerce functionality to your customer service app or any microsite. No matter where you start, you should experiment with this new architecture as soon as you can. As your partner, Commerce Layer will be there to offer assistance and support.\u003C\u002Fp>\n",[],{"displayTitle":485,"cta":302,"ctaText":280,"cards":486},"Your next read",[487,506,522,536],{"_modelApiKey":212,"link":488,"subtitle":492,"date":492,"author":493,"additionalAuthors":501,"icon":502,"abstract":503,"tag":504,"displayTitle":489,"cardRatio":299,"featured":505},{"text":489,"isExternal":11,"url":280,"link":490},"Introducing Microstores.",{"_modelApiKey":212,"slug":491},"introducing-microstores","August 11, 2022",{"name":494,"picture":495},"Daniel Oh",{"url":496,"alt":497,"title":497,"width":289,"height":289,"format":498,"focalPoint":499,"customData":500},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1658849633-daniel.jpg","Daniel Oh avatar","jpg",{"x":292,"y":292},{},[],"storefront","Please welcome microstores, self-contained stores that are configured and spun up instantly, with no development required, that can then be accessed via URL or QR code and used to immediately drive transactions from the first contact with a customer.",{"color":298,"name":8},0,{"_modelApiKey":212,"link":507,"subtitle":511,"date":511,"author":512,"additionalAuthors":516,"icon":517,"abstract":518,"tag":519,"displayTitle":508,"cardRatio":11,"featured":521},{"text":508,"isExternal":11,"url":280,"link":509},"Rapha Racing goes composable with Commerce Layer.",{"_modelApiKey":212,"slug":510},"rapha-racing-goes-composable-with-commerce-layer","October 7, 2022",{"name":285,"picture":513},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":514,"customData":515},{"x":292,"y":292},{},[],"bicycle","We are announcing a partnership with Rapha, the world's leader in cycling apparel. Rapha will use our API and suite of tools to scale their international ecommerce business, sell across multiple channels, and expand into new businesses.",{"color":298,"name":520},"News",1,{"_modelApiKey":212,"link":523,"subtitle":527,"date":527,"author":528,"additionalAuthors":532,"icon":533,"abstract":534,"tag":535,"displayTitle":524,"cardRatio":11,"featured":38},{"text":524,"isExternal":11,"url":280,"link":525},"Measure the health and performance of your store with our Metrics API.",{"_modelApiKey":212,"slug":526},"track-store-performance-with-our-metrics-api","October 27, 2022",{"name":494,"picture":529},{"url":496,"alt":497,"title":497,"width":289,"height":289,"format":498,"focalPoint":530,"customData":531},{"x":292,"y":292},{},[],"chart-bar","Today, we’re happy to announce the public release of our Metrics API, a brand new API that enables our clients to extract, organize, and analyze any data they want from our platform.",{"color":298,"name":8},{"_modelApiKey":212,"link":537,"subtitle":541,"date":541,"author":542,"additionalAuthors":546,"icon":502,"abstract":547,"tag":548,"displayTitle":538,"cardRatio":11,"featured":549},{"text":538,"isExternal":11,"url":280,"link":539},"Introducing the Demo Store.",{"_modelApiKey":212,"slug":540},"introducing-the-demo-store","September 14, 2022",{"name":494,"picture":543},{"url":496,"alt":497,"title":497,"width":289,"height":289,"format":498,"focalPoint":544,"customData":545},{"x":292,"y":292},{},[],"Introducing the Demo Store, a project that gives developers a template to quickly launch their stores and the underlying source code to serve as the foundation of a custom store.",{"color":298,"name":8},3,[551,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582],{"attributes":302,"tag":303,"content":304},{"attributes":553,"tag":308,"content":302},{"property":307,"content":304},{"attributes":555,"tag":308,"content":302},{"name":311,"content":304},{"attributes":557,"tag":308,"content":302},{"name":314,"content":315},{"attributes":559,"tag":308,"content":302},{"property":318,"content":315},{"attributes":561,"tag":308,"content":302},{"name":321,"content":315},{"attributes":563,"tag":308,"content":302},{"property":324,"content":325},{"attributes":565,"tag":308,"content":302},{"property":328,"content":329},{"attributes":567,"tag":308,"content":302},{"property":332,"content":333},{"attributes":569,"tag":308,"content":302},{"name":336,"content":325},{"attributes":571,"tag":308,"content":302},{"property":339,"content":340},{"attributes":573,"tag":308,"content":302},{"property":343,"content":344},{"attributes":575,"tag":308,"content":302},{"property":347,"content":348},{"attributes":577,"tag":308,"content":302},{"property":351,"content":352},{"attributes":579,"tag":308,"content":302},{"property":355,"content":280},{"attributes":581,"tag":308,"content":302},{"name":358,"content":359},{"attributes":583,"tag":308,"content":302},{"name":362,"content":363},[585],{"name":285,"picture":586},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":587,"customData":588},{"x":292,"y":292},{},1790593727921]