{"id":36450,"date":"2022-07-07T15:23:17","date_gmt":"2022-07-07T19:23:17","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=36450"},"modified":"2022-07-08T16:37:07","modified_gmt":"2022-07-08T20:37:07","slug":"model-view-controller-store-reinventing-mvc-for-swiftui-with-boutique","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2022\/07\/07\/model-view-controller-store-reinventing-mvc-for-swiftui-with-boutique\/","title":{"rendered":"Model View Controller Store: Reinventing MVC for SwiftUI With Boutique"},"content":{"rendered":"

Joe Fabisevich<\/a> (tweet<\/a>):<\/p>\n

\n

Apple has never provided a blessed architecture for SwiftUI, and many developers have spent thousands of hours filling the gaps with their own ideas. A familiar approach for many developers is to take the MVVM<\/a> pattern many people adopted in their UIKit\/AppKit apps and translate it to the needs of SwiftUI. That can work well enough, but you begin to see some cracks in the architecture when you need to manage state and data flow<\/a> due how heavily SwiftUI leans on having a single source of truth. Others have taken the path of integrating powerful libraries such as The Composable Architecture<\/a> which provide you with the tools to reason about your entire application. TCA takes inspiration from redux<\/a>, more specifically The Elm Architecture<\/a>, two patterns that are rather incredible in how they allow you to define your entire application as a tree of state. But TCA’s great power comes with great responsibility<\/del> a very high learning curve, which can make it difficult to learn personally. TCA’s goals are much more of a fit for solving problems with a very high level of complexity, which may not be necessary for every app.<\/p>\n

[…]<\/p>\n

You can think the Store as the storage for your model objects, in SwiftUI this would be your single source of truth<\/a>. If you model your data correctly then your user interface will always do what you expect it to do. That relationship between data and user interface is why Views having a single source of truth is so important.<\/p>\n

I’ve built a batteries-included Store that comes with everything you’ll need out of the box called Boutique<\/a> to be the foundation for that data. Boutique<\/a> does no behind the scenes magic<\/em> and doesn’t resort to shenanigans like runtime hacking to achieve a great developer experience.<\/p>\n<\/blockquote>\n\n

Bodega<\/a>:<\/p>\n

Bodega is a straightforward actor-based library for writing files to disk with an incredibly simple API. Bodega is fully usable and useful on its own, but it’s also the foundation of Boutique<\/a>.<\/p>

[…]<\/p>

Bodega provides two kinds of storage for you, DiskStorage<\/code> and ObjectStorage<\/code>. DiskStorage<\/code> is for writing Data<\/code> to disk, and ObjectStorage<\/code> builds upon DiskStorage<\/code> allowing you to write any Codable<\/code> object to disk using a very similar API.<\/p>

Both DiskStorage<\/code> and ObjectStorage<\/code> are implemented as actors which means they take care of properly synchronizing disk reads and writes.<\/p><\/blockquote>\n\n

Boutique<\/a>:<\/p>\n

\n

Boutique is a simple but powerful persistence library, and more. With its dual-layered memory + disk caching architecture Boutique provides a way to build apps that update in real time with full offline storage in only a few lines of code using an incredibly simple API.<\/p>\n

[…]<\/p>\n

Storing images or other binary data in Boutique is technically supported but not recommended. The reason is that storing images in Boutique’s can balloon up the in-memory store, and your app’s memory as a result. For similar reasons as it’s not recommended to store images or binary blobs in a database, it’s not recommended to store images or binary blobs in Boutique.<\/p>\n

[…]<\/p>\n

The Store<\/code> is a simple way to gain the benefits of offline storage and realtime updates, but by using the @Stored<\/code> property wrapper we can cache any property in-memory and on disk with just one line of code.<\/p>\n<\/blockquote>\n\n

Previously:<\/p>\n