Building Shopify Mobile With Native And Web Technology
Article Summary
David Muzi from Shopify reveals how they solved a tricky problem: giving merchants access to thousands of third-party apps on mobile without requiring any code changes from developers.
Shopify's mobile team needed to balance native performance with feature parity across web and mobile. Their solution? A hybrid architecture that keeps core features native while strategically using web views for secondary features and third-party apps. The challenge was making embedded apps work seamlessly on mobile without breaking existing integrations.
Key Takeaways
- JavaScript middleware intercepts EASDK calls to collapse web nav into native bars
- Third-party apps reclaimed 40% more vertical screen space with zero code changes
- Shared JS bridge handles iOS WKWebView and Android WebView with platform-specific files
- Deep-linking works bidirectionally between native views and web content
- Feature parity achieved while keeping high-use features fully native for performance
Shopify built a JavaScript bridge that automatically optimizes thousands of third-party web apps for mobile, reclaiming 40% more screen space without requiring developers to change a single line of code.
About This Article
Shopify's mobile team had way more web developers than mobile developers. This made it really hard to keep up with feature releases across iOS, Android, and web at the same time.
Shopify built native implementations for the features people used most, then used web views for less critical stuff like settings and reports. They could reuse their responsive web admin design to speed things up.
Multiple teams could now work on features at once. Shopify Mobile got much closer to feature parity with the web admin, and the most-used features stayed optimized for native performance.
