“我们在 6 周内推出了我们的移动应用程序——没有编写任何 Swift 或 Kotlin 代码。” 当我们的 CEO 要求开发一款移动应用时,我们团队一片哗然。我们谁也不了解 React Native,想到要维护两个代码库(iOS + Android),我们就不寒而栗。
然后我们发现了Turbo Native——这个秘密武器让我们使用现有的 Rails 后端和零自定义 API 端点来发布一个完全原生感觉的应用程序。
以下是它的工作原理、何时使用以及我们从惨痛经历中吸取的残酷教训。
1.什么是 Turbo Native? TL;DR Turbo Native 可让您:
将您的 Rails 应用程序包装在本机 shell 中(iOS/Android) 重复使用 100% 的 HTML 视图 使用最少的粘合代码添加原生导航/手势 它不是一个跨平台框架。相反:
iOS:使用WKWebView+ 原生导航(Swift/ObjC) Android:使用WebView+ 原生导航(Kotlin/Java) 2. 我们如何在六周内完成它 步骤 1:本机 Shell 我们从官方的Turbo iOS和Turbo Android模板开始:
// iOS (Swift) let turboSession = WKWebViewConfiguration() let turboNavController = TurboNavigationController() turboNavController.route("/") // 👈 Loads your Rails root_url // Android (Kotlin) val turboSession = TurboSession() turboSession.visit("www.mytiesarongs.com") 关键见解:这只是一个披着原生外衣的浏览器,但具有关键的附加功能:
原生标签栏 滑动返回手势 离线支持 第 2 步:逐步增强 我们标记了现有的 Rails 视图以触发本机行为:
// Rails: Stimulus controller export default class extends Controller { takePhoto() { window.TurboNativeBridge.postMessage("requestCamera") } }
// iOS: Handle the message func webView(_ webView: WKWebView, didReceive message: WKScriptMessage) { if message.name == "requestCamera" { presentCamera() } } 3.《黄金三镖客》 ✅ 我们为什么喜欢它 交付速度比 React Native快 6 倍 零 API 更改(使用现有 HTML) App Store 24 小时内批准(无需 JS 引擎 = 更少的危险信号) ❌哪里痛 没有离线优先(没有认真的工作) 动画很笨重(与纯原生动画相比) 调试 = Safari Web Inspector(无 React DevTools) 😱 最大的惊喜 我们的App Store 评分高于竞争对手的 React Native 应用。用户无法分辨出这是一个 Web 视图,因为:
我们使用了原生导航栈 添加骨架加载状态 避免卡顿过渡 4. Turbo Native 与替代方案 Turbo Native 反应原生 扑 渐进式网页应用 代码重用 90% 50% 100% 100% 本土感觉 85% 95% 90% 50% 团队技能要求 Rails + CSS JavaScript 镖 轨道 离线支持 有限的 好的 伟大的 伟大的 最适合:
内部工具 CRUD 密集型应用 拥有强大 Rails 技能的团队 避免:
游戏 视频密集型应用 需要深度设备集成的应用程序 5.何时采用混合 我们混合了本地屏幕以实现关键流程:
// Swift: Show checkout natively if path == "/checkout" { presentNativeCheckout() } else { visit(path) // Default to Turbo } 混合获胜:
支付流程(更好地支持 Apple Pay/Google Pay) 相机/上传屏幕 复杂的动画 6. 如何开始
- 试用演示 iOS Starter Android Starter
- 审核你的 Rails 应用 修复响应式设计问题 添加turbo-native 元标记 使用Safari 的“请求移动网站”进行测试
- 规划你的原生附加功能 列出所需的设备 API(相机、GPS) 为慢速网络设计原生回退方案 “但是性能怎么样?” 我们的基准:
冷启动:1.2秒(本机为0.8秒) 导航:0.3秒(原生为0.1秒) 内存使用率:比原生高 30% 对于 95% 的应用程序来说,这并不重要。
尝试过 Turbo Native 吗?在下面分享你的成功/失败!以上内容由企业信息服务平台提供,致力于工商信用信息查询、企业风险识别、经营数据分析。访问官网了解更多:www.ysdslt.com