微前端：未来前端开发的新趋势 — 第二部分 #6068

lihaobhsfer · 2019-07-01T23:10:43Z

译文翻译完成，resolve #6023

ShupingHe · 2019-07-02T02:46:21Z

@leviding 校对认领。

fanyijihua · 2019-07-02T02:46:23Z

@Stevens1995 好的呢 🍺

ShupingHe

很棒，提了一些小建议。

ShupingHe · 2019-07-03T01:25:25Z

TODO1/micro-frontends-2.md


-We start with a decidedly un-novel approach to frontend development - rendering HTML on the server out of multiple templates or fragments. We have an `index.html` which contains any common page elements, and then uses server-side includes to plug in page-specific content from fragment HTML files:
+我们从一个故意不够全新的前端开发方法开始 —— 在服务器端基于一些模板和代码片段渲染 HTML 页面。我们有一个 `index.html` 文件，包含所有公用的页面元素，然后我们用服务器端的 `includes` 来加入从 HTML 文件片段提取的页面内容：


我们从一个故意不够全新的前端开发方法开始 => 我们从一个很常见的前端开发方法开始

ShupingHe · 2019-07-03T01:58:53Z

TODO1/micro-frontends-2.md


-This example shows how micro frontends is not necessarily a new technique, and does not have to be complicated. As long as we're careful about how our design decisions affect the autonomy of our codebases and our teams, we can achieve many of the same benefits regardless of our tech stack.
+这个例子展示为何微前端不是一个新技术，并且不需要很复杂。只要我们仔细考虑我们的设计决定如何影响代码库和团队的自治，我们获得许多便利，无论我们的技术栈是什么。


我们获得许多便利 => 我们就能获取同样多的便利

ShupingHe · 2019-07-04T03:02:12Z

TODO1/micro-frontends-2.md

-* There should be a landing page where customers can browse and search for restaurants. The restaurants should be searchable and filterable by any number of attributes including price, cuisine, or what a customer has ordered previously
-* Each restaurant needs its own page that shows its menu items, and allows a customer to choose what they want to eat, with discounts, meal deals, and special requests
-* Customers should have a profile page where they can see their order history, track delivery, and customise their payment options
+* 应该有一个着陆页，消费者可以在这里浏览和搜索餐厅。这些餐厅可以通过任意数量的属性搜索或者过滤，包括价格、菜系或先前订单。


应该有一个着陆页 => 应该有一个引导页

注：只是个人感觉引导页比着陆页好一点...

落地页、引导页都可以

ShupingHe · 2019-07-04T03:05:09Z

TODO1/micro-frontends-2.md


-CSS as a language is inherently global, inheriting, and cascading, traditionally with no module system, namespacing or encapsulation. Some of those features do exist now, but browser support is often lacking. In a micro frontends landscape, many of these problems are exacerbated. For example, if one team's micro frontend has a stylesheet that says `h2 { color: black; }`, and another one says `h2 { color: blue; }`, and both these selectors are attached to the same page, then someone is going to be disappointed! This is not a new problem, but it's made worse by the fact that these selectors were written by different teams at different times, and the code is probably split across separate repositories, making it more difficult to discover.
+CSS 作为一种语言本质上是全局的，继承和级联的，传统上没有模块系统，命名空间或封装。这些功能现在确实存在，但通常缺乏浏览器支持。在微观前沿领域，许多这些问题都在恶化。例如，如果一个团队的微前端有一个样式表，上面写着 `h2 { color: black; }`，另一个人说 `h2 { color: blue; }`，并且这两个选择器都附加到同一页面，然后有人就会不高兴了！这不是一个新问题，但由于这些选择器是由不同团队在不同时间编写的，而且代码可能分散在不同的代码库中，因此更难以发现。


这些功能现在确实存在 => 其中一些功能确实存在

ShupingHe · 2019-07-04T03:12:27Z

TODO1/micro-frontends-2.md


-The approach that you pick does not matter all that much, as long as you find a way to ensure that developers can write their styles independently of each other, and have confidence that their code will behave predictably when composed together into a single application.
+近几年来，人们想出了很多解决方案来使 CSS 更易于管理。有些人选择使用严格的命名规范，比如 [BEM](http://getbem.com/)，来确保选择器只会在想要的地方起作用。另外一部分人则选择不仅仅依赖于开发者规则，使用一个预处理器，如 [SASS](https://sass-lang.com/)，其选择器嵌套可以用做一种命名空间。一种更新的解决方案是将所有样式以程序的方式，用 [CSS modules](https://github.com/css-modules/css-modules) 或者众多 [CSS-in-JS](https://mxstbr.com/thoughts/css-in-js/) 库的一个来应用，以保证样式直接按照开发者的意图来应用。或者，[shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) 也以一种更加基于平台的方式提供样式分离。


以保证样式直接按照开发者的意图来应用 => 以保证样式只应用在开发者想要的地方

ShupingHe · 2019-07-04T03:20:15Z

TODO1/micro-frontends-2.md


-We mentioned above that visual consistency across micro frontends is important, and one approach to this is to develop a library of shared, re-usable UI components. In general we believe that this a good idea, although it is difficult to do well. The main benefits of creating such a library are reduced effort through re-use of code, and visual consistency. In addition, your component library can serve as a living styleguide, and it can be a great point of collaboration between developers and designers.
+我们在上面提到过，微前端的视觉一致性很重要，其中一种方法是开发一个共享的，可重用的 UI 组件库。总的来说，我们认为这是一个好主意，虽然很难做好。创建这样一个库的主要好处是通过重用代码和视觉一致性来减少工作量。此外，你的组件库可以作为一个样式指南，它可以是开发人员和设计人员之间的一个很好的协作点。


创建这样一个库的主要好处是通过重用代码和视觉一致性来减少工作量 => 创建这样一个库的主要好处是通过重用代码减少工作量，并提供视觉一致性。

lgh757079506 · 2019-07-05T08:05:12Z

校对认领

fanyijihua · 2019-07-05T08:05:15Z

@lgh757079506 妥妥哒 🍻

lgh757079506 · 2019-07-05T08:13:09Z

TODO1/micro-frontends-2.md

-* There should be a landing page where customers can browse and search for restaurants. The restaurants should be searchable and filterable by any number of attributes including price, cuisine, or what a customer has ordered previously
-* Each restaurant needs its own page that shows its menu items, and allows a customer to choose what they want to eat, with discounts, meal deals, and special requests
-* Customers should have a profile page where they can see their order history, track delivery, and customise their payment options
+* 应该有一个着陆页，消费者可以在这里浏览和搜索餐厅。这些餐厅可以通过任意数量的属性搜索或者过滤，包括价格、菜系或先前订单。


落地页、引导页都可以

lgh757079506 · 2019-07-05T08:19:15Z

TODO1/micro-frontends-2.md

-* brings the various micro frontends together onto the page, and tells each micro frontend when and where to render itself
+* 渲染公用页面元素，如页眉页脚
+* 解决跨页面的一些需求，如授权和导航
+* 讲多个微前端集成到页面上，并告知每个微前端何时在哪渲染自己


【讲】=》【将】

lgh757079506 · 2019-07-05T08:45:03Z

TODO1/micro-frontends-2.md

    error_page 404 /index.html;
 }
 ```

-This is fairly standard server-side composition. The reason we could justifiably call this micro frontends is that we've split up our code in such a way that each piece represents a self-contained domain concept that can be delivered by an independent team. What's not shown here is how those various HTML files end up on the web server, but the assumption is that they each have their own deployment pipeline, which allows us to deploy changes to one page without affecting or thinking about any other page.
+这是一个相对标准的服务端组合。我们能够将其称为微前端的原因是，我们将代码分离，这样每一部分代码都是一个自我包含的领域概念，并能够被一个独立的团队开发。我们没有看到的是，这些不同的 HTML 文件如何最后到了服务器端，但是我们假设每一个页面都有它们自己的部署流程，允许我们对一个页面部署修改，同时不影响或者无需考虑其他页面。


【如何最后到了服务器端】=》【最后如何到了服务器端】

lgh757079506 · 2019-07-05T08:46:16Z

TODO1/micro-frontends-2.md


-For even greater independence, there could be a separate server responsible for rendering and serving each micro frontend, with one server out the front that makes requests to the others. With careful caching of responses, this could be done without impacting latency.
+对于更大的独立性，每一个微前端都可以由分别的服务器来负责渲染，并由一个服务器负责向剩下的发送请求。使用精心设计的缓存来存储响应，这种实施方案不会影响延迟。


【分别的服务器】=》【独立的服务器】

lgh757079506 · 2019-07-05T10:28:59Z

TODO1/micro-frontends-2.md


-The flexibility of this approach, combined with the independent deployability, makes it our default choice, and the one that we've seen in the wild most often. We'll explore it in more detail when we get into the [full example.](#TheExampleInDetail)
+这一方法的灵活性，与独立部署性结合，是它成为了我们的默认选择，并且是最为常见的一种选择。当我们到了[完整示例](#TheExampleInDetail)时我们将会探索只这面的更多细节。


【是它成为了】=》【使它成为了】

leviding · 2019-07-05T10:47:12Z

@lihaobhsfer 有空的时候可以修改啦

leviding · 2019-07-07T06:03:16Z

TODO1/micro-frontends-2.md

-> * 译者：
-> * 校对者：
+> * 译者：[lihaobhsfer](https://github.com/lihaobhsfer)
+> * 校对者：[动力小车](https://github.com/Stevens1995)、[柯小基](https://github.com/lgh757079506)


Suggested change

> * 校对者：[动力小车](https://github.com/Stevens1995)、[柯小基](https://github.com/lgh757079506)

> * 校对者：[动力小车](https://github.com/Stevens1995)，[柯小基](https://github.com/lgh757079506)

leviding

注意文中的锚点。

leviding · 2019-07-07T09:42:37Z

@lihaobhsfer 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

lihaobhsfer · 2019-07-09T01:03:26Z

已发布（链接：https://juejin.im/post/5d1a91c7e51d45775f516ab9 ）谢谢！

* Finish translation * Modify translation in code comments * Fix format and delete original paragraphs * Resolve modification suggestions * Remove an extra empty line * Update micro-frontends-2.md

@LanceZhu

* translation/effiective BLoC pattern for flutter * feat: merge upstream master * 微前端：未来前端开发的新趋势 — 第二部分 (#6068) * Finish translation * Modify translation in code comments * Fix format and delete original paragraphs * Resolve modification suggestions * Remove an extra empty line * Update micro-frontends-2.md * Create kotlin-clean-architecture.md (#6085) * Create kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Create the-css-mindset.md (#6088) * Xcode 和 LLDB 高级调试教程：第 2 部分 (#6056) * 翻译部分文章 * Xcode 和 LLDB 高级调试教程：第 2 部分 * 参考 iWeslie 和 JasonWu1111 的校对意见进行校对，并添加校对名单 * 格式细节修改 * Update xcode-and-lldb-advanced-debugging-tutorial-part-2.md * Create collection-cognitive-biases-how-to-use-1.md (#6092) * Create collection-cognitive-biases-how-to-use-2.md (#6094) * Create collection-cognitive-biases-how-to-use-3.md (#6093) * 微前端：未来前端开发的新趋势 — 第四部分 (#6058) * 垂直排版：重提� writing-mode 垂直排版：重提� writing-mode * fix fix * 根据校对意见修改根据校对意见修改 * fix 作品链接 * translate * 根据校对意见修改 * Create the-state-of-graphql-by-reddit.md (#6099) * Create birdseye-go.md (#6100) * Create fountaincodes.md (#6101) * Create testing-react-apps-with-cypress.md (#6102) * Update birdseye-go.md * 自托管你的静态资源 (#6060) * 自托管你的静态资源自托管你的静态资源 * update 自托管你的静态资源 update 自托管你的静态资源 * Update self-host-your-static-assets.md * Update self-host-your-static-assets.md 数字/英文间加空格 * 格式问题修正 * 微前端：未来前端开发的新趋势 — 第三部分 (#6067) * Update micro-frontends-3.md 完成翻译 * Update micro-frontends-3.md 根据校对者意见修改完成 * Update micro-frontends-3.md * Web 流式文字排版的现状 (#6071) * 流式字体排版的现状 * accessibility 释义修改 * 统一翻译为流式文字排版 * 格式调整 * 校对修改 * Update the-state-of-fluid-web-typography.md * 纠错 (#6112) * 纠错 (#6111) * 推广 PWA 安装的模式（移动端） (#6087) * Update promoting-install-mobile.md 翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * Update promoting-install-mobile.md * 校对修改完成校对修改完成 * Update promoting-install-mobile.md 添加校对者 * 使用 SVG 和 Vue.Js 构建动态树图 (#6075) * 使用 SVG 和 Vue.Js 构建动态树图 * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * 格式问题修正 * 在 Python 中过度使用列表推导式和表达式生成器 (#6059) * 在 Python 中过度使用列表解析器和生成表达式在 Python 中过度使用列表解析器和生成表达式 * Update abusing-and-overusing-list-comprehensions-in-python.md JalanJiang 校对完成 * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * 设计任何图表的六项原则 (#6083) * translation_1 translation_1 * Proofreading_1 Proofreading_1 * 校对修改完成校对修改完成 * 添加校对者添加校对者 * Update redefining-data-visualization-at-google.md * Create creating-a-multi-level-hierarchical-flyout-navigation-menu-using-only-html-and-css.md (#6117) * Create css-architecture-for-multiple-websites.md (#6119) * Update css-architecture-for-multiple-websites.md * Create how-pagespeed-works.md (#6121) * CSS 思维模式 (#6124) * CSS 思维模式 CSS 思维模式 * adjust adjust * colon add colon & change some word * 校对修改完成校对修改完成 * 校对修改_2 校对修改_2 * 使用 Gomobile 和 Gopherjs 的动态二维码数据传输 (#6096) * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * 使用 Swift 5 构建一个 iOS 移动端群聊应用程序 (#6084) * translation/effiective BLoC pattern for flutter * feat: merge upstream master * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update effective-bloc-pattern.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Create the-10-statistical-techniques-data-scientists-need-to-master.md (#6126) * Create the-10-statistical-techniques-data-scientists-need-to-master.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create 101-tips-for-being-a-great-programmer-human.md (#6128) * Create 101-tips-for-being-a-great-programmer-human.md * Update 101-tips-for-being-a-great-programmer-human.md * Create xgboost-algorithm-long-may-she-reign.md (#6127) * Create xgboost-algorithm-long-may-she-reign.md * Update xgboost-algorithm-long-may-she-reign.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create a-step-by-step-explanation-of-principal-component-analysis.md (#6129) * Create a-step-by-step-explanation-of-principal-component-analysis.md * Update a-step-by-step-explanation-of-principal-component-analysis.md * Create when-to-standardize-your-data.md (#6130) * Create when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * 利用 84 种认知偏见设计更好的产品 —— 第一部分 (#6114) * docs(*): long opening and Part 1 * docs(*): 5 & 6 biases * docs(*): 7~10 biases * docs(*): Don’t call me a loser * docs(*): Disproportionately emotional * fix(*): Proofreading * fix(*): Proofreading * docs(*): Adding proofreader * Update collection-cognitive-biases-how-to-use-1.md * Create responsive-design-ground-rules.md (#6141) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md (#6143) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Create hermes.md (#6145) * Create hermes.md * Update hermes.md * 敏捷也许是个问题 (#6105) * 敏捷也许是个问题敏捷也许是个问题 * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Create frontend-vs-backend-which-one-is-right-for-you.md (#6148) * Create javascript-knowledge-reading-source-code.md * Update javascript-knowledge-reading-source-code.md * npm 的经济风云 —— 下半部分 (#6098) * npm 的经济风云 —— 下半部分 npm 的经济风云 —— 下半部分 * 第一次修改感谢 @LanceZhu 的宝贵建议。 * 第二次修改将”投机者“改为”拉投资的企业“。 * 第三次修改完成感谢校对者 @MarchYuanx @leviding * Git：透过命令学概念 —— 第二部分 (#6113) * 翻译『learn-git-concepts-not-commands-2』； * 完成翻译『learn-git-concepts-not-commands-2』； * 根据校对意见修改『learn-git-concepts-not-commands-2』； * 添加译者； * 修正译文部分格式问题 * review 『learn-git-concepts-not-commands-2』； * review 『learn-git-concepts-not-commands-2』； * 修正译文格式问题 * review 『learn-git-concepts-not-commands-2』； * 区域设置更改和 AndroidViewModel 反面模式 (#6080) * Update locale-changes-and-the-androidviewmodel-antipattern.md * 字母间空格以及译者链接添加 * 对格式进行修改 * Update locale-changes-and-the-androidviewmodel-antipattern.md * 更新七月份杂项积分和礼物兑换积分 * fix 积分 * 更新七月份部分前端分类文章翻译校对积分 * 更新七月份前端分类文章翻译校对积分 * Update front-end.md * Update backend.md * fix 积分 * Update ios.md * Update ios.md * Update AI.md * Update android.md * Update product.md * Update design.md * 更新七月上半月其他文章翻译校对积分 * fix 积分 * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update effective-bloc-pattern.md * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update using-node-js-to-read-really-really-large-files-pt-1.md

@LanceZhu

* translation/effiective BLoC pattern for flutter * feat: merge upstream master * 微前端：未来前端开发的新趋势 — 第二部分 (xitu#6068) * Finish translation * Modify translation in code comments * Fix format and delete original paragraphs * Resolve modification suggestions * Remove an extra empty line * Update micro-frontends-2.md * Create kotlin-clean-architecture.md (xitu#6085) * Create kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Create the-css-mindset.md (xitu#6088) * Xcode 和 LLDB 高级调试教程：第 2 部分 (xitu#6056) * 翻译部分文章 * Xcode 和 LLDB 高级调试教程：第 2 部分 * 参考 iWeslie 和 JasonWu1111 的校对意见进行校对，并添加校对名单 * 格式细节修改 * Update xcode-and-lldb-advanced-debugging-tutorial-part-2.md * Create collection-cognitive-biases-how-to-use-1.md (xitu#6092) * Create collection-cognitive-biases-how-to-use-2.md (xitu#6094) * Create collection-cognitive-biases-how-to-use-3.md (xitu#6093) * 微前端：未来前端开发的新趋势 — 第四部分 (xitu#6058) * 垂直排版：重提� writing-mode 垂直排版：重提� writing-mode * fix fix * 根据校对意见修改根据校对意见修改 * fix 作品链接 * translate * 根据校对意见修改 * Create the-state-of-graphql-by-reddit.md (xitu#6099) * Create birdseye-go.md (xitu#6100) * Create fountaincodes.md (xitu#6101) * Create testing-react-apps-with-cypress.md (xitu#6102) * Update birdseye-go.md * 自托管你的静态资源 (xitu#6060) * 自托管你的静态资源自托管你的静态资源 * update 自托管你的静态资源 update 自托管你的静态资源 * Update self-host-your-static-assets.md * Update self-host-your-static-assets.md 数字/英文间加空格 * 格式问题修正 * 微前端：未来前端开发的新趋势 — 第三部分 (xitu#6067) * Update micro-frontends-3.md 完成翻译 * Update micro-frontends-3.md 根据校对者意见修改完成 * Update micro-frontends-3.md * Web 流式文字排版的现状 (xitu#6071) * 流式字体排版的现状 * accessibility 释义修改 * 统一翻译为流式文字排版 * 格式调整 * 校对修改 * Update the-state-of-fluid-web-typography.md * 纠错 (xitu#6112) * 纠错 (xitu#6111) * 推广 PWA 安装的模式（移动端） (xitu#6087) * Update promoting-install-mobile.md 翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * Update promoting-install-mobile.md * 校对修改完成校对修改完成 * Update promoting-install-mobile.md 添加校对者 * 使用 SVG 和 Vue.Js 构建动态树图 (xitu#6075) * 使用 SVG 和 Vue.Js 构建动态树图 * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * 格式问题修正 * 在 Python 中过度使用列表推导式和表达式生成器 (xitu#6059) * 在 Python 中过度使用列表解析器和生成表达式在 Python 中过度使用列表解析器和生成表达式 * Update abusing-and-overusing-list-comprehensions-in-python.md JalanJiang 校对完成 * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * 设计任何图表的六项原则 (xitu#6083) * translation_1 translation_1 * Proofreading_1 Proofreading_1 * 校对修改完成校对修改完成 * 添加校对者添加校对者 * Update redefining-data-visualization-at-google.md * Create creating-a-multi-level-hierarchical-flyout-navigation-menu-using-only-html-and-css.md (xitu#6117) * Create css-architecture-for-multiple-websites.md (xitu#6119) * Update css-architecture-for-multiple-websites.md * Create how-pagespeed-works.md (xitu#6121) * CSS 思维模式 (xitu#6124) * CSS 思维模式 CSS 思维模式 * adjust adjust * colon add colon & change some word * 校对修改完成校对修改完成 * 校对修改_2 校对修改_2 * 使用 Gomobile 和 Gopherjs 的动态二维码数据传输 (xitu#6096) * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * 使用 Swift 5 构建一个 iOS 移动端群聊应用程序 (xitu#6084) * translation/effiective BLoC pattern for flutter * feat: merge upstream master * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update effective-bloc-pattern.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Create the-10-statistical-techniques-data-scientists-need-to-master.md (xitu#6126) * Create the-10-statistical-techniques-data-scientists-need-to-master.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create 101-tips-for-being-a-great-programmer-human.md (xitu#6128) * Create 101-tips-for-being-a-great-programmer-human.md * Update 101-tips-for-being-a-great-programmer-human.md * Create xgboost-algorithm-long-may-she-reign.md (xitu#6127) * Create xgboost-algorithm-long-may-she-reign.md * Update xgboost-algorithm-long-may-she-reign.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create a-step-by-step-explanation-of-principal-component-analysis.md (xitu#6129) * Create a-step-by-step-explanation-of-principal-component-analysis.md * Update a-step-by-step-explanation-of-principal-component-analysis.md * Create when-to-standardize-your-data.md (xitu#6130) * Create when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * 利用 84 种认知偏见设计更好的产品 —— 第一部分 (xitu#6114) * docs(*): long opening and Part 1 * docs(*): 5 & 6 biases * docs(*): 7~10 biases * docs(*): Don’t call me a loser * docs(*): Disproportionately emotional * fix(*): Proofreading * fix(*): Proofreading * docs(*): Adding proofreader * Update collection-cognitive-biases-how-to-use-1.md * Create responsive-design-ground-rules.md (xitu#6141) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md (xitu#6143) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Create hermes.md (xitu#6145) * Create hermes.md * Update hermes.md * 敏捷也许是个问题 (xitu#6105) * 敏捷也许是个问题敏捷也许是个问题 * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Create frontend-vs-backend-which-one-is-right-for-you.md (xitu#6148) * Create javascript-knowledge-reading-source-code.md * Update javascript-knowledge-reading-source-code.md * npm 的经济风云 —— 下半部分 (xitu#6098) * npm 的经济风云 —— 下半部分 npm 的经济风云 —— 下半部分 * 第一次修改感谢 @LanceZhu 的宝贵建议。 * 第二次修改将”投机者“改为”拉投资的企业“。 * 第三次修改完成感谢校对者 @MarchYuanx @leviding * Git：透过命令学概念 —— 第二部分 (xitu#6113) * 翻译『learn-git-concepts-not-commands-2』； * 完成翻译『learn-git-concepts-not-commands-2』； * 根据校对意见修改『learn-git-concepts-not-commands-2』； * 添加译者； * 修正译文部分格式问题 * review 『learn-git-concepts-not-commands-2』； * review 『learn-git-concepts-not-commands-2』； * 修正译文格式问题 * review 『learn-git-concepts-not-commands-2』； * 区域设置更改和 AndroidViewModel 反面模式 (xitu#6080) * Update locale-changes-and-the-androidviewmodel-antipattern.md * 字母间空格以及译者链接添加 * 对格式进行修改 * Update locale-changes-and-the-androidviewmodel-antipattern.md * 更新七月份杂项积分和礼物兑换积分 * fix 积分 * 更新七月份部分前端分类文章翻译校对积分 * 更新七月份前端分类文章翻译校对积分 * Update front-end.md * Update backend.md * fix 积分 * Update ios.md * Update ios.md * Update AI.md * Update android.md * Update product.md * Update design.md * 更新七月上半月其他文章翻译校对积分 * fix 积分 * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update effective-bloc-pattern.md * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update using-node-js-to-read-really-really-large-files-pt-1.md * Update using-node-js-to-read-really-really-large-files-pt-1.md

@LanceZhu

* translation/effiective BLoC pattern for flutter * feat: merge upstream master * 微前端：未来前端开发的新趋势 — 第二部分 (#6068) * Finish translation * Modify translation in code comments * Fix format and delete original paragraphs * Resolve modification suggestions * Remove an extra empty line * Update micro-frontends-2.md * Create kotlin-clean-architecture.md (#6085) * Create kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Update kotlin-clean-architecture.md * Create the-css-mindset.md (#6088) * Xcode 和 LLDB 高级调试教程：第 2 部分 (#6056) * 翻译部分文章 * Xcode 和 LLDB 高级调试教程：第 2 部分 * 参考 iWeslie 和 JasonWu1111 的校对意见进行校对，并添加校对名单 * 格式细节修改 * Update xcode-and-lldb-advanced-debugging-tutorial-part-2.md * Create collection-cognitive-biases-how-to-use-1.md (#6092) * Create collection-cognitive-biases-how-to-use-2.md (#6094) * Create collection-cognitive-biases-how-to-use-3.md (#6093) * 微前端：未来前端开发的新趋势 — 第四部分 (#6058) * 垂直排版：重提� writing-mode 垂直排版：重提� writing-mode * fix fix * 根据校对意见修改根据校对意见修改 * fix 作品链接 * translate * 根据校对意见修改 * Create the-state-of-graphql-by-reddit.md (#6099) * Create birdseye-go.md (#6100) * Create fountaincodes.md (#6101) * Create testing-react-apps-with-cypress.md (#6102) * Update birdseye-go.md * 自托管你的静态资源 (#6060) * 自托管你的静态资源自托管你的静态资源 * update 自托管你的静态资源 update 自托管你的静态资源 * Update self-host-your-static-assets.md * Update self-host-your-static-assets.md 数字/英文间加空格 * 格式问题修正 * 微前端：未来前端开发的新趋势 — 第三部分 (#6067) * Update micro-frontends-3.md 完成翻译 * Update micro-frontends-3.md 根据校对者意见修改完成 * Update micro-frontends-3.md * Web 流式文字排版的现状 (#6071) * 流式字体排版的现状 * accessibility 释义修改 * 统一翻译为流式文字排版 * 格式调整 * 校对修改 * Update the-state-of-fluid-web-typography.md * 纠错 (#6112) * 纠错 (#6111) * 推广 PWA 安装的模式（移动端） (#6087) * Update promoting-install-mobile.md 翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * 推广 PWA 安装的模式（移动端）翻译完成 * Update promoting-install-mobile.md * 校对修改完成校对修改完成 * Update promoting-install-mobile.md 添加校对者 * 使用 SVG 和 Vue.Js 构建动态树图 (#6075) * 使用 SVG 和 Vue.Js 构建动态树图 * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * Update building-a-dynamic-tree-diagram-with-svg-and-vue-js.md * 格式问题修正 * 在 Python 中过度使用列表推导式和表达式生成器 (#6059) * 在 Python 中过度使用列表解析器和生成表达式在 Python 中过度使用列表解析器和生成表达式 * Update abusing-and-overusing-list-comprehensions-in-python.md JalanJiang 校对完成 * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update TODO1/abusing-and-overusing-list-comprehensions-in-python.md Co-Authored-By: TrWestdoor <[email protected]> * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * Update abusing-and-overusing-list-comprehensions-in-python.md * 设计任何图表的六项原则 (#6083) * translation_1 translation_1 * Proofreading_1 Proofreading_1 * 校对修改完成校对修改完成 * 添加校对者添加校对者 * Update redefining-data-visualization-at-google.md * Create creating-a-multi-level-hierarchical-flyout-navigation-menu-using-only-html-and-css.md (#6117) * Create css-architecture-for-multiple-websites.md (#6119) * Update css-architecture-for-multiple-websites.md * Create how-pagespeed-works.md (#6121) * CSS 思维模式 (#6124) * CSS 思维模式 CSS 思维模式 * adjust adjust * colon add colon & change some word * 校对修改完成校对修改完成 * 校对修改_2 校对修改_2 * 使用 Gomobile 和 Gopherjs 的动态二维码数据传输 (#6096) * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * Update animated-qr-data-transfer-with-gomobile-and-gopherjs.md * 使用 Swift 5 构建一个 iOS 移动端群聊应用程序 (#6084) * translation/effiective BLoC pattern for flutter * feat: merge upstream master * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Update effective-bloc-pattern.md * Update how-to-build-ios-mobile-group-chat-app-swift-5-pubnub.md * Create the-10-statistical-techniques-data-scientists-need-to-master.md (#6126) * Create the-10-statistical-techniques-data-scientists-need-to-master.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create 101-tips-for-being-a-great-programmer-human.md (#6128) * Create 101-tips-for-being-a-great-programmer-human.md * Update 101-tips-for-being-a-great-programmer-human.md * Create xgboost-algorithm-long-may-she-reign.md (#6127) * Create xgboost-algorithm-long-may-she-reign.md * Update xgboost-algorithm-long-may-she-reign.md * Update the-10-statistical-techniques-data-scientists-need-to-master.md * Create a-step-by-step-explanation-of-principal-component-analysis.md (#6129) * Create a-step-by-step-explanation-of-principal-component-analysis.md * Update a-step-by-step-explanation-of-principal-component-analysis.md * Create when-to-standardize-your-data.md (#6130) * Create when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * Update when-to-standardize-your-data.md * 利用 84 种认知偏见设计更好的产品 —— 第一部分 (#6114) * docs(*): long opening and Part 1 * docs(*): 5 & 6 biases * docs(*): 7~10 biases * docs(*): Don’t call me a loser * docs(*): Disproportionately emotional * fix(*): Proofreading * fix(*): Proofreading * docs(*): Adding proofreader * Update collection-cognitive-biases-how-to-use-1.md * Create responsive-design-ground-rules.md (#6141) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md (#6143) * Create 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Update 16-devtools-tips-and-tricks-every-css-developer-need-to-know.md * Create hermes.md (#6145) * Create hermes.md * Update hermes.md * 敏捷也许是个问题 (#6105) * 敏捷也许是个问题敏捷也许是个问题 * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Update agile-agile-blah-blah.md * Create frontend-vs-backend-which-one-is-right-for-you.md (#6148) * Create javascript-knowledge-reading-source-code.md * Update javascript-knowledge-reading-source-code.md * npm 的经济风云 —— 下半部分 (#6098) * npm 的经济风云 —— 下半部分 npm 的经济风云 —— 下半部分 * 第一次修改感谢 @LanceZhu 的宝贵建议。 * 第二次修改将”投机者“改为”拉投资的企业“。 * 第三次修改完成感谢校对者 @MarchYuanx @leviding * Git：透过命令学概念 —— 第二部分 (#6113) * 翻译『learn-git-concepts-not-commands-2』； * 完成翻译『learn-git-concepts-not-commands-2』； * 根据校对意见修改『learn-git-concepts-not-commands-2』； * 添加译者； * 修正译文部分格式问题 * review 『learn-git-concepts-not-commands-2』； * review 『learn-git-concepts-not-commands-2』； * 修正译文格式问题 * review 『learn-git-concepts-not-commands-2』； * 区域设置更改和 AndroidViewModel 反面模式 (#6080) * Update locale-changes-and-the-androidviewmodel-antipattern.md * 字母间空格以及译者链接添加 * 对格式进行修改 * Update locale-changes-and-the-androidviewmodel-antipattern.md * 更新七月份杂项积分和礼物兑换积分 * fix 积分 * 更新七月份部分前端分类文章翻译校对积分 * 更新七月份前端分类文章翻译校对积分 * Update front-end.md * Update backend.md * fix 积分 * Update ios.md * Update ios.md * Update AI.md * Update android.md * Update product.md * Update design.md * 更新七月上半月其他文章翻译校对积分 * fix 积分 * NodeJS 读取大数据集合的几种方法的性能比较 * Update effective-bloc-pattern.md * Update streams-for-the-win-a-performance-comparison-of-nodejs-methods-for-reading-large-datasets-pt-2.md * Update streams-for-the-win-a-performance-comparison-of-nodejs-methods-for-reading-large-datasets-pt-2.md * 为代码块添加标签

lihaobhsfer added 3 commits July 1, 2019 19:02

Finish translation

ac1dd98

Modify translation in code comments

2e0f812

Fix format and delete original paragraphs

685c11d

fanyijihua added the 校对认领 label Jul 1, 2019

fanyijihua mentioned this pull request Jul 1, 2019

微前端：未来前端开发的新趋势 — 第二部分 #6023

Closed

lihaobhsfer changed the title ~~Translate/micro frontends 2~~ 微前端：未来前端开发的新趋势 — 第二部分 Jul 1, 2019

fanyijihua added the 正在校对 label Jul 2, 2019

leviding added the 前端 label Jul 2, 2019

ShupingHe reviewed Jul 4, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label Jul 4, 2019

fanyijihua removed the 校对认领 label Jul 5, 2019

lgh757079506 reviewed Jul 5, 2019

View reviewed changes

leviding removed the 正在校对 label Jul 5, 2019

lihaobhsfer added 2 commits July 6, 2019 23:19

Resolve modification suggestions

c453671

Remove an extra empty line

8738b7f

leviding reviewed Jul 7, 2019

View reviewed changes

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels Jul 7, 2019

Update micro-frontends-2.md

11e98ec

leviding approved these changes Jul 7, 2019

View reviewed changes

leviding merged commit 2f8d6ca into xitu:master Jul 7, 2019

leviding added 翻译完成 and removed 标注待管理员 Review labels Jul 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

微前端：未来前端开发的新趋势 — 第二部分 #6068

微前端：未来前端开发的新趋势 — 第二部分 #6068

lihaobhsfer commented Jul 1, 2019

ShupingHe commented Jul 2, 2019

fanyijihua commented Jul 2, 2019

ShupingHe left a comment •

edited

Loading

ShupingHe Jul 3, 2019

ShupingHe Jul 3, 2019

ShupingHe Jul 4, 2019

lgh757079506 Jul 5, 2019

ShupingHe Jul 4, 2019

ShupingHe Jul 4, 2019

ShupingHe Jul 4, 2019 •

edited

Loading

lgh757079506 commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

lgh757079506 Jul 5, 2019

lgh757079506 Jul 5, 2019

lgh757079506 Jul 5, 2019

lgh757079506 Jul 5, 2019

lgh757079506 Jul 5, 2019

leviding commented Jul 5, 2019

leviding Jul 7, 2019

leviding left a comment

leviding commented Jul 7, 2019

lihaobhsfer commented Jul 9, 2019 •

edited

Loading


		We start with a decidedly un-novel approach to frontend development - rendering HTML on the server out of multiple templates or fragments. We have an `index.html` which contains any common page elements, and then uses server-side includes to plug in page-specific content from fragment HTML files:
		我们从一个故意不够全新的前端开发方法开始 —— 在服务器端基于一些模板和代码片段渲染 HTML 页面。我们有一个 `index.html` 文件，包含所有公用的页面元素，然后我们用服务器端的 `includes` 来加入从 HTML 文件片段提取的页面内容：


		This example shows how micro frontends is not necessarily a new technique, and does not have to be complicated. As long as we're careful about how our design decisions affect the autonomy of our codebases and our teams, we can achieve many of the same benefits regardless of our tech stack.
		这个例子展示为何微前端不是一个新技术，并且不需要很复杂。只要我们仔细考虑我们的设计决定如何影响代码库和团队的自治，我们获得许多便利，无论我们的技术栈是什么。


		CSS as a language is inherently global, inheriting, and cascading, traditionally with no module system, namespacing or encapsulation. Some of those features do exist now, but browser support is often lacking. In a micro frontends landscape, many of these problems are exacerbated. For example, if one team's micro frontend has a stylesheet that says `h2 { color: black; }`, and another one says `h2 { color: blue; }`, and both these selectors are attached to the same page, then someone is going to be disappointed! This is not a new problem, but it's made worse by the fact that these selectors were written by different teams at different times, and the code is probably split across separate repositories, making it more difficult to discover.
		CSS 作为一种语言本质上是全局的，继承和级联的，传统上没有模块系统，命名空间或封装。这些功能现在确实存在，但通常缺乏浏览器支持。在微观前沿领域，许多这些问题都在恶化。例如，如果一个团队的微前端有一个样式表，上面写着 `h2 { color: black; }`，另一个人说 `h2 { color: blue; }`，并且这两个选择器都附加到同一页面，然后有人就会不高兴了！这不是一个新问题，但由于这些选择器是由不同团队在不同时间编写的，而且代码可能分散在不同的代码库中，因此更难以发现。


		The approach that you pick does not matter all that much, as long as you find a way to ensure that developers can write their styles independently of each other, and have confidence that their code will behave predictably when composed together into a single application.
		近几年来，人们想出了很多解决方案来使 CSS 更易于管理。有些人选择使用严格的命名规范，比如 [BEM](http://getbem.com/)，来确保选择器只会在想要的地方起作用。另外一部分人则选择不仅仅依赖于开发者规则，使用一个预处理器，如 [SASS](https://sass-lang.com/)，其选择器嵌套可以用做一种命名空间。一种更新的解决方案是将所有样式以程序的方式，用 [CSS modules](https://github.com/css-modules/css-modules) 或者众多 [CSS-in-JS](https://mxstbr.com/thoughts/css-in-js/) 库的一个来应用，以保证样式直接按照开发者的意图来应用。或者，[shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) 也以一种更加基于平台的方式提供样式分离。


		We mentioned above that visual consistency across micro frontends is important, and one approach to this is to develop a library of shared, re-usable UI components. In general we believe that this a good idea, although it is difficult to do well. The main benefits of creating such a library are reduced effort through re-use of code, and visual consistency. In addition, your component library can serve as a living styleguide, and it can be a great point of collaboration between developers and designers.
		我们在上面提到过，微前端的视觉一致性很重要，其中一种方法是开发一个共享的，可重用的 UI 组件库。总的来说，我们认为这是一个好主意，虽然很难做好。创建这样一个库的主要好处是通过重用代码和视觉一致性来减少工作量。此外，你的组件库可以作为一个样式指南，它可以是开发人员和设计人员之间的一个很好的协作点。


		For even greater independence, there could be a separate server responsible for rendering and serving each micro frontend, with one server out the front that makes requests to the others. With careful caching of responses, this could be done without impacting latency.
		对于更大的独立性，每一个微前端都可以由分别的服务器来负责渲染，并由一个服务器负责向剩下的发送请求。使用精心设计的缓存来存储响应，这种实施方案不会影响延迟。


		The flexibility of this approach, combined with the independent deployability, makes it our default choice, and the one that we've seen in the wild most often. We'll explore it in more detail when we get into the [full example.](#TheExampleInDetail)
		这一方法的灵活性，与独立部署性结合，是它成为了我们的默认选择，并且是最为常见的一种选择。当我们到了[完整示例](#TheExampleInDetail)时我们将会探索只这面的更多细节。

	> * 校对者：[动力小车](https://github.com/Stevens1995)、[柯小基](https://github.com/lgh757079506)
	> * 校对者：[动力小车](https://github.com/Stevens1995)，[柯小基](https://github.com/lgh757079506)

微前端：未来前端开发的新趋势 — 第二部分 #6068

微前端：未来前端开发的新趋势 — 第二部分 #6068

Conversation

lihaobhsfer commented Jul 1, 2019

ShupingHe commented Jul 2, 2019

fanyijihua commented Jul 2, 2019

ShupingHe left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShupingHe Jul 4, 2019 • edited Loading

Choose a reason for hiding this comment

lgh757079506 commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding commented Jul 5, 2019

Choose a reason for hiding this comment

leviding left a comment

Choose a reason for hiding this comment

leviding commented Jul 7, 2019

lihaobhsfer commented Jul 9, 2019 • edited Loading

ShupingHe left a comment •

edited

Loading

ShupingHe Jul 4, 2019 •

edited

Loading

lihaobhsfer commented Jul 9, 2019 •

edited

Loading