教程 海湾主机crt_教程

教程 海湾主机crt

Phoenix LiveView Todos

凤凰城LiveView Todos

This article is a companion to my recent talk on LiveView Components at ElixirConf 2020.

本文是我最近在ElixirConf 2020上有关LiveView组件的演讲的辅助内容。

First, a little bit of context. Feel free to skim to get to the code below.

首先，一些背景。 随意浏览以下代码。

For the past 6ish years I’ve built UIs in JavaScript, mostly with React. Recently I was lucky to land a role on an amazing team of Elixir experts. Thus my entry into the exciting world of LiveView.

在过去的6年中，我主要使用React构建JavaScript的UI。 最近，我很幸运地加入了一支由Elixir组成的出色团队。 因此，我进入了LiveView令人兴奋的世界。

JavaScript is the language that took me from Hello World to building data science apps in React at Netflix and NVIDIA. I’ve grown intimately familiar with its quirks. I’ll never ever understand why typeof NaN === "number" but you can’t have everything.

JavaScript是使我从Hello World转到Netflix和NVIDIA在React中构建数据科学应用程序的语言。 我已经非常熟悉它的怪癖。 我永远不会理解为什么typeof NaN === "number"但您不能拥有一切。

JavaScript and I grew up together. We began with procedural code. We moved on to pseudo classes. Then I grew to love functional code with ES6. However elegant, map and reduce are still sugar. Same for classes.

我和JavaScript一起长大。 我们从过程代码开始。 我们进入了伪类。 然后我开始喜欢ES6的功能代码。 但是优雅， map和reduce仍然是糖。 类相同。

Elixir is a purely functional language. De-structuring is an elegant pattern introduced in ES6. Pattern matching, its close cousin, has been with Elixir from the start. The more I wade into its depths, the more I appreciate how thoughtfully Elixir was designed.

Elixir是一种纯粹的功能语言。 解构是ES6中引入的一种优雅模式。 模式匹配是它的近亲，从一开始就是Elixir。 我越深入，我对Elixir的设计就越发深思。

In many cases, React might still be the right way to build UIs. Mobile-friendly components already exist for things like data tables. React components are completely atomic. LiveComponents do need a parent LiveView module. However, LiveView has trivialized many of the things that trip up newer devs in React, such as data throttling and working with streaming data. Plus, Elixir!

在许多情况下，React可能仍然是构建UI的正确方法。 诸如数据表之类的移动友好组件已经存在。 React组件完全是原子的。 LiveComponents确实需要一个父LiveView模块。 但是，LiveView简化了许多令React中的新开发人员绊倒的事情，例如数据节流和处理流数据。 另外，长生不老药！

Now for the codes! First you will need to install Elixir, Postgres, and Phoenix.

现在输入代码！ 首先，您需要安装Elixir，Postgres和Phoenix。

On a Mac brewwill make some of these install steps much easier. Here are some really good instructions for getting the Elixir, Hex and Phoenix dependencies installed, along with a bit more background information on those.

在Mac上， brew将使其中某些安装步骤更加容易。 这是安装Elixir，Hex和Phoenix依赖项的一些非常好的说明，以及有关这些方面的更多背景信息。

Next you will need to install Postgres. Postgres is a fantastic open source database and it is also the default data store for Phoenix. You can also install Postgres with brew. Below are a few helpful commands.

接下来，您将需要安装Postgres 。 Postgres是一个很棒的开源数据库，它也是Phoenix的默认数据存储。 您也可以在brew安装Postgres。 以下是一些有用的命令。

# To install postgres
brew update
brew install postgres


# To create new user (necessary step before you can create a database):
createuser -d postgres


# To start up postgres:
brew services start postgresql

If you type brew services lis