我用跨平台Web 应用程序替换了本机iOS 应用程序，但没有人注意到

2024-12-03 14:58:04 | 来源: 互联网整理

不知何故，我的跨平台网络应用程序实际上更稳定。我认为我在开发原生iOS 应用程序上浪费了很多时间。

这一切都始于我想制作一个可以帮助父母安排孩子上学的应用程序。

我是3 个孩子的父亲。我在工作中有很多强大的工具来帮助我组织和管理我的团队，但在家里我没有工具来帮助我送孩子上学，而且我很恼火，因为我每次都会把事情弄得一团糟。所以我想，为什么不为孩子们列一个待办事项清单呢？我可以让体验感觉像一场游戏，甚至嵌入游戏化设计元素来帮助孩子们保持专注和参与。

所以我制定了“学校早晨例行公事”，效果非常好。现在，孩子们准备上学的时间减少了30%，我们唠叨的时间也减少了95%（是的，我算过）。

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

为什么最开始我选择了原生开发

2022年，启动移动App项目最大的问题是有很多完全不同的技术方向供你选择：原生应用、跨平台Web应用、React Native、Flutter、渐进式Web应用、Xamarin、等等。

默认的解决方案是编写三次代码，一次用于iOS，一次用于Android，一次用于Web。

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

如果您选择跨平台的Web应用程序，则只需使用常见的Web技术编写代码，然后将其部署到多个平台。只有少量涉及iOS和Android功能的原生代码无法在浏览器中运行。

但你需要在性能方面做出权衡。

2014 年，我尝试使用Ionic Framework 构建一个不同的应用程序，我发现了和大多数人一样的问题：Android 和iOS 运行的Web 应用程序很糟糕。

它们反应缓慢、行为不可预测、口吃、出现和消失，触摸屏交互体验很奇怪。

因此，我很早就决定School Morning Routine 不应该是一个跨平台的网络应用程序。该应用程序将大量使用游戏风格的动画，并且由于它是针对儿童的，所以它需要良好的触摸屏交互体验。

不知为何，我的跨平台 Web 应用实际上更稳定

所以，我决定开发一个本机应用程序。本机应用程序通常具有最低的风险和最高的质量。当然，同一个应用程序做两次并不是一件好事，但毕竟是一个小应用程序，我相信努力比魔法更重要。

首先，我制作了一个漂亮的iOS 应用程序，并与测试用户一起对其进行了多次迭代。然后我将其发布在App Store上并得到了一些用户反馈。除了收到五星级的评论外，还有来自用户的电子邮件。用户在电子邮件中写道，该应用程序如何改变了他们的生活和工作。

我对自己取得的成就感到很满意，并决定开发Web 应用程序将是我的下一步。我使用了React，加上CSS 动画、Framer 和一些Lottie 动画。开发完成后，我花了一个下午仔细调整性能，只是为了确保我没有进行不必要的渲染。

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

有趣的是，我忘记告诉他们该应用程序已从本机更改为网络应用程序，但第二天早上他们没有注意到。

他们没有注意到。

他们甚至没有注意到。

如果你没有孩子，你可能不会意识到这一点。你知道，孩子们抱怨一切。真的，一切。但是，当我第二天问他们是否注意到任何差异时，他们不仅没有抱怨网络应用程序，还感谢我，因为我在网络应用程序中使用了不同的动画，其中两个人更喜欢它。

他们是对的，新版本的动画流畅如黄油，触摸屏交互体验更加精准。

我用跨平台Web 应用程序替换了本机iOS 应用程序，但没有人注意到

我很震惊。也许这只是iPad的性能问题？所以，我出去买了一台低端Android平板电脑。我选择了一款功能配置较差的。即使打开设置屏幕也不顺畅。但这也是一项重要的测试，因为对于许多人来说，这是他们唯一可以使用的设备。

我加载了学校早晨例程，你猜怎么着，效果很好。它不是很好，但它只是一款低端Android 平板电脑，所以你还能指望什么呢？

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

现在，我想开发一个可以在三个平台上运行的应用程序。我的构建脚本中有3 个命令，用于部署到iOS、Android 或AWS 上的网站。

这太酷了！

从那时起，我在Android、iOS 和Web 上发布了School Morning Routine。我的iOS 用户不仅没有注意到，错误的数量也减少了。有一个与渲染表格视图相关的麻烦错误，仅发生在iOS 14 上，并且它打印的堆栈跟踪信息毫无用处……但在我的跨平台Web 应用程序中，这个问题不存在。

跨平台网络应用程序发布后出现直线

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

这是怎么回事？

一个到处都有动画的儿童应用程序怎么可能实际上是一个网络应用程序？

事实证明，到了2022 年，对于许多应用程序来说，一次编写、随处运行的梦想终于要实现了。

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

Web 应用程序开发工具的多样性和复杂性也在不断增加。现在，我们有了React 和TypeScript。 IDE 和Chrome 调试器比本机应用程序开发工具领先数光年。有许多创新的设计模式和开源库可用于实现您能想到的任何目标。 JavaScript 的世界比Swift 或Kotlin 的世界更加动态和丰富多彩。

2022年，成本与收益之间的权衡发生了变化。

跨平台 Web 应用的时代正在到来

我一直是Ionic 的忠实粉丝。他们几年前创立了一家公司，是跨平台Web 应用程序的早期倡导者。我喜欢他们所做的工作，但我总是为他们感到难过。他们似乎押错了赌注，支撑跨平台Web 应用程序的技术无法支持他们的梦想。

但今天，我认为该技术终于与Ionic 的愿景保持一致。

也许几年前您热衷于构建像School Morning Routine 这样的跨平台Web 应用程序。确实没有什么问题啊！真的很美，真的！我已经在Google Play Store 和Apple App Store 上发布了该应用程序，您甚至可以在线使用它。

不仅仅是我，Josh Wardle 去年年底开发了Wordle，这款手机游戏现在正在席卷全球。正如我在另一篇文章(https://uxdesign.cc/wordle-is-a-masterclass-in-product-design-simplicity-52de1ba06d85) 中所写，它甚至没有本机版本，只是使用Web 组件Web 应用程序开发的渐进版本。