{"id":6264,"date":"2019-06-21T15:07:49","date_gmt":"2019-06-21T15:07:49","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6264\/"},"modified":"2022-07-01T17:15:40","modified_gmt":"2022-07-01T17:15:40","slug":"hands-overview-swiftui","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","title":{"rendered":"A hands-on overview of SwiftUI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called <\/span><b>SwiftUI<\/b><span style=\"font-weight: 400;\"> and it feels like magic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mac, iOS, iPad, WatchOS and tvOS developers are hyped!<\/span><\/p>\n<p><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s why:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SwiftUI is compatible with all Apple platforms<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SwiftUI is declarative<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SwiftUI is not just a wrapper for UIKit\u200a\u2014\u200ait&#8217;s new and built using Swift!<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SwiftUI is not based on Storyboards! Hello, code review \ud83d\ude42<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">SwiftUI replaces AutoLayout\u200a\u2014\u200aeverything is based on stack views now<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">That&#8217;s a lot, and since the whole community is already creating plenty of SwiftUI content, even writing books, I want to focus on a practical example of how to replicate <\/span><span style=\"font-weight: 400;\">a Tinder-like UI using this lovely framework<\/span><span style=\"font-weight: 400;\">. Are you ready?<\/span><\/p>\n<h2><b>First things first<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">When you create a new project using XCode 11 and check the <\/span><b>SwiftUI <\/b><span style=\"font-weight: 400;\">box, it comes with a ContentView file:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">import SwiftUI\n\nStruct ContentView : {\n  var body: some View {\n    Text(\"Hello World\")\n  }\n}\n\n#if DEBUG\nstruct ContentView_Previews : Previewprovider {\n  struct var previews: some View {\n    ContentView()\n  }\n}\n#endif<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">There are two important things to clear up here:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The first struct is where you write your view\/layout code.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The second structure is where you declare what you want to preview. Finally, we have real-time previews!<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">We\u2019ll build a few components and when you want to check what they look like, just change the <\/span><span style=\"font-weight: 400;\">ContentView()<\/span><span style=\"font-weight: 400;\"> inside previews var by the component you want to preview.<\/span><\/p>\n<h4><b>This is the layout we want to achieve today:<\/b><\/h4>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"wp-image-6266 size-full aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid1.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"494\" height=\"980\"><\/p>\n<p>&nbsp;<\/p>\n<h4><b>Cool right? It is a vertical layout composed of 3 important components:<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The top component contains three horizontally aligned buttons.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Middle component is user image and info.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bottom component contains five horizontally aligned buttons.<\/span><\/li>\n<\/ul>\n<h2><b>Top controls<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019re ready to create our first component! Since our interface has many buttons, we\u2019ll start by writing a helper function that creates a button based on an image asset name.<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">func button(for icon: String) -&gt; some View {\n  Button(action: {}) {\n    Image(icon)\n      .renderingMode(.original)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Cool! This is going to help us because our first view needs three different buttons aligned horizontally. Let&#8217;s name it <\/span><b>TopStack:<\/b><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct TopStack : View {\n  var body: some View {\n    HStack {\n      button(for: \"top_left_profile\")\n      Spacer()\n      button(for: \"tinder\")\n      Spacer()\n      button(for: \"top_right_messages\")\n    }\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">If you\u2019re familiar with UIKit, everything looks good until you read <\/span><b><i>Spacer(). <\/i><\/b><i>S<\/i><span style=\"font-weight: 400;\">pacers can be used to fill the gap between stack items in order to fit the remaining view space. <\/span><b>HStack<\/b><span style=\"font-weight: 400;\"> should be used to build horizontal stack layouts\u200a\u2014\u200aif you want to go vertical use <\/span><b>VStack<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s our first result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6267 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid2.png\" alt=\"A fire drawn on an application layout.\" width=\"668\" height=\"100\"><\/p>\n<h2><b>Bottom controls<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">We can do the same for the bottom controls, which contains five different buttons. Let&#8217;s name it <\/span><b>BottomStack<\/b><span style=\"font-weight: 400;\">. Very similar to the first one isn\u2019t it?<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct BottomStack : View {\n    var body: some View {\n      HStack {\n        button(for: \"refresh_circle\")\n        button(for: \"dismiss_circle\")\n        button(for: \"like_circle\")\n        button(for: \"boost_circle\")\n      }\n    }\n  }<\/code><\/pre>\n<h4><img decoding=\"async\" class=\"size-full wp-image-6268 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid3.png\" alt=\"Five Tinder-like buttons.\" width=\"520\" height=\"136\"><\/h4>\n<h2><b>Image, overlays, and gradients<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Looking good! Let&#8217;s dive a bit deeper. Now we need to build the view between top and bottom controls, how should it look? Basically we want an image with rounded corners, but with one extra detail: if we want to show user info, like name and age, we need a small black gradient on the bottom. Our font color is white and the gradient allows us to see the user&#8217;s name if the image is bright. We can call that <\/span><span style=\"font-weight: 400;\">UserImageView<\/span><b>.<\/b><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct UserImageView : View {\n  var body: some View {\n    Image(\"kaori\")\n      .resizable()\n      .overlay (\n        Rectangle()\n          .fill (\n            LinearGradient(gradient: Gradient(colors: [.cler, .black]),\n                           startPoint: .center, endPoint: .bottom)\n          )\n          .clipped()\n      )\n      .cornerRadius(10, antialiased: true)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">So, a couple of new things here! Image\u2026resizable? OK\u2026Why? It&#8217;s because our image needs to fill the whole space between top and bottom controls!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What about overlay? We&#8217;re showing user info above the image, so we need to overlay the image with a gradient layer\u200a\u2014\u200awe can use different shape forms as layers, such as Circles and Rectangles. For now, let&#8217;s build a rectangle and fill it with a gradient. Our gradient starts clear at the middle and finishes black at the bottom.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Check the results:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6269 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid4.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"472\" height=\"940\"><\/p>\n<h2><b>User info<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Now we want to show the user&#8217;s name, age, and profession above the image. This view is called <\/span><b>UserInfoView\u200a\u2014\u200a<\/b><span style=\"font-weight: 400;\">check the code below:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct UserInfoView : View {\n    var body: some View {\n        VStack(alignment: .leading) {\n            Spacer()\n            Text(\"Kaori Miyazono, 30\")\n                .font(.title)\n                .fontWeight(.regular)\n                .color(.white)\n            Text(\"Musician\")\n                .font(.system(size: 17))\n                .fontWeight(.light)\n                .color(.white)\n            }\n            .padding()\n    }\n}\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">This guy above here starts creating a vertical stack containing a Spacer and two Text components. We need the spacer again here because it&#8217;ll keep our user info on the bottom of the stack. We also want to add some padding to create some space from the view borders.<\/span><\/p>\n<h4><b>Time to combine UserImageView and UserInfoView!<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Let&#8217;s create <\/span><span style=\"font-weight: 400;\">CardView<\/span><span style=\"font-weight: 400;\">, containing the user image and info:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct CardView : View {\n  var body: some View {\n    ZStack(alignment: .leading) {\n      UserImageView()\n      UserInfoView()\n    }\n    .shadow(radius: 2)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">We want <\/span><span style=\"font-weight: 400;\">UserInfoView<\/span><span style=\"font-weight: 400;\"> to be above<\/span><span style=\"font-weight: 400;\">UserImageView\u200a<\/span><span style=\"font-weight: 400;\">\u2014\u200aeasy to achieve on SwiftUI with<\/span><span style=\"font-weight: 400;\">ZStack<\/span><span style=\"font-weight: 400;\">. We have used <\/span><span style=\"font-weight: 400;\">HStack<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">VStack<\/span><span style=\"font-weight: 400;\"> for stacking views horizontally and vertically, <\/span><span style=\"font-weight: 400;\">ZStacks<\/span><span style=\"font-weight: 400;\"> are used to pile views on top of each other. At the end of the file, you can see how easily you can add shadows using SwiftUI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here&#8217;s the result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-6272 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid6.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"454\" height=\"928\"><\/p>\n<h2><b>The grand finale<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Let&#8217;s combine the three components inside <\/span><b>ContentView<\/b><span style=\"font-weight: 400;\"> and get to the final layout:<\/span><\/p>\n<pre class=\"language-swift\"><code class=\"language-swift\">struct ContentView : View {\n  var body: some View {\n    VStack(alignment: .center, spacing: 20) {\n      TopStack()\n        .padding(.horizontal)\n      CardView()\n        .padding(.horizontal, 10)\n      BottomStack()\n    }\n    .padding(.bottom, 15)\n  }\n}<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">What do we have here? Basically, we are stacking the three components vertically, with a 20 height spacing between each. We also added some horizontal padding to <\/span><span style=\"font-weight: 400;\">TopStack<\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">CardView<\/span><span style=\"font-weight: 400;\">, and finally a bottom respire for the <\/span><span style=\"font-weight: 400;\">VStack<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><b>Final result<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Inside the<\/span><span style=\"font-weight: 400;\">ContentView<\/span><span style=\"font-weight: 400;\"> file change your preview struct by <\/span><span style=\"font-weight: 400;\">ContentView()<\/span> <span style=\"font-weight: 400;\">and we are done!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is our beautiful layout made using SwiftUI:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-6273\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7.png\" alt=\"A cellphone screen with a Tinder-like layout.\" width=\"800\" height=\"1376\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7.png 800w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/blogpostdavid7-768x1321.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/github.com\/davidgdoll\/tinder-clone-swiftui\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/github.com\/davidgdoll\/tinder-clone-swiftui\">Source code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called SwiftUI and it feels like magic. Mac, iOS, iPad, WatchOS and tvOS developers are hyped!<\/p>\n","protected":false},"author":65,"featured_media":6279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[305,21,15],"class_list":["post-6264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-development","tag-tag-ios","tag-tag-mobile"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A hands-on overview of SwiftUI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A hands-on overview of SwiftUI\" \/>\n<meta property=\"og:description\" content=\"Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called SwiftUI and it feels like magic. Mac, iOS, iPad, WatchOS and tvOS developers are hyped!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T15:07:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:15:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"},\"author\":{\"name\":\"David Doll\"},\"headline\":\"A hands-on overview of SwiftUI\",\"datePublished\":\"2019-06-21T15:07:49+00:00\",\"dateModified\":\"2022-07-01T17:15:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"},\"wordCount\":805,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"keywords\":[\"development\",\"iOS\",\"Mobile\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\",\"name\":\"A hands-on overview of SwiftUI\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"datePublished\":\"2019-06-21T15:07:49+00:00\",\"dateModified\":\"2022-07-01T17:15:40+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"David Doll\"},\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png\",\"width\":2000,\"height\":720,\"caption\":\"Black bird flying through cellphone screens\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A hands-on overview of SwiftUI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"David Doll\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"David Doll\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/david\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A hands-on overview of SwiftUI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","og_locale":"en_US","og_type":"article","og_title":"A hands-on overview of SwiftUI","og_description":"Did you hear about the new UI Framework Apple announced at WWDC 2019? It&#8217;s called SwiftUI and it feels like magic. Mac, iOS, iPad, WatchOS and tvOS developers are hyped!","og_url":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2019-06-21T15:07:49+00:00","article_modified_time":"2022-07-01T17:15:40+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"},"author":{"name":"David Doll"},"headline":"A hands-on overview of SwiftUI","datePublished":"2019-06-21T15:07:49+00:00","dateModified":"2022-07-01T17:15:40+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"},"wordCount":805,"commentCount":0,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","keywords":["development","iOS","Mobile"],"articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","url":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/","name":"A hands-on overview of SwiftUI","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","datePublished":"2019-06-21T15:07:49+00:00","dateModified":"2022-07-01T17:15:40+00:00","author":{"@type":"person","name":"David Doll"},"breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2019\/06\/Blogpost_David.png","width":2000,"height":720,"caption":"Black bird flying through cellphone screens"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/hands-overview-swiftui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A hands-on overview of SwiftUI"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"David Doll","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"David Doll"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/david\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6264"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264\/revisions"}],"predecessor-version":[{"id":10206,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6264\/revisions\/10206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6279"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}