我用跨平台Web 应用程序替换了本机iOS 应用程序

2024-12-03 15:18:04 | 来源: 互联网整理

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

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

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

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

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

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

现在，在2022 年推出移动应用程序的问题是，您可以采用许多完全不同的技术方向：本机、跨平台Web 应用程序、React Native、Flutter、渐进式Web 应用程序、Xamarin 等。

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

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

跨平台网络应用

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

但令人烦恼的权衡是性能。

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

它们速度缓慢、不可预测、不稳定、闪烁、卡顿，并且触摸交互不稳定。

因此，我很早就决定School Morning Routine 不能成为跨平台的网络应用程序。我的应用程序将大量使用游戏风格的动画，并且由于它是为儿童设计的，因此它需要具有出色的触摸交互。

走向本土

所以.我决定制作一个本机应用程序。它们通常风险最小且质量最高。当然，多次编写同一个应用程序很糟糕，但无论如何它都是一个小应用程序.而且我更相信苦力而不是魔法。

（说到我对魔法的厌恶，我不会在这里解释为什么我没有选择像Flutter 或React Native 这样当前的技术宠儿之一。这些都是有趣的话题，值得在未来的某个时候拥有自己的博客……）

所以，首先我写了一个漂亮的iOS 应用程序。我与Beta 测试人员进行了多次迭代。然后我在App Store 上发布了它，以获得初始用户的一些非常积极的反馈。五星级评论、来自改变生活的用户的大量电子邮件都是有效的。

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

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

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

他们没有注意到。

他们甚至没有注意到。

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

他们是对的，动画很流畅，因为黄油和触摸交互很紧密。

我惊呆了。好吧，也许只是因为我有一台相对较新且功能强大的iPad？所以我出去买了一台低端Android平板电脑。我选择了一款功能不足的手机，甚至打开Android 设置屏幕也很缓慢且卡顿。但这是一项重要的测试，因为对于许多人来说，这是他们唯一可以使用的设备。

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

所以.我走到办公桌前，删除了本机iOS 应用程序，并决定使用离子电容器。

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

多酷啊！

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

这条扁平线是在跨平台Web 应用程序发布时出现的

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

到底是怎么回事？

如何使用网络应用程序为儿童制作一个动画丰富的应用程序？

事实证明，2022年，对于很多应用来说，一次写入，随处运行的梦想终将实现。

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

Web 应用程序开发工具的多样性和复杂性也在不断增加。现在我们有了React 和TypeScript。 IDE 和Chrome 调试器比本地调试器领先数光年。创新的设计模式和开源库可用于各种可以想象的目的。 JavaScript 的世界比Swift 或Kotlin 的世界更加充满活力。

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

那么我们现在在哪里？

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

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

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

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

结论

这是我希望在开始写学校早晨例行公事之前阅读过的帖子。因为过去我忽略了跨平台的Web应用程序。我只是认为他们太慢了。但它们非常适合我的应用。

浏览器和网络技术每年都变得更加强大和有能力。每年都会有更多种类的跨平台应用程序被开发出来。