Monday , September 28 2020

Data in SwiftUI, Part 2: Views as a function of data | Sarun, Hacker News

    

      


                                          

Part 2 in a series on understanding data in SwiftUI. We will talk about the key that makes principles in part 1 possible in SwiftUI. And how this resulting in a reduction of the complexity of UI development.

  1. Data flow in SwiftUI, Part 1: Data
  2. Data flow in SwiftUI, Part 2: Views as a function of data
  3. Data flow in SwiftUI, Part 3: Tools

We know from part 1 that data is the main focus for SwiftUI, but without cooperation from a view and framework, it might not be a pleasant experience implementing it.

Views as a function of state

Here is an example from WWDC 2019 session. It is a music player app with a PlayerView as a parent view, which contains

(A music player app -

A music player app - Playing An overview diagram of interactions between each view in UIKit

The above diagram should familiar to you, (PlayerViewController) holds a reference of (PlayerView) and

Music player app
Music player app (var) isPlaying

:  Bool  (=
  (false) { 
 UIKit diagram  didSet  ({   
Music player appUIKit diagram}
    
}
  ()  (func)   viewDidLoad 
  • UIKit diagram (
     
      
    {
     {() 
     Music player app configureView   (
      
     
        (loadData) () (  Music player app
     Music player app
      

    ()

    (private) func Music player app configureView

  • )

      ({Music player app
  • Music player app

     
      ()  
          
    } 
     

    As you can see, the fact that UIKit communicates using events makes it difficult to know what the resulting view would be at a given time. And there are so many places that can go wrong.

    Views are a function of state, not of a sequence of events. - WWDC , session

    If UIKit said to be an event-driven user interface, SwiftUI would be data-driven. The above quote from WWDC 34788 session sums the situation of UIKit and SwiftUI nicely.

    View in UIKIt usually a result of sequences of events, whether target-action, delegate, or notification. View in SwiftUI, on the other hand, designed to depend solely on data.

    Let see some example.

    Music player app

    var (body) : some

  • (View) {UIKit diagram
     () (VStack) { 
     UIKit diagram
     Text  Music player app (

    episode .

    title
  •  foregroundColor 
     ( isPlaying ? UIKit diagram.  (white) : UIKit diagramMusic player app (gray) ) 
         
    (Text) ( episode (showTitle
      UIKit diagram. 
     font 

    Music player app ( (caption) )

     foregroundColor  
     (

    gray

     
       PlayButton  (
    (isPlaying) : $ isPlaying UIKit diagram)
     

    }

     
      
      

    UIKit diagram struct (PlayButton) :

    UIKit diagram View { @ Binding UIKit diagram var

     isPlaying :  (Bool)  Music player app
    Music player app
    var
     body  ():  (View)  { 

    Music player app

      Button 
  • UIKit diagram ( action : ({
         (self) () .  isPlaying 
      toggle 
     (  
      
        }   {
        (Image)    (systemName) : 
     isPlaying ? 
      “pause.circle”  UIKit diagram: 
     "play.circle" 
     
         }   
    Music player app }
     

    Music player app } UIKit diagram

       

    You might not understand some of the syntaxes, but we can all agree that a SwiftUI view is quite easy to understand. We can declare views in the form of function that takes data as an arugment. PlayerView episode episode color change according to isPlaying PlayButton image showing play / pause based on

    Following is the same view interaction diagram, but this time for SwiftUI.

    An overview diagram of interactions between each view in SwiftUI (Declarative UI) #

    principles we learn in this declarative world. We can declare data as a source of truth or dependency, and view as a function of those data. SwiftUI will do take care of the rest for us.

    The declarative UI make SwiftUI shine, the framework handle everything that we have to do it manually in UIKit. It makes the concept of view controller not relevant anymore in SwiftUI.

    The purpose of the view controller is to manage views and their interaction. Most of the codes in view controller are for responding to user interaction from its views. Setting up target-action to a button, listen for a delegate. Observe to model change and response to that by reload your table view or change some labels. You have to do all of this manually, which is error-prone, and the complexity grows as your app grows.

    SwiftUI does all the heavy lifting, which allows us to focus on things that matter, manage the data of your app by defining the right source of truth and its dependency.

    The whole purpose of view controller is to keep your data in sync with your view

    The fact that we don't have to manage data ourselves makes the complexity in UI development significantly reduce.

    What's next (# )

    In the following article, we will go through all the tools available, including the one shown in the example

    Data flow in SwiftUI, Part 1: Data Data flow in SwiftUI, Part 3: Tools Data Flow Through SwiftUI

              Read More

  • About admin

    Leave a Reply

    Your email address will not be published. Required fields are marked *