I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);
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'm trying to make small interactive physics demos and mini-games which should work
offline - by simply opening the .html file in browser (preferably without any localhost web server)
online - hosted on github and using http://rawgit.com/
But I met several problems:
Online I have to load *.js libraries from cdnjs while offline I have to load them from some local file. How to make .html that will automatically load dependencies from proper source?
Composing the web page from several independent files also works differently online and offline
Loading resources (shaders, 3D geometry objects) from external files - the same story.
For example, how can I let user to choose (e.g. depending on some <select> widget) which shader or 3D model to load from files hosted on gihub server ?
The most painful is file I/O to user hard-drive (i.e. to save and load data which user created). For some security reasons file browsers does not support it, and solutions which I found are either a) not working or b) terribly complicated workaround or c) having many dependencies (jQuery). Best what I found is this save and load.
These problems gets better if I run some localhost server (simplest is to use python). But this makes it inconvenient for the end user. I would like a .html file which the end-user can simply open offline in his web browser and it would work without any server.
Is node.js environment somehow relevant / useful for this purpose?
Examples:
There is some example of what I'm doing:
https://rawgit.com/ProkopHapala/SimpleSimulationEngine/master/projects/SpaceCombat/HTML/StickSpaceCraft.html
There is example which works well offline but not online:
https://github.com/ProkopHapala/SimpleSimulationEngine/blob/master/js/PlanetDesigner/PlanetDesigner.html
background:
I was never interested in web technologies. But recently I found that javascript with WebGL and other HTML5 stuff can be greatly useful in areas which interests me (numerical math, physics, 3D graphics, games). Inspired by examples 1, 2, 3, 4, I started to learn javascript and HTML with goal to make simple demo which interactively illustrates some problem from my domain of interest.
As I know you can only use frontend technologies in github, so you must leave the node.
But for making your app work both offline and online, You might be able to build a CACHE MANIFEST file (for example offline.manifest) and write the files you want to be cached in them. for example:
CACHE MANIFEST
mystyles.css
image/mypic.jpg
jquery-1.4.min.js
script.js
index.html
and load it with manifest attribute in your html:
<html manifest="offline.manifest">
There is a technology by the named of indexedDB, Which you can use it as a front-end Database. You can use this too.
I develop an angular-php web application which I have it running online, for different users, on 5 different subdomains, such us:
sub1.mydomain.com
sub2.mydomain.com
sub3.mydomain.com
sub4.mydomain.com
sub5.mydomain.com
Problem:
My problem is that I still develop the web-app local and whenever I change files(php, js,tpl.html,css or when add new ones) I have to upload them on each subdomain.
Question:
Is there a way/library/API whatever that I can use to make something like package (with the updated or new files) and just call it from each subdomain url , and make the appropriate updates?
Or should I just copy them to each subdomain?
Do I make myself clear, in other words just like on cms systems that we press the update button and we update a component/module.
If anyone knows a way of doing that please enlight me. Thanks.
I tried to depict what i mean.
What you are describing is called deployment.
There are a lot of ways to create a deployment mechanism so there is not a single answer to your question. Depends of the tools that you are using, the servers where your app is hosted, etc.
If not, I advise you to use Git to make versions of your app (with Github or Gitlab) and automate the deployment process when you push a new piece of code.
You can make your own scripts to deploy or use online services (surely what you need because of "systems that we press the update button").
I can't advice you one particular service but you would find what you need in Googling "deployment automation github".
I would do it with config files. Considering the code for all my substations is the same. I would have config for each sub-domain and fetch the core files from the same location but serving different data If your structure allows it.
I have a JavaScript web application that we are offering to customers using a SaaS model. Right now, the application consists of several HTML files, JavaScript files, CSS files, and image files as well as a single proxy page (ashx file) with a config file. We have deployed the app on GoDaddy's shared hosting service.
We currently deploy an exact copy of the entire app folder structure for each customer and I am quickly realizing that this is a nightmare in terms of maintenance when I need to provide an update or bug fix. I have to make the change to every instance of the app for every customer.
Is there a better way to handle this? I've heard of using a single code base with multiple config files for dynamic apps built on server-side technologies like ASP.Net or PHP, but I have no clue how I can do this with JavaScript, especially since the HTML pages need to be slightly different for each customer.
I am working on an enterprise application development in ASP.NET MVC3. Of-course I have different master layouts and multiple views.
My concerns
Including all js/css files in master layout might affect the performance of the page
Including the files in views (where it is required) are creating duplicate references (kick-off jquery/other libraries)
More the references, the more the back&forth requests between client and server - which in turn affect the performance of the output page
My Thoughts
Create a custom list of required resources and store it in ViewBag. Let the master layout refer this object to include the js/css files
Or add the link referring an action with some key (an unique value to identify the page being rendered) and dynamically generate an output with all required resources as a single response. And cache the output (inmem/staticfile) with the unique key for succeeding requests. A kind of custom resource bundling.
Please share your ideas, any thoughts and suggestions are welcome!
EDIT: Sep.17.2012
Below answers are more talking about optimization techniques in web application development world - appreciating those answers.
I would like to discuss from an architectural perspective, focusing on creating a dynamic resource collection required by the page being rendered.
For example, in specific views I would like to use jQuery UI which requires jquery-ui-1.8.11.min.js, and in certain views I would like to use MVC3 ajax which requires MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js
I don't want to include permanent reference in master layout, which will result in loading these js for all views. Rather I would like to include the js files dynamic during runtime.
Hope this might have added clarity!
Thanks for the help - Vinod
You need to think about reducing your download size first:
putting all your js and css into as few files as possible. This is because a client can only open 2 HTTP channels (most browsers now support more, info here) at any one time, all file downloads after this are queued until the previous ones finish downloading.
minify your js and css.
Once you've got this down to a reasonable size then you can think about the above. You want to download, the smallest amount of content upfront, so in the master. This will improve performance because then the client can cache it. Caching is a good thing, this stops the client having to request the js and css every time they visit a page on your site.
You might also want to think about applying HTTP expiry headers.
Yahoo do a good site on lots of these ideas: http://developer.yahoo.com/performance/rules.html
Also don't put your js in the viewbag. This is unnecessary overhead and load on the server. Just add a reference in your pages!
MVC4 now supports bundling