FlutterMTL December Meetup 23 - Cache Management In Flutter

Transcript

1. Cache management in flutter Data from APIs and Images
2. Hello, my name is Théo 👋 I’m a French 󰏃 developer who has been in Montréal for almost 2 years, and I’m passionate about Flutter and development in general. 💻 I have 4 years of experience as a developer, and I primarily work with Flutter in my free time 😎 Théo AUGUST Taugust8
3. Agenda 1 2 3 4 5 6 Quick introduction to flutter Importance of the cache Introduction to Hive APIs calls with Hive Image cache with cache_network_image Demo
4. Quick introduction to flutter
5. • Flutter is a framework created by Google. • Dart is the language used for Flutter. (OOP) • It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. • Active and growing community. • Regular updates and support from Google. • Last stable version : 3.16.4
6. Importance of the cache
7. • Nature of Cache: ◦ Temporary storage on devices. ◦ Holds frequently accessed data. • Goal: ◦ Speeds up access to common information. ◦ Lowers data retrieval time. • Functionality: ◦ Quick access for apps. ◦ Reduces need for external server requests. What’s the cache ?
8. • Performance Improvement: ◦ Local storage leads to quicker data access. ◦ Reduced loading times for frequently used data. • Bandwidth Savings: ◦ Fewer network requests due to local data availability. ◦ Lower bandwidth costs. • User Experience Enhancement: ◦ Immediate response to user interactions. ◦ Shorter wait times for a smoother experience. • Offline Capability: ◦ Access data without an internet connection. Benefits of data caching Optimizing performance and user experience
9. Considerations Cache Invalidation Ensure that cached data is refreshed or invalidated when it becomes obsolete or irrelevant. Storage Size Balance the benefits of caching with the storage space needed for cached data.
10. Differents packages for cache data in flutter 4 Shared Preferences Hive Firestore Cache Sqflite 5
11. Introduction to Hive
12. • Type: NoSQL database for Flutter. • Attributes: Lightweight, fast. • Ease of use: User-friendly, supports custom types. • Performance: Enhances app efficiency with quick data access. • Security concern: Provides an encryption feature to securely store sensitive data What is Hive ? https://pub.dev/packages/hive
13. Initialization of the package
14. What are boxes ? • Comparison to SQL tables: ◦ Similar to tables in SQL databases. ◦ However, they don't have a predefined structure. ◦ Capable of containing a variety of data types. • Applicability: ◦ Ideal for both small and large-scale applications. ◦ For simple apps, a single box may suffice. ◦ For complex applications, multiple boxes can be used for better data organization. • Process: ◦ 'Open Box' process: Boxes must be opened before use. ◦ This action loads the data from local storage to memory. ◦ Ensures quick and efficient data access.
15. Read Write Delete
16. HiveObject
17. • Adapters in Hive act as bridges between your Dart objects and the database storage. They define how your custom Dart objects are stored and retrieved from the Hive database. • Use serialization process. • Provide a generator adapter based on annotations. Hive Adapters
18. Hive against competitors 1000 read iterations 1000 write iterations SharedPreferences is on par with Hive when it comes to read performance. SQLite performs much worse. Hive greatly outperforms SQLite and SharedPreferences when it comes to writing or deleting. Hive is definitely one of the best packages to date for local data storage in Flutter. Hive > SharedPreferences > SQLite
19. APIs calls with Hive
20. • Simple case of a call for an weather API • We take the API url as key • We take the response as the value • We check if the value already exist in the cache • If it not exist we made the call How to cache data from an API ?
21. There is some limit of this simplest approach, in the case of a weather app we want to have fresh data, so we need to have a refresh mechanism. • Implement an expiration mechanism using a timestamp or duration to track the freshness of cached data. • When fetching data, check if the cache has expired based on the defined expiration criteria. • If the data is expired, make a new API call to obtain fresh data. • Update the cache with the newly fetched and fresh data. Because we need to care about fresh data… It's not so simple…
24. • You can use multiple boxes for better data organization. • Define complex Dart classes to represent the structure of the API data you want to store. These classes can have relationships between them, lists, nested objects, etc. • Utilize relationships in Hive to manage associations between different data classes. For instance, if you have a User class and a Post class, you can use relationships to link posts to a specific user. • Create separate adapters for each complex data class. Each adapter is responsible for the serialization and deserialization of data for its respective class. If it’s more complex And chances are high...
25. Image cache with cached_network_image
26. Beyond JSON Data • Diversifying Cache Content ◦ Caching is not limited to JSON data fetched from APIs. • Images Matter Too ◦ Images often constitute a significant portion of app content. • Frequent Repetition ◦ Many images are reused across different screens or scenarios.
27. • Flutter package: ◦ Designed for loading and caching web images. ◦ Optimizes performance for repeated image loads. ◦ Reduces data usage. • Key features: ◦ Provides loading indicators for a better user experience. ◦ Enhances online image handling in Flutter applications. • Integration with flutter_cache_manager: ◦ Cached images utilize flutter_cache_manager. ◦ Manages storage and retrieval of files. ◦ Operates in the app's cache directory for optimal performance. Cached network image https://pub.dev/packages/cached_network_image
28. Initialization and example of use
29. • Custom Cache Key ◦ Provide a custom cache key for finer control over caching. Advanced features • Custom Cache Manager ◦ Implement a custom cache manager for more advanced caching strategies.
30. Demo
33. THANK YOU!