对 Ruby China 的拙劣模仿，展示 LiveView 功能的 Elixir China 诞生了！

Hentioe — Thu, 10 Oct 2019 12:44:36 +0800

LiveView 展示

大家好，最近我使用 Phoenix 框架并完全基于 LiveView 构建了一个展示性质的网站，我模仿了 Ruby China 并称它做 Elixir China。

之所以说它是展示性质的，因为它没有接入真实的数据源。不过对于前端而言和接入真实数据源也没有什么差别。

完整的后端功能过于复杂，我创建这个网站的首要目的是想感受一下 LiveView，所以会不会让它具有真实功能看我后续还有无兴趣和精力。当然，如果有人想参与，它应该可以成为真正的 Elixir China。

LiveView 简单介绍

基于 LiveView 构建的 SPA 网站，感受上会觉得和 React/Vue 这类纯前端框架做出来的效果类似，但技术细节上却截然不同。

React/Vue 构建的前端，所有的页面（也就是各个组件）都在 JS 中定义好了，通过纯前端的路由切换显示不同的组件。但是 LiveView 的网站前端没有任何对 UI 的定义，所有的组件由后端提供。

LiveView 把状态和 View 层（概念上类似 React 组件的 render 方法）放在后端管理，后端根据状态的变化 diff 出需要更新的动态部分，以固定的数据结构响应给前端。前端有一个 LiveView 提供的库会自动帮你做页面更新。后端响应页面并不表示需要通过常规的 HTTP 访问来进行路由，因为 LiveView 提供的 URL 路由以触发隐式的 Websocket 通信的方式通知后端更新页面。类似的，页面的事件、表单等都可以触发这些已经封装好的基于隐式通信的异步更新。

也就是说你几乎不需要一行业务 JS 代码就能实现类似 React/Vue 的效果，并且因为 Websocket 的优势，它更加适合高事实性的网站。

在线预览：https://elixircn.bluerain.io

Hentioe (绅士喵)

对 Ruby China 的拙劣模仿，展示 LiveView 功能的 Elixir China 诞生了！

LiveView 展示

LiveView 简单介绍