“elm-starter”，一款面向现代网络的工具

目标

这个工具是做什么用的？

演示

幕后花絮

SEO

类似项目

关于现代网络与传统网络

如何使用elm-starter

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

最近关于现代网络的一些讨论很有意思。

我个人认为

• 单页应用程序 (SPA) 在某些情况下被滥用，而更传统的服务器端方法可能更合适。
• 单页应用需要格外注意（导航、滚动、可访问性、搜索引擎优化等）。
• 许多单页应用（SPA）设计得并不精良，但如果设计得当，SPA 可以极大地提升用户体验。
• 浏览器才是处理复杂用户界面的天然场所，而不是服务器。
• 作为开发者，我（我们？）喜欢继续使用最好的工具来改善开发者体验。

关于最后一点，我觉得榆树语似乎带有某种诅咒：

“一旦你来到榆树镇，你就会想留在榆树镇。”

这种情况不仅发生在 Elm 语言中，而且发生在任何编译型、严格类型、类型推断、不可变、纯函数式且具有友好错误处理的语言中。

为了缓解这些问题，我编写了一个小脚本，将 Elm SPA 转换为静态生成的渐进式 Web 应用程序 (PWA)，名为elm-starter。

（是的，又一个）

目标

目标是拥有一个工具，该工具

• 主要用榆木书写（参见上文提到的诅咒）
• 支持大多数 Elm 库（elm-ui、elm-spa等）。
• 使用起来相对简单。
• 可用于引导启动新应用程序或转换现有应用程序
• 它不具侵入性，可以随时移除。

最终得到的 PWA 应具备以下特征

• 无需 Javascript 即可运行
• 可离线使用
• 可安装在手机/电脑上
• 对机器人友好（SEO）
• 支持预览卡
• 渲染速度快（在 Lighthouse 测试中获得高分）

经典的灯塔截图，还有彩带飘落🎉

在 Slack 中预览卡片：

这个工具是做什么用的？

• 生成 PWA 所需的所有文件
• 将所有元数据集中到一个“单一数据源”中。
• 生成静态页面

就这些。很简单！

演示

有 3 个使用以下技术制作的演示elm-starter：

1.官方 elm-starter演示版

• 演示

这是一个使用 SVG 对象的简单单页应用 (SPA)。它展示了 SPA 和多平台应用 (MPA) 的一个区别：页面过渡效果。此应用在启用和禁用 JavaScript 的情况下均可运行。唯一的区别是：禁用 JavaScript 时，不会有页面过渡效果。

请注意，页面过渡效果是通过对 SVG 应用 CSS 过渡实现的。我后来才意识到这仅在 Chrome 浏览器中受支持，而且我没有时间进行修改，但你应该能明白我的意思。

以下是启用和禁用 Javascript 的区别：

GIF

2. 待办事项 MVC

• 演示

这是经典的 Todo MVC，我曾在之前的文章中大量使用它来比较不同的框架。

这段代码最初由 Evan Czaplicki 编写，我只是对其进行了一些调整以修复一些辅助功能问题。

与之前的演示相比，由于其自​​身特性，这个演示在没有 Javascript 的情况下是无法运行的。

Slack上的预览卡片：

3.elm-spa示例

• 演示

这个例子展示了 elm-spa 的一个潜在协同作用。elm-spa 是一种创建复杂单页应用程序 (SPA) 的便捷工具，它通过自动生成 Elm 代码来处理许多事情。例如，要创建新页面，您只需在终端运行一个命令，它就会自动创建所需的文件、路由和逻辑。

elm-starter然后可以接管并将其转换为 PWA，静态生成所有路由。

在这个具体的例子中，所有页面都可以在没有 Javascript 的情况下访问，但是需要 Javascript 的小部件（例如计数器）将无法工作。

Slack上的预览卡片：

幕后花絮

• 所有文件均由 Elm 代码生成：

  • HTML：使用修改版的zwilias/elm-html-string生成。例如，Index.elm生成index.html。
  • JSON：使用elm/json生成。例如，Manifest.elm生成manifest.json。
  • CSS：由字符串生成。我知道这并非理想方案。rtfeldman /elm-css（即具有 Elm 类型安全性的 CSS）似乎没有公开toString转换器。无论如何，所需的 CSS 代码量elm-starter非常小，所以我将其保留为字符串。例如SnippetCss.elm。
  • Javascript：由字符串生成。同样，运行应用程序所需的 Javascript 代码量极少，所以我将其保存为字符串。对于大量的 Javascript 代码，最好将其保存在.js文件中。例如，SnippetJavascript.elm。

• 所有静态页面和快照均使用Puppeteer生成。

• 大部分 CSS 和 Javascript 代码都采用“逗号前导”或“分号前导”的格式（抱歉，我忍不住又用了这个例子，请再次见上文提到的Elm诅咒）。

这是Index.elm生成的快照index.html：

SEO

每个页面都是静态生成的，带有特定的元标签，以便搜索引擎蜘蛛能够轻松抓取它，即使它们不像谷歌那样先进，谷歌很久以前就能执行 Javascript 了。

有人说，即使谷歌可以运行 Javascript，它仍然更喜欢静态网站。

这是谷歌elm-starter在演示版发布几天后对其进行索引的方式：

类似项目

以下是一些其他优秀的项目，可用于引导 Elm 应用程序或生成静态网站：

• 榆树页
• 榆树
• 榆树温泉
• 创建 Elm 应用
• 黑桃

关于现代网络与传统网络

想要更深入地了解本文开头提到的争论：

• Adam Silver 指出单页应用程序的缺点。
• Matt Reyer开发无 JavaScript 前端
• 马克斯·博克著《90年代网络的回归》
• 服务器端渲染是蒂姆·拉弗尔斯提出的一个真理
• 格雷格·纳维斯著《无人需要的建筑》
• 我为什么讨厌你的单页应用程序？——斯特凡·蒂尔科夫
• 汤姆·麦克赖特对现代网络的质疑
• 里奇·哈里斯为现代网络辩护
• 克里斯·科伊尔著《现代网络》

如何使用elm-starter

您可以elm-starter在github.com/lucamug/elm-starter找到它。

开始使用它的最快方法是点击此按钮：

这将自动

• elm-starter在您的 GitHub 帐户中创建一个包含以下内容的存储库
• 使用您的 Netlify 帐户将其部署到线上。

要修改应用程序，只需将新仓库克隆到您的计算机上并运行：

$ npm install
$ npm start

现在您可以进行编辑，并在http://localhost:8000src/Main.elm确认结果后，将您的修改提交到 Github。

Netlify 将在几秒钟内自动发布新应用，包括重新生成所有静态页面。

更多信息请参见README文件。

就这些了，谢谢阅读！❤️

封面图片：从河口湖眺望富士山，图片来自 Pixabay用户WorldInMyEyes 。