I would like to have the following architecture for a single page application:
each page or a widget can be an independent reusable module (reusable for this project however it might be used on others as well)
there will be a core application that will use all those external modules. the core application will be able to communicate with the modules and vice versa.
each module can be written in any technology (react, angular, vanilla)
each module should be deployed independently (something like dynamic-lazy-loading)
the core app should be responsible for the config of the modules (api urls etc)
I have not been able to think about a good way of achieving everything i stated nor find anything on google.. but i might be missing the keyword for such architecture.
Any ideas, best practices or just some relevant input? thanks!
after researching this subject bit more, the architecture that i think that will match my requirements is based on web-components (can read more about it here - http://webcomponents.org/ and would recommend using a library like polymer).
the advantage of a web-components is that they can hold everything they need in them (html,css,ajax requests, basically anything that can be in a html document) and using shadow or shady dom imply those components into the document just like we would have done once with iframes.
by using this architecture, you will be able to migrate your components without caring about the wrappers technology (angular 1/2,react, knockout, vanilla js etc). for example, in order to use it in angular, we just wrap a component with a directive and thats it.
the other bonus is that you can even host those components in different servers and therefore deploy them separately.
Related
We have several web applications(angular 7+) that we wish to present under one single page application. We are looking for a micro-frontend architecture/framework to use. As we see it, these are our options for implementation:
Using the single-spa open-source framework: https://github.com/CanopyTax/single-spa
Using Iframes (friendly Iframes) the hosting application (the shell) and loading each application according to the current URL.
Using web components.
Other?
The current state is a monolith FE application that consumes the other child-application as internal applications via IFRAME (This approach is not scalable for us, because the hosting application is building all the products together, and nothing is really separated.)
Our requirements are the usual requirements for micro-frontend:
Independent development - Each team can work on their own repo and build their products regardless of the other products.
Independent deployment - Each application can be upgraded in production without the downtime and without interfering with the other applications.
Shared components - We're using Angular7 in our applications, and we have a proprietary 3rd party library (shared components and logic) that we've already written that should be shared among all of the products for similar look and feel.
We would like to have the ability to upgrade each application's framework (Angular, RXjs, Typescript, etc and also for our proprietary component library) without caring about the other applications.
We tried to use the single-spa framework but we have some issues and we are currently found our-self thinking if this is the right approach for us, or should we try a different approach.
The issues we have using the single-spa are:
Assets loading is problematic. (We must have the assets files on the root folder of the hosting application, and we suffer from assets conflicts when switching to another application).
We still don't know how to handle global styling for all applications (We use sass for styling and it must have complied together with the local styles for each application)
Upgrade angular framework (or all other frameworks) is not possible for one application, it's all or nothing (since we have one instance of angular).
We have to implement a different bundling for development another side of the hosting application (the shell).
When we think about the Iframe (using friendly Iframe) solution, we visualize a full separation between all child-application. Communication is via a post message alone. In this approach can we separate UI Code out of this and make APIS alone to work via IFRAME
Are there any pitfalls for using Iframes?
A more general implementation was to 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.
The ideal solution should allow our PARENT application to request the child applications via routes without any coupling between them in terms of resources and assets and should be independent in these terms. Another major feature we need is these applications should have a notification mechanism across them.
Thanks in Advance.
I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.
I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.
I have application with logic similar to google's app switcher, let me call it Wrapper. This application take place across all google services and has consistent UI everywhere.
I am looking for solution to inject into my Wrapper application several finished different apps with their own styles, views and JS. They are written with different technologies like React and Angular.
How can I implement such architecture? Are Web-components a solution for this, if yes - please provide me some examples. (The aim is to deploy wrapper separately and all content applications too, so they will have consistent UI and logic from wrapper).
Please do not mention the iframe!
We have done similar model called UI shell, where any developer can develop a microapp in any tech stack like angular, react, vue etc but the main app will consume them as part of its application and display them as part of the main app. Are you looking for similar approach.
We have a website written in the traditional Jquery selector-callback spagetti code. We are planning to begin migration to backbone to help clean things up.
We use mustache and use the same templates for rendering in php server-side and javascript client-side. But there are some mustache alternatives (handlerbars/dust) that we are interested in but can't explore because there is currently no php alternative. We are considering moving all server-side rendering to node so we can use the same logic/code for client and server rendering. We would be porting all our php view classes to javascript/backbone and just use php as our data/controller layer.
In parallel, we are preparing to develop a sencha touch website/app which would normally be written using the sencha/ext approaches in javascript.
The actual templating will be very different between the sencha and main site, but much of the view models could probably be the same.
There are three approaches I can think of:
use backbone as the main view models including inside sencha
use sencha everywhere using the sencha/ext classes/approach in the main site
keep them separate and either deal with duplication or try to abstract out the essential logic to other classes.
One advantage of the ExtJS route is you can use the same models, stores, etc and just have separate views, grids, whathaveyous for mobile/non-mobile. Then you can just serve up the same JSON/XML from PHP. The JsonStore/XmlStores will be the same on each platform. Been a while since I've used ExtJS so cannot offer more concise example.
I am developing a extjs application, and I am just a starter.
It's quite different develop mode for me, and I feel puzzled.
My first question is about client-end architecture, I'm developing a little app now, so I wrote all js codes in only one html file, what if I need to develop a huge app?
like this: [Article Manage(leaf in tree)] -> [CURD List(Data Grid)] -> [Edit Article(Dialog Box)]
There will be lot of leaf in my tree, so there are many XXX Manage.
What should I manage my client-end js files(file structure or something else), and how to load these files dynamically? Is there any exists demo?
um.. maybe what I really want to ask is:
How to put my code for every module into different js files and 'include' the dynamically?
I've got the answer, just use loader property of a container component, this method fit me well. Thanks to all of you.
There are no patterns set in stone, but here's one way to Write a Big Application in Ext 3.x.
Another good resource for ideas, generic to JavaScript, is Nicholas Zakas's video on Scalable JavaScript Application Architecture on YUI Theater.
In my mind the big things to do are:
Write standalone components (think: UI container, data structure, etc) with no dependencies to other components on the page.
When you want to two components to interact, have their parent container wire them together.
Have some kind of logical directory structure for development (doesn't matter what exactly), splitting out each of your "components" into its own file -- even if you plan on combining them into a single file for deployment.
Not sure if I correctly understood your question, but I'll try to answer. For bigger applications use MVC pattern which allows you to split your application to components such as Stores, Controllers, Views etc. Then you can easily send data from server in JSON for example (using server-side technologies - php, java,...) and read it by Stores proxy. If you look into Samples & Demos they're also loading some bigger structures using php script which returns JSON.