Slide 1

Slide 1 text

Cache management in flutter Data from APIs and Images

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Quick introduction to flutter

Slide 5

Slide 5 text

● 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

Slide 6

Slide 6 text

Importance of the cache

Slide 7

Slide 7 text

● 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 ?

Slide 8

Slide 8 text

● 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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Differents packages for cache data in flutter 4 Shared Preferences Hive Firestore Cache Sqflite 5

Slide 11

Slide 11 text

Introduction to Hive

Slide 12

Slide 12 text

● 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

Slide 13

Slide 13 text

Initialization of the package

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Read Write Delete

Slide 16

Slide 16 text

HiveObject

Slide 17

Slide 17 text

● 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

APIs calls with Hive

Slide 20

Slide 20 text

● 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 ?

Slide 21

Slide 21 text

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…

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

● 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...

Slide 25

Slide 25 text

Image cache with cached_network_image

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

● 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

Slide 28

Slide 28 text

Initialization and example of use

Slide 29

Slide 29 text

● 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.

Slide 30

Slide 30 text

Demo

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

THANK YOU!