--- title: How Well Do You Know SwiftUI? description: Get ready for Apple's WWDC20 by familiarizing yourself with Swift 5.1. image: https://blog.avenuecode.com/hubfs/banner-2.jpg --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu* - Technology [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) - [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) # [How Well Do You Know SwiftUI?](https://blog.avenuecode.com/how-well-do-you-know-swiftui) - [Tweet](https://twitter.com/share) *perm\_identity* [Marcos Rebouças](https://blog.avenuecode.com/how-well-do-you-know-swiftui/author/marcos-rebou%C3%A7as?hsLang=en-us) *schedule* 6/3/20 2:00 PM The first thing you should know about SwiftUI is that it is not a new programming language, and neither is it an updated version of the Swift language that has a declarative syntax feature. This has caused some confusion, especially among newer Swift developers. So what is SwiftUI?   ##### Meet SwiftUI SwiftUI is Apple’s new UI Framework that was created to replace the well known UIKit Framework with its Storyboards, XIBs, Segues, and Autolayout, enabling developers to work in the UI layer in an easier and faster manner. What makes SwiftUI’s declarative syntax possible is a combination of new features implemented in Swift 5.1 and older Swift features. Let's take a look at each of these: ##### Implicit Return Types As of Swift 5.1, you can omit the **return** statement keyword in any function or computed property that has **only one expression**: ![1-1](https://blog.avenuecode.com/hs-fs/hubfs/1-1.png?width=1080&name=1-1.png) This is what makes it possible, for example, to declare a SwiftUI **Text** view inside the view body: ![2](https://blog.avenuecode.com/hs-fs/hubfs/2.png?width=400&name=2.png) Instead of explicitly writing a **return** keyword: ![3](https://blog.avenuecode.com/hs-fs/hubfs/3.png?width=500&name=3.png) It’s worth pointing out that, even though you don’t need to write the "return" keyword anymore, you still have the option of writing it, and your code will work the same way. So even though it can be omitted, the return statement is still available. (This new feature used in regular functions and computed properties already existed inside ***closures*** in previous versions of Swift.) ##### Opaque Return Types Wondering what that strange ***some*** keyword is for in SwiftUI’s body declaration? That means the ***body*** computed property returns an **Opaque Type**, a new Swift 5.1 feature that allows functions and computed properties to return **any value that conforms to a specific protocol**. The concrete returned type is hidden, and it doesn’t matter which one will be used, as long as it conforms to the protocol. In the example below, the first function returns an **Int** concrete type, while the second returns an **Opaque Type** (any type that conforms to the **Equatable** Protocol would fit): ![4](https://blog.avenuecode.com/hs-fs/hubfs/4.png?width=488&name=4.png) In a SwiftUI view body, we can return any type that conforms to the **View** Protocol, which includes many different views from SwiftUI Framework, like **Circle( )**, for example, as well as your own custom views: ![5](https://blog.avenuecode.com/hs-fs/hubfs/5.png?width=406&name=5.png)   ##### Method Chaining in View Modifiers In SwiftUI, you use View Modifiers to change the properties of a view. View Modifiers are simply methods you append to a view one after another (e.g. ***.font(.title)***, ***.foregroundColor(.yellow)***, ***.frame()****,* and so on). Although this is a new SwiftUI feature, View Modifier uses a technique called **Method Chaining** that isn't new in the Swift language. ![6](https://blog.avenuecode.com/hs-fs/hubfs/6.png?width=630&name=6.png) Many View Modifiers can be applied to **all views,** like ***.foregroundColor(.yellow)***, while others are specific to particular views, like ***.bold()***, which belongs to **Text** views. One important thing to notice is that **the modifier’s order matters**, so the same modifier in a different order can give you a completely different result. That’s because a View Modifier returns another view with the transformations applied, so the next modifier is always applied to the view returned by the previous one. ##### Trailing Closures and Function Builders in Container Views If you try to put more than one view inside the body of a SwiftUI view, the compiler will complain. Remember that implicit return only works in functions or computed properties that have a **single expression**? But no screen is made of just one view. To solve this, SwiftUI has **container views**. The most common are the 3 types of stacks, **HStack**, **VStack** and **ZStack,** which manage the layout of other views horizontally, vertically, and layered on top of each other, respectively. These views use a different SwiftUI syntax where the developer can declare views inside braces, one after another, in the body of the stack. This is possible due to the combination of **Trailing Closures** and a new Swift 5.1 feature called **Function Builders**. If you take a look at the HStack init method in Apple’s documentation, you can see the last parameter is a function of type ***( ) -> Content**:* *![7](https://blog.avenuecode.com/hs-fs/hubfs/7.png?width=1286&name=7.png)* Since we can use a **Trailing Closure** when it’s the last parameter in a function (which means declaring the content in braces outside the parentheses and omitting the parameter name), it’s possible to declare our views directly inside the braces of the HStack init method: ![8](https://blog.avenuecode.com/hs-fs/hubfs/8.png?width=368&name=8.png) But inside a **Trailing Closure**, it still wouldn’t be possible to put views one after another in a declarative way. If you notice in the HStack init method above, the last parameter that is a function of type ***( ) -> Content** * has a **@ViewBuilder** annotation. This is a new Swift 5.1 feature called **Function Builders**, which is what makes this syntax possible. Function Builders are an advanced Swift topic, but in simple terms, they are specially annotated functions, used to implicitly build a value from a sequence of statements or expressions, producing a single value piece. ##### Property Wrappers In SwiftUI, you will find some stored properties with annotations like **@State**, **@Binding**, etc. These use a new Swift 5.1 feature called **Property Wrappers**. A simple definition of a Property Wrapper is a generic Swift struct that encapsulates read and write access to a property while adding some extra behavior to augment its semantics. Using a Property Wrapper, you can attach custom code to any stored property. So every time the value of the property changes, the connected code is executed. What a Property Wrapper does depends completely on the code you write for it. According to Apple’s documentation on [SwiftUI’s @State Property Wrapper](https://developer.apple.com/documentation/swiftui/state): > “SwiftUI manages the storage of any property you declare as a state. When the state value changes, the view invalidates its appearance and recomputes the body. Use the state as the single source of truth for a given view. A State instance isn’t the value itself; it’s a means of reading and writing the value. To access a state’s underlying value, use its variable name, which returns the wrappedValue property value.” As a practical example, let’s write a **Property Wrapper** that will assure a **String** is **Lowercased** any time a value is assigned to the property: ![9](https://blog.avenuecode.com/hs-fs/hubfs/9.png?width=487&name=9.png) This way, no matter the **String** that’s passed into the init method of ProfileView, the email will always be displayed lowercased: ![10](https://blog.avenuecode.com/hs-fs/hubfs/10.png?width=2146&name=10.png) ##### Final Thoughts That covers the most important new Swift 5.1 features that make SwiftUI syntax possible. As a brand new and innovative way to build UIs across Apple platforms, SwiftUI is continually under development, and we can expect more exciting new features on this fantastic UI Framework later this year on [Apple’s WWDC](https://developer.apple.com/wwdc20/). The source code examples in this article can be found [here.](https://bitbucket.org/mareb/swiftui_declarativesyntax/src/master/SwiftUI_DeclarativeSyntax.playground/Contents.swift) Enjoy! --- [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png)](https://www.linkedin.com/in/marcos-rebouças-3023bb64/) ### Author # Marcos Rebouças Based in São Paulo, Marcos Rebouças is an iOS Engineer at Avenue Code that’s passionate about transforming app prototypes into real amazing user experiences. When not coding he also enjoys to practise yoga and spend time with his family and friends. --- ### Related Posts ### Improving the developer experience when documenting [READ MORE](https://blog.avenuecode.com/improving-the-developer-experience?hsLang=en-us) ### Building Accessible Web Applications [READ MORE](https://blog.avenuecode.com/building-accessible-web-applications?hsLang=en-us) ### How to Create a Twitter Bot with GoLang [READ MORE](https://blog.avenuecode.com/how-to-create-a-twitter-bot-with-golang?hsLang=en-us) ### Create a Tunnel from Anypoint Platform to GCP Using an HA VPN [READ MORE](https://blog.avenuecode.com/create-a-tunnel-from-anypoint-platform-to-gcp-using-ha-vpn?hsLang=en-us) ### Leave a Comment! ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenue-code) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Primary Logo AvenueCode Inverted.png](https://blog.avenuecode.com/hs-fs/hubfs/Images/Logos/Primary%20Logo%20AvenueCode%20Inverted.png?width=1104&name=Primary%20Logo%20AvenueCode%20Inverted.png "Primary Logo AvenueCode Inverted.png") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript) © 2026 Avenue Code ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Marcos Rebouças", "url" : "https://blog.avenuecode.com/author/marcos-rebouças" }, "dateModified" : "2022-10-10T20:27:12.289Z", "datePublished" : "2020-06-03T17:00:00.000Z", "headline" : "How Well Do You Know SwiftUI?", "image" : [ "https://blog.avenuecode.com/hubfs/banner-2.jpg" ], "mainEntityOfPage" : { "@id" : "https://blog.avenuecode.com/how-well-do-you-know-swiftui", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png" }, "name" : "Avenue Code" } } ```