{"action":"created","comment":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/119264324","pull_request_review_id":41126367,"id":119264324,"diff_hunk":"@@ -160,42 +161,43 @@ function withHypernovaBootstrap(App) {\n export default compose(withPhrases, withHypernovaBootstrap);\n ```\n \n-A canonical higher order component for bootstrapping non-API data\n+用于引导非 API 数据规范的更高阶的组件\n \n-This higher order component does two very important things:\n \n-1. It receives a canonical shape of bootstrap data as a Plain Old JavaScript Object, and initializes all the supporting tooling correctly both for server-rendering and client-rendering identically.\n-2. It swallows everything except `bootstrapData`, another simple object which we expect `<App>`to load into Redux to be used by children as needed (in place of `BootstrapData.get`).\n+这个非常高阶的组件做了两件更重要的事情：\n \n-In a single shot, we eliminated `add_bootstrap_data` and prevented engineers from passing arbitrary keys through to top level React components. Order was restored to the shire, and before long we were navigating to routes dynamically in the client and rendering content of material complexity without Rails to prop it up (pun intended).\n+1. 它接收一个引导数据作为普通的旧对象的规范形式，并且正确地初始化所有支持的工具，用于服务器渲染和客户端渲染。\n+2. 它吞噬除了 `bootstrapData` 的一切 ，它是另一个简单的对象，必要时把 `<App>` 组件传入 Redux 作为 children 使用。\n \n-### Super-Charging the Frontend ###\n+单纯来看，我们删除了 `add_bootstrap_data`，并阻止工程师将任意键传递到顶级的 React 组件。秩序被重新恢复，以前我们在客户端中动态地导航到路由，并且渲染材料复杂的 content，而不需要Rails来支持它。\n \n-Server rework in hand, we now turn our gaze to the client.\n+### 进击的前端 ###\n \n-#### The Lazy-Loaded Single Page App ####\n+服务端的重构已经有了头绪，现在我们把目光转向客户端。\n \n-Gone are the days, friends, of the monster Single Page App (SPA) with a gruesome loading spinner on initialization. This dreaded loading spinner was the objection many folks raised when we pitched the idea of client-side routing with React Router.\n+#### 懒加载的单页面应用 ####\n+\n+那段日子已经过去了，朋友们，初始化时带着可怕 loading 的巨型单页面应用（SPA）已经不复存在了。当我们提出用 React Router 做客户端路由的方案时，可怕的 loading 是很多人提出拒绝的理由。\n \n ![](https://cdn-images-1.medium.com/max/800/1*O2fK16vfyWaDT-IR61drPw.png)\n \n-Lazy loading of route bundles in the Chrome Timeline\n+在 Chrome Timeline 中 route 包的懒加载\n \n-But if you look above, you’ll see the impact of [code-splitting](https://webpack.github.io/docs/code-splitting.html) and [lazy-loading](https://webpack.js.org/guides/lazy-load-react/) bundles by route. In essence, we server render the page and deliver just the bare minimum JavaScript required to make it interactive in the browser, then we begin proactively downloading the rest when the browser is idle.\n+但是，再看看上文，你就会发现路由对[代码分割](https://webpack.github.io/docs/code-splitting.html)和[延迟加载](https://webpack.js.org/guides/lazy-load-react/)进行捆绑造成的影响。实质上，我们在服务端渲染页面并且仅仅传输最低限度的一部分用于在浏览器端交互的 Javascript 代码，然后我们利用浏览器的空余时间主动下载其余部分。\n \n-On the Rails side, we have one controller for all routes delivered via the SPA. Each action is simply responsible for (1) making whatever API request the client would have made on client-side navigation, then (2) bootstrapping that data to Hypernova along with config. We went from thousands of lines of Ruby code per action (between the controller, helpers, and presenters) down to ~20–30 lines. Yahtzee.\n+在 Rails 端，我们有一个 controller 用于通过 SPA 交付的所有路由。每一个 action 只负责：（1）触发客户端导航中的一切请求，（2）将数据和配置引导到 Hypernova。我们把每个 action （controller、helpers 和 presenters 之间）都有上千行的 Ruby 代码缩减到 20-30 行。实力碾压。\n \n-But it’s not just code that is noticeably different…\n+但这不仅仅是代码的不同...\n \n ![](https://cdn-images-1.medium.com/max/800/1*EpKNHdS4Xzl9fRdGekUgEA.gif)\n \n-Side-by-side comparison fetching Homes for Tokyo: Legacy page load vs client-side routing (4–5x difference)\n+两种方式加载东京主页的对比（4-5 倍的差距）\n \n-…now transitions between routes are smooth as butter and a step change (~5x) faster, and we can break ground on the animations featured at the beginning of this post.\n+...现在页面间的过渡像奶油般顺滑，并且这一步大幅提升了速度（约 5 倍）。而且我们我们可以实现文章开头的那张动画特性。\n \n-#### AsyncComponent ####\n+#### 异步组件 ####\n \n-Prior to React, we would render an entire page at a time, and this practice carried over into our early React days. But we use an AsyncComponent similar to [this](https://medium.com/@thejameskyle/react-loadable-2674c59de178) as a way to load sections of the component hierarchy after mount.\n+在（采用）React 之前，我们需要一次渲染整个页面，我们以前的 React 都是这么做的。但现在我们使用异步组件，类似[这种](https://medium.com/@thejameskyle/react-loadable-2674c59de178)方式， 挂在（mount）以后加载组件层次结构的部分。","path":"TODO/rearchitecting-airbnbs-frontend.md","position":183,"original_position":183,"commit_id":"689a52b57d883309540606b1b6f396aecbc120f1","original_commit_id":"f36db67431cc7730fbca79c136bd81973afd8c11","user":{"login":"sqrthree","id":8622362,"avatar_url":"https://avatars1.githubusercontent.com/u/8622362?v=3","gravatar_id":"","url":"https://api.github.com/users/sqrthree","html_url":"https://github.com/sqrthree","followers_url":"https://api.github.com/users/sqrthree/followers","following_url":"https://api.github.com/users/sqrthree/following{/other_user}","gists_url":"https://api.github.com/users/sqrthree/gists{/gist_id}","starred_url":"https://api.github.com/users/sqrthree/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sqrthree/subscriptions","organizations_url":"https://api.github.com/users/sqrthree/orgs","repos_url":"https://api.github.com/users/sqrthree/repos","events_url":"https://api.github.com/users/sqrthree/events{/privacy}","received_events_url":"https://api.github.com/users/sqrthree/received_events","type":"User","site_admin":false},"body":"@sunui 这个还没有解决吧。","created_at":"2017-05-31T03:32:14Z","updated_at":"2017-05-31T03:32:14Z","html_url":"https://github.com/xitu/gold-miner/pull/1690#discussion_r119264324","pull_request_url":"https://api.github.com/repos/xitu/gold-miner/pulls/1690","_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/119264324"},"html":{"href":"https://github.com/xitu/gold-miner/pull/1690#discussion_r119264324"},"pull_request":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/1690"}}},"pull_request":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/1690","id":121750612,"html_url":"https://github.com/xitu/gold-miner/pull/1690","diff_url":"https://github.com/xitu/gold-miner/pull/1690.diff","patch_url":"https://github.com/xitu/gold-miner/pull/1690.patch","issue_url":"https://api.github.com/repos/xitu/gold-miner/issues/1690","number":1690,"state":"open","locked":false,"title":"Airbnb 的前端重构","user":{"login":"sunui","id":15194498,"avatar_url":"https://avatars3.githubusercontent.com/u/15194498?v=3","gravatar_id":"","url":"https://api.github.com/users/sunui","html_url":"https://github.com/sunui","followers_url":"https://api.github.com/users/sunui/followers","following_url":"https://api.github.com/users/sunui/following{/other_user}","gists_url":"https://api.github.com/users/sunui/gists{/gist_id}","starred_url":"https://api.github.com/users/sunui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sunui/subscriptions","organizations_url":"https://api.github.com/users/sunui/orgs","repos_url":"https://api.github.com/users/sunui/repos","events_url":"https://api.github.com/users/sunui/events{/privacy}","received_events_url":"https://api.github.com/users/sunui/received_events","type":"User","site_admin":false},"body":"#1664 翻译完成，可以校对了 @sqrthree  有些地方翻译的比较牵强，校对者多提意见","created_at":"2017-05-22T10:56:54Z","updated_at":"2017-05-31T03:32:14Z","closed_at":null,"merged_at":null,"merge_commit_sha":"a47bf40fe7a931e411a5b34510326a4016b54eed","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/xitu/gold-miner/pulls/1690/commits","review_comments_url":"https://api.github.com/repos/xitu/gold-miner/pulls/1690/comments","review_comment_url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}","comments_url":"https://api.github.com/repos/xitu/gold-miner/issues/1690/comments","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/689a52b57d883309540606b1b6f396aecbc120f1","head":{"label":"sunui:translate","ref":"translate","sha":"689a52b57d883309540606b1b6f396aecbc120f1","user":{"login":"sunui","id":15194498,"avatar_url":"https://avatars3.githubusercontent.com/u/15194498?v=3","gravatar_id":"","url":"https://api.github.com/users/sunui","html_url":"https://github.com/sunui","followers_url":"https://api.github.com/users/sunui/followers","following_url":"https://api.github.com/users/sunui/following{/other_user}","gists_url":"https://api.github.com/users/sunui/gists{/gist_id}","starred_url":"https://api.github.com/users/sunui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sunui/subscriptions","organizations_url":"https://api.github.com/users/sunui/orgs","repos_url":"https://api.github.com/users/sunui/repos","events_url":"https://api.github.com/users/sunui/events{/privacy}","received_events_url":"https://api.github.com/users/sunui/received_events","type":"User","site_admin":false},"repo":{"id":85324742,"name":"gold-miner","full_name":"sunui/gold-miner","owner":{"login":"sunui","id":15194498,"avatar_url":"https://avatars3.githubusercontent.com/u/15194498?v=3","gravatar_id":"","url":"https://api.github.com/users/sunui","html_url":"https://github.com/sunui","followers_url":"https://api.github.com/users/sunui/followers","following_url":"https://api.github.com/users/sunui/following{/other_user}","gists_url":"https://api.github.com/users/sunui/gists{/gist_id}","starred_url":"https://api.github.com/users/sunui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sunui/subscriptions","organizations_url":"https://api.github.com/users/sunui/orgs","repos_url":"https://api.github.com/users/sunui/repos","events_url":"https://api.github.com/users/sunui/events{/privacy}","received_events_url":"https://api.github.com/users/sunui/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/sunui/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":true,"url":"https://api.github.com/repos/sunui/gold-miner","forks_url":"https://api.github.com/repos/sunui/gold-miner/forks","keys_url":"https://api.github.com/repos/sunui/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/sunui/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/sunui/gold-miner/teams","hooks_url":"https://api.github.com/repos/sunui/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/sunui/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/sunui/gold-miner/events","assignees_url":"https://api.github.com/repos/sunui/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/sunui/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/sunui/gold-miner/tags","blobs_url":"https://api.github.com/repos/sunui/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/sunui/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/sunui/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/sunui/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/sunui/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/sunui/gold-miner/languages","stargazers_url":"https://api.github.com/repos/sunui/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/sunui/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/sunui/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/sunui/gold-miner/subscription","commits_url":"https://api.github.com/repos/sunui/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/sunui/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/sunui/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/sunui/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/sunui/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/sunui/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/sunui/gold-miner/merges","archive_url":"https://api.github.com/repos/sunui/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/sunui/gold-miner/downloads","issues_url":"https://api.github.com/repos/sunui/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/sunui/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/sunui/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/sunui/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/sunui/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/sunui/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/sunui/gold-miner/deployments","created_at":"2017-03-17T15:07:47Z","updated_at":"2017-03-17T13:13:53Z","pushed_at":"2017-05-31T03:27:49Z","git_url":"git://github.com/sunui/gold-miner.git","ssh_url":"git@github.com:sunui/gold-miner.git","clone_url":"https://github.com/sunui/gold-miner.git","svn_url":"https://github.com/sunui/gold-miner","homepage":"https://juejin.im/tag/掘金翻译计划","size":22821,"stargazers_count":0,"watchers_count":0,"language":null,"has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"xitu:master","ref":"master","sha":"7228fd54711b4c1e7c2cdad61211bf13b3536e3c","user":{"login":"xitu","id":10482599,"avatar_url":"https://avatars1.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"repo":{"id":45512989,"name":"gold-miner","full_name":"xitu/gold-miner","owner":{"login":"xitu","id":10482599,"avatar_url":"https://avatars1.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/xitu/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":false,"url":"https://api.github.com/repos/xitu/gold-miner","forks_url":"https://api.github.com/repos/xitu/gold-miner/forks","keys_url":"https://api.github.com/repos/xitu/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/xitu/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/xitu/gold-miner/teams","hooks_url":"https://api.github.com/repos/xitu/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/xitu/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/xitu/gold-miner/events","assignees_url":"https://api.github.com/repos/xitu/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/xitu/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/xitu/gold-miner/tags","blobs_url":"https://api.github.com/repos/xitu/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/xitu/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/xitu/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/xitu/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/xitu/gold-miner/languages","stargazers_url":"https://api.github.com/repos/xitu/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/xitu/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/xitu/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/xitu/gold-miner/subscription","commits_url":"https://api.github.com/repos/xitu/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/xitu/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/xitu/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/xitu/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/xitu/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/xitu/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/xitu/gold-miner/merges","archive_url":"https://api.github.com/repos/xitu/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/xitu/gold-miner/downloads","issues_url":"https://api.github.com/repos/xitu/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/xitu/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/xitu/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/xitu/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/xitu/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/xitu/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/xitu/gold-miner/deployments","created_at":"2015-11-04T03:29:13Z","updated_at":"2017-05-31T03:27:38Z","pushed_at":"2017-05-31T03:27:52Z","git_url":"git://github.com/xitu/gold-miner.git","ssh_url":"git@github.com:xitu/gold-miner.git","clone_url":"https://github.com/xitu/gold-miner.git","svn_url":"https://github.com/xitu/gold-miner","homepage":"https://juejin.im/tag/掘金翻译计划","size":23042,"stargazers_count":7830,"watchers_count":7830,"language":null,"has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":1476,"mirror_url":null,"open_issues_count":40,"forks":1476,"open_issues":40,"watchers":7830,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/1690"},"html":{"href":"https://github.com/xitu/gold-miner/pull/1690"},"issue":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/1690"},"comments":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/1690/comments"},"review_comments":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/1690/comments"},"review_comment":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/1690/commits"},"statuses":{"href":"https://api.github.com/repos/xitu/gold-miner/statuses/689a52b57d883309540606b1b6f396aecbc120f1"}}}}
{"actor":{"display_login":"sqrthree"}}