[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-settings":3,"blogpost-building-your-apps-ui-for-2023-part-2":72},{"footer":4,"contact_form":6,"chat_widget":11,"accolades":19,"seo_social":63},{"iso_notice":5},"Wolfpack Digital is an ISO 9001:2015, ISO 27001:2013 and ISO 14001:2015 certified company - © _YEAR_ Wolfpack Digital. All rights reserved.",{"budgets":7},[8,9,10],"Under $50.000","Between $50.000 - 200.000","Over $200.000",{"consent":12},{"greeting":13,"title":14,"body":15,"accept_label":16,"decline_label":17,"declined_message":18},"Awoo! I'm Wolfpack Digital's AI assistant. Ask me anything about our services, process, or team, and if you want a project estimate, I can point you to our AI Estimator.","Data Privacy","\u003Cp>Hi there! We would love to talk with you. Under the EU General Data Protection Regulation, we need your approval for our use of personal information (e.g. your name and email address) you may provide as we communicate:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>We'll store your personal information so that we can pick up the conversation if we talk later.\u003C\u002Fli>\n  \u003Cli>We may send you emails to follow up on our discussion here.\u003C\u002Fli>\n  \u003Cli>We may send you emails about our upcoming services and promotions.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Is this okay with you?\u003C\u002Fp>","Yes, I Accept","No, Not Now","No problem. Come back if you change your mind.",{"winnersOfList":20,"awardsList":29,"inHouseAppImages":46,"certificationsList":50},[21,25],{"alt":22,"href":23,"image":24},"European Awards","https:\u002F\u002Fwww.theeuropeanawards.eu\u002Fpremiado\u002Fwolfpack-digital-awarded-in-the-app-development-category","\u002Fimages\u002Fabout-us\u002Fwinners\u002Feuropean.svg",{"alt":26,"href":27,"image":28},"Webby Awards","https:\u002F\u002Fwinners.webbyawards.com\u002F2024\u002Fwebsites-and-mobile-sites\u002Fresponsible-technology\u002Fresponsible-ai\u002F275408\u002Fequality-ai-fair-and-unbiased-algorithms-to-eliminate-discrimination-in-machine-learning-models","\u002Fimages\u002Fabout-us\u002Fwinners\u002Fwebby.svg",[30,34,38,42],{"alt":31,"href":32,"image":33},"Clutch 1000 List Reveals Top-Rated Business Service Providers of 2023","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Fclutch-1000-fall-2023","\u002Fimages\u002Fabout-us\u002Fawards\u002Fclutch.svg",{"alt":35,"href":36,"image":37},"Clutch Recognizes the 1000 Best B2B Service Providers in its Exclusive 2019 Clutch 1000 List","https:\u002F\u002Fclutch.co\u002Fpress-releases\u002Frecognizes-1000-best-b2b-service-providers-its-exclusive-2019-1000-list","\u002Fimages\u002Fabout-us\u002Fawards\u002Fglobal.svg",{"alt":39,"href":40,"image":41},"Mobile App Daily Award","","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmobile-app-daily.svg",{"alt":43,"href":44,"image":45},"Manifest Award","https:\u002F\u002Fthemanifest.com\u002Fro\u002Fweb-development\u002Fcompanies","\u002Fimages\u002Fabout-us\u002Fawards\u002Fmanifest.svg",[47],{"alt":48,"href":40,"image":49},"Wolfpack Labs","\u002Fimages\u002Fhomepage\u002Fawards\u002Flabs.svg",[51,55,59],{"alt":52,"href":53,"image":54},"ISO 27001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LD367","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-27001.svg",{"alt":56,"href":57,"image":58},"ISO 9001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fcs\u002Fissued-certificates\u002F?certID=_7690LBDB0","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-9001.svg",{"alt":60,"href":61,"image":62},"ISO 14001 Certification","https:\u002F\u002Fwww.qscert.com\u002Fma\u002Fissued-certificates\u002F?certID=_7690LZSGS","\u002Fimages\u002Fabout-us\u002Fcertifications\u002Fiso-14001.svg",{"default_og_image_urls":64,"default_og_image_alt":68,"og_site_name":68,"og_locale":69,"twitter_site":70,"page_type_defaults":71},[65],{"style":66,"url":67},"og","\u002Fimages\u002Fsocial_share_preview.jpg","Wolfpack Digital","en_US","@DigitalWolfpack",{},["Reactive",73],{"title":74,"body":75,"slug":76,"featured_image_urls":77,"meta_tags":102,"reading_time":112,"title_size":113,"tag_list":114,"formatted_published_at":115,"short_description":104,"categories":116,"alt_text":111,"published_at":118,"content_updated_at":119,"formatted_content_updated_at":120,"key_takeaways":121,"faqs":127,"updated_at":140,"canonical_override":40,"no_index":141,"canonical_url":142,"publishers":143},"SwiftUI vs Jetpack Compose: Pros and Cons (Part II)","\u003Cp>Looking to build a mobile app that lasts? Then it pays to pick the right tools for the job. In the first part of this series, we explored the options for building native mobile app UI on iOS (UIKit and SwiftUI) and Android (XML layouts and Jetpack Compose).\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>We saw that Apple and Google both shipped new declarative UI frameworks. Each one promises to improve your app development experience.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Are they ready and worth it? Should you switch? This second part digs into the pros and cons of each framework, with integration examples and tips.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Did you miss the first part? \u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fbuilding-your-apps-ui-for-2023-part-1\" target=\"_blank\">Read it here\u003C\u002Fa>.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Let's start with the iOS side.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch2>The good, the bad, and SwiftUI\u003C\u002Fh2>\u003Cp>\r\n\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>Declarative framework\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Launched in 2019, updated every year\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Programming language: Swift\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Way of use: programmatic UI plus live previews\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>The first strong point of SwiftUI is that you achieve more with less code. Let's see a quick example.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>What we want to build: a reactive label that updates as you type in a text field.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"App preview: a text field with the name Roxana and a label reading Your name is Roxana\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F616\u002Fcontent_image9.png\" style=\"width: 400px; height: 117px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cstrong>UIKit code:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"UIKit code sample for a reactive label bound to a text field, showing more lines of code\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F617\u002Fcontent_image5.png\" style=\"width: 400px; height: 419px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cstrong>SwiftUI code:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"SwiftUI code sample for the same reactive label, achieving the result in far fewer lines\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F618\u002Fcontent_image10.png\" style=\"width: 400px; height: 186px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Not a big difference? Actually, it is a huge difference. We explored this in more depth in a dedicated \u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fdeclarative-ui-new-way-of-building-mobile-apps\" target=\"_blank\">guide to declarative UI\u003C\u002Fa>.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Another great thing about SwiftUI is live previews. You see the UI component in real time and run it in a local context. That is a step up from UIKit, where code changes did not always reflect in Storyboards or XIB files.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"SwiftUI live preview in Xcode showing a UI component rendered next to its code\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F619\u002Fcontent_image2.png\" style=\"width: 400px; height: 330px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>SwiftUI also takes a more reactive approach than UIKit, with native support for it. You get property wrappers like @State, @ObservedObject, and @StateObject that your UI observes. When something changes, the engine rebuilds the layout for you, so you do not have to do it by hand.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>In short, SwiftUI makes it much simpler to get into iOS development and build impressive interfaces, even without much iOS experience. So what is the catch?\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>As with any newer framework, there is room to grow, and you accept some trade-offs. One is backward compatibility. SwiftUI supports iOS 13 and above, and each new SwiftUI version is incompatible with older iOS releases. In the first few years, that slowed adoption.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>As you go deeper, you see SwiftUI still leans on UIKit in many cases. For example, you cannot fully customize the NavigationBar or TabBar from SwiftUI alone. On iOS 13, lists still use UITableView. The TextEditorView cannot change its white background. The fixes for all of these rely on UIKit code, as shown below.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Code sample showing a UIKit workaround needed inside a SwiftUI project\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F620\u002Fcontent_image8.png\" style=\"width: 400px; height: 104px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Second code sample showing another UIKit-based workaround used with SwiftUI\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F621\u002Fcontent_image7.png\" style=\"width: 400px; height: 130px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Popular components like ScrollViews have no delegates in SwiftUI, so you cannot read contentOffset or velocity. A workaround is to use a GeometryReader to read sizes. And to use popular libraries like Google Maps, which lack a SwiftUI API, you rely on UIViewRepresentable.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Finally, navigation looks simple with NavigationView and NavigationLinks. But it couples navigation with the UI, which makes the flow harder to control than an MVVM-C approach in UIKit. A hybrid path worked well for us: build SwiftUI views, load them into UIHostingControllers, and present them the old-fashioned way.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Now let's look at the Android side.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch2>Jetpack Compose\u003C\u002Fh2>\u003Cp>\r\n\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>Declarative framework\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Launched in 2021 and updated regularly since\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Programming language: Kotlin\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Way of use: programmatic UI plus preview\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Backward compatible down to Android 5.0\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Google describes Compose as a modern toolkit that simplifies and speeds up UI development on Android, with less code, powerful tools, and intuitive Kotlin APIs.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Let's see how much of that holds up. Since Compose is very similar to SwiftUI, we will skip the shared parts like live previews and the declarative model.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>To test Google's claim of \"less code,\" look at a common task: a scrollable dynamic list.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Doing that with XML layouts requires the following:\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>A layout for the RecyclerView (the list itself)\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Layouts for each list item\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>An Adapter and ViewHolder to bind layouts with data\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>Configuring it all in a Fragment or Activity\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Creating the same list with Compose looks like this:\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Jetpack Compose code sample building a scrollable list in far fewer lines than XML\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F623\u002Fcontent_image3.png\" style=\"width: 400px; height: 260px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Compose clearly needs less code and less time once you know it. That makes it easier to learn and to reuse UI code. And it is all in Kotlin.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>So what are the downsides?\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Navigation is similar to SwiftUI. You specify destinations inside composable functions, which couples the UI with the navigation logic. You can also send data between screens only as String arguments in route paths, so passing other data types is tricky. You either use a shared ViewModel or convert your data to JSON and pass it as one big string.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Some components are not supported yet, such as autosize text, flow layouts, scrollbars, and snapping. Check \u003Ca href=\"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fandroidx\u002Fcompose-roadmap\">the roadmap\u003C\u002Fa> for what is coming.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>On performance, you may notice longer load times on older devices, especially if your app mixes XML layouts and Compose. APK size and build times also grow in a mixed app. Both improve once you fully convert to Compose.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Speaking of mixing, how do you make the new frameworks work with the old ones?\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch2>Interoperability\u003C\u002Fh2>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>The great news is that SwiftUI and Jetpack Compose work alongside the older frameworks. That makes them easier to try and adopt over time.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch3>SwiftUI integration\u003C\u002Fh3>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>The first case you will meet is adding SwiftUI to a UIKit project. A dedicated component called UIHostingController lets you create a ViewController whose root view is a SwiftUI view. See the example below.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Swift code using UIHostingController to embed a SwiftUI view inside a UIKit project\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F624\u002Fcontent_image12.png\" style=\"width: 400px; height: 316px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>To go the other way and add a UIKit library to a SwiftUI project, you have two options:\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Col>\n\u003Cul>\u003Cli>UIViewRepresentable for views\u003C\u002Fli>\u003C\u002Ful>\n\u003Cul>\u003Cli>UIViewControllerRepresentable for view controllers\u003C\u002Fli>\u003C\u002Ful>\n\u003C\u002Fol>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Swift code using UIViewRepresentable to wrap a UIKit view for use in SwiftUI\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F625\u002Fcontent_image11.png\" style=\"width: 400px; height: 274px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch3>Jetpack Compose integration\u003C\u002Fh3>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>To add Compose to an XML-based app, use the dedicated ComposeView component in your XML layouts.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Kotlin and XML code using ComposeView to embed Jetpack Compose in an XML layout\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F626\u002Fcontent_image6.png\" style=\"width: 400px; height: 265px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>To use an XML layout inside a composable, use the AndroidView component. It inflates a layout and shows it in its body.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>\u003Cimg alt=\"Kotlin code using AndroidView to embed an XML layout inside a Jetpack Compose composable\" src=\"https:\u002F\u002Fs3-eu-west-2.amazonaws.com\u002Fwolfpack-digital-attachments-production\u002Fckeditor_assets\u002Fpictures\u002F627\u002Fcontent_image4.png\" style=\"width: 400px; height: 283px\">\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Ch2>Should you use SwiftUI and Compose now?\u003C\u002Fh2>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Based on the examples above, they are a great choice for most cases. Development is faster, the code is easier to read, and you use one language across the whole app. For 80 to 90 percent of situations, they make things easier and more enjoyable.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Still, remember the edge cases. For 10 to 20 percent of your app, SwiftUI and Compose may need workarounds and bug fixes. Speed will lag during the learning phase. The bigger the app, though, the better the return, since things speed up once your team gets used to the frameworks.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>The safest way to adopt them is to add one screen or component built with SwiftUI or Compose to an existing app. If it does not go well, you can revert quickly. If it looks promising, keep going and migrate step by step.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Technology keeps moving forward, and these declarative UI frameworks are part of that. They are not flawless, but they bring real advantages, so they are worth considering for your next mobile app.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>We hope this series gave you insight into how to build your mobile app's UI. Thanks to our two mobile engineers, Roxana and Dan, for sharing their knowledge.\u003C\u002Fp>\u003Cp>\r\n\u003C\u002Fp>\u003Cp>Ready to build your next app? Explore our \u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fservices\u002Fproduct-design\" target=\"_blank\">product design services\u003C\u002Fa> and our \u003Ca href=\"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fwork\" target=\"_blank\">work\u003C\u002Fa>.\u003C\u002Fp>","building-your-apps-ui-for-2023-part-2",[78,81,84,87,90,93,96,99],{"style":79,"url":80},"640","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F640\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":82,"url":83},"768","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F768\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":85,"url":86},"1024","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F1024\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":88,"url":89},"1366","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F1366\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":91,"url":92},"1600","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F1600\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":94,"url":95},"1920","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002F1920\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":97,"url":98},"thumb","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002Fthumb\u002F1_Ui%20Blogpost%20Cover%202.webp",{"style":100,"url":101},"original","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fblogpost\u002F215\u002Ffeatured_image\u002Foriginal\u002F1_Ui%20Blogpost%20Cover%202.webp",{"title":103,"description":104,"keywords":105,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":108,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70,"og:title":110,"og:image:alt":111,"twitter:title":110},"SwiftUI vs Jetpack Compose: Pros and Cons | Wolfpack Digital","SwiftUI vs Jetpack Compose: a deep dive into the pros, cons, and interoperability of these declarative UI frameworks, with code examples and adoption tips.","swiftui, jetpack compose, declarative ui, mobile app ui, ios android development, wolfpack digital","contact us","send message","article","summary_large_image","SwiftUI vs Jetpack Compose: Pros and Cons (Part II) | Wolfpack Digital","3D isometric illustration of three purple smartphones showing UI screens with floating data widgets","6",32,[],"Dec 30, 2022",[117],"mobile-development","2022-12-30T11:05:00.000Z","2026-07-02T07:06:02.210Z","Jul 2, 2026",[122,123,124,125,126],"SwiftUI and Jetpack Compose let you achieve more UI with far less code than UIKit or XML.","Both offer live previews and a reactive, state-based approach in a single language.","Trade-offs include backward compatibility limits and edge cases that still need the old frameworks.","Both interoperate with UIKit and XML, so you can adopt them one screen at a time.","They fit 80 to 90 percent of cases well; the safest path is a gradual, screen-by-screen migration.",[128,131,134,137],{"answer":129,"question":130},"Yes. For common tasks like a reactive label or a scrollable list, both frameworks need far fewer lines than UIKit or XML layouts, which speeds up development.","Does SwiftUI or Jetpack Compose need less code than the old frameworks?",{"answer":132,"question":133},"Both couple navigation with the UI, still lack some components, and can need workarounds from the older frameworks. SwiftUI also has backward-compatibility limits on older iOS versions.","What are the main drawbacks of SwiftUI and Jetpack Compose?",{"answer":135,"question":136},"Yes. SwiftUI works inside UIKit through UIHostingController, and Jetpack Compose works inside XML layouts through ComposeView. You can also embed old views inside the new frameworks.","Can I use these frameworks in an existing app?",{"answer":138,"question":139},"For most cases, yes. Start by adding one screen or component built with them to an existing app. If it works well, migrate gradually; if not, you can revert quickly.","Should I adopt SwiftUI and Jetpack Compose now?","2026-07-06T19:43:56.916Z",false,"https:\u002F\u002Fwww.wolfpack-digital.com\u002Fblogposts\u002Fbuilding-your-apps-ui-for-2023-part-2",[144],{"id":145,"author":146,"short_description":147,"role":148,"avatar_urls":149,"cover_urls":157,"linkedin_link":176,"instagram_link":40,"x_link":40,"meta_tags":177,"last_published_at":179,"same_as":180},6,"Dan","Dan is a passionate mobile software engineer who likes to push technologies to the limit, creating beautiful and intuitive products that improve people's lives.\r\n\r\nAfter graduating first in Computer Science in his class, Dan stepped into the mobile world as a native iOS developer, and he enjoyed it a lot. After a couple of years, his curiosity for tech and mobile apps pushed him to also learn native Android, Flutter, and to step into leadership roles, finding the right balance between development, research, and high-level guidance.\r\n\r\nBesides this, Dan also got into the content creation world, sharing insights from the tech and app development world on Instagram with 100k people, and recently on YouTube as well.\r\n\r\nOn the non-technical side, Dan plays tennis competitively. He's a big supporter of wellness and living an active life, and also believes that people can actually like their occupation and enjoy life productively.","Mobile Developer",[150,152,155],{"style":97,"url":151},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Favatar\u002Fthumb\u002Fdan_head_of_mobile_development_wolfpack_digital.webp",{"style":153,"url":154},"medium","https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Favatar\u002Fmedium\u002Fdan_head_of_mobile_development_wolfpack_digital.webp",{"style":100,"url":156},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Favatar\u002Foriginal\u002Fdan_head_of_mobile_development_wolfpack_digital.webp",[158,160,162,164,166,168,170,172,174],{"style":79,"url":159},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F640\u002FDan%20Ilies.webp",{"style":82,"url":161},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F768\u002FDan%20Ilies.webp",{"style":85,"url":163},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F1024\u002FDan%20Ilies.webp",{"style":88,"url":165},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F1366\u002FDan%20Ilies.webp",{"style":91,"url":167},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F1600\u002FDan%20Ilies.webp",{"style":94,"url":169},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002F1920\u002FDan%20Ilies.webp",{"style":97,"url":171},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002Fthumb\u002FDan%20Ilies.webp",{"style":153,"url":173},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002Fmedium\u002FDan%20Ilies.webp",{"style":100,"url":175},"https:\u002F\u002Fcdn.wolfpack-digital.com\u002Fstore\u002Fpublisher\u002F6\u002Fcover_image\u002Foriginal\u002FDan%20Ilies.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdanilies\u002F",{"title":146,"description":148,"keywords":40,"contact_form:title":106,"contact_form:cta":107,"og:site_name":68,"og:type":178,"og:locale":69,"twitter:card":109,"twitter:site":70,"twitter:creator":70},"website","2023-06-07T17:55:55.000Z",[176]]