Elixir、Phoenix、Absinthe、GraphQL、React 和 Apollo：一次近乎疯狂的深度实践 —— 第二部分 #5712
Conversation
lsvih
changed the title
lsvih
changed the title
|
校对认领 |
|
@Xuyuey 好的呢 🍺 |
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
谢谢小姐姐/小哥哥对我的蠢笨的文章的翻译的校对。。。我没有检查就发了，感觉耽误了你好多时间。。。是在是太多错误了。。 我会好好再检查一遍的。 |
文章真的是还蛮细节的。。。就是技术有点点奇怪，不是特别主流。。我们正好也在上 Graphql 方面的东西，很有启发。。。 |
|
@Fengziyin1234 这篇好了吗？ |
我更倾向于 “小姐姐” 哈哈哈哈哈 😼 |
|
@Fengziyin1234 这篇改好了吗？检查下没啥问题我就 review 后 merge |
|
@xitu/fe-miners |
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
明天我再自己好好检查一遍吧，回头再把 校对和翻译信息加一下。。我觉得应该不会有人来校对了 |
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
|
|
||
| Elixir has a basic built-in testing library called ExUnit. It contains simple `assert`/`refute` helpers and handles running your tests. It’s also common in Phoenix to set up “case” support files; these are included in tests to run common setup tasks like connecting to the database. Beyond the defaults, there are two helper libraries that I found helpful in my tests — [ex_spec](https://hexdocs.pm/ex_spec/readme.html) and [ex_machina](https://hexdocs.pm/ex_machina/readme.html). ex_spec adds simple `describe` and `it` macros that make the testing syntax feel a little friendlier, at least from my ruby background. ex_machina provides factories which make it easy to dynamically insert test data. | ||
| Elixir 有一个非常基本的内置测试库，叫做 ExUnit。ExUnit 包括简单的 `assert`/`refute` 函数，也可以帮助你运行你的测试。在 Phoenix 中建立一系列 “case” support 文件的方法也非常常见。这些文件在测试中并引用，用于运行常见的初始化任务，例如连接数据库。此外，在我的测试中，我发现 [ex_spec](https://hexdocs.pm/ex_spec/readme.html) 和 [ex_machina](https://hexdocs.pm/ex_machina/readme.html) 这两个库非常有帮助。ex_spec 加入了简单的 `describe` 和 `it` 宏，对于有 ruby 相关背景的我，ex_spec 可以让测试的语法更加的友好。ex_machina 提供了 factory（工厂），这些 factory 可以让动态插入测试数据变得更简单。 |
There was a problem hiding this comment.
~~
"在测试中并引用"好像有点怪?
&&
Beyond the defaults 没译。是特地不译的吗
There was a problem hiding this comment.
哦哦 这边我给翻译成”此外“了。。defaults 这边我觉得是指之前的 ExUnit 不知道理解的对不对～
然后
在测试中被引用
| @@ -184,11 +184,11 @@ defmodule SocializerWeb.PostResolverTest do | |||
| end | |||
| ``` | |||
|
|
|||
| The resolver tests are also fairly simple — they’re also unit tests, just operating at one layer up from the models. We insert any setup data, invoke the resolver, and expect the correct result to be returned. | |||
| 对于 resolver 的测试也相当的简单 —— 只需要对 model 之上的逻辑层做单元测试。这里我们插入任意的测试数据，调用所测试的 resolver，然后期待正确的结果被返回。 | |||
There was a problem hiding this comment.
&&
they’re also unit tests, just operating at one layer up from the models
它们也是单元测试，只不过___的层次比 model 高一层
There was a problem hiding this comment.
它们也是单元测试，运行于 model 之上的一层
这边的 layer 我本来翻译成了逻辑层。。。我觉得这边应该是 controller layer 但是我也不确定这是不是他的意思。。于是我就决定翻译成 上一层哈哈 你看看可行～
| @@ -218,9 +218,9 @@ defmodule Socializer.AbsintheHelpers do | |||
| end | |||
| ``` | |||
|
|
|||
| There are three helper methods. The first takes a connection object and a user, and authenticates the connection by adding a header with an authentication token for the user. The second and third accept a query and return the JSON structure used to wrap a GraphQL query when sending it over the network. | |||
| 这个文件里包括了三个 helper 函数。第一个函数接受一个连接对象和一个用户对象作为参数，通过在 HTTP 的 header 中加入已认证的用户 token 来认证连接。第二个和第三个函数都接受一个查询语句作为参数，并且返回一个 JSON 对象。我们可以通过两个函数包装 GraphQL 查询语句并通过网络连接发送给服务器。 | |||
There was a problem hiding this comment.
&&
“the JSON structure used to wrap” 这个意思没有译出来
There was a problem hiding this comment.
这边我没有一个特别好的翻译方法。
我给拆成了两句。一个是返回 JSON ，第二个是 我们可以通过两个函数包装 GraphQL 查询语句并通过网络连接发送给服务器。不过你说得对，我好好想了这个语句
GraphQL 的话返回的本身就是一个 object。我想了一下，决定改成这样，你看看怎么样。
第二个和第三个函数都接受一个查询语句作为参数，当你通过网络连接发送查询语句给服务器时，这两个函数会返回一个包含该查询语句结果在内的 JSON 结构对象。
| @@ -256,9 +256,9 @@ defmodule SocializerWeb.Integration.PostResolverTest do | |||
| end | |||
| ``` | |||
|
|
|||
| This test exercises the endpoint to query for a list of posts. We start by inserting some posts into the database; write the query; post it to the connection; and check the response to make sure our test data was returned as expected. | |||
| 这个测试案例，通过查询来得到一组帖子信息的方式来测试我们的终端。我们首先在数据库中插入一些帖子的记录，然后写一个查询语句，接着通过 POST 方法将语句发送给服务器，最后检查服务器的回复，确保返回的结果是我们所期待的。 | |||
There was a problem hiding this comment.
~~
确保返回的结果是我们所期待的。 >
确保返回的结果符合预期。
|
|
||
| This is where the concept of server-side rendering (or SSR) comes in. Essentially, instead of serving a static HTML index file, we route requests to a Node.js server. The server renders the components (resolving any queries to the GraphQL endpoint) and returns the output HTML, along with the `<script>` tag to load the JavaScript. When the JavaScript loads on the client, it “hydrates” instead of fully rendering from scratch — meaning that it keeps the existing HTML provided by the server and connects it to the matching React tree. This approach allows search engines to easily index the server-rendered HTML, and also provides a faster experience for users since they don’t have to wait for the JavaScript to download, execute, and run queries before the page content is visible. | ||
| 这里，服务器端渲染（SSR）的概念被引入进来。本质上来说，相比于提供静态的 HTML 索引文件，我们将请求路由到 Node.js 服务器端。服务器渲染组件（解析对 GraphQL 端点的任何查询）并且返回输出的 HTML，和 `<script>` 标签来加载 JavaScript。当 JavaScript 在客户端加载，它会 “hydrates” 而不是从头开始渲染 —— 意味着它会保存已存在的，服务器端提供的 HTML 并将它和相匹配的 React 树联系起来。这种方法将允许搜索引擎简单的索引服务器渲染的 HTML，并且因为用户不再需要在页面可视之前等待 JavaScript 文件的下载，执行和进行查询，这也会为用户提供了一个更快的体验。 |
There was a problem hiding this comment.
~~
hydrates 可能用的是海绵吸水或者是干燥食品泡发的暗喻，就是说只要在原有的基本框架上加点东西就能成型
There was a problem hiding this comment.
嗯嗯 ～ hydrates 也是 react 的一个函数 不过这边确实是要使用 hydrate
我会把这边翻译成
它会使用 hydrate 函数而不是从头开始渲染
|
|
||
| Unfortunately, I found configuring SSR to be something of a wild west — the fundamentals are the same (run a Node.js server that renders components) but there are a number of different implementations and nothing that’s very well standardized. I lifted most of my application’s configuration from [cra-ssr](https://github.com/cereallarceny/cra-ssr), which provides a pretty comprehensive implementation of SSR for apps bootstrapped with create-react-app. I won’t delve too deep here, as cra-ssr’s tutorial provides a solid introduction. Suffice it to say that SSR is awesome and makes the app feel extremely fast to load, but getting it working is still a bit of a struggle. | ||
| 不幸的事，我发现配置 SSR 的方法有点狂野 —— 他们的基础是相同的（都是运行一个可以渲染组件的 Node.js 服务器）但是存在一些不同的实现，并且没有任何实现被标准化。我的应用的大部分的配置都来自于 [cra-ssr](https://github.com/cereallarceny/cra-ssr)，它为 create-react-app 搭建的应用用提供了非常易于理解的 SSR 的实现。因为 cra-ssr 的教程提供相当完善的介绍，我不会在这里做更加深入的剖析。我是想说，SSR 很棒并且使得应用加载的非常快，尽管实现它确实有点点困难。 |
There was a problem hiding this comment.
~~
不幸的事
&&
wild west 的文化意象在这里更强调“靠个人的努力，用各自的（或许是粗野的）手段解决困难”。可以译为各自为政，或者其他合适的中文典故
There was a problem hiding this comment.
wild west 的文化意象在这里更强调“靠个人的努力，用各自的（或许是粗野的）手段解决困难”。可以译为各自为政，或者其他合适的中文典故
谢谢这个解释～～
There was a problem hiding this comment.
这样可行？
我发现配置 SSR 事并没有一个通用的方法
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Outdated
Show resolved
Hide resolved
|
|
||
| With all that said, on the whole I give this stack very high marks, and I really enjoyed working on this project. Elixir and Phoenix are refreshing to use; there’s a learning curve coming from Rails, but I really like some of Elixir’s language features such as pattern matching and the pipe operator. Elixir has a lot of fresh ideas (and many battle-tested concepts from functional programming) that make it easy to write expressive, beautiful code. Absinthe was a breeze to use; it’s very well implemented with sound documentation and it covers all of the reasonable use cases around implementing a GraphQL server. And on the whole, I found that GraphQL delivered on its fundamental promises. It was easy to query the data I needed for each page, and also easy to wire up live updates via subscriptions. I’ve always enjoyed working with React and React Router, and this time was no different — they make it easy to build complex, reactive user interfaces for the frontend. Finally, I am very satisfied with the overall result — as a user, my application is blazing fast to load and navigate, and everything live updates so I’m never out of sync. If the ultimate measure of a technology stack is the user experience that results, I’d say this combination is a smashing success. | ||
| 总而言之，我给这套技术栈很高的评分，而且我非常的喜欢这个项目。Elixir 和 Phoenix 用起来让人耳目一新；如果你来自 Rails，会有一些学习的曲线，但是我真的非常喜欢 Elixir 的一些语言特点，例如模式匹配和通道运算符（pipe operator）。Elixir 有很多新颖的想法（以及来许多自函数式编程的经过实战考验的概念），让编写有意义的，好看的代码这件事变得十分简单。Absinthe 的使用就像是一阵清风；它实现的很好，文档极佳，几乎涵盖了所有实现 GraphQL 服务器的合理用例，并且从总体上来说，我发现 GraphQL 的基本承诺也被很好的传递。查询每一个页面我需要的数据十分简单，通过 subscription 实现实时的更新也非常容易。我一直都非常喜欢使用 React 和 React Router，这一次也不例外 —— 它们使得构建复杂，交互的前端用户界面变得简单。最后，我十分满意整体的结果 —— 作为一名用户，应用的加载和浏览非常快，所欲的东西都是实时的所以我从来不需要同步。如果说对技术栈的终极衡量标准是用户的体验，那这个组合一定是一个巨大的成功。 |
There was a problem hiding this comment.
~~
以及来许多自函数式编
~~
Absinthe 的使用就像是一阵清风：中文好像不会这么使用“清风”的意象。🌸❀❀春风拂面可以吗？
&&
deliver xxxx promise：表示实现/做到承诺
~~
所欲的
（不知道为什么我的脑海里浮现出孟子的《🐟我所欲也》 😀😀😀）
&&
我从来不需要同步 > 可以一直保持同步
There was a problem hiding this comment.
所欲的
（不知道为什么我的脑海里浮现出孟子的《🐟我所欲也》 😀😀😀）
哈哈哈 我当时大概就是那么想的～
|
@leviding @Fengziyin1234 校对完毕 |
|
@portandbridge 辛苦了 👍 @Fengziyin1234 可以修改了 |
TODO1/elixir-phoenix-absinthe-graphql-react-apollo-absurdly-deep-dive-2.md
Show resolved
Hide resolved
|
@portandbridge 非常谢谢你！❤️ @leviding 让我明天再检查看一遍！ |
|
@leviding 修改完成了 @xitu/fe-miners 请帮忙 review 一下～ 感谢～ |
| @@ -5,20 +5,20 @@ | |||
| > * 译者： | |||
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| @@ -5,20 +5,20 @@ | |||
| > * 译者： | |||
| > * 校对者： | |||
|
@Fengziyin1234 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。 掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。 |
译文翻译完成，resolve #5646