我的跨平台 Web 应用程序中的性能权衡是如何被用户忽视的。

所以这一切都始于我想出一个可以帮助父母让孩子为上学做好准备的应用程序的想法。

我是一个有 3 个孩子的父亲，我很生气，因为在工作中我有许多强大的工具来组织和管理我的团队。但是在家里让孩子们为上学做准备，我什么都没有。一片混乱。所以我想……为什么不为孩子们建立一个待办事项清单呢？我可以让用户体验看起来像一个游戏，甚至可以嵌入游戏化设计元素来帮助孩子们保持专注和参与。

所以我做了学校早上的例行公事。结果真棒（你可以在这里查看）。现在孩子们在大约 30% 的时间内为上学做好了准备，减少了 95% 的唠叨。（是的，我测量过；）

但是在我的开发过程中，我犯了一个巨大的错误。我浪费了很多时间来构建原生 iOS 应用程序。

选择移动应用技术（又名选择你的毒药）

现在，在 2022 年启动移动应用程序的问题在于，您可以采取许多完全不同的技术方向：原生、跨平台 Web 应用程序、React Native、Flutter、Progressive Web App、Xamarin 等。

制作应用程序的默认方式是编写 3 次代码，一次用于 iOS，一次用于 Android，一次用于 Web。

但是，对我们的软件开发人员来说，多次编码相同的东西是非常令人不安和不自然的。因此，多年来，我们创造了数十种方法来尝试“一次编码，随处运行”。但它们都涉及令人讨厌的权衡。

跨平台网络应用

使用跨平台 Web 应用程序，您只需使用常见的 Web 技术编写代码并将其部署到多个平台。在您需要使用浏览器无法使用的 iOS 和 Android 功能的地方添加少量本机代码。

但令人讨厌的权衡是性能。

在 2014 年，我实际上曾尝试使用 Ionic 框架来制作一个不同的应用程序，我发现了大多数人所做的事情：Android 和 iOS 在运行 Web 应用程序方面很糟糕。

它们是缓慢的、不可预测的、不稳定的、闪烁的、口吃的，并且触摸交互是不稳定的。

所以我很早就决定了 School Morning Routine 不能是一个跨平台的网络应用程序。我的应用会大量使用游戏风格的动画，而且因为它是为孩子设计的，所以它需要有出色的触摸交互。

走向本土

所以……我决定制作原生应用程序。它们通常是风险最小和质量最高的。当然，不得不多次编写同一个应用程序很糟糕，但无论如何它都是一个小应用程序……而且我相信肘部油脂胜过魔法。

（说到我不喜欢魔法，我不会在这里解释我没有选择 Flutter 或 React Native 等当前技术宠儿之一的原因。这些都是有趣的话题，应该在未来的某个时候发表自己的博客……）

所以，首先我写了一个漂亮的 iOS 应用程序。我和 beta 测试人员一起迭代了很多次。然后我在 App Store 上发布了它，以获得初始用户的一些非常积极的反馈。5 星评论，来自改变生活的用户的大量电子邮件，作品。

很高兴我取得了成功，我决定接下来构建 Web 应用程序。我将 React 与 CSS 动画、成帧器运动和一些令人愉快的 Lottie 动画一起使用。完成后，我花了一个下午仔细调整性能。只要确保没有不必要的渲染。叹息……#react_life

到那时，我的孩子们已经使用本机 iOS 版本的 School Morning Routine 几个星期了。所以为了测试新的跨平台网络应用程序版本，我把它放在我孩子的 iPad 上。他们可以通过使用它为上学做准备来测试它。

有趣的是，我只是忘记告诉他们我已将应用程序从本地应用程序更改为网络应用程序。但是早晨来了又去，他们没有注意到。

他们没有注意到。

他们甚至没有注意到。

如果您没有孩子，您可能不会意识到这一点，但孩子们会抱怨一切。认真的，一切。但他们不仅没有抱怨使用网络应用程序，第二天我还问他们是否注意到有什么不同。他们实际上感谢我，因为我不得不为网络版本使用不同的刻度动画，并且 2/3 更喜欢它。

他们是对的，动画像黄油一样流畅，触摸交互也很紧密。

我惊呆了。好吧，也许只是因为我有一个相对较新且功能强大的 iPad？所以我出去买了一台低端的安卓平板电脑。我选择了一个动力不足，甚至打开 Android 设置屏幕都卡顿和结结巴巴的。但这是一项重要的测试，因为对于许多人来说，这是他们可以访问的唯一设备。

好吧，我加载了学校早上的例程，你猜怎么着。这……很好。不是很出色，但是嘿，它是一款低端的 Android 平板电脑，你能期待什么？

所以……我走到办公桌前，删除了我的原生 iOS 应用程序，并决定使用Ionic Capacitor。

现在我开始编写一个应用程序并将其部署在三个平台上。查看我的构建脚本。使用 3 个命令，我可以部署到 iOS 应用程序、Android 应用程序或部署到我在 AWS 上的网站！

多么酷啊！

从那时起，我在 Android、iOS 和 Web 上发布了 School Morning Routine。我的 iOS 用户不仅没有注意到，而且实际上我的错误也更少。与渲染仅在 iOS 14 上发生的表格视图有关的问题导致了一个麻烦的错误，并且堆栈跟踪无用...叹息，#ios_life。但是随着我的跨平台网络应用程序消失了。

这条平线是跨平台网络应用程序发布的时间

不知何故，我的跨平台网络应用程序实际上更稳定！

到底是怎么回事？

如何使用网络应用程序为孩子们制作一个动画重的应用程序？

事实证明，2022 年，对于很多应用来说，write once run anywhere 的梦想终于实现了。

跨平台 Web 应用程序的成本/收益权衡一直是用更差的性能换取更少的开发时间。在 2014 年，对于大多数应用来说，这是一个糟糕的权衡。但在过去的 8 年里，发生了很多变化。浏览器性能稳步提升：

来源：https ://v8.dev/blog/10-years

Web 应用程序开发工具的种类和成熟度也在增加。现在我们有了 React 和 TypeScript。IDE 和 Chrome 调试器比原生的同类产品领先了光年。有创新的设计模式和开源库可用于每一个可以想象的目的。JavaScript 的世界比 Swift 或 Kotlin 的世界更加生机勃勃。

2022 年，成本/收益计算方式发生了变化。

那么我们现在在哪里？

我一直是 Ionic 团队的粉丝。他们几年前成立了一家公司，作为跨平台网络应用程序的早期倡导者。我喜欢他们的所作所为，但我一直为他们感到难过。看来他们赌错了马。支撑跨平台网络应用程序的技术无法支持他们的梦想。

我认为今天，技术终于赶上了 Ionic 团队的愿景。

School Morning Routine 正是几年前你会疯狂地构建为跨平台 Web 应用程序的那种应用程序。但它有效！很漂亮，认真的，看看吧！我将相同的应用程序部署到 Google Play 商店到 App Store，甚至可以在线使用。

不只是我，去年年底 Josh Wardle 创造了 Wordle，这款手机游戏目前正在占领世界。正如我在这篇文章中所写，它甚至没有移动应用程序。这是一个使用 Web Components 编写的渐进式 Web 应用程序。

结论

这是我希望我在开始写学校晨间例程之前阅读的帖子。因为过去我忽略了跨平台的网络应用程序。我只是假设他们太慢了。但它们是我的应用程序的完美选择。

浏览器和网络技术每年都变得更加强大和强大。每年都有更多种类的应用程序可以跨平台制作。

所以在你开始下一个项目之前，你为什么不看看跨平台的网络应用程序。也许它们不适合您的项目，但也许像我一样，您会发现您可以编写一次代码并在任何地方运行。我认为这太神奇了。

PlainEnglish.io上的更多内容。注册我们的免费每周通讯。在Twitter和LinkedIn上关注我们。加入我们的社区 Discord。

作者注：在这篇文章的前一个版本中，我推测了跨平台 Web 应用程序稳步改进的影响。我支持那些疯狂的猜测，但它们掩盖了这篇文章的目的，所以我把它们删掉了。

我希望没有人认为这篇文章是对原生开发或原生开发者的批评。我自己已经编写了十几个我喜欢的原生 iOS 和 Android 应用程序，并且在您阅读本文时，其中许多正在生产中使用。尽管跨平台 Web 应用程序是 School Morning Routine 的最佳选择，但今天，如果我必须制作一个大量使用本机功能或计算要求高的应用程序，我仍然会编写一个本机应用程序。