Overview
The article discusses the engineering behind m.uber, a lightweight web app designed to provide a high-performance alternative to the native Uber app. It highlights the challenges faced in building the app, including optimizing for low-end devices and slow network conditions, while maintaining a rich user experience.
What You'll Learn
1
How to implement server-side rendering with Preact
2
Why code splitting is essential for performance optimization
3
How to leverage service workers for caching strategies
Prerequisites & Requirements
- Understanding of web app performance optimization techniques
- Familiarity with Webpack and Babel(optional)
Key Questions Answered
How does m.uber ensure fast loading times on slow networks?
m.uber is designed to load quickly even on 2G networks, with a core app size of just 50kB gzipped and minified. This small size allows for a three-second time to interaction, ensuring users can request rides promptly, regardless of their network conditions.
What technologies were used to build m.uber?
m.uber was built using ES2015+, Preact for its lightweight nature, and Webpack for dynamic bundle splitting. It also utilizes Babel for transpilation and Styletron for CSS generation, ensuring a fast and responsive user experience.
What caching strategies does m.uber employ?
m.uber employs service workers to cache the initial HTML response and JavaScript bundles, allowing the app to serve content even during network interruptions. Additionally, local storage is used to keep the latest ride status data for quick re-rendering.
Key Statistics & Figures
Core app size
50kB
This size allows for quick loading times on slow networks, specifically designed for 2G conditions.
Time to interaction on 2G networks
3 seconds
This performance metric is achieved due to the app's optimized size and efficient loading strategies.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Preact
Used for building the UI with a focus on size and performance.
Build Tool
Webpack
Utilized for dynamic bundle splitting and optimizing the loading of JavaScript.
Transpiler
Babel
Used for transpiling ES2015+ code to ensure compatibility with older browsers.
Styling
Styletron
Employed for generating component-level CSS dynamically.
Key Actionable Insights
1Implementing server-side rendering can significantly enhance user experience by reducing initial load times.By rendering Preact on the server and inlining the resulting state and markup, m.uber achieves almost immediate content loading, which is critical for user retention.
2Utilizing service workers can improve app resilience and performance during network fluctuations.Service workers allow m.uber to cache essential resources, enabling the app to function smoothly even when connectivity is intermittent.
3Choosing lightweight libraries like Preact over heavier alternatives can drastically reduce app size.Preact's small footprint compared to React allows m.uber to maintain a rich user experience while keeping the app size minimal, which is crucial for users on low-end devices.
Common Pitfalls
1
Overloading the client with unnecessary JavaScript can lead to slow performance.
To avoid this, m.uber focuses on serving only essential JavaScript bundles, ensuring that users experience fast load times and interactions.
2
Neglecting error handling can complicate debugging in a lean tech stack.
m.uber addresses this by implementing lightweight tooling to capture and report errors effectively, ensuring that issues can be diagnosed without heavy libraries.
Related Concepts
Web Performance Optimization Techniques
Service Worker Caching Strategies
Dynamic Bundle Splitting With Webpack