Native Instruments - 带有微前端的 Ibexa.pdf

1、Micro Frontendswith Ibexa3Bjrn Schmitt Alex ShubitidzeCross-functional team5 backend5 frontendUI/UX,QA,DevOpsIntegration partnerComwrap Reply4Ibexa DXPTYPO3Adobe Commerce/MagentoReact AppsCustom APIs Micro-servicesnative-plugin-brainworx.audioCDNWAFnative-PathProxyIbexaReact App/catalog/abc/landingM

2、icroFrontendServerReactComponentPoolGraphQL ServerIbexaAPIMagento APINative Instruments6Micro frontend MFE.is an architectural pattern.,where independently developed frontends are composed into a greater whole.Wikipedia).each MFE is developed,deployed,and maintained by different teams.This approach

3、allows greater flexibility,scalability,and maintainability.Copilot)In the page builder In twig templates Header micro frontendIbexaMicro frontend architectureMicro FrontendGraphQL ServerIbexaAPIMagento APIHTML10Header 11Design system12Ibexa Integration1.Header Twig Template13Ibexa Integration1.Heade

4、r Twig Template2.Request HTML14Ibexa Integration1.Header Twig Template2.Request HTML3.Render HTMLPlan selectormicro componentIbexa PIMIbexa page builder18GraphQL Playground19GraphQL API20Ibexa GraphQL APIThank youNative Instruments24Short introduction of NI and usTransition to our architecture(why w

5、e need MFEs)Headless+page builderWhat are micro frontendsHow we like to use them in Ibexa(in template and as page builder component)Demoing code(offline?)Integration in Ibexa MFE serverAudio playerPlan selector(PIM usage)Change sth on the MFE and see result in IbexaDesign system Outlook/experience Things we had to overcomeWhats nextQ/A