SwiftUI Data Flow and View Composition Tutorial

[@pitmanra]

Excellent explanation. The State and Binding graphics help a lot.

[@CodeWithChris]

Thanks!! 🙌 -Kat

[@ChrisStefani]

Best timing ever! I had a view with more than 800 loc and was wondering how I can pass the @State variables into subviews to split the main view. Now it's readable code with even less than 300 loc. Thank you so much!!!

[@CodeWithChris]

Welcome! Glad we could help. :) -Kat

[@phrax]

excellent advice for a beginner to swiftUI and iOS programming, but with experience with other UI tech.

[@CodeWithChris]

Cheers, Benson! All the best to your projects! :-) -Arthur

[@mulena7402]

Thank you so much Chris and team for an amazing tutorials! I started with your Swift basics videos then moved to storyboard videos and, to be honest, I prefer SwiftUI. It's quicker and more straightforward. Storyboard was definitely not for me :)

[@CodeWithChris]

Happy to help! -Kat

[@devhopes]

Much easier and informative.

[@CodeWithChris]

Glad you think so. 👍 Thanks! - Kat

[@yukishima260]

I must say it's getting very difficult now for me who never written code apart from super basic html but trying to copy the code and pretend that I understand till I actually understand @State... Thank you very much again! looking forward to the next video.

[@CodeWithChris]

I can totally relate to the super basic HTML part, lol. 😄 Thanks for learning with us! - Kat

[@judy8821]

Hmmm..neat that you can use one binding property that can be tied to all three state variables. However, I think it’s simpler to just put in the three slider views directly than to create a new file. Seems to me to be less code that way and more straightforward but what do I know?

[@CodeWithChris]

Hello, it should be the same but it would look longer and more complicated than just looking at a "simplifed" sliderView that you can reuse later on other parts of your app. usually rule of thumb is, if you use a block of code repeatedly, then put it in a function or a class - Francis

[@natelee8671]

Pretty Neat! Thank you Chris!

[@CodeWithChris]

Thank you! 🙌 -Kat

[@casparolsen4340]

Thank you for great videos! What if you wanted to take it one step further and make a new view with 3 sliders and call it "RowView" and then put that into the ContentView instead of 3 SliderViews?

[@CodeWithChris]

Hello, as long as you are able to monitor and access the values of your slider it shouldn't be a problem, try it and and experiment on what works best for you - Francis

[@superbkriz]

When do you need to add $ and when is it not needed?

[@CodeWithChris]

Hello, $ is generally used in swift when you want to easily put a variable in a string formatt without the need to cast it to string. its a nice shortcut and looks cleaner - Francis

[@pablojimenez5299]

In this video in particular, $ is used to denote a binding. For instance, when creating a Slider object, you have to pass in a "value" parameter, which has to be a binding; that's when you write "$red", and not just "red". When using a binding, you're creating a two-way communication channel between two objects (in this case, the state property "red", and the value of the slider). That's why the slider initially shows the value 0; because it's showing the initial value from the state property "red", which is initialized to 0 through code. But when you manually move the slider in the view, that binding you've created is automatically changing the value of the state property, and this updated value of the state property "red" is the one that you'll show in the label. But when passing the parameter to that label, you don't write "$red", but just "red"; that's because there's no binding involved this time around, since the label doesn't change the value of the state property in return, it's simply showing it (one-way communication channel). So, to clear things up: if you write "red", you're just using a Double value. But if you write "$red", you're establishing a binding because you expect the value you're passing to be changed in return. And a quick note: if you create a custom view (like the SliderView in this video), the "value" property in your custom view has to be marked as @Binding. Otherwise, you'll just be able to pass a Double as parameter to the custom view, instead of a binding, and the value of the source of truth (the corresponding state property in ContentView) won't be changed in return. Hope that made sense.

[@adeomole]

Just tried to recreate this to understand how state and binding work but it doesn't work at all, the first version having everything in the content view works fine with 3 sliders (build successfully). But once I create the SliderView I get errors on the '@Binding', 'VStack error', '$value' unresolved Id... and at the bottom 'SliderView()' more errors Doesn't make sense to me at the moment... Was there a SwiftUI update that outdated this tutorial?

[@adeomole]

Also my ContentView doesn't recognise SliderVIew

[@CodeWithChris]

Hello, its quite difficult to visualize the problem, i suggest heading over to our community forum and post your issue there along with screenshots of the code and error at codecrew.codewithchris.com - Francis

[@tinaquart4748]

Chris, can u give the link for xcode on windows

[@CodeWithChris]

bit.ly/CWCWindows It's in the description of this video. :) -Kat

[@tinaquart4748]

Thanks Master Chris

[@glenreidy]

For me this didn't seem like a tutorial for beginners. It felt like a video for experienced coders to convert to SwiftUI. Having just come from the learning swift course this seems a little too much for me at the moment. I'll continue to learn, but thought I'd give you some honest feedback from a beginner. Storyboard is still tempting.

[@CodeWithChris]

Thanks for sharing! It's helpful for us to know that. - Kat

[@amurthar2058]

Hii.. I am getting error on navigationbartrailing in macos bigsur.. How can I handle that??? Can u please help me

[@CodeWithChris]

"Hello, it would be difficult to know what you problem is through chat, i suggest posting your problem on our community forum along with a picture so we can take a better look at it, head on over to codecrew.codewithchris.com - Francis"

[@yoelcera243]

loved the video, so helpful what was covered. Just one thing when you added the new swiftui file, how can I do it in the latest xcode?

[@CodeWithChris]

Xcode: File > New. @AdrienVillez

[@indiekiduk]

Good tutorial, I've seen other KZbinrs use a binding when they only need to read the value, so should have just used a let.

[@CodeWithChris]

Thank you so much! -Arthur

[@makalelepl]

Great video, but you should explain what's the purpose of $ sign.

[@CodeWithChris]

Hello, the $ sign is usually used as a delimeter to add variables in a String so you dont need to append it so instead of doing "my name is" + varName you can do "my name is $(varName)" instead - Francis

[@inryanseyes]

SwiftUI does NOT eliminate MVVM architecture. The View Model / Controller does not disappear. Views should not be directly manipulating the model, but should run through the View Model first. Yes, you could write a program that way, but you shouldn't.

[@CodeWithChris]

Hello, sorry for the confusion yes it does not really "eliminate" the MVVM architecture, it does however, makes it easier to have a direct connection to the controller (logic) when a UI element has an interaction - Francis

[@spliffsenseiroejogan9380]

Hey Chris I’m ready to build my SwiftUI e-commerce app I’m wondering are you still working on that tutorial or just teaching overall swiftUI which is fine too. Lastly are there expedited lessons available in which we can pay for tutorial lessons for e-commerce app available. Great content happy 2020 keep up the good work Code With Chris development crew 🔥💪🏾‼️

[@CodeWithChris]

Thanks for your support in CodeWithChris! You can integrate Shopify API Here's a few intro videos to using APIs kzbin.info/www/bejne/j6vbaJyeqah6eNU kzbin.info/www/bejne/aZ_alIGCgph-hbc -Kat

[@malikjunaid4500]

can i have your contact ?

[@CodeWithChris]

Contact us at [e-mail]. :-) -Arthur

[@gauntletwielder6306]

Omg!!!!! Unbelievable. Since most of my apps have at least two color pickers. This is something I know *thoroughly* For this demo, it is even easier in a ViewController: *rectangle.backgroundColor = [UIColor colorwithRed:redSlider.value green:greenSlider.value blue:blueSlider.value alpha:1.0];* Do you see that? *One single line of code!!!!* No states, no bindings, etc... Just plain ol’ working code. (Please forgive me for using Objective-C... my Swift skill set does not yet match my Objective-C skill set) *One simple line of code* that goes in the UISlider value changed method, that can be shared by all three sliders. Oh yeah... and the minimum and maximum slider values are 0.0 and 1.0 respectively. Code can be simplified and optimized if UI controls are prepped with helpful values.

[@CodeWithChris]

Good for apple to finally move on to a code concentrated language right? swiftui is still quite new and will most probably undergo multiple changes in the future but development looks bright :) - Francis