我最近尝试了一个有趣的项目，将Svelte作为LiveView的DSL使用。 在这篇文章中，我将介绍我的思路和一些我学到的东西。
对于那些不熟悉它的人，LiveView是Elixir和Phoenix的一部分，它允许您以一种类似于单页应用程序（SPA）的方式构建动态Web页面，但是所有逻辑都在服务器端处理。 它使用WebSocket实时更新DOM，这意味着对于那些不支持JavaScript的设备仍然可以正常工作。
然而，当我开始使用LiveView时，我发现自己的模板感到有些笨拙。 与这些模板一起编写类似于EEx的HTML似乎是一种过时且痛苦的方法，而且难以重新使用，抽象或构建可读性强的组件。因此，我决定寻找一种更好的方式。
我的想法是尝试使用Svelte作为LiveView的DSL。 Svelte是一个编译型框架，允许您将类似于Vue或React的组件构建为Web组件。相比之下，LiveView使用EEx样式的HTML和LiveView中间件来将事件分配到处理程序上，例如处理输入，单击等。
我开始我的试验，将Svelte编译到JavaScript，然后将其嵌入到LiveView模板中。 这使我可以轻松地构建可组合的Web组件。例如，通过将组件自己的状态添加到LiveView的状态中，我可以跨组件共享数据。
我发现，这种方法具有许多优点。首先，Svelte为我们带来了一种优雅而现代的交互式开发方式，而无需在服务器端处理所有逻辑。其次，Svelte具有出色的性能，可以随着组件变得越来越大而自动优化。 最后，LiveView和Svelte的结合使我们能够组合高级功能，从而以一种豪华且现代的方式来构建Web应用程序。
这次试验证明了对于那些正在寻找更好的Web开发方式的人来说很有趣。 如果您正在寻找新的灵感或已经使用LiveView，并且想要提高交互性和性能，请尝试将Svelte作为LiveView的DSL使用！
了解更多有趣的事情：https://blog.ds3783.com/