Designing True Cross-Platform Apps
summary
Claims a single Ember codebase renders desktop, tablet and native apps with near-native performance if memory and reflow are managed; demos a small app called touch base built with Ember, Cordova/WK WebView, the occlusion scroller smoke and mirrors and layout system flexi. Shows that using translateX / translateY avoids reflow, that sustaining components recycles DOM instead of re-creating it, and that the approach pays one breakpoint cost instead of continual expensive reflows.
AI-written summary · about
chapters (12)
- 0:00Start
- 1:04Isle of Code
- 3:15Good Code == Good Hybrid
- 4:08A note on deviceready
- 7:04Manage Reflows
- 8:13What causes Reflow?
- 13:37Standard Ember Structure
- 19:01Our components are the same
- 19:45Media Queries
- 27:38Flexi
- 30:45Elements
- 33:55Further Optimization
related talks
26mResponsive cross-platform web apps: deliver the best UX across all the platforms
28mBeyond Responsive: Building a mobile web you're f*ing proud of
31mThe performance myths of React Native
31mMaking the Jump: How Desktop-Era Frameworks Can Thrive on Mobile
17mDelighting users with performant apps
54mTop 10 Key Performance Techniques for Hybrid mobile Apps
42mChallenges for Developers of Building Large Web Applications
40mJS performance in mobile web and hybrid apps… because science!