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

Usey95 · 2019-06-29T15:00:10Z

译文翻译完成，resolve #6045

update

垂直排版：重提� writing-mode

fix

根据校对意见修改

lgh757079506 · 2019-07-05T08:06:18Z

校对认领

fanyijihua · 2019-07-05T08:06:20Z

@lgh757079506 好的呢 🍺

solerji · 2019-07-05T12:46:14Z

校对认领

fanyijihua · 2019-07-05T12:46:17Z

@solerji 妥妥哒 🍻

solerji · 2019-07-05T12:55:51Z

TODO1/micro-frontends-4.md


-Thanks to Martin Fowler for his feedback as well, and for giving this this article a home here on his website.
+感谢 Martin Fowler 的反馈意见，并发布在自己的网站上给了文章一个家。


『并发布在自己的网站上给了文章一个家』=> 『并发布文章到了自己网站的首页』

solerji · 2019-07-05T13:04:11Z

TODO1/micro-frontends-4.md

@@ -38,9 +38,9 @@ window.unmountBrowse = containerId => {
 };
 ```

-Usually in React.js applications, the call to `ReactDOM.render` would be at the top-level scope, meaning that as soon as this script file is loaded, it immediately begins rendering into a hard-coded DOM element. For this application, we need to be able control both when and where the rendering happens, so we wrap it in a function that receives the DOM element's ID as a parameter, and we attach that function to the global `window` object. We can also see the corresponding un-mounting function that is used for clean-up.
+通常在 React.js 应用中，`ReactDOM.render` 的调用会在最顶层作用域，这意味着一旦脚本文件加载完成，它就会立即在一个硬编码的 DOM 元素中开始渲染。对于这个应用，我们需要能够同时控制渲染发生的时间和位置，所以我们将它包裹在一个接收 DOM 元素 ID 作为参数的函数里，并把这个函数添加到全局的 `window` 对象。相应的，我们还可以看到用于清理的卸载函数。



『卸载函数』=> 『un-mounting 函数』

solerji · 2019-07-05T13:09:40Z

TODO1/micro-frontends-4.md


-Independently-built JavaScript bundles can cause duplication of common dependencies, increasing the number of bytes we have to send over the network to our end users. For example, if every micro frontend includes its own copy of React, then we're forcing our customers to download React **n** times. There is a [direct relationship](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) between page performance and user engagement/conversion, and much of the world runs on internet infrastructure much slower than those in highly-developed cities are used to, so we have many reasons to care about download sizes.
+独立构建的 Javascript bundle 会造成公共依赖的重复，从而增加了我们必须通过网络发送给最终用户的字节数。例如，如果每个微前端都包含了自己的 React 副本，那么我们将迫使用户下载 React **n** 次。页面性能与用户参与/转换有[直接关系](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)，并且世界上大部分地区运行在比发达城市慢得多的网络设施上，所以我们有很多理由关系下载体积。



『有很多理由关系下载体积』=> 『有很多理由关注下载体积』

solerji · 2019-07-05T13:15:46Z

@fanyijihua @Usey95 校对完成

leviding · 2019-07-07T09:28:23Z

@lgh757079506 记得校对哈~

lgh757079506

翻译的很棒哦！

lgh757079506 · 2019-07-08T02:59:17Z

TODO1/micro-frontends-4.md


-We [mentioned earlier](https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication) that cross-application communication should be kept to a minimum. In this example, the only requirement we have is that the browsing page needs to tell the restaurant page which restaurant to load. Here we will see how we can use client-side routing to solve this problem.
+我们[较早前提到](https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication)跨应用通信应该尽量避免。在这个例子中，我们唯一（需要跨应用通信）的需求是浏览页需要告诉详情页加载哪个餐馆。这里我们将看到怎样用客户端路由去解决这个问题。


使用全角中文标点（）

已经是全角了哈

lgh757079506 · 2019-07-08T03:10:30Z

TODO1/micro-frontends-4.md


-The first step is to choose which dependencies to share. A quick analysis of our compiled code showed that about 50% of the bundles was contributed by `react` and `react-dom`. In addition to their size, these two libraries are our most 'core' dependencies, so we know that all micro frontends can benefit from having them extracted. Finally, these are stable, mature libraries, which usually introduce breaking changes across two major versions, so cross-application upgrade efforts should not be too difficult.
+第一步是选择要共享的依赖。编译后代码的快速分析显示我们 50% 的 bundle 体积是由 `react` 和 `react-dom` 贡献的。抛开他们的体积不谈，这两个库是我们最“核心”的依赖，因此我们知道所有微前端都可以从提取它们成为公共依赖中受益。最后，这些都是稳定、成熟的库，通常只在两个主版本间引入重大更改，因此跨应用更新不会太困难。


【50% 的 bundle 体积是由 react 和 react-dom 贡献的】=》【50% 的 bundle 体积来源于 react 和 react-dom 】

lgh757079506 · 2019-07-08T03:23:04Z

@Usey95 @leviding 校对完成

leviding · 2019-07-08T06:27:03Z

@Usey95 可以修改啦

Usey95 · 2019-07-08T10:18:10Z

@leviding 根据校对意见修改完成，校对默认留了 github，如果要更新可以联系我@lgh757079506 @solerji

leviding · 2019-07-08T12:16:56Z

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

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

Usey95 · 2019-07-08T12:39:57Z

@leviding https://juejin.im/post/5d23394ae51d45778f076db0

* 垂直排版：重提� writing-mode 垂直排版：重提� writing-mode * fix fix * 根据校对意见修改根据校对意见修改 * fix 作品链接 * translate * 根据校对意见修改

@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 * 为代码块添加标签

Usey95 and others added 8 commits December 12, 2017 17:54

Merge pull request #1 from xitu/master

412aa66

update

垂直排版：重提� writing-mode

9ed5dbf

垂直排版：重提� writing-mode

fix

8f247da

fix

根据校对意见修改

5999bb0

根据校对意见修改

fix 作品链接

1d47a23

sync repo

92fec3c

Merge remote-tracking branch 'upstream/master'

7818e46

translate

cb3de6c

fanyijihua added the 校对认领 label Jun 29, 2019

fanyijihua mentioned this pull request Jun 29, 2019

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

Closed

Usey95 added 2 commits June 29, 2019 23:05

Merge remote-tracking branch 'upstream/master'

1e5d4bc

Merge branch 'master' into translation/micro-frontends-4.md

6cca9da

leviding added the 前端 label Jun 30, 2019

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

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

solerji previously approved these changes Jul 5, 2019

View reviewed changes

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

lgh757079506 reviewed Jul 8, 2019

View reviewed changes

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

根据校对意见修改

0c4e1a1

Usey95 dismissed solerji’s stale review via 0c4e1a1 July 8, 2019 10:15

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

leviding approved these changes Jul 8, 2019

View reviewed changes

leviding merged commit fb96c2f into xitu:master Jul 8, 2019

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Usey95 commented Jun 29, 2019

lgh757079506 commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

solerji commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

solerji Jul 5, 2019

solerji Jul 5, 2019

solerji Jul 5, 2019

solerji commented Jul 5, 2019

leviding commented Jul 7, 2019

lgh757079506 left a comment

lgh757079506 Jul 8, 2019

Usey95 Jul 8, 2019

lgh757079506 Jul 8, 2019

lgh757079506 commented Jul 8, 2019

leviding commented Jul 8, 2019

Usey95 commented Jul 8, 2019

leviding commented Jul 8, 2019

Usey95 commented Jul 8, 2019


		Thanks to Martin Fowler for his feedback as well, and for giving this this article a home here on his website.
		感谢 Martin Fowler 的反馈意见，并发布在自己的网站上给了文章一个家。


		Independently-built JavaScript bundles can cause duplication of common dependencies, increasing the number of bytes we have to send over the network to our end users. For example, if every micro frontend includes its own copy of React, then we're forcing our customers to download React n times. There is a [direct relationship](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) between page performance and user engagement/conversion, and much of the world runs on internet infrastructure much slower than those in highly-developed cities are used to, so we have many reasons to care about download sizes.
		独立构建的 Javascript bundle 会造成公共依赖的重复，从而增加了我们必须通过网络发送给最终用户的字节数。例如，如果每个微前端都包含了自己的 React 副本，那么我们将迫使用户下载 React n 次。页面性能与用户参与/转换有[直接关系](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)，并且世界上大部分地区运行在比发达城市慢得多的网络设施上，所以我们有很多理由关系下载体积。


		We [mentioned earlier](https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication) that cross-application communication should be kept to a minimum. In this example, the only requirement we have is that the browsing page needs to tell the restaurant page which restaurant to load. Here we will see how we can use client-side routing to solve this problem.
		我们[较早前提到](https://martinfowler.com/articles/micro-frontends.html#Cross-applicationCommunication)跨应用通信应该尽量避免。在这个例子中，我们唯一（需要跨应用通信）的需求是浏览页需要告诉详情页加载哪个餐馆。这里我们将看到怎样用客户端路由去解决这个问题。


		The first step is to choose which dependencies to share. A quick analysis of our compiled code showed that about 50% of the bundles was contributed by `react` and `react-dom`. In addition to their size, these two libraries are our most 'core' dependencies, so we know that all micro frontends can benefit from having them extracted. Finally, these are stable, mature libraries, which usually introduce breaking changes across two major versions, so cross-application upgrade efforts should not be too difficult.
		第一步是选择要共享的依赖。编译后代码的快速分析显示我们 50% 的 bundle 体积是由 `react` 和 `react-dom` 贡献的。抛开他们的体积不谈，这两个库是我们最“核心”的依赖，因此我们知道所有微前端都可以从提取它们成为公共依赖中受益。最后，这些都是稳定、成熟的库，通常只在两个主版本间引入重大更改，因此跨应用更新不会太困难。

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

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

Conversation

Usey95 commented Jun 29, 2019

lgh757079506 commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

solerji commented Jul 5, 2019

fanyijihua commented Jul 5, 2019

solerji Jul 5, 2019

Choose a reason for hiding this comment

solerji Jul 5, 2019

Choose a reason for hiding this comment

solerji Jul 5, 2019

Choose a reason for hiding this comment

solerji commented Jul 5, 2019

leviding commented Jul 7, 2019

lgh757079506 left a comment

Choose a reason for hiding this comment

lgh757079506 Jul 8, 2019

Choose a reason for hiding this comment

Usey95 Jul 8, 2019

Choose a reason for hiding this comment

lgh757079506 Jul 8, 2019

Choose a reason for hiding this comment

lgh757079506 commented Jul 8, 2019

leviding commented Jul 8, 2019

Usey95 commented Jul 8, 2019

leviding commented Jul 8, 2019

Usey95 commented Jul 8, 2019