一切始于我有了一个想法，帮助父母让孩子准备上学。
我是一个有三个孩子的父亲，我很烦恼的是，在工作中我有很多强大的工具来组织和管理我的团队，但在家里，为了让孩子准备上学，我一无所有。一片混乱。所以我想...为什么不为孩子建立一个待办事项清单呢？我可以让用户界面看起来像一个游戏，甚至嵌入游戏设计元素来帮助孩子集中注意力，保持参与。
所以我开发了“上学早晨计划”。效果非常棒（你可以在这里看看）。现在孩子们准备上学的时间缩短了30%，抱怨声减少了95%。（是的，我测量过了；）
但在开发过程中，我犯了一个巨大的错误。我浪费了很多时间来构建一个原生iOS应用程序。
选择移动应用技术（也就是选择你的毒药）
现在，2022年开发移动应用程序的问题在于，你可以采取很多完全不同的技术方向：原生，跨平台Web应用程序，React Native，Flutter，渐进式Web应用程序，Xamarin等等。
制作应用程序的默认方法是为iOS编写一次代码，为Android编写一次代码，为Web编写一次代码。
但是，对于我们软件开发人员来说，多次编写相同的代码是令人不安和不自然的。因此，多年来，我们已经创建了几十种方法来尝试“一次编码，到处运行”。但它们都涉及令人不愉快的折衷。
跨平台Web应用程序
对于跨平台Web应用程序，你只需使用常见的Web技术编写一次代码，然后将其部署到多个平台。如果你需要使用iOS和Android从浏览器不可用的功能，则需要少量的本地代码。
但是，它们的折衷是性能。
2014年，我实际上尝试使用Ionic框架制作了一个不同的应用程序，我发现了大多数人发现的情况：Android和iOS在运行Web应用程序时非常糟糕。
它们运行缓慢，不可预测，抖动，闪烁，卡顿，触摸交互不可靠。
所以我很早就决定“上学早晨计划”不能是跨平台Web应用程序。我的应用程序将涉及大量使用游戏风格的动画，因为它是给孩子们使用的，所以它需要具有出色的触摸交互。
原生应用
所以...我决定制作原生应用。它们通常是最不冒险和最高质量的。当然，写多次相同的应用程序很烦人，但它只是一个小应用程序...而且我相信肘部的力量胜过魔法。
（说到我不喜欢魔法，我不会在这里解释我没有选择Flutter或React Native等当前技术宠儿的原因。这些都是有趣的话题，值得在将来的博客文章中单独讨论。）
因此，我首先编写了一个美丽的iOS应用程序。我用测试版测试了好几次。然后我在App Store上发布了它，初期用户反馈非常积极。5星级评价，用户感激信件，改变了他们的生活。
由于我正在做一些成功的事情，我兴奋地决定接下来构建Web应用程序。我使用了React、CSS动画、帧动画和一些令人愉悦的Lottie动画。完成后，我花了一个下午仔细调整性能，确保没有不必要的渲染。叹气... #react_life
当时，我的孩子们已经使用原生iOS版本的“上学早晨计划”几周了。因此，为了测试新的跨平台Web应用程序版本，我将其放在了孩子的iPad上。他们可以使用它来准备上学测试。
有趣的是，我忘了告诉他们我已经将应用程序从原生应用程序更改为Web应用程序。但是早晨过去了，他们没有注意到。
他们没有注意到。
他们甚至没有注意到。
如果你没有孩子，你可能不会意识到这一点，但孩子会抱怨一切。真的，每件事都会抱怨。但是他们不仅没有抱怨使用Web应用程序，第二天我问他们是否注意到了什么不同，他们实际上感谢我，因为我必须为Web版本使用不同的勾选动画，其中2/3的人更喜欢它。
他们是正确的，动画非常流畅，触摸交互非常紧密。
我感到震惊。好吧，也许这只是因为我有一台相对新的高功率iPad？所以我出去买了一台低端的Android平板电脑。我选择了一款性能如此低劣，甚至打开Android设置屏幕也很卡顿的平板电脑。但这是一项重要的测试，因为对于许多人来说，这是他们唯一可以访问的设备。
好吧，我加载了“上学早晨计划”，猜猜发生了什么。它...很好。不是很出色，但是，嘿，它是一款低端的Android平板电脑，你能期待什么？
因此...我走到桌子前，删除了我的原生iOS应用程序，并决定使用Ionic Capacitor。
现在，我只需要编写一个应用程序，然后在三个平台上部署它。检查我的构建脚本。只需要3个命令，我就可以部署到iOS应用程序、Android应用程序，或在AWS上部署到我的网站！
太酷了！
从那时起，我已经在 Android、iOS 和 Web 上发布了 School Morning Routine。不仅我的 iOS 用户没有注意到，而且我还实际上有更少的 bug。有一个烦人的 bug，与渲染表视图有关，只在 iOS 14 上发生，而堆栈跟踪是无用的……哎，#ios_life。但是在我的跨平台 Web 应用程序中，这个问题消失了。
那条水平线是跨平台 Web 应用发布的时候
一些跨平台 Web 应用实际上更加稳定！
发生了什么？
如何使用 Web 应用程序制作针对儿童的动画应用程序？
原来在 2022 年，对于很多应用程序来说，一次编写到处运行的梦想终于实现了。
跨平台 Web 应用的成本效益权衡一直是为了交换较差的性能以换取更少的开发时间。在 2014 年，对于大多数应用程序来说，这是一个糟糕的权衡。但在过去的 8 年里，很多事情发生了变化。浏览器性能不断提高：
来源：https://v8.dev/blog/10-years
Web 应用程序的开发工具的多样性和成熟度也在增加。现在我们有 React 和 TypeScript。IDE 和 Chrome 调试器远远超越了本地的等效工具。有创新的设计模式和开源库，可用于任何可想象的目的。JavaScript 的世界比 Swift 或 Kotlin 的世界更加充满活力和活跃。
在 2022 年，成本效益计算已经改变了。
那么我们现在在哪里？
我一直是 Ionic 团队的粉丝。他们几年前创办了一家公司，成为跨平台 Web 应用的早期倡导者。我喜欢他们的作品，但我一直为他们感到难过。看起来他们押错了宝。支持跨平台 Web 应用的技术无法支持他们的梦想。
我认为今天，技术终于赶上了 Ionic 团队的愿景。
School Morning Routine 是那种几年前你会疯狂地将其构建为跨平台 Web 应用程序的应用程序。但它起作用了！它很漂亮，说真的，去看看吧！我将相同的应用程序部署到了 Google Play 商店、应用商店，甚至是在线的。
不仅是我，去年底 Josh Wardle 创建了 Wordle 移动游戏，它正在全球范围内风靡。正如我在这篇文章中所写的那样，它甚至没有移动应用程序。它是使用 Web 组件编写的渐进式 Web 应用程序。
结论
这是我希望在开始编写 School Morning Routine 之前阅读的帖子。因为过去我忽视了跨平台 Web 应用。我只是认为它们太慢了。但是对于我的应用程序来说，它们是完美的选择。
每年，浏览器和 Web 技术变得越来越有能力和强大。每年都会有更多种类的应用程序可以进行跨平台开发。
因此，在开始下一个项目之前，为什么不看看跨平台 Web 应用程序呢？也许它们不适合你的项目，但是也许，就像我一样，你会发现你可以编写一次代码并到处运行。我认为这很棒。
评论(0)