Digest | Twitter的新存储架构

>  一份2021年03月08日的信息流提炼

### 每天学点Golang

#### 在容器中使用热重载和动态本地包的Golang应用

原文：[Golang app in a container with hot reloading and dynamic local package](https://raphaelpralat.medium.com/golang-app-in-a-container-with-hot-reload-and-dynamic-local-package-e860bdc920d5)

开发Go应用的一个好方法是使用Docker容器来运行它们。此外，拥有热重载是一个有用的功能，可以节省时间，直接看到代码更新。最后，能够在本地包和发布包之间轻松切换，对于微服务开发来说非常重要。

- 容器&热重载
  - 在Docker文件下载 包。`RUN go get github.com/githubnemo/CompileDaemon`
  - 用这个包构建并启动应用程序。`ENTRYPOINT CompileDaemon --build="go build main.go" --command="./main"`
- 使用动态本地包
  - `go mod edit -replace <path-to-your-repository>/mypackage=~/mypackage`

Dockerfile

```dockerfile
FROM golang:latest
WORKDIR /go/src/app
COPY . .
RUN go mod download -x
RUN go get github.com/githubnemo/CompileDaemon
ENTRYPOINT CompileDaemon --build="go build main.go" --command="./main"
```

Makefile

```makefile
SERVICE := go-hotreload
dev:
 GO_MOD=go.mod docker-compose up
dev-build:
 GO_MOD=go.mod docker-compose up --build
dev-local:
 GO_MOD=go.local.mod docker-compose up
dev-local-build:
 GO_MOD=go.local.mod docker-compose up --build
```

### 每天学点前端

#### 你应该经常使用的7种Vue模式

原文：[7 Vue Patterns That You Should Be Using More Often](https://medium.com/js-dojo/7-vue-patterns-that-you-should-be-using-more-often-b13cde4d2ae6)

代码参考附录。

1. 控制组件加载状态：[Handling Loading State](https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State)

- 在大型应用程序中，我们可能需要将应用程序划分为更小的块，只有在需要时才从服务器加载组件。Vue允许你将你的组件定义为一个工厂函数，它异步解析你的组件定义。

2. **v-once** 包含大量静态内容的组件的情况下，可以通过在根元素中添加v-once指令来确保它只被计算一次然后缓存：[Cheap Static Components](https://vuejs.org/v2/guide/components-edge-cases.html#Cheap-Static-Components-with-v-once)

3. 递归调用组件：[Recursive Components](https://vuejs.org/v2/guide/components-edge-cases.html#Recursive-Components)

4. 行内模版：[Inline Templates](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates)

5. 动态指令参数: [Dynamic Directive Arguments](https://vuejs.org/v2/guide/custom-directive.html#Dynamic-Directive-Arguments)

6. 对于`.passive`、`.capture`和`.once`事件修饰符，Vue提供了可以与`on`一起使用的前缀: [Event & Key Modifiers](https://vuejs.org/v2/guide/render-function.html#Event-amp-Key-Modifiers)

7. Vue2.2中引入的一种新的依赖注入方法：**Provide/Inject**。[Dependency Injection](https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection)

#### Observable 学习D3

原文：[Learn D3: Introduction](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3)

D3以动画和交互著称。可以制作柱状竞赛图，潜入分层柱状图、可折叠可缩放树状图。可以刷一个散点图矩阵或放大到一个区域图。动画可以成为讲故事的有力工具，而互动则可以让读者积极探索。

### 每天学点架构

#### Twitter是如何每天存储500M条推文的

原文：[How Twitter stores 500M tweets a day?](https://blog.pankajtanwar.in/how-twitter-stores-500m-tweets-a-day-1)

##### 推特使用统计

- 每天500MN推文
- ~每秒7000条微博
- 每秒钟8,000,000+次查询

##### Twitter的典型数据库服务器配置

惠普DL380，72GB内存，24盘RAID10

##### Twitter的新存储架构

Twitter构建了一个出色的数据存储框架Gizzard，用于创建分布式数据存储。

简单来说，Gizzard是一个中间件网络服务，它可以管理任意后端数据存储（如SQL数据库、Lucene、Redis或我们能想象到的任何数据存储后端）的数据分区。分区规则存储在一个转发表中，该表将键范围映射到分区。每个分区通过声明式复制树管理自己的复制。

每当我们发推文时，它都会被存储在一个建立在Gizzard之上的内部系统 "T-bird "中。二级索引存储在 "T-flock"（基于Gizzard）。唯一ID是用 "Snowflake "生成的。FlockDB用于ID到ID的映射。它基本上存储了ID之间的关系。

##### Twitter什么时候用哪个DB？

- MySQL - MySQL不能用于ID生成和图形存储。他们将MySQL用于<=1.5TB的小型数据集，并作为大型数据集的永久备份存储。
- Cassandra - 用于高速写和中低速读。另一个优势是易于集群扩展，可以在比MySQL便宜和简单的硬件上运行。
- Hadoop - Twitter内部使用hadoop来处理非结构化的大型数据集（如http日志）。主要优势是其大规模的水平扩展性和冗余性。
- Vertica - 被用于分析和大型聚合和连接。

### 其他值得阅读

- 看看图像生成A.I.在短短5年内的发展: [Take a Look at How Far Image Generation A.I. Has Come in Just 5 Years](https://onezero.medium.com/take-a-look-at-how-far-image-generation-a-i-has-come-in-just-5-years-236511618ca)
  - [DALL-E](https://openai.com/blog/dall-e/): OpenAI新发布的从文字生成图像的AI系统。
- Svelte NodeGUI，一个轻量级的Electron替代方案，拥有原生UI。https://news.ycombinator.com/item?id=26361423
- Git for 数据：[dolthub/dolt](dolthub/dolt)
  - Dolt是一个SQL数据库，你可以像git仓库一样进行分叉、克隆、分支、合并、推送和拉取。就像任何MySQL数据库一样连接到Dolt，使用SQL命令运行查询或更新数据。使用命令行界面导入CSV文件，提交你的更改，将它们推送到远程，或者合并你的队友的更改。
- 每个招聘者都希望你拥有的LinkedIn简介：[LinkedIn Profile Every Recruiter Want You To Have](https://blog.nickbulljs.com/linkedin-profile-every-recruiter-want-you-to-have)
- 40个免费开发者工具：[40 "Free Forever" Tools for Developers](https://hrishikesh1990.hashnode.dev/40-free-forever-tools-for-developers)

### 今日收获

- Greatness is consistency...Unheroic days can make for heroic decades. --**James Clear**

-  直白点，坚持就是胜利。

- 作家詹姆斯-鲍德温关于仇恨作为一种防御机制："I imagine one of the reasons people cling to their hates so stubbornly is because they sense, once hate is gone, they will be forced to deal with pain."

- 成功的企业家与其他人的区别在于**行动的倾向**。[Think less, do more](https://click.mlsend.com/link/c/YT0xNjM0MDgyODI3NTEzMzcwMDE4JmM9azBwMSZlPTE5MjgmYj01Mzk4NjIzMTAmZD1yNHY4ejl1.GwRsC5FprzQwCxjQVUuDArZTZA2Lcj6nn-ldYdZ5q0I)

Netflix Co-Founder Marc Randolph said this in a Reddit comment:

“Far and away, the thing that separates successful entrepreneurs from everyone else is a Predisposition to Action. They think less and they do more. The average time between when they have an idea and when they've figured out some way to get it out in the real world and test it . . .is about 15 minutes.

### 附录:snippets

- Vue Patterns

```js
//1. Handling Loading State
const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

//2. Cheap Static Components with “v-once”
Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

//3. Recursive Components
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

//4. Inline Templates
<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

//5. Dynamic Directive Arguments
<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})

//6. Event & Key Modifiers
on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

//7. Dependency Injection (Provide/Inject)
// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
```