Building a SwiftUI app for iOS and macOS – Swift on Sundays Tutorial, September 22nd 2019

hey folks welcome back to Swift on Sundays my name is Paul Hudson and this used to be a weekly stream would cover lots of code in one real project every week in about an hour hour and a half there was a massive brick dub dub DC because I've seen lots of new things got announced I ran my own conference I have some holidays you can I get vacation but we're back now with another new project and this time we're looking intensive Lee at Swift UI lots and lots of folks man ask me questions about Swift UI by email by Twitter I'm slack all over the place I know you folks have a lot of questions I 50y and I think the best way to kind of answer that will dive in with some code and I actually ran a a community dogs ami recording um I did a a presentation hello darling I did a presentation in New York at try Swift ten days ago I lost track already a week oh I've ever done recently and it was called Swift ey in 25 minutes and I did my my test run for that and ended up with an hour and 20 minutes so I was way way way over budget on time like I cut it and cut it and cut it and cut it and cut it to get it down to the right length and what you're gonna see today is if Betty the director's cut of my try Swift talk like what I would have delivered if I had way way way more time so we're gonna go into a stack of detail about swifty why we're gonna look at midnight mist give me some money already for a treat okay you can get a tree come on good girl there you go yeah super chats get dog treats by the way put your newest 50 watts sundaes anyway we're gonna go to sack detail right we're gonna look at building navigation button lists pulling buttons building state we're gonna look at iOS apps we'll look at Mac OS with catalyst look at native Mac OS of swift UI using app kit we're gonna look a huge range of stuff including core data it's a serious application it's a real thing with lots to dive into so that's true hopefully a really good product to help you learn about so if you win a really practical way if you're new to us on Sundays we have got very many rules in fact they're only really a handful we care about firstly I have a zero tolerance for harassment so if you see any abuse in the chat you get like an instant ban you'll be out no questions asked second if you have on topic questions like questions about what I'm doing right now please ask in the chat window and I'll get them answered straight away if you're off-topic questions you know should I learn you i qi i my sprite kick games broke whatever it is leave those to the end otherwise it's really really hard to follow along those are the rules I should say the code for this will be on github when we're finished so I'm gonna wire right track keep off if you don't want to it'll all be on github ultimately so that's it now I should remind you by the way I'm running Catalina beta 8 so this might completely catch fire I did a test run earlier this week a few days ago and I'd like a screen share did like a screen cam did both the same time just to make sure it works and it all worked correctly there were no problems I'm hoping today though all you folks here it's not gonna catch fire but I've warned you ahead of time it's it's it's beta software right they used to it anyway with that I can't dime to the project's we don't got much time and I've got a lot to cover so I'm gonna try this is the risky bit it's a little bit that might catch fire is gonna happen it'll happen now and I've tried to cross two screen sharing mode like that boom and we're still life awesome so as you can see in my screen I have the chat window here up here I'll make it nice and big thing see what's going on I have Xcode 11 the the finished shipping group and a Mac App Store you will need that if you want to follow along in swift UI you don't have to have Catalina if you want do I have those live previews in the corner of your screen you got to have Catalina if you don't mind that you can have Mojave in this press command are a lot to run the app in a simulator either one works you do not have to have cash needed follow along oh I should mention by the way if you want to lift your y properly I'm learning a new course the hundred days of DUI it's free online at hacking with Swift calm slash 100/50 why go and check that out anyway so the my Xcode window there and I'm gonna go ahead and press create a new Xcode project and from its list I will make this window a little bit bigger so we can see what's going on like that boom and I'm gonna choose iOS single view app and then I'll call this thing dad jokes that's the app we're gonna make an app to track dad jokes it's hilarious dad jokes of course make sure you choose swift UI for your user interface are not storyboard otherwise you'll be very confused indeed and for here I'm going to check the box saying use core data so yet core ed stuff enabled automatically for application so I press next and then save to my desktop and here it's my final if Catherine is gonna play ball I will press resume to have it build and run my code in the live previews right inside Xcode and will know very quickly if Catalina's gonna be happy or not because you never quite know the cattle you know at this point sadly that's alright it'll be final soon it's thinking thinking very slowly there we go yes getting close okay boom there is our live preview and it's brilliant this whole thing is super live so we can just change text in here and say you know not hello world but goodbye world whatever and boom updates live as you do it really really interactive again if you have not got Catalina just press command R to build and run your code regularly you get the same effect anyway you can see here we have text hello world a simple label on there saying hello world Rick that's very kind of thank you very much that's a number of dog treats um hello world's a label on there which is pretty boring of course you don't want one label we want to have a collection of labels so I'm gonna say this text thing here is wrapped inside a list yeah the hum might be my laptop which is currently fans on 100% because it's doing OBS it's doing live streaming in Catalina it's doing keynote as well it might be that I had to guess yeah this one runs hot I kind of wait cannot wait till they change the laptops anyway so you can see now we have a list of stuff saying hello world hello world hello world and this is now inside effectively a UI tableview now it might not be a UI tableview in the future but it certainly is right now that's all it is do you want table view it works exactly the same way so you can pull it around you can tap on sales and so forth it works just like a table view effectively and you'll see this is basically a static table view we have three text views in there hello world hello world hello world just stacks them up one per row so it's really easy to do these fixed style storyboards which just you know look right and with custom cells everywhere you want to not dynamic of course if you want dynamic which is you nearly always will want you got to start by defining what your data is in our case this is a bad jokes app so I'll say before our content view there is a new struct called joke a dad joke a single joke struct I think joke has a set up string and oops and a punchline string and a rating string three things like that and now to begin with we're just going to go ahead and hard-code some dates to work with so we'll say in our content view here we have an array of jokes to work with in our table and the first one I should say brace yourself there are some very bad dad jokes in here so you know you've been warned ahead of time disconnect from the live stream now if you hate dad jokes anyway that just equals I'll say joke and the setups going to be what's a cow's favorite place of course the answer is a museum and they're waiting for that and I rate this thing between a number of possibilities and in dad jokes none really laughter dad jokes you either get things like you know sobbing terrible dad joke you get silence you get a heavy sigh and if you're lucky if you're very giving children you might get a smirk those are the reason I'm gonna use sob silent sigh or smirk so we're racing for this one this one's okay I'll say silence that's the rating first one and then for our next joke say the joke setup is what's brown and sticky Nance is a stick but that one is sy and one more a joke using the setup what's orange and sounds like a parrot punchline is a carrot rating is smirk quite a good one that one so there's our sort of hard code jokes we all work with and what you really want to do is say inside this list make one cell for each one of those jokes so run having text by hand text texas a text you wanna say loop over all the items in that jokes array and create one row from that one Joey that's a great jokes Levy's it's a good creature I could use that one there's time for that one perhaps anyway we're gonna say go ahead and use for each here so I'll say for each jokes jokes even not hoax jokes and this time we must tell this thing to loop over it by one joke at a time and give me each joke individually and write that into the setup here like that write it into their text so entire list go over every joke and make one cell for each joke with that setup in sight or say what cares a prayer place what's brown and sticky and what orange and sound like a parrot and I press command B you build the code you'll see it's very unhappy it's saying Lola cannot convert value of type whatever to closure type underscore which is that a great um useless error message Arturo says can't we access this video later on yes you can yes you can the real error is down here referencing lish lines of this thing requires that joke conform to identifiable now over here I have keynote running with some sly dog if you just real quick they might help explain what's going on here so you can see we have an array of jokes like this and there's loads of them as five here or 10 or 100 wherever it is and when we finally delete one of those things how to Swift you I know which one was deleted was it what's brown and sticky was it what's a cafe a place what how does it know to defy each joke uniquely now our joke struct looks like this struck joke fasted up string punchline string and rating string that's the data we have and in Swift five point one is actually a new protocol called identifiable we can say this thing conforms to identify herbal and it has only one requirement which is that there must be a property called ID some sort of thing that IDs this object uniquely I think say here I'm saying give every joke a unique use a universal identify a UUID randomly every single time that's uniquely done so we delete one thing it'll be pretty clear what was deleted in this case though we're not going to do that because our setup is unique right that what's brown and sticky or what Oren's having a parrot or a carrot or E and the other one in Cairo place they're all unique they're all unique already you know to have a same joke in there twice so we can actually use that set up as our unique identifier we can say look at that thing it will be unique guaranteed and if we're wrong well we're wrong at our faults let's find not be wrong so like an X code I'll question for Magnus why do I use a list of forage jokes where you can just do list jokes so it is saying is in this instance we can actually have just written for e list jokes like that and ditched the forage entirely that's intentional Magnus and you'll see why later on and I want to spoil the fun too much anyway so I'm gonna go and loop the polar things here and for each joke here we'll say it's identify er the thing that makes this joke unique is backslash dot set up that's what's unique about it and with that we can now build the code hopefully no it's not happy list jokes here with my mistake you ready that codes done boom boom you now build the code okay so now it's happy with a code it understands how to build the code so use that setup as being unique identifier every single time so if we resume there preview again it should be happier there doing little build there we go so it's now listing out things nicely as you would expect smile bot asks if it was a UID wouldn't it reset this everything a bit of structs properties it resets that when you recreate the struct but for every time critters struck it be new every time in this case though it's okay because the structure made once and never used again like never recreated again so it's fine well Robert is a property that is pointing to a property I was asking why we using a key path here it's a property that is a property of saying read that property from our thing that's all we're doing we're not even the property directly because we're saying it's like an indirect reference here's where you look for the enter fire not specifically one two three but that whatever is there is individual joke anyway so there is our simple layout stuff what we're gonna do next is enhance a little bit we're going to show the rating next to it is it's silent sighs smirk or sob and what are the cool thing swifty why does is it makes it very easy to compose views to build lots of small views that do one or two small things then bring them together then bring them together like Lego bricks to make bigger and bigger views and in this case we would represent the rating for a joke using an emoji so I'm gonna press command n to make a new fire next code now choose swift UI view I'll name this thing emoji view that emoji view and this thing right now has just simple hello world text like our previous view so Xavier asks why do they see back slash dot self what's the difference so when you say self you're referring to the whole object makes it unique so for example in our previous file we had a list / jokes using setup if we had an array of strings here or an array of integers or an array of doubles whatever it happens to be right we can't just say hey backslash dot what and what do you write know that you can write in there backslash itself means the thing itself that individual string in the array is what makes it unique that little number makes it unique and it's down to you to make sure you don't repeat the strings and numbers so it's about it's a way referring to things like the whole thing itself is what enter Faiz it anyway so where are our modes of view here and this thing is going to take as its parameter as a property sorry a rating string sub size science or smirk inside its body we're gonna decide what to show based on the value of that rating we're going to say switch on rating inside there we'll say well if we had the rating table we will return a text with the emoji and I strand break the emoji menu here and fail there we go boom table is that one but that's it that's our Mojo's back if we have sob if we are sigh I will return a text using the emoji hmm side to side there look at that yes what's that Mitchell one call your called a sad pensive face boom one of those if we have smirk you'll return text off its smirk emoji and a little sort of half smile kind of thing oh yeah there we go what's that smoking tricks perfect boom and then default I eat all other values which is in states of silence but know that cuts of string would return back sort of I heard straight an amused face and which one here looks unamused there we go look at that nice singularly that's the face of my kids pull when I do dad jokes there we go anyway so that is the various emoji we can have inside our emoji view and one thing I cannot often do when I'm being super lazy is make a custom initializer now this is a struct right the struct you can just do a mode of you writing some rating often when I want my code to read more naturally I'll do a custom initializer for my emoji even though it has one member wise one already so I'll say in this case in it for rating string self-rating equals rating and I'll get a much nicer initializer for the emoji views anyway so that code is all valid code this is all good swift code right but if I press command B to build my code it ain't gonna work because down here it's saying well this thing here is X code preview provider the thing that has drawn this thing on the right and it tries to create a new emoji for you with no parameters it doesn't know what emoji of you to create so we've to make this Co compile we've got to tell it for our preview purposes like for a quick demo purpose over here we will make an emoji view for the emoji I'm gonna use sob like that sob an airy press command B it should build the code correctly folks I know you really would use enums there's a particular reason I have chosen ahead of time not to use enums it's all going to call later shortly it was done for a reason to trust me our press resume over here it should show us that little sub emoji here on the right there is tiny tiny tiny little thing I'll zoom in slightly there we go there's our sub preview working nicely inside the canvas on the right okay so we can now use that inside our content view our new emoji view using that whole composition thing you can see we have our list our table of stuff for each joke make a row then row right now is just some text I want to do really is say not just text but also the emoji view for joke racing dot raising like that show me the correct emoji for this joke now press command B again and it's giving us a wonderful Swift error message ah hello dogs yes you do get a treat because some folks give you a lot of money it's very very kind of and thank you so much folks okay thank you people like you very much yes this one's Aria by the way Lunas and I'm missing out somewhere on the big treat somewhere else silly dog anyway we're now getting an error on line 26 it's saying that type underscore has no member set up this is a brilliant brilliant bad error message in Swift what it means is that we've made a mistake somewhere else in our Swift UI code and Swift isn't quite sure where so it's kind of throwing up this other error message which in this case is utterly misleading that code was fine before and now it's not what it means is that Swift UI likes to know what you plan to return from stuff and it will either like to have one thing or an error that's it those your options do I return something or you don't even bother trying you can't return two things or five things or ten things whatever you want to it doesn't like that it likes to be very specific what you return and so what in this case we're trying to say two things for our table of you row now it's making it very very unhappy what it really wants in this case is listen you had your treat clear off it really was in this case is a haystack to wrap our emoji view and our text view in a horizontal stack side by side left and right and now her build again take a little while because I thought she was literally maxing out at CPU but it builds cleanly so the error it was pointing out about backslash setup was irrelevant that's not the error at all it was having a bit of a laugh what it really meant is inside the for each you're giving me two things I don't know what to do with that I don't understand what to do with that anyway now it's dying and press try again and it should hopefully show us our emoji and text and any time she 288 asks why isn't read from in it because in that case I really like writing emoji view for joke writing it reads much more now to me again like I said it's not required don't have to do that but in this case I find it reads more clearly than having emoji view rating joke rating not as nice anyway so now we have on our preview here as you can see boom we have our emoji and our setup side by side in the preview which what we hope for in the first place now I'm trying to keep track in my little keynote somewhere where that girl of we're up to and you just seen haystacks things going left to right and hate of course is horizontal it puts one thing on the left and next into the right next since is right and so forth along the way there's also V stacks vertical stacks they do the same thing that's going vertically and Z or Z stacks between zips or depth we want to place one thing over another thing and we're gonna be using all of these things in this project so those are the three ways to do stuff horizontal vertical and Zed stack and wonderfully they all do really great things for accessibility because when we say this thing comes first horizontally or vertically or whatever then this thing they're missing it makes it really easy for the screen reader to say AHA there's my protégée there's the order in which I read things whereas in you know auto layout days for UIKit we just put things around a screen with constraints and so forth and they look like in the right place in the screen but wasn't necessarily the correct flowing order you could put them all over the place you chose to swifty wire gives you a lot of great accessibility functionality free of charge anyway so that take us through the first step we're gonna table view right that is our thing there that's our table view with done the next step is we're going to do navigation navigation you can actually see the punch lines for your jokes right because just seeing what's brown and sticky is nowhere near hilarious enough right you want to see the actual punch line a stick and in Swift ey the tool for that is called a navigation view it's over combination of in UI kit terms a UI innovation controller and UI navigation bar at the same time all in one control called a navigation view and we place it around the list like that they push the list inside the navigation view so we'll all be inside there and you'll see immediately this big white space appears at the top above my table and that is just like an iOS right that's our navigation bar where I put a title and so forth we can do that now we can say you know our list here has the navigation bar title of dad jokes although in this case we can go EE meta because it's a great dad joke why do dad tell dad jokes because they want to see their kids all grown up so I'm a call-out app all grown up like that that's very kind thank you very soon so you can see now we put this title above our our list we automatically get the iOS chunky navigation bar style because 50y by default gives us these smart defaults I'm going to enable these things that you'd have to do in UI kit enable this thing and they were laughing and so forth you get smart defaults as standard which is super nice and Swift UI so one thing folks get confused with when they see this code I'll head back to keno for a second is they see this code here now a navigation view then a list of stuff and then we append navigation bar title to the list and they kind of expect actually that line of code shouldn't be there it should be there like what's it modifying and this I asked folks normally to think about this in terms of UI kit the new like it would never do that and you are kit anything that you like it would say I have a navigation controller here and a view controller inside navigation controller and the view controller is has a title of title a right there and that title a in that view controller actually gets moved up to the navigation controller it gets bubbled upwards we assign it to the local view control it bubbles up with this innovation controller and when we show titled B and view controller B that goes up and you see that goes up and so forth so we attach these things not to the navigation controller but the thing inside a navigation controller so that my OS can move it around freely panning in panning out animating beautifully that's how it works and the sames absolutely identical on swift ey we got attached titled innovation view but to the custom view inside it and that way it'll animate in and out freely as it needs to with swift UI so that's why I line goes there now what we want to do of course is show our hilarious punchline when someone taps one of these rows what's brown and sticky a stick right and this is done in swift UI using a type called navigation link you give this thing a destination what do you want to show what screen do you want to show and then you give it some content what should be capable what you want to be enabled to be tapped in your navigation in our case we're asking to make this whole H stack we replace that whole thing with a navigation link and we'll say your destination is going to be the text of our jokes punchline like that go straight to the punch line from our now recently like that now when I run the code I want to see three things that really stand out here as being awesome from Swift UI or other things back in simulator why we're drink it's launched at my iPhone 11 Promax ha okay what question do we have so far ah Swift ey and flutter similar some extent yes they asked me to expand of course they are there are some own intent i spects what you wise you know last longer but we'll see on that one okay hopefully it's launching our app in the simulator but on there we go so I'm going to point out a few things here first notice we have a haystack here alright we've got the third emoji and our text side-by-side but there's no haystack on our code so I've removed the haystack but it still understands what to do now this is one of those things that's 50 why does for us in some places like highly selectively automatically what we're seeing here is called an implicit stack a stack that was not specifically designed by us not put in place by us but swift you I assumed must happen here because the only logical choice it looked at this and says well you've got table here you've got at Apple thing inside it that must mean stable to you cell I think we've cells in iOS you've got two things it's gonna be a picture on the Left thing on the right so it kind of creasing them instantly immediate hate stack for you which you haven't asked for you just get one free of charge an implicit stack the second thing always notice is we've added these gray disclosure indicators again we don't ask for them swifty wise spotted we've got a stable which is pushing a new view somewhere else when a cell's tapped therefore the correct UI thing to do is to show a disclosure indicator so it's intelligent here and l'adapt you know an iPad if you have a split view controller you aren't pushing or popping screen today is showing in different detail screens it won't have those great dispersion hedges so does it intelligently based on what it thinks you need I think most important of all is notice that when I tap on these rows in slides a museum or in slides a stick we have literally pushed to some text our destination wasn't a new view controller wasn't a whole custom new view it was just some text or just some image or does the haystack whatever you want to you can push to tiny bits of things which means when you're doing prototyping you can work extremely quickly in swift UI to build applications will happen to do fill long designs of stuff because you can just do push some text push some image whatever it is it's very very fast in prototyping so as you can see the app is kind of coming together a little bit and it's obviously not an exciting application but we have titles we have navigation we have emoji and so forth we have a detail screen all in honestly not a lot of code you know that is basically as tapping in jokes and stuff and emoji switches and so forth anyway that gets us through navigation next up is correlator I'll briefly just address Dennis White's question what would happen if you were added the hate attack that's fine you could totally be explicit if you want to tell it exactly what you want to do you can but in this case you can also rely on implicit stacking now it's still create a stack for you so happens there's no performance difference so either one is fine realistically do ever work best for you I prefer to rely on the system sort of enhancements for me you don't have to do that whatever works well for you text image are indeed views but they are magic views you know if you think about the way Swift UI works if you look at our code sorry I'm here you can see that our content view is a view so everything is a view and everything is a view you've got this kind of chain of stuff this thing has text inside it what does text have inside it you know and so forth it was a big long chain of stuff and where does it actually end you know and it doesn't end but text and image and the other raw types of Swift UI are actually special primitive views that are the endpoint of all our views ultimately you know shapes colors gradients images text and so forth are these collection of primitive Swift UI views are the ultimate end points of all our views obviously we can read bigger ones are composites of of those types anyway next up I'd only look at collated because we've hard-coded some hilarious jokes in here so forth but that's not good enough you want actual damage data that user games racked with and and modify and have control over now I actually when I made this project if you remember I did select the core data template for single view app in iOS now what that means is we have this X C data model D file a core data definition of stuff we can define for our database atrc rt5 I've answered that online already in big big big detail the answer is you need both with UI and UI kit there's no easy way around at this point anyway this thing is our data model for our application all the database you want to store what tables we have will attribute we have and so forth need to be listed in there and in this case we're gonna replace our hard-coded joke struct with a coordinator entity called joke so I'll say identity our names entity joke and attributes are things that define it in this case properties just like in our struct and I'll say this thing has the same attributes that our struct had so I'll add one called setup and this thing is a string then I had another one called punchline and I'll make this thing also string then I'll add one more which is a rating and this thing is also a string so now you can see why I wasn't using enum so you know Swift enums are brilliant they don't play well with core data anyway by default Xcode likes to do a thing called code gen it'll generate some code for you when you press command B it'll make some code on the fly for you and that might work fine some other time here though we'll take a shortcut I must say I want no code gen from X code I instead I'm gonna make this thing by hand using this in here and editor create ns-managed object subclass here was an actual class we can work with and modify in our code so I'll press crate ns-managed objects of class choose dad jokes yes she's only joke entity yes go into the dad jokes folder go to the dad jokes group and press create and it creates the code to represent that class which is defined here setup string punchline string and ratings drink but they're all marked with a special attribute at ns-managed which means this thing is special it's being managed by core data for us it'll come from somewhere else and it'll go to somewhere else it's not a simple swift struct anyway the reason I've made the class physically in front of us like this because you really don't want to have to work with optionals everywhere call it a light optionals very much and they're not that it has an idea of optional that's not the same as swift's optional you can get awfully confusing so really what you want to do is make your class like this and add wrappers around it to make things a non-optional you know not set up non-optional punch line not optional rating you can read them safely it is very common I'm going to do it here because I'm time lucid to just remove the opportunity like that and say this thing really is required and that's fine I mean I think it I believe it causes problems with faulting in core data so it's not really a good idea for serious applications but the most like this it's gonna be fine anyway so I've made those three things not optional here and so we can do is back in our content view I can let's go with some space first I can delete this joke struct I don't need that anymore we've got our joke class which is an ns-managed object subclass that's the collector thing we just made I'll delete that thing there and similarly I'm gonna delete this whole hard-coded jokes array we don't have to have that either we don't want hard code jokes anymore we want dynamic jokes being loaded from core data and its place I'm gonna say give me some data from core data please load stuff from a database give me all the jokes and in core data the way of doing that is called an NS fetch request ask for some data please ask for it here and to do that in swifty why we use a special property rapper called at fetch request make a quarter request for data here and this takes a few properties the first one is which entity do you want to load in our case that is joke entity load our joke table like that the second one is how do you want your data to be sorted and we could just say I don't care just don't sort them it's given me the order they were added but for demo purposes here I'm gonna ask you provide a sorting script of here and I say we want to sort by it based on an NS sort descriptor up this gray door there we go I'm gonna provide the key path it's going to be backslash joke dot set up sort by the set up string of our jokes and i sending I'm gonna say true so we get the Athletica sorting of that array then we give it a name I'll say quote jokes like our previous array obviously you shouldn't be in there should be after there like that fart jokes type is a fetched results of joke like that boom solodar jokes array from core data like that okay and sort by setup so we're saying here is query the core database just show us all straight away all the jokes sort of busted up line directly into that array jokes I'm already using array jokes here so it should show all our jokes in our table I press command R to build them on our code again and now see it's empty now this is correct you know not screen up here it's empty because of course we have a database it's empty there are no jokes to show in there but you might wonder how the heck gives it know where the database is I what is at fetch request doing here and the answer is the X code templates written quite a bit of code for us behind the scenes like about 20-ish lines of code to make that work and it kicks off with in our app delegate they create an instance of an NS persistent container that's that the main core data object for loading databases and look for a thing called dad jokes which matches the name of our data model over here so I'll say ok give me this base called dad jokes load it now and it'll do so so it loads it in the app delegate when the application first launches and then in the scene delegate when an individual scene appears that's a window in like iPad or Westland and it seemed that it is a bit of hack soaring you'll see it reaches up to the app delegate to read its core it's container and grabs it's managed object context that's correct a lingo for where all the objects live where I can read and write and delete and modify stuff freely it reads that context and here on line 27 it injects that context into the environment for our content view it'll say ok anyone who wants to use collator badoom here you go here's your context to read and write data freely and when we say at fetch request stuff stuff stuff stuff stuff it'll understand ok I'll look in the environment to get my context from there and uses that database connection for all my queries my reading and writing comes from there so that's how it's at pet request managed to do almost nothing like one line of code boom we get things working quite nicely so it works well of course we now got a problem right we now can't see any jokes our application isn't very good anymore because we've deleted our hard-coded jokes array and we're now down to just collator so the next step is to add away users to create their own jokes and add scream so back an ESCO again Joey thank you very much very kind back next again I'll press command and break another new file and I'll call this saying a swift uiview next and I'll call this thing add view add view and that now this add view needs to be able to read that managed object context to save it because in corrector you say create a new object a new joke object inside this context do your work and then save the context so the first I'm going to say is read our managed object context from the environment the one that is passed in by the scene delegate so I'll say at environment that's another swift UI property wrapper it means ruling from the environment as to what we want to read we're going to say backslash dot the managed object context and that read our core data managed object context from the environment so we can use it locally and locally I'm going to call that thing MOC MOC managed object context so he now refer to that context whenever we want to we can create new jokes we can save the context we can delete jokes but we want to using that context and that's the one that came from the app delegate ultimately we also want to have some properties in here to handle the data for our joke what is the setup string what is the punchline string what's the rating string so we'll say setup by default is an empty string punchline by default that's also an empty string and ratings by default that's a string I'll do silence by default so the strings you want to work with for a default joke for Selanne edits them we're going to add one more property here which is the other possible ratings because there are four ratings right sob sigh silence and smirk I'm going to show those in a little picker for folks to choose from so I'm gonna say let ratings equals an array of sob sigh silence and smirk like that boom okay now I'm gonna go ahead and write some code in our body for this ad view and I say first up we have a navigation view you get a bar top a gray bar standard sort of UI kit behavior inside there is a table of stuff and this time I'm going to use sections to make a clear visual divider on the screen so we have a section in our first section will be a text field what is your setup I'll say text field the string is set up the placeholder string is ah good point Xavier sorry let rating equals sign and let Brittany's equals an array of that stuff my mistake thank you very much how difficult n text you're set up I'm gonna attach this thing to set up so show the text from our set up property in that text field then text field punch line that's the placeholder I thought this one to our punch line we hide this left-hand bar get a bit short space here there we go and our third control going to be a picker using rating and for selection we attach to rating as a picker we want to show the various options sub-site science or smirk so I'll say for each of our ratings and this time we have a string array so we can't say for our ID ID will be some value from a struct table itself is the unique identifier the value itself is the dent afire so in this case we've got to say backslash dot itself like that plaster rating ins we can work with it and just write text and that rating boom then after that section I'm going to add another control so when they're finished we can add something here i junked yes sona asks for a subscription sounds great you want so more money I'm happy to take your money anyway after I section there with our controls I'm gonna add a button so they can add the joke when they're ready so I'm gonna say there's a button with a text add joke and the action for this is going to create a new joke instance now remembers it's not a struct anymore this is a core data ns-managed object subclass and they're created in a very special way as you'll see we'll say let new joke equals a joke and this thing has a parameter called context where should this be saved what database are we working with here in our case we can just say actually it's that mock property you made earlier this thing up here our managed object context that one we got from the environment use that for our context here now you can copy across all our properties into that joke we'll say new joke got set up equals self dot set up our setup string new joke dot punch line is our punch line string punch line string there new joke rating is our ratings drink copy all later across into that new object and finally once we're done we want to save the managed object context we're done write everything out it's done as a specific call to save method on the match object context which ideally you want to make lots changed upfront right everything to do and saving one big sort of flush I suppose of doing many small writes in this case you might write you know do try self dot manage Oh mock sorry mock dot save and then catch obviously add your error here I'm not adding air for you can do it self print whoops and then Willis - error dot localized description obviously adds some sort of meaningful error caching in there MOC is just short for managed object context it is a thing that call if it passes us smart dog telling us here's your actual live data you work with as you add things or delete things or insert it's into there it's really happening in that corridor backing store and SQLite database or whatever it happens to be behind the scenes anyway so that's our ad joke thing there at the end of our list down here I'm gonna add a navigation bar title saying new joke boom like that ah friction asks do you need wig self in the button closure so this whole thing iteration is actually a struct and structs have no chance of being stuck in the retain cycle we can't you only have one owner ever so no you don't have big self in there and you know I don't know how it worked like in my head in my brain I would love to see Swift be smart enough not to have to have self absolutely everywhere because so many things in Swift UI are closure based and mostly inside structs therefore the Chancellor tentacle is impossible it can't happen I'd love them to say actually you don't need self here it's fine I suspect there are a thousand technical reasons why it's not possible but I can dream right I can dream anyway we're out of the title here for our list and I don't go ahead and press command B to build this code I'm gonna see errors here up here we have an error saying this thing cannot convert type of string to expect argument type binding string now let's head back the keynote for one second what we're saying here is collator has been passed in great it comes from the ab delegate down the way and down the way and that's really nice because of the environment if you think about the wave did things in UIKit rather past call it around by hand again again again again which is very confusing and what so if you're wired to do is put it once into the environment skip things out and then read out when we're ready like that which is really nice but we have an error we're trying to read the setup string inside our text field and swift UI is really unhappy with some pretty happy because yes it can show a text in a text field it's like doing a new eye kit some text field dot text equals hello world you can do that of course you can why want to happen is when we write stuff into a text field it should update set up as well there's no one way binding but they don't have to go two ways it'll read to value and also write it back out again and what's going to make that happen is we've got to modify our setup string now if you remember our setup string here is inside our add view and our add view is a struct you can't modify properties and structs it's not allowed as you expect having me taking method and this is not me sitting it's a property so you cannot mutate things here at all it is impossible switch why does not allowed to do it swift is not allowed to do it it's problem and so Swift UI gives a solution it is this we can mark our setup string to be program state something that will change over time and when we do that the data it would own that string this bit of memory here stops being inside our struct which can't be changed and gets moved away to data owned by Swift UI which can be changed freely it's still owned by our struck ultimately it's catch to our struck uniquely that one view where 10 views are the same thing they'll have their own set up strings but each one is in RAM owned by Swift dy so can be changed freely and we mark things at that state it becomes changeable we can now mark the two-way binding this text field reads this string will also write the string by saying at state oops like no no those at state like this I was edit right in here we go boom dollar set up whenever you wanna use it use dollar everywhere so our text field here would say some text field dollar setup and that is marking the underlying values being modified with a two-way binding and so wrap that up here our text field wants to read and write our set up property we have to say dollar set up like that and also dollar punch line and dollar rate like that use the actual underlying value with a two-way binding read the value and write the value when it changes for those text fields and that picker and that'll make the errors mostly go away in theory it's now very very angry and you can see I made a so much day it's my fault after a two-way binding here we're now trying to modify setup punchline and rating that's where at state comes in at state like that these three values are going to change over time and must be kept in RAM active I'll give you a demo shortly of why it becomes a problem because it really doesn't matter because Swift ey will throw away your structs whenever it wants to as often as it wants to we don't know when we don't care when it'll throw away and recreate them so the values you store will be lost unless you have that at state this is actual live program state please keep it active anyway so now hopefully we can get ready to show this screen so we're going to add a button to our previous screen that content view which will show our ad view when it's tapped now Swift UI is declarative not imperative and these are two currently long words and what they mean is this thing in imperative we say do this do this do this do this we're saying what to do precisely present this view show this thing do what you want to in the clarity of UI we set out all our possible states attach conditions to them and Swift ey decides which state is active based on our conditions we provide questions slash statement from Caleb a swift early plant don't eat me at state private so at state I wasn't mad cover it too much here it's in the online book at state is designed for simple types like strings and integers and boolean and doubles and so forth that are owned by the local view and only of you yes Apple does recommend don't need to but leaders recommend making them private so that you specifically underline this thing should go nowhere else it's not likely shared not required just a nice to have and no Arabs we recommend you do it yes of course go ahead anyway I was applying coming here but now we have anyway uh-huh so what would to do is say show out ad view when it's time to show the ad view so I'll go back to our content you again which was here boom I'm gonna say there's a new state variable and just for Caleb I'm gonna say private VAR showing add joke is false and when that boolean is true it's time to show our add joke view otherwise put back to false again I'll be sorry I'm happy to cover more things like a bonus couple more things I haven't planned to cover at all I always try to cover a subset of things in any given live stream because there's lots and lots things to cover anyway we're gonna make a button in a vacation bars adding jokes and stuff which will add a joke by showing our view and it shows that view not by saying hey please click this view and show it but by just toggling this boolean so what we gonna do first is we're gonna say underneath our list here there is a navigation and bar items using trailing this using some trailing options and our trailing thing is going to be a button I mean that is slightly there we go boom it's going to be a button to add stuff so I'll say button and I'll say add and it's takes a closure offs have to do with lessons tapped we're going to say self dot showing add jokes toggle just toggle that boolean it was false make it true it's true make it false table boolean that's all it's going to do now these buttons you can actually add mortem if you want you could have an image in there if you choose to instead using SF symbols or some text or text and an image it's quite flexible but here a simple text string is it's basically fine Kevin thank you very much Thank You Leonardo it's very kind of you anyway so that will say toggle a boolean and now it's time to say when that boolean is true here's what should happen want show a new screen with our ad view inside now our ad view if you remember is expecting to find in the environment the managed object context we've got to pass that along we were to read it here from our environment then pass it along into its environment it can read it as well guitar I think it's very kind I do give treats the dog and they finally arrive back later on then we get they get one treat / / super chat apart from perhaps Rix was very generous if I get may treats for that one there's some fat dogs we'll see a ghost anyway well they'll read the managed object context here and pass it on to our child so I'll say up here for our fetch request again it's same thing at environment backslash backslash dot managed object context of our mock save them had before and then we're gonna say there is a sheet a sheet is a screen appearing over our current screen which if you think in if you're a UI kit developer it's bless you plenty a modal view controllers what I'm doing here it's called a sheet because keep in mind so if T wise cross-platform it works on Mac OS and watch us on TV OS and of the iOS as well and so it's not as simple as present modal view controller cuz it will look different on every system that works with scores she generalized though this thing you can see has a property called is presented is presented so show this sheet when dollar showing add joke like that what it means is when show a job becomes true automatically show whatever we right in here all the stuff here was shown as soon as showing a joke is true and it's a two-way binding when this sheets dismissed it will set sharing add joke back to false again it will work again and again and again in press add dismiss add dismiss and so forth in our case the we want to show is our ad view the thing we made earlier well they can add a joke and they gave a got to inject its environment and they're so gonna read only manage public contexts or say as an ad view inject into its environment is back slash dot managed object context and in this case we'll inject ourself don't mock our context into its context now there are many times when this isn't actually required because the environments are very very clever if you have if you inject ace something it's the environment for a navigation view everything that's pushed onto navigation view will gain the same environment if you have a tab view with some environment all its tabs will get the environment if you compose views like one gives had none of the internal view interview data and a top thing has an environment all its sub views will have the same environment here though we're presenting a wholly new screen holding you stack on the UI that does not walk Miley gets a new environment little pass in there by hand what we're doing here passing in by hand here is your new context so in theory I've done enough with Holthe in work when I forgotten some comedy stuff along the way let's find out you never know that's the fun of live coding press command Archie build and run and we'll find out what I forgot because you know log hmm okay there's our add screen boom up it slides so that is our sheet becoming active because showing as joke became true when I swipe it away it becomes false again I'm gonna post add to add it again like that okay I'm gonna add some jokes our setups going to be what do you all cheese that isn't yours yeah nacho cheese the rating of that one yes I I press a joke and then I modify this thing Brian ow ski Brian ow ski we're on - are on yes the stream will be online YouTube forever and ever and ever much to my shame I'm sure for years to come new joke what do you call a fake noodle nacho Soto oh man that's a perfect joke for you ah I've known you were coming I don't think it's us thing anyway it's an impostor sorry that definitely sob anyway I like that joke too so I've added two jokes here and I dismiss the screen you'll see behind the scenes I've been adding to our application automatically and this is wonderful so you can see that that fetch request saying give me some data for our list is automatically spotting changes saying I added a joke I'll reload I add another joke I'll reload and I'll insert rows continuously as things are happening elsewhere we haven't got to say hey listen changes happen reload reload reload and so forth so it'll do automatically force which is really really nice now of course I had to press add and then type of joke in then both add joke and then swipe away it's not ideal right we can do better than that we can actually say here what we want to do instead is when you press add joke dismiss the screen like Emilio's just asked it's amazing I'm presently planning ahead here so we want to do here is say actually when you press add joke doorway and there are two ways of doing this you can either inject a binding into the child view and say hey flip this to false now hide you automatically myself or it can hide itself and we'll take the latter option he requires like one line less code so puzzle say that extra 10 seconds here so back in our add view I'm going to read another environment value I'll say at environment and this time I'm going to read the value of presentation mode I call this thing via presentation mode this tells us is the screen being presented or not but it also lets us dismiss the screen as soon as we're ready and so down here we add the joke we say you know save the matter up to context after that I'm going to say self dot presentation mode dot wrapped value dot come on dismiss which dismissed the view if it's currently presented that'll tell the thing stop presenting yourself settled slide away that's one of the two options either one works depending on how you prefer to do your code so let's try that let's hopefully work so cam one there we go so we have a joke again and we'll do the old favorites know what's brown and sticky that's stick and that's obvious eye or whatever or add joke boom the hospital slides away and they're done you wrote as you'd expect so that works well but we can do better because we look at this add screen this does not look great I mean firstly it's wrapping the text very badly bit of a early swift UI bug there I sense I suspect iOS thirteen point one which is june like two days from now will do better at that but also this picker I mean it it's okay a lot reasons why it's useful in this case it's not all really a great bit of UI picking a scrolling table of stuff and this ad joke thing doesn't really look like a button looks like a table view cell so it's not a great UI swift you I can do better and to change that to be better I might change this one word here in line 22 list I'll change that word to be form and nothing else list became form and now press command R and Steven that's what a difference a it builds and runs of course so I press add and now a joke is a buttons a blue text it's really clear what it is our rating wheels gone it's now a row tap on as science here a new screen slides in with sob sigh scientists smirk our shoes in like a smirk and now smirks in there instead so it's really really much more condensed form entry system of doing user input and in this kind of code you know screaming spider with some options so forth that took some work in you liked it at the right you know a subsection of strings or whatever you want to show and stay kick them back again it took some time but it's basically free with a swift ey form system let's add another joke now I'll say what what's red and smells like blue paint of course the answer is red paint our rating is smirk I press add joke it slides away that's looking really really nice now I think there's a nicer way of presenting data so let's head back to keynote and you can see we have made it on to call it being done next stop how do we add and delete stuff in swift UI okay this is surprisingly easy because so if you I'll do most of the work for us so question from Roman Rome I sorry yes the source code will be and get afterwards and it's on Sundays repository where all this code will be eventually anyway back in our window again we're gonna make it possible for use delete jokes so I'll find our content view here and we're going to add a method to our content view it'll delete some jokes now swifty why just like UI tableview has a date type called an index set a collection of indexes in a table where to delete things from in our case we'll say func remove jokes at some offsets whatever index set it's probably one thing it could be ten things or one thing when every killed it is it's just some number here and all gonna do is loop over all those offsets find the joke at that index and delete it smile managed object context and finally save the changes so we'll say for index in offsets that joke equals jokes at that index our mock dot delete that joke and finally I'm just gonna sort of cheat slightly and say pry mock save you want to have do try catch and so forth but that's good enough for here so find the joke at the index of selected and delete it so that's our code to handle the model being changed to connect that with UI we've got assigned an undelete modifier now earlier someone yonas i want to say sorr ever get asked why we had a list then a for each because actually you can use lists directly with lists jokes like that and just pass it directly in and the reason I did it was list and then for each ran this list jokes is because the on delete modifier only works with for each you can't delete things Melissa directly you delete things from a for each so here I'll say for our for each we have an on delete modifier performing remove jokes which means when you want to delete a row from this table its data call and move jokes with that value and that will immediately hopefully the press command R again it should give us swipe to delete there we go round sticky oh it comes delete gone it swipe to delete free of charge just done of course it's often you want to delete many things as saying time and to do that we're gonna add another navigation bar item we have here a trading button saying add to add jokes before that I'm going to say there is a leading item as well so the leading is an edit button and that's a type all by itself in swift UI and it'll recognize hey this is attached to a table I'm gonna talk between editing mode and done mode automatically I go to edit the whole thing was editable I can tap here and press delete and it's gone and back done again it's effectively immediate just by adding that one single remove jokes method boom it figures it out straight away so that gives us adding and deleting and now it's on to the really fun stuff the stuff we don't get nearly enough talking about how do we do good cross-platform swift UI and a still more to come back we're like halfway through streams of fun really like an hour and a quarter through it's what never fitted into my tiny save time it's a try to have New York anyway so we look across platform here and while I look at is how we can do a Mac OS build of our application right and of course of course I can just go to the project settings here and check this box Mac and if you're running Catalina 10.15 or later you will get a working Mac built like that's it now you check that box boom you are done I've press command R now and we're gonna get a catalyst slash marzipan rebuild of our swift UI application straight away for Mac it takes a bit time to build that's fine it's the first build it's obviously faster for subsequent rebuild afterwards suppose it'll think boom it's now gonna run my app and this is a run number this is you my kit for Mac OS so it's a variety of interesting layout choices it basically looks like a UI kit app running on Mac OS which is not necessarily what you want but here we go now as you can see I have my table aside here I can press add here and a new screen appears my setup is going to be what did the zero tell the eight punchline nice belt for rating I'm gonna say this thing is going to be a sigh and press bad joke so it works right and that's an instant immediate Mac app built using Swift ey using catalyst and that works right it kind of works it's not great right miss this obviously is a UI kit app on Mac OS this whole ad screen here it's a massive space over here waiting for you to choose one of these ratings it does not look great and so while I totally understand folks you want an instant Mac app using catalyst I get that go for it I'm right behind you support you love it better nothin you can do better and swift UI lets us build Mac apps antivirus apps and watch OS app using the same sort of swift code now one thing I have to outline very very clearly up front is that Swift UI is not designed to be cross-platform it's not like Java swing where you write once run anywhere that is not what it's for I'll show you exactly why we're now gonna build you a Mac OS Swift dy equivalent of our app using the native Mac OS 50 why advocate now no more Swift UI on catalyst so I'm gonna press command shift n to make a new project and I'll choose Mac OS and choose app I'll leave Cora that selected I'll choose Swift ey I'll call this dad jokes realsies because we're doing a real app kit port now I press next then create my desktop like that boom now I am NOT gonna sit and type all that code again right and tail around with my hilarious wit and so forth you'd be extremely bored so I'm gonna cheat slightly here we're gonna do is I'm going to open our core death model on Mac OS I open it on the iOS version select joke from there and then just paste it in right just copy it across boom give me that same model please just like in iOS I'll do Co gen manual none and then use the crate NS modular subclass to make a new subclass with that yes yes in dad jokes realsies just like didn't iOS yeah the same and then remove the option like that question here from funky a cat with actual Mac code to the current app if you're referring to can we have a native Mac OS code in the same project as a native iOS code the answer is no I believe you cannot at this time they are very separate you can do watch and iOS at the same time and of course iOS and TV OS in the same thing that's still uikit but no you can't have apt-get programs and Yaqui problems the same target same project at this time which is helpful and you'll see why in a second once I get there anyway I British copied and pasted our core little model from the iOS thing to the Mac OS thing because it's say there's some time and then what we do is I'm actually steal some code so in our iOS build here is our content view right I'm going to select all the code for our content view boom and just paste that into the content view for our Mac build like that pace it in I'm not going to retype it that would be hideously tedious like that I'm also going to paste in the code for the other views we made we made emoji views here I'll steal that boom and I'll paste that one into the same files I'm being super lazy and then I will also paste in add view I'm just gonna grab all the code from Iowa just slap it into one massive swift file because I'm being a bit lazy on the mac OS version so I've pasted in the quality settings that are a joke entity I've pasted in content view and emoji view at add view so code is copied across directly and you might think okay perhaps we can't share the project between Mac and iOS could we at least share the same files like make them point at the same files on disk in the same directory structure so they could surely tell these share things indirectly without have the same shared project you probably could but the reason that it's the exact project is to show you why isn't necessarily as easy you think I'll just press command B in the Mac OS app kit Xcode and you'll see errors now and the errors are of course brilliant because it's 50 why is pushing Swift very hard so it's saying our navigation view protocol type any calculative view because only concrete types can form two protocols for the navigation view and this is extremely common in swift UI you make a mistake on line 20 and it's a genuine mistake it's wrong in line 20 but swift will point out the error on line 35 and I thought if I was fine it has an empty break something like that it's completely fine perfectly normal line it will miss label the errors very very commonly I should say the Swift team absolutely knows the problem you want to file examples on their JIRA please do but they do know it's problem they're working very very hard to make it's much much better I know it's very high in their priority list to make the errors actually accurate not I'm not misleading or indeed completely wrong what it means in this case is my scrub you'll see that edit button doesn't exist the Mac OS like that hole type we had in our navigation bar items the edit button is for iOS only it's not available in Mac OS so gonna get rid of our edit button it's no longer possible to have that so out goes edit button I press command B again and now it's complaining navigation much I doesn't exist either in fact now victim bar items doesn't exist either either you know you can't have titles or items in your navigation views in Mac OS and that's code that worked perfectly well on iOS but those modifiers that struck edit button does not exist on Mac OS because navigation views don't have these things you never see like you know big titles dad jokes and big titles on Mac OS does not exist on Mac OS that it's got a whole idea of how you want your look so actually this whole items thing and the title needs to go away you can't have those on your Mac OS build and the same is true down here this title needs to go away you can't have those things and that's why you can't just share the same Swift files very easily lots of things you can't share of course you can simpler stuff but anywhere you're accessing particular unique things that only work on one of the platforms like you're doing watch OS and then digital crown for example that's Olaf see only watch OS doesn't work on iOS or Mac OS you have to remove your delete it or write little shims and so forth around it so you can't just simply share all your code everywhere it doesn't work anyway now ought to be enough to make our code at least compile I've stripped out the things to Mac OS leaving just a pure base 50 why do you work on mac OS that should work i press command ah and let's see what happens chance i'll crash yes bang big crash that's another helpful variation between mac OS and iOS and this is I don't even know why this is a variation it really should be a variation but there you go you can see you've been dumped in the app delegate because Mac OS has no scene delegate and the app delegate is where we create our very first content view and we inject our managed object context into that content view into the environment everyone else to use for our fetch request to use and if you scroll down you'll see this container is actually being loaded lazily with a completion closure so what's happening here is we have this hideous race it gets passed in to the environment to be used in a fetch request effect when the fetch quest starts then the lazy kicks in to try and actually read that context and there's a it realize it has actually loaded data yet we have to do really is get this context out of that line of code and do beforehand we want to say before line 20 to let context equals that but equals that sorry trigger our context loading now and then pass that into our content view like that that's what it takes now if you ought to be extra extra safe realistically what I would do is actually Gary this whole lazy thing entirely have your own container being loaded this thing and have your window creation inside the load piston stores completion handler that's a whole other kettle of fish um this is fine for now though at indeed work is getting back to now and it passed that thing in woops sorry contacts not content view context like that yes thank you Kevin I display the same flick my press command B it's a bit of a bit a bit of a bit of lag there that's fine boom there's our window looking vaguely sensibly now obviously we now have no narration bar items so there's no way to add jokes so we're gonna go back to our content view and find hello again no one knows tweet pullin it's always Arya Luna has not coming at all yeah calm go there we go you've had a lot of generous donations today you know these people like you very much anyway good go go tell Aria by the way as treats going anyway um thank you howdy we're gonna go and find our fun of you here and we have this list of stuff to show our jokes and what I want to do really is after our items we want to have a button saying add jokes so know you had a few already clear off um we're gonna say here after our hour all our jokes are shown add a new button saying you know get another tweak clear off had joke there and that will just say thing you have a for just toggle ad showing that joke like that boom it was false make it true otherwise making false again like that that will flip the boolean will show the sheet and work as before so hopefully our press command ah will see how that's doing uh while I was looking at my a my dog in the meantime can't you why did some where's loading there we go there's our ad joke screen and when I press add joke this new sheets slides in and you can see it all sorts of problems with this sheet one of which is one of which is we have this thing is right with the edges no padding around these fields look ugly around there one of which is this or gray space across here another one is this thing can be shrunk down to like nothing at all which just looks silly and wrong give her a treat all right Oh Dennis gives you a treat Donna oh good go you go what sorry absolutely sorry Luna oh I do get fat totally nervous trees going anyway right so you can see it's kind of working now right but it doesn't look great let me sighs I'm nothing at all that they're padding around our form and this weird gray bar on the side here and that's not not oh that's weird that ought to be expected because of what we've decided it's with you I so gonna fix these things real fast the first thing we can say come on Luna you've earned something you buy two or three you know you've had loads look one good go look lonely one of you clear off well five anyway first things first try and focus in this project here when I go to our ad view down here and the first thing you do is say I want a bit of padding around our form so we see our form starts here and ends down here I don't say this thing has some padding lil bit space around the edges so it doesn't go right through the way to the edge of the window Elizabeth bit nicer on the screen I press pad now hopefully boomer slides in a little bit spacing around the edges looks a little bit nicer on the screen the second thing is we can resize this thing now for no space at all like that which looks silly and we're losing the word rating for example doesn't look great we can do that by saying this thing has a minimum width on its frame just here so before a padding I'll say frame has min width of 400 I'm not with specify height actual widths maximum width or maximum height whatever just the minimum width of 400 so it can go either size but no less than 300 points wide on same thing again it should look better it's a joke I'll put it down and boom it can't go any smaller than that now smaller goes is there that's much much nicer when the last thing is this mysterious gray bar that appears on our screens and look great on the side of these things which is actually being triggered by our navigation view remember our ad view on Mac OS has a navigation view and a Mac OS expects to have a left and right thing here control this thing on the right that's how Mac OS likes to work just like iPad it's not really required on Mac OS it's a simple form we haven't got a pan in out of options anymore there's no title of course so I'll just delete that whole navigation view from our form like that so a form is a top-level thing inside our body like that and press command ah hopefully now the whole thing looks fairly good there's a joke that screen looks good there's no space on the right here anymore - all work now nicely set up I'll say what has four wheels and flies answer is a garbage truck by the way look at this rating this ratings no longer a planning in planning out form thing we're a wheel iris picker it's now a drop-down selection box just like you expect on Mac OS as I say as a snob and a joke that slides away and there's our response there so we actually read at the other ad jokes now now what we're seeing on the right here is our detail area this thing here where we'll show things when it's tapped but watch what happens when I tap on our option here what falls and flies click on that boom a garbage truck it's visible there's tiny little space there little space has got and it won't get any bigger than that we can't change it vertical anymore it's clip to be exactly that size vertically now and the reason for that is because on Mac OS things will automatically collapse down to the amount of space they need to be shown it's like an auto layout constraint it'll shrink down to its required content size and not be any bigger we want to say really when we are in our content view we have a thing push a text for our punch line text things a singer can actually be resized to any size we want to which is standard Mac OS behavior people like to go to grab like Xcode whatever just drag it around freely to do stuff and so we can say push to our punch line but using a frame and this time I'll forget min-width and instead say max width is dot infinity and max height is also dot infinity let them resize those things freely and how they want to be and then press command R again let's friend chug like that window around a little bit W has a strange shape and size there we go and use the shape and size I press that we hopefully see boom a garbage truck so it works much more naturally now doesn't sort of shrink it down the time-space anymore this works smoothly so we had to make a few small adjustments to make this thing work on Mac OS it is not write once run anywhere but it absolutely is learn once use anywhere the concepts of stacks and lists and then add a fireball and sheets and state and yadda yadda yadda these are all fix things you learn once and Swift UI and apply it all of apples platforms out of the box and that's the goal with you I don't expect to share all your code ain't gonna happen share many things share models for sure hopefully some views but don't publish it everything in the confusing in fact you'll find that there are some things you can do on Mac OS you can't do on iOS I explained that the the watch has digital crown you have digital crown modifier two things you can sort of swipe up and down on the crown to you know control your UI and Mac OS actually has similar things as well we've said make a navigation view with a list inside of all our jokes yadda yadda yadda but we can do as well is say that this list has a list style like this and there is one dedicated list style for Mac OS you want to care about which is very very common mac OS called the sidebar list style like that a saying use the sidebar lists I'll for our list of jokes and now I press command ah to run Mac OS add one more time we should see a very small difference and I bring up iOS in the background cuz iOS has this bright bright bright background color like that I've seen now and the window is over it and get this sort of translucent effect a sort of frosted glass effect you get on Mac OS and that's extremely important Mac OS because when the window is active you get that sort of transparent frosted glass and when it's not active boom I've picked away it goes completely opaque so users expect to have that effect and know at a glance which windows active and give a hint of what's behind of course doesn't exist in iOS you don't have overlapping windows and stuff on iOS doesn't happen so that sidebar list style makes no sense in iOS so cyber's on that saw it's not available on iOS or watch OS only on Mac OS and knowing when to add these custom modifiers is really about there's a very part of you know getting greats with UI apps fine you can write great iOS with UI app great watch West one but do a great Mac OS one it's going to look like a Mac OS out go I have a car things Mac OS folks expect it's gonna have so that gives us I think a pretty nice Mac OS out right so I'm going to head back to keynote here you see boom that's cross-platform and that puts us hour and a half through but is about two-thirds of the way through our stream and report or one second because I do all these streams completely free of charge I take questions as me as I can I hang around for questions afterwards and all Aston return is you hit a like on the video just go and press the like button if you're enjoying the stream if you're learning things in this stream if you want to see more streams like this one please press the like button now because it helps you to recommend the video to other people which in turn helps me you know encouraged me to make more videos like this one so it'd mean a lot to me to go to stop for a moment press the like button to show your appreciation of the video and then we'll cow with custom UI because so far what you're seeing is regular standard swift UI right the kind of thing like shot a dub dub DC here's a cool list and here's the thing here's whatever it's really fast for doing this kind of stuff like Colette certain forms of stuff but what we don't see much of is fully custom UI like ditch lists ditch navigation and so forth what's it like with a wholly new UI for navigating around and that's why I'll talk about now we're gonna effectively not quite start from scratch but ditch lot of our code to show what this app could look like with a wholly custom UI so I'll then go back to Xcode again and I'm going to ditch my Xcode dad joke real disaster the Mac OS one so X point thank you very much it's very kind I'll make sure the dogs get another treat each when they come back which they will eventually because I hit a treat like a mile away anyway the head back to iOS again and I'm running the 11pro mac so i probably levin Promax here again boom there we go and we're going to totally redo our UI right now if you remember we had this UI where we had a scrolling table view of hilarious dad shows an ad joke button a top right corner an edit button and you could tap on the things that read a joke and a new screen slides in and so forth that's all perfectly fine perfectly vanilla perfectly boring sort of UI right let's just scrap up boom there's our our UI fine we're gonna ditch all that stuff what gonna do is we replace it with a custom gradient color behind and you've drawn the top of that so in my assets here I'm gonna add three named colors also the new color set another new color set and another new color set this first one I'm gonna name start for the start of our gradient second one is middle for the middle of our gradient and the third one is called n for the end of our gradient and for these colors I'll say start I'll add in some hex values I've checked out time to look fairly good our first hex value is going to be 1/2 C to e9 the sort of light blue powderpuff blue I guess you might call it for the middle color I'm gonna say you are also a hexadecimal value here and you have the hex of C 4 7 0 eetzi so sort of like look color yeah and the end color I say also hex you have the hex value of F 64 °f 58 like that it is crimson rasberry I would probably call it you know I'm talking a political that name think about fancy name wouldn't they of course they do anyway so we've got this sort of powder puff blue a sort of lilac purple and then some raspberry red it's on like that right those are cause you want to use inside our grading and so in our content view here and it's hide this sidebar and this sidebar make some space here I'm gonna go ahead and delete this whole navigation view all gonna go away I replace it instead with our third kind of stack oh it's coral says Roman you're absolutely right coral is a great trip ssin for that color it's coral what's that like color of the year for this year or last year I forget anyway we're gonna say our navigation view is now a Zed stack or AZ stack hey Zed stack and this thing allows us to layer views on top of each other thing below and thing above then thing above and think about them think about the thing above and so forth in our case that means we can start with the bottom of our Zed stack a linear gradient as a gradient from a line from top to bottom left to right whatever action you want so sort of line gradient like that it has a gradient so we'll say that is a gradient and for the colors to be a color array so it's gonna be color start then comma color middle then color and like that three colors the ones in fine are at a catalog then for a start point I'm going to say start at the dot top of our gradient and work down to the end point being dot bottom like that a draw top to bottom our gradient like that I press come at arm should see a nice gradiated powderpuff coral lie look where do I call this color section have chosen already gradient there we go so it's blue and the purple down to pink at the bottom is the real kind of iOS 13 neon colors we also used to as you can see by the background color here in my simulator yes bright colors um you'll notice by the way when we run it again it didn't actually go edge to edge there's a white space at top and at the bottom and I mentioned earlier for the navigation view the large bar titles are the default and swiftie why because we get the good behavior the modern system sander behavior is a default in Swift ey which is really really nice and in this instance it's also default to avoid the safe areas so it's dy is aware of the knotch and aware of the home indicator by default and so it will avoid them by default it's smart on your behalf here though this gradient doesn't contain any content it's just there the color screen something nice that should really go under the safe area on all the sites and you can do that with a modifier we're gonna say for our our Zed stack we can have this whole thing go under the safe area by saying edges ignoring safe area or go under the safe area in all directions run again we should see those white spaces are now gone it should be colorful everywhere boom ok so now we haven't got a navigation view anymore we have no place for our ad button we'll make a button by hand so go into our Zed stack and below the linear gradient what you put it on top of the linear gradient jemand asks do you put a curse hard code like this I usually have occurs with the app in colors in our catalog that's exactly why I just did I just add a master catalog first start middle and end which is exactly where I want and where do I wouldn't only define colors i encode if possible yes I think I'd logs absolutely the right place for colors like that anyway below the knee gradient ie on top of it we're gonna add our button so we'll say that is a button with title add joke and this will if your amber all has to do is toggle that boolean so we'll say self dot showing add joke toggle all right already code written previously it'll take the sheet down here and show the on view automatically that much hasn't changed but now this button has to stand out on our bright colorful gradient thing going on and so let's add a little bit of design around it we're going to say this thing has some padding so it's not just a size of the text itself it's bigger than that spacing around it this thing has a background I'm gonna say it uses the color black with some opacity in this case not point five so it'll be a 50% black behind it but blending from the color behind I'll say this thing has a clip shape so it's not a square button I want to use a capsule shape so it's like a rounded lozenge shape on the screen and then at the end that list I'll say dot foreground color is white there's got a white text color on the semi opaque black behind it the capsule shape answer padding I press command ah let's see how that looks okay so there's our layout right there looking good there's our caps your shape a bit bigger on either side because of the padding is that nice or semi-transparent color behind it plus the white text looks really really nice life really like free will stop regularly when you make massive changes when you screw up your code errors and so forth the library will stop regularly it's very very common life it resumed and you can see it works straight away it's more that I wasn't contantly doing it because I was making changes you are keeping resume I should say by the way option command P resumes a live preview it's a really nice shortcut have your hands on your doing coding with the preview um one day I want to show this briefly this is really really important with UI I've say all the time I can't say it enough quite frankly is the order of your modifiers matters if I had this padding modifier out it would be much smaller like that I place it after the background it means something different as you can see now as a blue line if i zoom in slightly the blue line around as joke but the background color has stayed small this is because Swifter you eyes apply the background color and they're out of padding which in this case is really not we want we want to apply the padding and then color everything including the padding so the order you write things really really matters it's important anyway there's our add joke button and you know it's okay it works but it's didn't get in the way the rest of our UI we're gonna show our jokes here we don't the button there we want it somewhere else in this case at the top of our screen and so I'm gonna say our Zed stack has an alignment attached to it which is dot top aligned things to the top you can see boom add a button dose to the very top now it's gone under the knotch which is intentional we've said two hours ed stack don't worry go under the safe area it's fine so to fix that we've got to move our button down a little bit give it a little nudge downwards so we'll say in its modifier list dot offset Y is I'll just do 50 you have to push it safely down from a safe area like that but at the top but not the very top like that Ben Mitchell I don't know how to do that I'm sorry I generally ask me later I'll look into it I am afraid don't know how to do that right now and I don't get distracted I'm doing it live but letting on the future I'll totally for the next year we could Joshua it does not crash it call it and live preview just make sure you inject a context into a live preview otherwise I'd have problems like that um key Locker asks is there a specific way to think about ordering modifiers to get the correct behavior always moving them around it's not as moving around it's it's a logical thing if you imagine you have a label that's this big and it's going to modify that you want to apply the planning firstly bigger and then color the whole thing if you color it first and then make it bigger it might have cut the new bit yet now I'm tomorrow I'm launching the 100 days of 50y and the very first project unlike day 17 or so we go into our not the retro project project 3 we go into a lot of detail about why this works like that exactly how it works and why I want you understand why I like alright that's obvious that's obvious and the crux of the matter is we look at these things as methods like pad this thing add a background add a clip at a fallen color and of course there are methods but in Swift ey that actually modifies all the views you work with are structs and when you apply a modifier it returns to you a new struct that's been modified you get a modified content which contains your original thing plus some transformation and when you modify again you get a modified content modified content your thing first animation second transformation what if I again modified content modified content modified content yada yada yada so each time modifying its stacking up and stacking up stacking up and in fact we can doing is apply certain things multiple times you could say apply some back padding apply a background color apply some more padding apply a different background color a third padding a third wrapping color and I'll stack up like strokes and round again again again because you aren't modifying the same thing you're modifying new things every single time anyway we've now pushed it down the top total guy asks well I mean it's asked how do I get work on all phones really sick you would either move the edge ignoring safe area up to the linear gradient so linear gradient exists first and then overlaps everything and the button is inside the safe area or you would just suck it down and allow it because bluntly it's fine it's only 50 down from the top that's perfectly fine even even a regular iPhone like an iPhone 8 you slap a navigation bar up here saying the clock and the Wi-Fi signal and whatever they had at a top bar right so it's always something to top there anyway with the without the knotch not really losing much space but yes as as kiran says you could as apply modify somewhere else and stack it differently anyway right so we now have I had joke buzzer and this will work of course I can press command ah bad joke but it's real I can add a joke now with the same form we had before if you like the same hopefully add joke booyah okay so hasn't changed that's the same okay now we want to do of course is show a list of jokes a scroll little jokes they can sort of see all at once and swipe through and so to do that in Xcode I'm going to start making a new Swift uiview press command and make a new to drive you now call this thing a joke card a piece of UI a little card in our UI that shows exactly one joke I guess boom and it comes now this thing is gonna use cord XS we can modify things later on so I'll do import core data here you can modify jokes as we go I have one property for our joke which is going to be the joke at showing others do VAR joke 8 a joke that's a great joke card tell it which joke to show inside the body here I'll make our UI this is gonna have AV stack inside a V stack the inner V stack will show that the card like a little white box with a punch line or a set up sorry and a punch line that's our V stack there with a background behind like a little card the outer V stack will contain that card plus a dilemma G view with the rating is it smirk or science or Saab and so forth so we're gonna have a restock inside there another V stack this is our interview stack the one showing setup and the punch line for our joke so I'll say that it's some text and it's going to be our jokes setup apply some modifiers here say this thing has a large title font again swift UI gives a smart defaults as standard we get dynamic type as standard if you want to use fixed fonts of course you can but by default you get luck dynamic type so your type grows or shrinks are going to user settings which is really really nice I'll say this thing has a line limit of 10 it can go from 0 line to 10 lines but no more clip after that so it doesn't get too big on the screen I'll also say also a top line limit all to say this thing has some padding but this time going to provide exactly what kind of padding before we just said padding which means apply some system appropriate padding to all edges in this instance I'm gonna say I just want one edge which is dot horizontal just on the leading and trailing edges of our setup line below that inside the inner V stack I'll say another text with self dot G oak dot punch line like that this will have a slightly smaller font and font dot title still large but not as large how the same line limit so I've up to ten lines but no more and this has some padding equal to dot dot horizontal and dock bottom so leading trailing and bottom edges have padding but not the top and that will end our energy stack I want to apply one modifier to both those text views and what you can actually do is apply its modifier to the V stack and it will force it down to its child views it'll modify the things inside the V stack we can say there's a multi-line text alignment of dot Center so a line Center for the joke setup and joke punch line attached to the V stack that'll apply to things inside the V site as well we're now in the outer V stack this one here we've got our energy stack with our joke in the outer V stack will have our emoji for you for that jokes rating and I'm going to modify this so it has a larger font because as you've seen by default on tiny little emoji I'm give us a larger font by saying dot font and this time there's a shot off nicely I'll say a hard-coded font size of a system size of 72 again broadly you want to have dynamic tight large title title and so forth here that I'm saying exactly 70 points just so you can see both options in code and for that V stack the outer V stack we can start to add some modifiers what a dis thing looked like in this instance - a the outer V stack has a frame with the min height of zero and the max height of dot infinity allow this thing to take up as much space as it needs from nothing up to a huge to resize freely there but for its width I want exactly 300 points so we're saying the heights flexible we don't care how big or small is what I care about is the width squeeze it like this and let's flow freely up and down around it and that's our inner V stack and our outer V step now a press command B this code won't compile because down here our joke card expects to have a joke passed in which is a bit of a pain in the backside now because we've got core data runnings we can't just make a new struct injected struct we've got to actually make an actual joke instance attached to an actual context every time honestly normally at this point and there live demo I'll just delete that code I'm gonna show you how to do it and being generous with my time it's like a p.m. already I'll show you how it's done and you know it's done we'll say let joke equals a new joke and for the context I'll make a new temporary ns-managed object context managed object context there we go boom using the concurrency type of dot main cube no type then keep it some value so joke got set up equals what do you call a hen who counts her eggs joke punchline equals a mathematic in-law and then joke dot rating is definitely Sai for the home one and then with a 4r joke card we will return a joke card using that joke so we'll inject a new temporary testing joke just to make our code compile now it's worth saying at this point the preview provider code this stuff here that shows you the the quick can dispute on the right here it's just temporary code for use inside Xcode right that code will not ship to the App Store ever yeah I'm gonna worry about having things in here because you know making temporary contexts and so forth it's perfectly fine don't worry about it make it and it's just gonna thrown away when you go to the App Store does it really matter Oscar how I thought Mike inattention in a patient to space to the for no I haven't so I I that's actually this Swift salad library sound that has two spaces I find it awfully hard to read it but not enough for my eyes I'm used to three or four but particularly because certainly until recently the Swift UI template would ignore your invitation settings in Xcode so you say I want to it will give you four anyway and all your new code would have to you have two and four in the same view which is hideous and really annoyed me so I'm sticking with us it's down into four right now it's what Xcode is default is anyway so we now have our simple layout you can see what it looks like a simple V stack there you can't see we have an inner and an outer V stack so we're gonna do is gonna modify our inner V stack so it looks more like a card like an actual thing on a screen so we're gonna say first this thing has a clip shape and you saw previously we had a capsule to get at all Lajeunesse clip shape now I'm gonna say there is a rounded rectangle click shape that and this has a corner radius of I'll just do 25 points like that and for its background color I'm gonna say there is a round my whole new line they're easy to read there we go there's also a rounded rectangle that with corner radius of 25 I'm going to fill that thing with color white and shadow that thing using color black radius five points with X 0 on y 0 so sort of the default x and y distance around it and now you can see our inner card is more clear I think you can see that's our inner V stack and the outer V stacks the one around it big blue thing there with the innov card and the thing around it like that ok that's our joke such as it is we can now use that so I'll go back to our content view over here we have our gradient plus our add joke I want to do is have a a for each you know stack up this thing in a haystack going horizontally along that way all the jokes in our core database system right now of course when you have more than two you'll be out of space on an iPhone so I put this thing inside a scrollview so we can scroll left and right so I'll say between our linear gradient and a button I'll say there is a scroll view and this thing will scroll horizontally like that unless a shows indicators is false we haven't got the sort of like black or white indicators beneath the thing moving around doesn't look great in this UI inside our scroll view it's going to be a haystack so all our views to be laid up horizontally across the way and I hate stack I'll say has a spacing of 10 points so a little bit of spacing between the views to make them spaced out in the screen more easily inside the haystack that's where our forage comes in so I'll say for each jokes ID a backslash dot set up like before joke in except now rather than saying text of joke table set up I must say as a joke card with that joke like a joke car every one we have so I now press come out are to see if I've got it all right let's find out it's exciting okay so we have no jokes good I like to add joke here I'll say for our setup what starts with E ends with E and only has one letter in it as it is envelope obviously sign into that when I feel a joke boom there's our card no joke hastily that text my wife told me I was terrible with directions punchline is so I packed up my things and right Mull rating for that one is going to be smirk and a joke and do one more here I must say what does pac-man pac-man eat with his chips and this one's really hard to type it is wocka wocka moly oh um Auto smirk ad joke and you can now see we have these things that go in horizontally in a scrollview boom you scroll around and see our jokes like that so that is how we do custom UI in swift UI boom now is like the gestures gestures take a little more thinking not much I think you'd enjoy them very much because you can do a lot with these things for example we could say I want to have a picture on here I imagined you earlier about state being thrown away by swifty why whatever you want to and this is a great example of that if I go into our asset catalog and then open up finder and got my desktop I have some example assets here of dads smiling like this at 2x and 3x pictures of dads just sort of smiling right and this is what we're having my dad jokes out pictures of dads looking happy like that their office Lee hilarious dads with the hilarious dad jokes I'm going to grab these thing and drag automatic catalog hopefully come on in you go boom and I'm going to modify my joke card so every card we have has a hilarious dad picture at the top grinning away and it will demonstrate an important point of swifty why so we'll say here every card has an image showing at that picture so I say there is an image of the dad with string interpolation int got random in one through four like that pick a random team one three month or four inclusive that one that do that three or four and use that for the image I need to close that bracket like that my mistake boom I'm gonna make this thing resizable I asked it to be exactly a frame of width 300 our width and a height of 100 so it'll clip to be exactly the right size for the space we have and now I press come out are we should see our dad picture because I made a mistake in the random yet another one there I say again boom which would now see a random data I talked about jokes it's awfully random every times we tell you run it'll be different so we have to the same one different at the end boom that's great so we can see it working quite nicely but we'll leave it there for time being and we'll see an interesting problem with this I might do one small thing see if it goes edge to edge of the haystack doesn't look great I'll a little bit pine to H time just quickly haystack here we'll just do dot padding just to be away from the very edges of the screen I think it looked a bit nicer and to look yes bear little bit of space of the edges here anyway you can see it looks nice for now but I'll leave it there and we'll see what happens when we make some more changes so we're gonna modify as code so that the hilarious punchline is not visible by default it's obscured by default and we tap on the card it reveal the punchline so I'll say for our card there's some state which is showing punchline equals false by default we're not showing the punchline for each card and then way down for our inner V stack the little card the white part below our background I'll say that is an on tap gesture like that just fix that spacing slightly boom so where the card is tapped I want to toggle showing punch line so I tap the card show the punch line tap it again hide the punch line but it's not showing by default and now we can use that to define how we have show or obscure our punch line we have this text here a title line with ten padding that are there I'm gonna add some more modifiers and I say this thing has a blur modifier and the blur takes a radius how much to blur by and I'll say well listen if self dot showing punch line is true then do zero no blur if it's false using a ternary operator I'll say you just six point blur so when we're not showing the punch line just six point blur we are showing it uses zero point blur really sharp well what I say there's an opacity and a pasty we'll do self dot showing punch line again if that's true pasty is 100% fully opaque otherwise not 0.25 mostly translucent and now I'll run the code again and this should work but with a few interesting providers let's find out Oscar Rivera says can we handle a scroll position programmatically to the best of my knowledge no but I could look into that some more few and let you know I haven't done that currently it may not be possible I'm not sure the best one I don't know you can't currently anyway so you can see beautifully burr blurred out beautifully faded away for all these things my tap to show it shows tap to hide it shows in Heights but notice how I let happen hide the picture is chained not always sometimes say the same that's because randomly is getting a same number again again again so what's happening here is when we toggle showing punchline swiftie Y changes this boolean from true to false that piece of RAM it's gone from false to true of true to false and that's owned by swifty Y that's what I at state means the memories being held somewhere up us as do I so it can be modified otherwise structs can't be changed so - I've changed that to be true or false and there's a half that has now changed I'd better reload the view to reflect those changes because that might be mattering to your UI it's don't show this do this don't do this which it case it does so it's modifying the blurb with a new value of showing punchline but of course when it reloads the view it will also choose a new random number for our dad image so we're now randomly getting different dad pictures by talking a simple boolean other parts of our view are changing unintentionally so of course not what you want you want to have that picture be fixed in place and not just change randomly what you want to do really is take this random number out of there entirely like that and make that itself at State Bar and that boom and just okay I'll make this too private again because of course it's absolutely right he's recommended like that boom a number like that so we'll make it once when the struct loads store a state by Swift you ice it won't change again and again again and use that fixed integer in our dad picture like that and now we run the code again we should finally can tap on the blur or on blur as may times you want and it won't change a picture again again again it is fixed in place so there's our blur I can just tap freely show and hide and nothing happens but we can do better than this you see lights happen to blur it is snaps in tap again it snaps out doesn't look great we can ask Swift ey to toggle the boolean with an animation to animate going from true to false now in UIKit this kind of thing was very very tricky you would animate like opacity and alpha value from 0 to 1 because there are intermediate values you know no point 1 no point to no point 3 they did it in 0.9 1.0 billions you don't animate there either true or the false has no intermediate values but with 50 why we can say actually when I modify this this boolean I want to wrap that inside a with animation block which means yes flip the boolean from true to false but animate any changes that occur as a result of that any UI attainder should be animated as a result of that single boolean change after on the code again we should see hopefully our fading and opacity will happen smoothly let's find out boom look at that super smooth now almost no work just saying with animation causes the impact of your boolean change to be animated it's really really nice so we now long have broken pictures we now have animating of stuff let's now think how we can control this thing how can we delete jokes we haven't got an edit button anymore we can't swipe the delete with the built-in table you stuff we have to a different kind of swipe to delete and hope we can recreate the swipe to delete effect from iOS we can say hey just drag these things around with your finger and flip them off a screen and they'll go away to do that we're gonna add another piece of state we'll say at state private VAR drag amount set to be CG size dot 0 there is no dragging for this view by default oleg ran a numbers might repeat they might absolute might repeat i'm going through 1 through 4 they can repeat freely you get the same one over all three jokes very easily anyway offset is zero by default and we can use that to move our whole V stack around we're gonna offset the whole V stack by saying dot offset with the y-value of drag amount dot height so you use the amount of our drag to move the whole card up or down forget left and right we get the x axis we get the width of the dry just do up and down with the drag freely okay now modify that by attaching a gesture you scroll down for it makes more space as a gesture to our cards we can say that is a gesture like that now they'll do a drag gesture and cragger's have a few things we care about one of which is on changed when this drag has changed what do you want to do as they're dragging in real-time as they're moving around I'm gonna say well assigned to our drag amount property dot 0 dot translation now dollar 0 is the drag data coming in where did it start how far has it moved where Mike to end and so forth we don't care at where it started we don't care about where it's gonna end and so forth we just care about how much it's moved as well as say attach that whole thing to our drag amount like this that's unchanged as for on ended Iago asks how to remove an from a list you currently can't jog oh stop with I'm afraid it's not ready figure I'm afraid well say on ended when this thing ends what should we do they release their finger or thumb from the UI what happened and what we'll say is we'll say well if our drag amount height is less than a certain amount what do you think constitutes a delete try an error I found 200 we got more than 200 points up it means delete otherwise ignore it we'll say delete this thing otherwise if they haven't got at least 200 points I want to effectively assume it was an accident didn't go far enough put it back to the starting point again I'll say self dot drag amount equals zero reset the dragging amount smart dog asks when you tap as on effect around the value anymore that's correct with made the random value once when the structs made here that's right here on line 14 there we go I mean a straight value all by itself once for each piece of our joke card has its own value permanently for the whole house that exists it doesn't go away permanently so won't keep on changing picture as we drag around anyway so now we're saying if we drag least or points up delete the thing come out that shortly otherwise put the drag amount back to zero again I press c'mon ask see how that thing looks it is unhappy ah we have to accept the value coming and of course you do what your drag value obviously value in making nor it basically you know care you'll think boom run the code again now can drag this thing down and down doesn't do anything a little snap back to where it was saying for a little bit up I'm doing the link go a long way up it'll stay up that's our delete this item code about to run delete this thing let's work all our cards and drag this thing down is a snapback snapback and like that ignores you boom now as you can see it's not great UI we can be better than that we can actually attach a animation to this by saying our whole joke card has an animation of dot spring like that may the whole thing spring around and just by doing that one extra line of modifier after the gesture will caught our things to move around much more smoothly put down you'll just snap back smoothly and bounce around a little bit way way nicer anyway so of course what we really want is when you swipe up a certain amount like after here that means delete well I think to fly away like it would do in iOS and be removed from our managed object context so it looks really really nice so to remove things from out of context we go back to the environment again I've got the top here add a at environment for our dot managed object context boom ba mock like that and now we have our delete this thing code it's time to delete this card I'm gonna say that is an animation animation we'll start by saying first move our view way off screen way off screen yonis asks Wireless right maybe state if it doesn't change the problem is that it won't change but swiftly wire will recreate the struct regularly they'll reflect it all the time and so if you want to be able to have that persist across recreations of the struct you've got to market out of state anyway first I'm gonna do is move this view way off screen fly away off let it get an iOS so I'll say our drag amount is equal to CG size width is zero our height is minus 1000 off screen gone and then after a small amount of time once a mission completes I'll say dispatch Q dot main main dot async after a deadline being dot now plus some out of time I'll say nor point three Tushar that is covered online in my book Swift UI by example I'll not repeat it here I can read it online after it's flown away somewhere delete it will do self dot Mach dot delete self dot joke remove our joke and try question my of course it can do do try catch and should do self dot mock dot save to save that change and we're comment out the saving line so even though keep on adding and removing jokes otherwise it's quite tiresome I'm sure you've had enough dad jokes as it is with that in place hope that a compressed command R I should get an app actually works pretty well together so I can drag down nothing happens drag up a where it goes and the rest is sort of slide along to make space with when it went away automatically it's really really nice with hardly any code we're saying you know slide away and delete the thing from the modular context of course UI to reload and and all shuffle along but there's one more thing we can do here and this is where it gets super nice here we used Nick Lockwood's library for bit of C called I carousel or Cover Flow on the old iOS versions you can do a very similar thing with swifty why we can actually take our two V stacks here and in between them insert a new type called a geometry reader and this thing is designed to tell you where you are in space or control how much space you have or need around the layouts so I'll say don't you reader with our jobs are coming in like that I'll push our whole V stack into there so our whole inner V stack is now inside that geometry reader like that and now we can read the amount of space we have read where we are on the screen and similar what we're gonna do is we're gonna apply one last transform to our card to make it rotate slightly using a rotation 3d effect give me a cover flow style effect or I care Estelle if that's your era or say there is a rotation 3d effect and this thing takes an angle how much do you want to rotate I must say I'll use dot degrees equal to minus double our position in the global UI space wherever we are in the whole UI space so I'll say minus double our Janjaweed is frame in the global view space get the exposition of that not the Y or the max X we're just the exhibition where we are globally I accession divided by 10 so get a little bit of it one tenth of our position we'll use as our rotations does it rotate massively it's a little bit gently the axis is an ask you the uro takes off this way or this way you know you'll choose X Y or Z rotation and I'll say the ax is going to be x is 0 Y is 1 throat 8 around the y coordinate I imagine someone's put a pin through the wire you're hitting around that instead and Z coordinate is 0 or take only around the y coordinate by a little bit of our exposition and now my press command ah hopefully we would see a gentle but bill there when I screw up this out the closure now whoops yeah itself dollar number at my mistake boom there are lots of closures in swift UI you'll see a lot of those things anyway commander one last run because it even have 20 past 8:00 I do apologize should now see this effect lovely sort of 3d pan through like that beautiful mind leak one trip and it comes ship and it comes basically free I mean it's ridiculous if you're a used I carousel it's a lovely library by Nick he's an expert this core animation stuff you but booking it for in fact but a lot of code you put a lot of work into a carousel and you can see how remarkably easy it is to do with Swift UI thanks to things like geometry reader and raising 3d effect and much much more anyway that Braves the end of our project we've covered a heck of a lot look at our list of stuff you'll see we've gone through table views navigation core data adding and deleting catalyst native Mac OS custom UI and now gestures as all sorts in there I hope this has been useful to you you've learned a lot again I'd like to say if the video is useful please please please do hit a like it does help other folks find these videos which helps encourage me to make more videos like this one I will push the code to this for github so you can grab it from there and play around with it and do more by all means check it out modify it ship it I don't care if you do it's your code now but it'll be on the Swift on Sundays github repos I'll try and share with you actually as a whole where's that it's like github slash two straws slash Swift on Sundays like that and just check that's the correct URL boom there we go that's the URL there I'll paste into the chat window and you'll see all our previous projects there and you'll see they'll be shortly nineteen dad jokes will be there with that code go on grab it play with it I can hang around I know ever I've kept you a very long time I do apologize there's a lot in this project I want to get through I want to really show you more than just at least her menthe would do more than just that we've done some real Native Mac OS 50 UI and similar and you know don't ever I love swifty wihout Orioles that do have lists of navigation but I want to do more than that here so I apologize have been so long hope they've answer your questions so far if I haven't by all means ask questions now I can hang around you know for another half hour if you have more questions let me know I want to remind you by the way that tomorrow the 100 days of Swift UI starts and it's a free tutorial series for 100 days teaching you swifty why starting tomorrow and the first 15 days are going to be the Swift fundamentals you know what I protocols what our class is what inheritance what a nil coalescing operatory and so forth and more so that'll be there but then after that day 16 on with it's going to be all completely new code for 50 why you we're going all across v UI for iOS in there but 85 days including tests and more lots of brand-new stuff so check it out do sign up it's free online it's got out site URL and let me know alright that's all I have for you here but it's your chance to ask questions so I have sip of my wine so I can attract the dogs when I try to take the bag for them perhaps and yeah but I only if you have questions now this is your chance to ask go ahead boom right questions candidate of the card on the screen yes Ben you can of course you can it's honestly you can position views wherever you want to it's totally down to you using offset for position X&Y using rotational effect rotational 3d effect you can do all sorts you condition them wherever the heck you want to it's totally down to you we fixed our cards by the way at 300 width so you know you can get your screen sizes you want to reader subtract half of that from half of 300 or 150 and that's what sent a point there so you can do that very easily he wants to a hello look someone's giving you some treats a bit wise but someone earlier get some some treat so come go how are you where's Lena hey no you had one get down anyway total guy do you know that any way to access the always-on display on a third-party app on the watch in your own workout app we understand what some to read if it's always on I don't know I haven't tried out yet I actually I've got a series 5 here but you know it's turned off I've turned off the always-on I has been going all day so far and it's lost about 20% of battery life the battery life is way way better was always on turned off there's a serious fire with always-on turned off because their battery life is way better smile bot for the 100 days of Swift UI core is it possible to take a week off yes of course tech week off you know I want folks to come back regularly to keep learning across an hour each day and no more it helps your brain learn in the fuse mode and focus mode is great but you've got a life right you know as as John Lennon said life is what happens when you're busy making other plans don't have a holiday glam a vacation just come back and catch up just don't take five weeks off cuz you be really really far behind you forgot a lot of stuff what a summer also learn how to write performant Swift Carly has a good question you know I don't know so I mean if you've been through project 30 of hacking with Swift which isn't one I think it was the last project in the original hundreds of Swift which is a slash 100 in the site the last project there is instrument I believe from memory yeah even here is instruments and it walks you through here's an actual project which performs very badly and you have to use instruments to find the problems and fix the problems and make it better so that is a good example of how to write better code it's not all there is to it there's much more than that and I've done hold talks on doing better more performant swift code there's a lot to it bluntly and I'm not sure I can have put you at one single resource doing faster Swift Khan and I'm glad you liked it nvvm I guess that is the whole question can you do it of course you can do it you can totally do it it's down to you you know a swift ey is an MVC K is mV there's no u controllers anymore so if you want to wrap your model in a view model of course you can in fact it's probably still a very good idea because it keeps your views small it's always a good idea so you know nvvm is not dead i think it's as good as ever one thing i would say in fact I'm surprised someone hasn't asked me already how do you do coordinators in Swift UI because folks who love the coordinator pattern in UI kit want to put that into so with UI which is great it shows they've had success with it but honestly it's not great right now you know I don't think coordinators saw fit naturally the way so if you're wise person and so when folks try and squeeze coordinators into Swift UI they hit problems and it gets confused so right now I haven't seen anyone used them well so I'm not recommending coordinator at this time that will change at some point because they have a lot of benefits till right now it's not great endless summer you bought power back and platform back thank you very much your support honestly it's folks buying the bundles buying books and similar who helped me you know do this for free you know I do a lot of free stuff as much as I can I do for free because I know a lot folks can't afford it I felt you do buy books help sport with free work which I'm really really grateful thank you so much Rob DiMartino says why structure versus classes so there are a few reasons for that Rob so classes use inheritance which is often a great way of getting functionality very quickly but they also cause problems if you think about example UI view UI view has lots of properties attached to it things like you can attach background colors to them you can attach auto layout to them you can attach whatever right they have all sorts of properties and that's great then you look at some unlike you I stack view which inherits from uiviewcontroller because all subclass of UI view have background colors there's no stack views never draw they can't draw you can give them back a color it's ignored it still gets one so yet always cruft thrown at you from inheritance which which sucks right it's bad for efficiency another problem of classes is they are reference types which means they if you have one object shared in many places they all point the same piece of RAM when one changed it they all change which is problematic for following your code flow and in particular performance classes when you move them around or when you pass them into a function or similar Swift has to silently generate what's called retain release code memory management code using arc behind the scenes you pass into a function it will add a retain counter doesn't get destroyed back to what functions running you'll run the code of function then release the object again and retain release adding 1 or 0 to these retain counts is an atomic operation you can't do at the same time as you might you know collect collide and cause issues and so it'll lock the RAM add one unlock the RAM till Duloc unlocked luck unlocked lots and lots of times so the number reasons why clasps are problematic on the other hand if you look at a swift struct we had this thing here that's being passed in from elsewhere that's been passing elsewhere these three that's a boolean that's an integer and that's to see G floats and that is all it is that's the entire struct a boolean and integer and to see G flows that is a simple value type it can be stack allocated it extremely efficiently if you look instruments you can look for leaks and allocations to spot what's slow on what's fast it'll tell you how many times you allocate reference types how many times you put things on the memory heap it won't tell you how many times you stack allocate it is pointless the simple interview decrement is extremely fast to do stacked allocations so there's no point thus trucks here are ludicrously simple little beasts there's no wasted memory there's no locking for retain release code and similar they're very very thin and light and that's we think about it when we saw before we had like the random number writings image being used and we tapped on the card at toggled the blur and the image would change it was reclaimed the struct again again again with its new body every single time if that was a class as to do all that allocation every single time it'll be really really bad and were ticularly for some things like we have here the offset of our drag amount right we're dragging around on an iPad pro with a hundred and twenty Hertz display pro motion display a hundred and twenty times second it will destroy this struct and recreate it potentially if times 50 why how many times does it but Ulrike it constantly is he dragging around but it'll change it constantly and throw it away which was these simple simple structs is irrelevant it it'll do billions in a second thinking about it right for classes that's a serious issue it'll be much much slower so I can absolutely see where I've chosen struts you don't have to use structs you want to use class you can use classes but they highly highly recommend you use struts sorry it was a very long answer for very very simple question but there you go Oh next up we have do you give my folks at home some questions here little bit right Alex poor given a little view and that I view its present a molar I'll come back come back come back Meza moodily how do keep the stay updated on a particular property for a given object are you are you asking I think you're asking Alex how would we keep the state for the same object updated like if we had a detail view and add years Modi over it showing the same thing how debate in both and answer is using observed objects which are non-trivial shared data types you can create class for user values or settings or what if you want to store right and you can pass that around freely and share the same value in many places when one of them changes they'll all change synchronize are in the same value which is very nice you could also actually Alex you were at the the try swift live version this talk when I dismissed the add view in a different way because you can actually pass in a shared piece of state is at state in one view and bind it to a different view so I can toggle the same boolean behind the scenes that also works I hope that was the right question I was answering if not please us again with some clarification total guy Paul doesn't you think there'll be promise with you why not being adopted um so folks are I think incorrectly drawing parallels between Swift UI and Swift they're saying listen Swift was adopted very quickly so so it's divided up dry quickly as well and honestly isn't the case they're very very different beasts when swift launched it was already back with the patents by one version it ship with iOS 8 it worked in iOS 7 so if you were an n minus one company who support latest and one before you go Swift immediately which is really nice and secondly Swift came out of the box with no ideal support cuz didn't have you know illiteracy generics at a time but that's port for you my kit sprite kit seen kit collocation it all worked in Swift out-of-the-box right so it was very very fast to adopter swift swifty why is different swifty why is only Iowa's thirteen there's no iOS 12 support and it only supports a subset of apples functionality if you want to do map use if you want to do collection views you want to do text to use you want to do text fields in alert controllers you've got to do that by hand and there's no built-in Swift ey collection you know built in swift UI map to you know built-in SF Safari if you control a rapper in 50 Y so you haven't got the same level of coverage Swift had so adoption will absolutely be slowed up Swift UI the issue will be when iOS 14 launches I mean Apple ant let's face it they're pretty predictable they're released numbers next year Xcode 12 iOS 13 you know Mac OS 10 point 16 presumably across the board they're gonna hopefully say and now here's collectionview now here's textview and now it's other stuff for a big cheers and clapping and whooping it dub dub will that then be catered to Iowa's 14 or will they say hey by the way this will actually be backpack to iOS 13 if they can do the backwards compatibility storage I was 13 it would really help because this time next year folks who then say ok that's I was 14 supports of stuff I have a 13 or supports it I can now use 50 why for my project if they say actually what sun collection views but it only works on iOS 14 onwards then we've got the same problem yet again folks who want support -1 or even - to crack even - 3 sometimes they can't get on it for a you know until i OS 17 highway 17 it's like a distant distant future but there you go so I don't know but it definitely will hold it back in the short term but if you happen to be lucky enough to work a company that's the stuff awesome love it up lick it up enjoy it all you can because you have a real exciting ride in that front I'm sure Ahmed says kind of explain using in it as a closure with map or flatmap um I think what you're asking is when you're using a list of stuff can you map to in it or flamp in it yes you can I'm technically guessing here I guess it in something like funk hello I made I made sorry like let foo equals you know 1 2 3 . flat map URL in it you're saying and so what's gonna happen is it's gonna effectively create URLs from these values which of course aren't actual URLs in any way yeah I might be slightly more likely to work it'll basically say it's equivalent like this let result equals or sorry VAR result equals a result equals an array of your else boom and then for item in this lot like that boom if let's URL equals URL with the string being item then result dot append URL that's what it's doing it just stops yeah it's essentially nicer way of writing it I think that's a question again I'm totally guessing your questions there's a bit of a lag on that front I'm sorry I got it wrong Oscar so enums last question is what are the issues of collator enums and it's pretty simple Ashley enums weren't really a thing in a bit of C they had NSE num macros around it to try and make it not so awful but enums the way we think of them in Swift are not a thing in the bit of C you know swifty why only world is Swift and that's not Apple being annoying or trial for people under Swift it's as simple as they want to leverage all the functionality of Swift and in fact you think about it so much stuff here like property rappers like Oh pic return types like implicit returns and similar are only available in Swift 5.1 if you go to like my site here what's new in Swift calm this lists out you to chew your subversion here and interesting I'm sure to hear it kind of lists the changes they've made to and you will see this kind of thing that's a key swift UI feature they ever got to put return here and same as here we even gonna do return be stack which what's actually happening behind the scenes it implicitly hasn't either that or a bit return types we can say some of you are not just view so even Swift itself really wasn't able to do stripped UI until five point one it's a lot of things if I were one in just four v UI so Coretta it doesn't have a good mapping to swiftly gnomes because it wasn't designed for it's designed for get to see where you had simple types look at our model again the options you can choose from aren't great undefined you can do it yourself you want to various integers decimal double float string boolean binary data but it so you could do something around that you wanted to but it's a pain the backside it's not much fun the live stream so yeah strings whole still out up to it's all slow ahead brilliant I was here bad Raiders not agree with me you can use in hex engines of course you can of course you can't be still have classes you still have the memory allocation sharing of stuff the memory locking and more so it's not as efficient by a long long way and it gets folks in the right mindset yes forth matters but it's getting in the right mindset this can be tossed away think in terms of inert views sharing slide good idea I'll look into that in fact realistically Mohammed at some point hopefully soon the the short version this talk this is the long version in my try swift talk the short version was 25 minutes in theory I think is actually way over like 37 minutes but this was two hours 20 minutes right never fit on stage you'll see roughly the same slides in the try to earth version just with me talking over them so as soon as try Swift published their video I already go and watch that cuz Italy very very fast and exciting a bag Yash asks scrubbie to scroll existence if you I it was time sellout will it be a switch to my version of unwrapped maybe at some point but right now no it would be a lot of a lot of hassle right now so I have no interest in it ah this is Alex clarify its question from 10 minutes ago sorry but perhaps answer I'm not sure Giulio asked about background color on swifty weapons in watch Wes I'm afraid I don't know I don't know if that's a very specific question so let's check into that mark asks how does it play off to our kit it does not play on our kit it's a whole other thing the only our kit in regular imperative code there's no swifty a Ark it just yet ah Oscar do you think they'll be advanced as you eye during the year only at next BB C so we already know for sure for sure iOS thirteen point one changes some things live noticed no one asked fortunately cuz you're too nice if I were my code again you'll see our layout hopefully until this jug view here and it's got three lines here and 200 punch line I've said this thing should have no more than ten lines to the joke and no more than ten lines the punch line if I remove those two lines come at like that booms they have no line limit which in Swift ey means as many lines as you want one line zero lines a million lines as keep on going press command R again let's see how it looks and okay now it works alright half the time this will utterly fail and now it's working yay miss Perry from Fond this is actually Xcode final now not one of the late beaters I plaintiff on slide two it still work or not work let's find out [Music] how it works damn you Xcode that's too good to me this often fails it was my point I know for sure that things that previously failed now often don't fail particular text wrapping not all of them so I wanted to say there are still some bugs in it but um many of the text having problems I hid in swifty y GM might find let's go xi have got better in thirty-one one so they are improving things we don't know yet is whether Apple will gate those changes because in uikit if you do a thing in UI kit at works particular way for example if you build your app against iOS 12 SDK or 11 10 9 whatever and you get the token through for your push message and you say here's my data gives him as a string please by using description you get back the string of the the push token in our stating you you don't you don't get it back anymore you get something else back and it's Britt's gonna break apps that compile against iOS 13 but there's a version gate in UI kit and there are many of these puts a new version gate saying if I have iOS 1200 earlier return the old behavior otherwise return the new behavior to keep these apps working correctly now we don't know is when you have a swift UI bug where the UI is wrong they were swiftly why problem will that just magically correct itself in 13.1 or will they version get it in you know force old broken behavior for iOS 13.0 use new good behavior 13.1 I don't know we're gonna find out I eminently when it ships so I don't know the answer smart dog wants a quick way to explain view builder who view builder is a quick way to explain function builders okay so I'll if I put one chain is lots of things so with UI what's nice with UI and it's very interesting you go back through on in here go to like github.com slash Apple slash resolution slash proposals there we are boom and look at the ones that landed in Swift five one or the ones they wanted to land in swift 5:1 you can kind of retro actively do some detective work to see so if you are coming right for example se 250 they wanted to have a style guide for swift why just for dub dub do they want to have a Stars I've swift Nancy is they now have a dragon drop uy edit of a swift you I can basically click around in this preview to make your UI and it right swift code for you what have coated it right it's to a solid Isis code so you can see why they want to have that same for things like in lighting a comma do I have an erase you could do ABC across new lines like this but I'm to have commas in there and my understanding is the hope was that was going to be 50 why did have no commas in here now eventually found a different approaches his function builders that made it through but the added function builders as you know I think was Plan B basically had other plan didn't happen and so function builders landed in discussion was announced the same day is 50y like the June's third this year it's like hey we announce them to do i all right there's two coolly stuff with functional is and it was like what and even today function builders haven't gone through evolution if you look in their proposal list you'll see there is no function builder here it hasn't gone through yet even though swift five one has shipped with function builders and you can make them you can say you know at underscore function builder like that and the underscore means this is really really private don't do this and function builders are a way to effectively allow to make code like swift UI so here this Zed stack has a linear gradient then a scroll you then a button and you know we've listed them out one two three there's no comma between them they're just thing then thing then think and swiftly why is able to put that together into one finished result and that's through function builders and on top of that is a particular function builder called a view builder which is our Zed stack here and that is what gives us both to do V stacks and HT and for each isn't similar they are function words behind this seems to bring many views ago into one view it's complicated I can give you actual code examples if you desperately want of your own custom view builders but broadly you're not going to want to again it's a there's actually in in the hundreds v UI we're going to do a custom view builder there because I want to show folks what's happening behind the scenes because so much of swifty wire anybody know what the blob folks sort of UI and you're seeing at FET requests at state at environment like what the heck is that - you're seeing dollar signs everywhere what the heck - those are signs do as well as V stacks Zed stacks you know sheets and so forth so you've got a whole new UI library and a whole new Swift terminology at same time to think about which is hard and so people that dub dub were understandably a bit foxed by this so in the harness v UI series which I hope you'll follow we're gonna look at exactly how view builders work and make our own view builder so you can see what's happening behind the scenes to try and demystify what's really happening can't do everything you know there's some things that only Swift ey can do because they're private implementation details we can do a lot of things and I want to show it to you what it is anyway sorry another long answers for a price of a question cameraman oh by I autumn teen life Swift you xmax very possibly yes that'd be entertaining I agree Salah would I recommend using UI kit for the new projects for now yes I would UI kit you know you are kissing around for a long time if you look at what got announced a dub dub this year it was it was huge right yes obviously talk to why kind of swept the table quite a lot with them some other things but there were some astonishing features in the rest of apple's platforms this year things like compositional layouts for collection use they're beautiful they are things of beauty my i'm doing a talk in Krakov next week i want to say maybe week after next called OMG collection views I sought the title of my talk and it all about collector who's being awesome again because they're super cool now but they're really cool but they're not in 52 i and so they wouldn't be doing all this great new UI kid stuff if UI kit was obsolete right it's not obsolete it's gonna have a long lifespan ahead of it we'll probably see more things coming next year and even the year after for you like it may or may not come to Swift UI so there's lots that's coming to 50 why there's lots of money and Swift you Atari and UI kit lots of money UI kit tens of millions of lines of code in UI kit all apps to date and ran in the UI kit or enterprises have support more than minus 1 or minus 2 iOS versions all use your eye kit for a few years yet if you have a problem in Swift ey you can google it you might find my site you might find nothing at all good luck with that you'll almost certainly find something with UI kit so it's a pain in the backside right now sometimes 50 why because is also new yes you can follow my 151 online or my online books with dy by example it's got stacks and stacks of examples of code we haven't been to there let me show you that real fast go to learn and just choose such a wired by example this is like 325 pages of free Swift UI questions and answers including like a big long tutorial beginning you can walk through and way way more lots of an actual code with videos and so forth anyway it's all we're going to look at and you might find that but otherwise has been doing right now because it aren't many answers which does high patent do I prefer I honestly I think that's an odd question and up it's simple is like I want to prefer this one because that's odd I use Evers appropriate you know design patterns are shared language for ideas I for concepts you know when I say let's you to build a pattern let's use a Hollywood pattern let's use something else you got a whole yeah of course holo pattern that's a good idea because of a B and C you know what I mean by that and we can implement it immediately and discuss the pros and cons same way I say let's use generics here let's use a protocol here you can say oh I don't know that means so it's just a language of describing things and I wouldn't necessarily yes always use this type mmm doesn't make sense I mostly use coordinators but I would always use them that'd be weird total guy correct yes they have not figured out how functional should work yet so it's sensible to hide it I agree and I look forward to seeing them aye-aye it's one of those things where we have to use miss 50y but I wouldn't recommend folks actively choose to use them in themselves I create their own one function bill desires pupils are maybe not function builder but like auto closures and Swift you know you can do it should you do it yeah then could I do video understand with Apple it's asked you why and also do one that works no platforms I could do I have time to I'm not sure probably not it's not a heart I don't have actually very easy it's in fact it's almost trivial it's like one button there's a callback Kirsti asks is the 100's with UI following on to I by example no it all new it's 85 days of all new projects or new challenges all new tests online it's autumn in you it is very unlikely I warn you now it's very unlikely to have time to do videos I'm afraid because I'm speaking at two events in the next two weeks I should be doing those preparations instead of doing videos so I'll do certainly new stuff guaranteed but probably have time to do videos as well as writing it's all C funky a how to add many suppose why I might produce I really don't know I haven't looked at that yet I've done it with them you I'd kick catalyst stuff but not with 50 white Mac yes I look into that and let you know for a new project would recommend to wrap you I can't so if dy or vice versa so if you wanted to use if you ask her if you really want you to do I now you want to go so if you're white all the way until you hit something you can't do 50 Y which will be about hour into the project probably like there's one thing and it's like it always is one line of code in the UI kit and it's really really hard with Swift UI and the whole section here in by example about how to wrap a custom you might be Pacific UI and it's not very hard as you can see this is wrapping a UI text view here it's not very hard but it gets her painful and yet things and finding all the time like you obviously as an exercise to the reader go and try and wrap you i collection view and you'll realize it's extremely painful I'm looking forward a polite for me quite frankly because nicer things were that hard work for me it's like you know previously folks doing rx Swift I actively great respect to them it wasn't easy there's a lot of ramped up because you were kind of fighting against you I kept bluntly and obviously Apple owns UIKit they're gonna rewrite UIKit to work with writers that which is that what it did so until they rewrite your I collection moved to play ball nicely was fifty Y in it gonna happen now I should say that obviously until recently most of our all didn't know about swifty why many folks did maybe fifty folks maybe more mature but not not all in my long long way knew about Swift UI and now they all know that so that you why so I imagine I'd like to think that you know the the maps team the photos team the safari team whatever are all thinking how could I wrap my component for Swift UI so when that ships I hope that is before dub dub in the incremental 13.2 and similar will get more and more interesting components to work with like a map kit for example we were really really nice done for us from lovely so we'll see so anyway that could be in before dug up hopefully we'll find out obviously in the coming months because 13.1 it's very close any point was like two days away already it's it's rackable it's already I've seen that a long time hey Zeus asks what it will happen with storyboards and zips um nothing let me know great they still good why you sort of what all the time it certainly ends the really annoying Battle of Isis people come in saying that storyboards are for noobs I point out now this person's you know worked Apple twenty years and you just storyboard so you zips you know if you want go and tell them they're a noob go for it but ain't gonna end well um hopefully swifty wise ended a particular wall by making it altar of sinking out with code so we'll see very much a little reminder Tom Scott okay cool Satya sin you're from Froome great kind of rooms I love room from beautiful yeah fellow up Somerset boy yeah I'm sorry I'm not insider I am on wine but I am a local lad who Julia's giving up on so she why has a shame yeah watch kit you know honestly I am one of the few folks who actually really enjoys watch kid I thought was brilliant I made some great apps as watch kit I really enjoyed it how simple it was to make great stuff and weirdly they took out things like relative sizes from Swift UI because it would have mapped directly to the watch kits relative sizes and I've taken out so it's just really annoying do I do math so that with John's reader and so forth by hand which is silly and annoying anyway then it's white see you in a Sunday maybe I don't know I need to prioritize writing the final versions of my projects for the 100 a swift UI because I wanna make sure they're very good I haven't got time to videos I don't think like I said but I do want to make sure the project's themselves are the best I can so I stand test of time for a long time but my focus is there right now but also I've gotta be doing these two presentations for Krakov and Italy later pragma in like three weeks so I'm doing talks about 50 UI and collection views so I'm not sure I have enough time to nurse from Sundays for a while but I will pick you up again once they're out of the way ask shocker to NFC maybe NFC honestly it's so easy so easy because coin FC doesn't give you much control you have to use their UI and it just pretends that since the code it's trivial the problem is most folks haven't got anything to scan so you can night you can you can look around like what's going n FC you know not a lot so it's a bit annoying right now so I did NFC in mmm advanced iOS volume 2 I think and it was like yeah what should we scan and I happen to have a Google cardboard you know the old knockoff AR thing that had a scannable thing inside but it wasn't a lot round with embedded NFC things at home it's maybe anyway um smart dog we had take it cool rather kids I don't know time to look at it it looks like it's a future quite frankly everything I've seen about it looks like sync it's gonna die sprite kit might die as well I'm not sure where other kits can be the future they're gonna do a massive thing with that it's so nice and it's gonna do so much more it does right now so we'll see Swift you I work for barcode not really a question there I certainly intend one of the projects for the holidays to do QR codes with swifty why so you can you know show your barcode or scan a barcode or something like that I'm not sure I'll do yet we'll see yeah but barkos there's pictures and images of stuff so no matter anyway that is now 9 o'clock I've kept you and obscene three hours I apologize for that hopefully next we short er we covered a lot of ground and there are lots of questions so hopefully I'll be useful we'll see anyway I'll be around another 5 minutes folks you have questions your last chance to ask onto them shortly I'm gonna include collector plus iCloud probably not I wasn't planning to I did iCloud in hacking a swift I actually changed 913 we would be better again maybe is the answer I wasn't planning to just cuz I have to draw a line somewhere 100 days is limited in what you can nationally do so yeah I want to try and pick the most applicable stuff and iCloud hasn't really picked off hasn't really picked up very well some reason hasn't really taken off but like sync you think it's brilliant but whenever he took off I haven't always well here my kids are in bed hopefully ready for school I'm gonna finish this and go and play some untitled goose came for a while - I need horrible goose everything's good here someone go I'm glad you enjoyed the three house it's been quite a while right folks last chance ask questions I will sign off and if you want to see me again you can grabbing on Twitter I am two straws on Twitter boom I'll show you my name or I am on Twitter you can by all means follow me there or no you want to ask questions there right now you asked us questions boom all at once hey Josh how do you learn Swift's boom I have a completely free online course you you go to my homepage which is here you press learn you press start here being avery on this page lists like free free free free free it's all free free free free free all the way down free do not pay for stuff go here choose the very first thing this thing here this thing is the best starting point for newcomers the 108 of swift press start reading it'll teach you swift day by day all broken down lots of videos lots of interactive tests to make sure you're learning correctly you make tons of real projects you learn things like codable and GCD and user defaults and sprite kit and core graphics and core image and map kit and way way more it's a huge undertaking it's all online free of charge go there to learn Swift Adam no I don't look applicant no idea why they make their choices Camille thank you very much for the donation teach you how to make a proper network manager maybe it's not that hard I did a video on it previously which one was it was 50 why it was we just posted oh those always called cupcake corner you look at my youtube channel YouTube / Paul Hudson it I haven't done it again for the neat the pre-release I might do it again it's 180 projects perhaps because if this is using slightly older Swift UI code but it's one of these maybe or no it's here no I even raise any it's one of these things here trust you why one of these things here it will list how to do it and it's not that hard it's called cupcake corner oh there is you have session that's the one there boom that one and I'm six in my playlist right now and that goes through have you never calls with your a session will hundreds correct example quarrel I guess it will absolutely I wanted to put it I did loved which was called spawn here a quorum out again it's out day that was record before the GM is recorded on beetle one so I might try and redo that one as a txt project for the final version of 50y so it's up to date forever because once it's in a book I have today to wartime with new versions of stuff so yes I want to put that project into the holiday somewhere it's lovely because it's Cora Mel's great fun to work with and having that alongside of you is just beautiful quite frankly Marc no longer needs new self weekend well that isn't issuance iris truck and then ever was because week has no meaning you can't weekly hold a struct or something you do but obviously it still requires using classes so it's not there's no longer needed it's just not in a particular situation and heard a rumor that surprised inspired by Facebook's iOS architecture so I mean it's it most things and some respects are inspired by reactive coding . which is not new it's actually quite old react itself which a high recommend swift folks look at it's great fun in a JavaScript framework from Facebook for doing websites in JavaScript for actively and it's beautiful they do a lot of great things if you combine it with with Babel or Babel and web pack you can use super modern JavaScript cross-compiled transpile down to manky old javascript so you very nice code and it's all react it's all very nice check it out have a look and you've caught is something out it's for active coding that's the same thing the idea is the same so yeah are your books updated yes so Jake this is really enjoy your us up there on every time for stuff so if I got like Swift design patterns patterns Apple books Paul Hudson I know I'll probably find the thing there we go and click on that thing here's my book and hopefully in here somewhere I know I do this thing saying like what's new in this book was it so far eventually but somewhere some versions are cached saying Swift three even impass with five or four to five point one and so forth they still say Swift three so the original ship from what a long time ago which is really really annoying I don't know what to do alright just conned at them and asked me to flush their cache something I do update always books always free of charge on gum road and Apple books as part of my lifetime update guarantee yeah so super that example estimator was swift you I I love that to be in hundred days it's all see well honestly I can squeeze it in there we'll see you just doin a stream welcome I'm sorry we've finished the project it was really good raising project I loved it really much sorry relate that now yes to run after you I apologize again hundreds of years please yes em7 MD the 100 days of Swift its thing Accio TOCOM slash 100 is my number one best way of learning Swift not only do you get all intro to Swift and all info to iOS but all these things come with tests testing your works you press some tests and lastly questions about what you learned is this true or is this bad code or not bad code and you answer it and I'll say oops that's not correct this thing at a yadda yadda so it's telling you what your right what's wrong so you get tests to prove you know stuff plus there are stacks and stacks of videos here I recorded so many videos that every one of these things walk you through exactly what's in there as well and there's even like a a word search to test your knowledge and so forth and it's really highly interactive way of learning Swift and you like it it's completely online completely free so go through that URL to learn Swift also by the way I do recommend my app you have to learn a press get the iOS app it'll ready to unwrap which is a free on the App Store you get all the same videos all the same tests and many more bonus tests to get right in your iPhone interactively free of charge there's no one app purchases on the App Store so it's got to unwrap and get out the App Store it's very recommended anyway do I have any tutorials for learning watch I've got a whole book of March OS you go to store go to browse you scroll down for watch OS that's pro scripts like patterns Mac OS watch OS boom this thing here builds I think is 12 projects for watch rs5 including as games and a complication here there's as what user input there's Internet's staff there's more it's really really packed with stuff so recommended description for the app yeah so it's go to look to like here link to it there that's what the app is Soak a whole book on watch us all right honestly I wrote lots of watch westcote it's so much fun and one of the few folks probably written a watcher west sprite kit game it's so much fun recommend it very much I enjoy it's got a lot it's a shame quits with UI is better in some respects and more than other respects which is really annoying anyway do IO machine learning book is written Swift now I don't but I do have prattle I was 12 and advanced iOS to both cover machine learning here this one here goes way that we go really deep into exactly how core ml works in here explaining exactly what they're doing behind the scenes you know you can get confused with linear regresses or similar and there's no need to you know so explain what random forest and there's a similar it's all in there in details go on go and check that out so I think I'd all your questions I have linked everything I've answered the how I learned to question a great deal I think that's everything if it's not grab me on Twitter I also hang around on on email at Paul at hacking what if calm even a slack group linked to on the homepage here you'll see like but it where is it newsletter slack group you can join us slack group it's a hash 100 channel on there if you're following proto's swift all the cards 50 y you can go there and ask questions and folks will help you out interactively so I find a slack group very highly will it be a Black Friday sale almost certainly almost certainly yes is Wesley what's new so on the home page now you'll see it lists the three most recent articles here on the home page and below that are it's like the top most recent 15 or 10 or so eighth piece of example code so the knowledge base that flows in their newest first so go to the home page you'll see there all sorts of new stories and most example code and when something else happens like I don't know circle just tomorrow there'll be a nice toric Bank type of thing saying hundreds 50 wild launched today go and join it also this bar top here and saying instinct starts tomorrow so I do try a number of ways to help folks find what's new but it's not easy cuz it sites huge sites so so big now which is great folks love it but yeah also search is good too you're going to search you type in you know navigation view navigation view without queue and you'll get back your search things you know have to push things how to build a menu tips and tricks and so forth do that actually cool thing at a site is actually kinetically you can actually now go to packing TOCOM slash something like UI tableview controller and it'll redirect you to search automatically for that which is really nice and of course you can add space if you want to have like package with a calm slash refactor view controller with spaces it's fine he'll just figure it out and show you the results straight away so hope that helps you find stuff on the site more easily because it was so much content on the site and of course I'm about to add a lot more with the 100 days of Swift UI anyway it is now ten past nine I've been here three hours and ten minutes you've been extremely patient thank you for coming thank you for telling others about it thanks for liking this livestream all those things help more folk discover these live streams which in turn helped me want to do more live streams because if I only see a handful of folks and I've been like well isn't really worth it and don't do it again when looks like we had a high of two hundred seventy nine people that's very very good um that makes me want to do more so please like the video tell your friends recommended watch a stream and I'll see you at the next Swift on Sundays which might be next weekend but probably not probably after pragma and after Krakov so in like three weeks time anyway thank y'all coming I'll see you at some point in the future and don't forget to go to the 100 days of Swift ey sign up and enjoy starting tomorrow it's going great great fun take care

Channel: Paul Hudson

Views: 81,913

Keywords: Xcode, swift, programming, tutorial, live, project, list, navigationview, zstack, hstack, vstack, swiftui, ui, gesture, draggesture, macos, ios, catalyst

Id: YaMKOTWdT6U

Length: 190min 20sec (11420 seconds)

Published: Sun Sep 22 2019