13 | 架构现代化 ：如何改造老城区前端？
姚琪琳
你好，我是姚琪琳。
前面两节课，我们学习了架构现代化中建设新城区的一些模式。从这节课开始，我们来聊聊改造老城区相关的模式。
我们先回顾下什么是“改造老城区”。改造老城区模式是指对遗留系统内部的模块进行治理，让模块内部结构合理、模块之间职责清晰的一系列模式。也就是说，在遗留系统的单体内部，我们应该如何更好地治理架构。
我们按照从“前”往“后”的顺序，先从前端开始。
遗留系统的前端
在第十节课我们学习了一种架构反模式——Smart UI，它是遗留系统最常见的前端模式。以 Java Web 项目为例，它们往往在 JSP 页面中掺杂着大量的 JavaScript、Java 和 HTML 代码。其中最致命的就是 Java 代码，因为它们可以随意访问后端的代码，甚至访问数据库。我们重构前端代码最主要的工作，就是移除这些 Java 代码。
前端的遗留代码和后端的遗留代码一样，也是坏味道的重灾区。Martin Fowler 在《重构（第 2 版）》中，用 JavaScript 重写了所有代码示例，这对于前端开发人员是相当友好的。它能帮助你识别出 JavaScript 中的坏味道，并重构这些代码。
要重构前端代码，最好也要优先添加测试。但不幸的是，已有的前端测试工具对基于框架（Angular、React、Vue）的 JavaScript 代码是相对友好的，但遗留系统中的前端代码，既有 JavaScript 又有 Java，很难用前端工具去编写单元测试。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何改造老城区的前端架构现代化。作者首先回顾了改造老城区的定义，即对遗留系统内部模块进行治理，使其结构合理、职责清晰。在讨论遗留系统的前端时，作者指出了常见的前端架构反模式Smart UI，并强调了重构前端代码的重要性。作者提到了重构前端代码的挑战，包括移除Java代码、识别JavaScript中的坏味道以及添加测试的困难。接着，作者分享了对遗留JSP代码的重构步骤，包括梳理业务、模块化等八个步骤，并提供了代码示例进行讲解。整体而言，本文强调了重构前端代码的必要性，并提供了实际的重构步骤和示例，对于需要进行老城区前端架构改造的技术人员具有一定的参考价值。文章内容涵盖了重构JSP中的JavaScript代码、移除JSP中的Java代码、引入前端框架、前端组件化等关键步骤，为读者提供了全面的技术指导。文章还介绍了微服务架构下的前端重构以及微前端技术的应用，为读者提供了更多思路和工具。总的来说，本文为前端架构改造提供了全面的指导和实践经验，对于需要进行类似工作的技术人员具有重要参考价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《遗留系统现代化实战》，新⼈⾸单¥59
《遗留系统现代化实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(2)
- 最新
- 精选
子夜枯灯老师，对于后端可以引入单元测试或者自动化测试进行验证。但对于前端来说，很多的js或者fuction修改，这种如何验证修改后的效果没有搞坏呢？另外测试覆盖率怎么搞？谢谢作者回复: 前端可以用HtmlUnit或用并行运行模式做A/B测试，引入前端框架后再写前端测试
2022-05-102
aoe庆幸目前不用做前端，但还是收藏一下这些资料 前端测试工具 HtmlUnit https://htmlunit.sourceforge.io/ 微前端（Micro frontend）技术 https://martinfowler.com/articles/micro-frontends.html 开源的一套微前端框架 Mooa https://github.com/phodal/mooa 以及跟它配套套的 微前端解决方案文档 https://github.com/phodal/microfrontends2022-05-114
收起评论
