![]() ![]() This Stackoverflow question explain more about it in case of single page application: Tailor was inspired by BigPipe: Pipelining web pages for high performance from Facebook.Ī plugin architecture is an architecture that will call external code at certain points without knowing all the details of that code in advance. The online shop Zalando faced to the same problem and created a framework in order to deal with the problem:Įspacially the part Tailor.js, an open source system for the assembling the components on-demand on a backend layer written in Go. ![]() Take a look at this example.: Building micro frontends - angular elements You have to create a shell app and another independently apps that will be registred as elements in your shell app. ![]() In order to deal with npm packages you can use as the other answerer mentioned the concept of Angular elements. FrintJs (official website) FrintJS: Modular JavaScript frameworkįor building Scalable & Reactive applications.Single Spa (official website) Single Spa: a javascript framework for front-end microservices.Here some example of metaframeworks for microfrontend purposes. Metaframeworks allow you to have a communication beetween differents apps builded using differents frameworks: (github repository) A lightweight and solid approach towards micro frontends (SPAs/ clients for micro services).(You must have a page reload when you switch beetween the both apps.)Ī Software architect builded a meta router to deal with iframes and single page application: You can create your new app and have a hyperlink from your legacy app. The following approaches came out of my research: Especially in the time when many companies have both Angular and React and Vue developers. The concept is about designing the frontend to be extensible and scalable. Nowadays, you often hear the concept of micro-frontends. I've been very busy with the topic lately, because many have the same problem again and again (me, of course). Example for building a plugin-based workflow designer with Angular and Dynamic Module Federation.Implementation examples of module federation, by the creators of module federation.You can also use the new Webpack 5 Module federation.įollowing examples show how to use module federation with Angular and other technologies. The ideal solution should allow our application to be used in multiple sites (each one providing specific configuration) without us having to know about the site using our app. Is there a better way to achieve what we need to do? Other idea is to use an iframe but my problem here is the iframe resizing to adapt to the content and how to add child routes in the 'host' app from the 'resident' app inside the iframe. My first idea for a more general implementation was to upgrade our app to Angular 6 and create a web component with a custom element, but we need to support IE11 and Edge which do not support native encapsulation, so we would need to test our app in every site where it is used, to make sure they are not breaking our styles, also I don't know whether a web component can manage child routes or not. I don't think this approach will scale when embedding the app into more sites. This also tight couple both applications since the 'host' app needs to know about all dependencies of our application which is not a trivial app (I'd say is pretty big) and install them, this caused problems when both applications needed different versions of the same dependency, no to mention that we will need to sync when upgrading dependencies or the framework itself. Management wanted us to integrate with the Angular5 SPA right away so we just exported the whole application as a module with child routes and let the other application do the bootstrap.īut I'm afraid the above approach will not work for the non-angular site. One site is a SPA built with Angular6, other is also a SPA but uses Angular5, while the other is using some older libraries such as jQuery. Angular sticky routes.My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |