{
"$type": "site.standard.document",
"canonicalUrl": "https://build.ms/2024/10/9/introducing-recap/",
"description": "Open sourcing Recap, a Swift library for creating beautiful What's New screens to highlight app updates and keep users informed about new features.",
"path": "/2024/10/9/introducing-recap/",
"publishedAt": "2024-10-09T12:00:00.000Z",
"site": "at://did:plc:b6eke66r3vbmnegg73qgprl6/site.standard.publication/3mmypfmg4sx2d",
"tags": [
"Engineering",
"iOS",
"Open Source",
"Swift",
"SwiftUI"
],
"textContent": "> Note: When I left Twitter to become an indie developer I committed to helping others with my work as much as I could. My goal has always been to make the lives of developers a little easier, so they can turn their ideas into, apps, products, and businesses. Every week this month I will be open sourcing something I've built for Plinky, my very own personal Open Source October. My career rests on the foundation that others have created, and I want to continue paying it forward by lowering the barrier for others to make what matters to them. Now, onto the post.\n\nWhat’s New? Nm, what’s new witchu?\n\nWe've all experienced launching one of our favorite apps, and seeing it's had a big update. When that happens you'll be greeted by screen that says \"What's New\", even Apple's apps do this. The What's New Screen is a great way to use one of the few moments an app has a user's attention, to let them know about the new value you've delivered.\n\n!Apple What's New Screens\n\nSince launching Plinky I've released an update every month. With so many new features, I wanted to ensure that people know I'm adding a lot of value to Plinky. This led me to build my own version of a What's New Screen, in a library I call Recap.\n\n<!--preview-snippet-->\n\nI had a few key priorities in mind when building my version of a What's New screen:\n\n1. Comprehensive version history: I wanted to showcase all the value I've added over time, so the What's New Screen can scroll back through every major update. This is especially useful for new users, who can easily discover Plinky's full feature set with each update.\n\n2. Effortless updates: With monthly app releases, adding new features to the What's New screen needed to be quick and straightforward. The release process is stressful enough, so I wanted to avoid adding more hurdles to it.\n\n3. On-brand design: Plinky is known for being colorful, playful, and customizable. I wanted my What's New screen to embody these qualities, while building Recap to fit in with any app's design language.\n\nI built a prototype of a What's New Screen in a few hours, and quickly decided to open source the project. My goal is to help developers focus on what they do best — creating value for their users. By open sourcing code that solves common problems, I hope to contribute to that mission.\n\nRecap\n\nRecap is a What's New Screen that requires just two lines of code to implement, but it offers much more. It delivers on all the priorities I mentioned earlier: it's easy to integrate, highly customizable, and handles several common implementation challenges.\n\nNo Code Updates\n\nRecap's standout feature is its markdown-powered release list. Here's how simple it is to implement:\n\nUpdating your What's New Screen is as easy as editing a markdown file — no code changes required. The simple markdown spec lets you create new versions in minutes:\n\nAnd here's a concrete example of what a 1.0 release for Recap might look like:\n\nCustomization\n\n!Plinky What's New Screens\n\nNow, let's explore a more advanced example from Plinky. This version has icons, colors, gradients, and markdown support (including links). With just a bit of SwiftUI and markdown, we have a beautiful What's New Screen. Each feature is defined by four elements: title, description, symbol, and color.\n\nLooking closely you'll notice a subtle gradient on each icon. This is achieved using one of the many recapScreen modifiers, allowing you to fully align the What's New Screen with your app's design language. Here are a few examples to customize the icon fill mode, dismiss button style, and page indicators:\n\nRecap offers numerous customization options. You can adjust title colors, screen padding, backgrounds, and more. For a complete list of supported modifiers, I recommend checking out the documentation.\n\nVersion History\n\nYou may have noticed that there are multiple pages of releases — a core feature that inspired Recap. This allows users to browse all your app's features, simply by adding multiple releases to your markdown file.\n\nRecap also supports a leadingView and trailingView. In Plinky, I use these to showcase my roadmap on the first page and a support screen at the end. This is a nice way to keep users informed about upcoming features, and encourage their input.\n\nSemantic Versioning\n\nDetermining when to show your What's New Screen can be tricky, and worst of all, you only know if it worked after an app update. To address this, I've integrated a flexible semantic versioning helper into Recap.\n\nThe SemanticVersion type converts string version numbers (like Bundle.main.object(forInfoDictionaryKey: \"CFBundleShortVersionString\")) into the familiar semver format. The parser is forgiving, handling versions like 1.0.0, 2.0, or 3 with ease.\n\nHere's an example of how to use semantic versioning to show the What's New Screen only for major or minor version increases:\n\nThis will display the screen when updating from 1.0.0 to 1.1.0 or 2.0.0, but not for patch updates like 1.0.0 to 1.0.1.\n\nWhat's Next\n\nWe've covered the key features of Recap, but there's more to explore. For a deeper dive, check out the code on Github. I believe Recap offers a simple yet powerful solution for What's New Screens, adaptable to any app's needs.\n\nI have plenty of new features in mind for Recap, and I'd love your input. If you have any thoughts or suggestions, I'm always available on Threads. I welcome any and all polite discussions.",
"title": "Introducing Recap: What's Old Is What's New Again"
}