Phoenix LiveView

Phoenix LiveView 通过服务器渲染的 HTML 实现丰富的实时用户体验。

访问 https://livebeats.fly.dev 演示以了解您可以构建的应用类型，或查看以下预览：

https://user-images.githubusercontent.com/576796/162234098-31b580fe-e424-47e6-b01d-cd2cfcf823a9.mp4

<br />

在您的机器上安装 Elixir 后，只需两步即可创建您的第一个 LiveView 应用：

$ mix archive.install hex phx_new
$ mix phx.new demo

功能亮点

LiveView 为构建 Web 应用程序带来了统一的体验。您不再需要在客户端和服务器之间、跨不同的工具、层和抽象分割工作。相反，LiveView 通过声明性和强大的模型丰富了服务器，同时使您的代码更贴近数据（最终是您的事实来源）：

• 声明式渲染： 通过 WebSocket 在服务器上使用声明式模型渲染 HTML，包括可选的长轮询回退。

• 丰富的模板语言： 享受 HEEx：一种支持函数组件、插槽、HTML 验证、验证路由等的模板语言。

• 通过网络传输差异： LiveView 不是"通过网络传输 HTML"，而是准确知道模板的哪些部分发生了变化，在初始渲染后通过网络发送最小的差异，减少延迟和带宽使用。客户端利用这些信息并优化浏览器，与替换整个 HTML 片段的解决方案相比，更新速度提高了 5-10 倍。

• 实时表单验证： LiveView 支持开箱即用的实时表单验证。创建丰富的用户界面，具有上传、嵌套输入和专门恢复等功能。

• 文件上传： 具有进度指示器和图像预览的实时文件上传。实时处理您的上传或将其提交到所需的云服务。

• 丰富的集成 API： 使用丰富的集成 API 与客户端交互，包括 phx-click、phx-focus、phx-blur、phx-submit 和 phx-hook，适用于需要编写 JavaScript 的情况。

• 乐观更新和过渡： 通过 Phoenix.LiveView.JS 使用 JavaScript 命令执行乐观更新和过渡。

• 松耦合： 通过具有松耦合模板、状态和事件处理的有状态组件重用更多代码 —— 这是企业应用程序开发的必要条件。

• 实时导航： 丰富的链接和重定向是 LiveView 保持应用程序轻量级和高性能的另一种方式。当用户在应用程序中导航时，客户端只加载所需的最少内容，而不会影响用户体验。

• 延迟模拟器： 使用延迟模拟器模拟慢速客户端与应用程序的交互方式。

• 强大的测试套件： 使用 Phoenix LiveView 内置的测试工具自信地编写测试。不再需要在测试旁运行整个浏览器。

学习

查看我们的综合文档以开始使用。

Phoenix 框架文档还保留了一份社区资源列表，包括书籍、视频和其他材料，其中一些也包括 LiveView。

另外，关注 Phoenix 团队关于 LiveView 的以下公告，以获取更多示例和理由：

• LiveBeats：使用 Phoenix LiveView 构建社交音乐应用

• 使用 LiveView 构建实时 Twitter 克隆

• 初始公告

安装

LiveView 默认包含在所有新的 Phoenix v1.6+ 及更高版本的应用程序中。如果您有一个较旧的现有 Phoenix 应用程序，并希望添加 LiveView，请参阅之前的安装指南。

是什么让 LiveView 与众不同？

LiveView 以服务器为中心。您不再需要担心管理客户端和服务器以保持同步。LiveView 会在服务器发生变化时自动更新客户端。 LiveView最初作为常规HTTP请求的一部分进行静态渲染，这不仅能提供快速的"首次有意义绘制"时间，还有助于搜索和索引引擎。

随后，LiveView在客户端和服务器之间建立持久连接。与每次请求都需要认证、解码、加载和编码数据的无状态请求相比，这使得LiveView应用能更快地响应用户事件，因为需要处理的工作更少，传输的数据也更少。

LiveView首次发布时，许多不同背景的开发者都被LiveView解锁的潜力所启发，可以用它来构建丰富的实时用户体验。我们相信LiveView建立在坚实的基础之上，这使得LiveView难以在其他地方被复制：

• LiveView基于Elixir编程语言和函数式编程，为推理代码和LiveView随时间变化提供了excellent模型。

• 通过构建在可扩展平台之上，LiveView在垂直方向（从小型到大型实例）和水平方向（增加更多实例）都能很好地扩展。这使得你能在更多用户加入应用时继续交付功能，而不是处理性能问题。

• LiveView应用是分布式和实时的。LiveView应用可以在系统中任何地方发生事件时将其推送给用户。你想在用户的好友刚刚上线时通知他们吗？无需编写一行自定义JavaScript代码，也无需额外的外部依赖（无需额外的数据库、Redis或消息队列等），就可以轻松实现。

• LiveView执行变更跟踪：当你在服务器上更改一个值时，LiveView只会向客户端发送已更改的值，大大减少延迟和通过网络传输的数据量。这要归功于Elixir的不可变性及其将代码视为数据的能力。

浏览器支持

支持所有当前版本的Chrome、Safari、Firefox和MS Edge。 IE11支持需要以下polyfills：

$ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill formdata-polyfill child-replace-with-polyfill classlist-polyfill new-event-polyfill @webcomponents/template shim-keyboard-event-key core-js

注意：MS Edge 12-18也需要shim-keyboard-event-key polyfill。

注意：MS Edge 12-80和Safari < 15.4还需要event-submitter-polyfill包。

// assets/js/app.js
import "mdn-polyfills/Object.assign"
import "mdn-polyfills/CustomEvent"
import "mdn-polyfills/String.prototype.startsWith"
import "mdn-polyfills/Array.from"
import "mdn-polyfills/Array.prototype.find"
import "mdn-polyfills/Array.prototype.some"
import "mdn-polyfills/NodeList.prototype.forEach"
import "mdn-polyfills/Element.prototype.closest"
import "mdn-polyfills/Element.prototype.matches"
import "mdn-polyfills/Node.prototype.remove"
import "child-replace-with-polyfill"
import "url-search-params-polyfill"
import "formdata-polyfill"
import "classlist-polyfill"
import "new-event-polyfill"
import "@webcomponents/template"
import "shim-keyboard-event-key"
import "event-submitter-polyfill"
import "core-js/features/set"
import "core-js/features/url"

import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
...

贡献

我们感谢对LiveView的任何贡献。

请查看Phoenix的行为准则和贡献指南。

运行Elixir测试：

$ mix deps.get
$ mix test

运行所有JavaScript测试：

$ npm run setup
$ npm run test

运行JavaScript单元测试：

$ cd assets
$ npm install
$ npm run test
# 自动运行已更改文件的测试
$ npm run test.watch

或者简单地：

$ npm run setup
$ npm run js:test

运行JavaScript端到端测试：

$ npm run setup
$ npm run e2e:test

检查测试覆盖率：

$ npm run cover
$ npm run cover:report

欢迎JavaScript贡献，但请不要在拉取请求中包含更新后的priv/static/phoenix_live_view.js。维护者会在发布过程中更新它。