Have you ever been in a situation when your project becomes obsolete because technology you use turns out to be outdated, support for it ends in a few months, project newcomers don’t really know it, most of the supporting libraries have their last commit made a few years back and, of course, the client has no budget to update any of it. Welcome to my world — trapped in Matrix forever, with no hope. Luckily, there is always some Morpheus out there who may pull you out. His name, this time, is microfrontend. Are you ready to take a red pill?
您是否曾经遇到过由于您使用的技术过时而使项目过时，对它的支持在几个月后结束，项目新手并不真正知道的情况，大多数支持库的最新提交？几年前，当然，客户没有预算来更新任何预算。 欢迎来到我的世界-永远被困在Matrix中，毫无希望。 幸运的是，总有一些Morpheus可能将您拉出来。 这次，他的名字叫microfrontend。 您准备好服用红色药丸了吗？
The dramaturgy of my project was a little bit exaggerated just to grab your attention, but it is definitely not that far from the truth. We have been developing one particular application for one of our clients for a respectable number of years— it’s soon to be our sixth year. From the very beginning, we have been creating frontend for our application in angularjs. At that time being, it seemed to be (and it was) the best framework to choose from. We didn’t follow the hype even though, as you may remember, in those days new “better and faster” frontend framework was released monthly. We stood by angularjs and for quite a long time it looked like it was a very good decision. Recently however, we started to “suffer” more and more from being a little outside technology radar. In this part of the article, we will look into the main problems with angularjs. You may notice at once that most of it relates to each outdated framework/library, so even if you don’t use angularjs you may find some issues valid for you as well.
我的项目的戏剧性有点夸张，只是为了引起您的注意，但这绝对离事实不远。 多年来，我们一直在为我们的一位客户开发一种特定的应用程序-这将是我们的第六年。 从一开始，我们就一直在为angularjs中的应用程序创建前端。 当时，它似乎是(而且是)最佳选择。 您可能还记得，即使在那几天，我们每月都发布新的“更好更快”的前端框架，但我们并没有大肆宣传。 我们站在angularjs身边，很长一段时间以来，这似乎是一个非常好的决定。 但是，最近，我们开始受到越来越小的外部技术雷达的“困扰”。 在本文的这一部分中，我们将研究angularjs的主要问题。 您可能会立刻注意到它大部分与每个过时的框架/库有关，因此，即使您不使用angularjs，也会发现一些对您有效的问题。
The first problem with angularjs is that it is no longer being actively developed. What’s more it will be supported till 30th June 2021, so after that if any critical issue will occur in framework it will no longer be fixed. One may ask what critical issue could possibly be found in a ten years old framework and that’s a good question indeed. Well, let’s just say that if anything changes in browsers in the future that will make your application unable to start — you’re done. As an example of how unexpected future can be, imagine that 10 years ago no one even thought about the end of flash support in 2020 in some browsers. There are now many clients who have been left with application they cannot use with modern browsers — I cannot imagine a worse case client scenario.
angularjs的第一个问题是它不再被积极开发。 更重要的是，它将一直支持到2021年6月30日，因此在此之后，如果框架中发生任何重大问题，它将不再得到解决。 有人可能会问，在十年的框架中可能发现什么关键问题，这确实是一个好问题。 好吧，我们只是说，如果将来浏览器中发生任何更改，这将导致您的应用程序无法启动，那么您就完成了。 举一个未来可能多么令人意想不到的例子，想象一下十年前没有人想到某些浏览器将在2020年停止对Flash的支持。 现在有许多客户端无法使用现代浏览器使用的应用程序-我无法想象更糟糕的客户端方案。
It is, of course, a natural consequence — if your framework is no longer being developed, libraries and tools around it will end up the same way. If there is a bug there — no one will fix it! What is more, you cannot expect that any new stuff will appear — no one wants to invest their time in developing anything around dead framework.
当然，这是自然的结果-如果不再开发框架，围绕它的库和工具将以相同的方式结束。 如果那里有错误-没有人可以修复！ 而且，您不能期望会出现任何新东西-没有人愿意花时间在死框架周围开发任何东西。
I think this issue is always underestimated. It is really frustrating for anyone who needs to learn anything, and who knows from the very beginning that this exact knowledge may be thrown away very soon. Sometimes developers even refuse to join such projects, especially in the current market where many greenfield businesses are at your fingertips. What is more, project newcomers can feel like working in such a relic technology should be somehow rewarded in salary you get. So this situation can potentially pose some problems with hiring new people with such skills, and if you do find someone adequate for the position, such daring pleasure can simply cost you a lot.
我认为这个问题总是被低估。 对于任何需要学习任何东西的人来说，这真是令人沮丧，并且从一开始就知道这种确切的知识可能很快就会被抛弃。 有时，开发人员甚至拒绝加入这样的项目，特别是在当前市场上，许多未开发的企业唾手可得。 此外，项目新移民可能会觉得在这种文物技术中工作应该得到某种程度的报酬。 因此，这种情况在雇用具有这种技能的新人时可能会带来一些问题，如果您确实找到合适的人选，那么这种大胆的乐趣只会使您付出很多代价。
This is not too serious because we struggle with it all the time. New java version is being released, for instance, and you know that maybe one year from now you will get it in your code. The problem arises if you are behind trends by a couple of years and you’ve already tried that new stuff and you know how it tastes. Typescript, new approach for testing (look at angularjs testing problems and some solution for it here), new libraries — all of this is missing when you use angularjs.
这不太严重，因为我们一直都在为此奋斗。 例如，新的Java版本正在发布，您可能知道从现在起一年后，您就会在代码中得到它。 如果您落后趋势数年并且已经尝试过这些新东西并且知道它的味道，就会出现问题。 打字稿，用于测试新方法(看angularjs测试问题和一些解决方案，它在这里)，新库-当您使用angularjs所有这一切都丢失了。
What choices do we have here? Rewrite all of the code in new technology which will approximately take one year or write the code till the end of your (sad) life in angularjs? Happily there is a remedy for this — microfrontends. But what to do with …
我们在这里有什么选择？ 用新技术重写所有代码，这大约需要一年时间，或者直到用angularjs结束(悲伤)寿命时才编写代码？ 令人高兴的是，有一种补救措施-微前端。 但是该怎么办……
Our project, for example, has thousands of lines of javascript and html files. To be precise: we have two thousands tests written using angularjs testing framework. How to update/adjust it to the new technology? With microfrontends — you don’t have to. Old code stays as it is, after small adjustments you just incorporate your angularjs application into microfrontends. New components can be written in new-whatever-you-want technology and they can coexists with your current components. Great news! What is left is just to…
例如，我们的项目包含数千行javascript和html文件。 准确地说：我们有两千个使用angularjs测试框架编写的测试。 如何更新/调整以适应新技术？ 有了微前端，您不必。 旧代码保持原样，在进行细微调整后，您只需将angularjs应用程序合并到微前端中即可。 可以使用任何新技术来编写新组件，它们可以与您当前的组件共存。 好消息！ 剩下的只是……
I think, that all of the above is quite enough to make your client think change is inevitable. Some smarter clients (and our is that kind) start asking questions like “would the new technology make you code faster” or “would you, thanks to new technology, make less bugs” and don’t be angry with them. Just say a simple no, and once again politely go through the lists above of all problems that a new framework is gonna solve.
我认为上述所有内容足以使您的客户认为改变是不可避免的。 一些更聪明的客户(我们就是这种客户)开始问诸如“新技术会使您的代码编写速度更快”或“由于新技术而使您产生的bug更少”这样的问题，并且不要对它们感到生气。 只需说一个简单的no ，然后再次礼貌地浏览一下新框架将要解决的所有问题的清单。
With such a strong argumentation your client sooner or later will accept the need of change but be prepared for some estimation of how long is it going to take. Of course, in each project it will vary. What we did, to make our client feel more comfortable with the change, was creating very detailed tasks required for technology updates.
有了如此强有力的论据，您的客户迟早会接受变更的需求，但要做好一些准备，以估计需要多长时间。 当然，在每个项目中都会有所不同。 为了使我们的客户对更改感到更加满意，我们所做的工作是创建技术更新所需的非常详细的任务。
Estimation of the tasks, which also included rewriting one big screen with couple of not-trivial components inside, was about 4 weeks and we did it within that time! Deploying it to the production went so smoothly that no one noticed a new component was in totally different technology (we choose react). We also benefited from the vacation time for introducing the change, since we had less business requests from the client. After all the client was very pleased with the update (and so were we). That was awesome!
估计任务大约需要4周的时间，其中包括重写一个大屏幕，其中包含几个不平凡的组件，而我们在这段时间内做到了！ 将它部署到生产过程非常顺利，以至于没有人注意到一个新组件完全采用了不同的技术(我们选择“React”)。 由于从客户那里收到的业务请求减少了，我们还从休假时间中引入了更改，从而受益匪浅。 毕竟，客户对更新感到非常满意(我们也是如此)。 这太棒了！
In the next article I will focus more on the technology we use to introduce microfrontends, the tools we chose to build our project, the steps we planned to deploy as quickly as possible, and the traps you should be aware of. So stay tuned!
在下一篇文章中，我将重点介绍引入微前端的技术，选择用于构建项目的工具，计划尽快部署的步骤以及您应该意识到的陷阱。 敬请期待！
翻译自: https://blog.pragmatists.com/microfrontends-a-way-to-resurect-your-legacy-project-b90c44c9d662
相关资源：四史答题软件安装包exe