Everybody what's going on this is Caleb with deps slopes dot com and I'm so excited for this video because
we're going to actually use our Nick Swift in a real app.
And I'm going to show you how we can use it with our ex Coco as well to create observable sequences
using some of the properties of standard cocoa touch controls which is really cool.
So let's begin by pulling open our project and we're going to actually close the assistant editor.
We don't need it anymore but we do an interview controller.
So what we're going to do to begin and this is kind of what I like to do with any Arc's project is I
like to create my dispose bag first because I will need to dispose of subscriptions at the end and it's
just good to create it from the beginning.
So beneath your outlets go ahead and just type let dispose bag equals dispose back just like that.
And now we have a Dispose bag that is available for us to use when we need to.
So get rid of this comment.
Here we don't need it.
And what we're actually going to start with for the Arek stuff is we're going to go down beneath feuded
load and we're going to put everything into a function called bind.
So go ahead and type phunk bind.
And the reason for that is we are basically taking our textfield and we are going to capture the text
property of the textfield.
We're going to modify it and we're going to bind it to the label.
OK.
That is something we can do and are as swift as we can bind values to a UI element using Ark's cocoa.
So inside of our bind feature what we're going to do is we're going to access name entry textfield and
I want to show you what happens when I type Dot are x.
Do you see that it shows that we have access to re-active extensions.
K that's really cool.
And what I can do is inside the R X category I can access all of the reactor bowl or reactive elements
inside of this.
We're going to be using text because we want the text input to be causing our reaction.
So go ahead and type a name entry textfield dot our X text.
Now what this means we have basically created an observable that is going to pay attention to every
character we type in a text field.
So we have basically set it up so that whenever we type a character that value is passed in as an observable.
Really really cool.
So go ahead and after this what we're going to do is we're going to use map our transformation function
to change what the message says.
OK.
So go ahead and dot map and inside of dot map what we're going to do is we're basically going to just
return hello and then whatever was inside the textfield using dollar sign 0.
OK.
Now we've used this closure property for a while now.
And what that actually means is that whatever is passed into the textfield here is going to be passed
in through map and then we can basically return this new string to map and on the other side what we
can do is we can call DOT bind to pretty cool and we can bind this to an observable of type string.
So we got a new string here that says hello and then whatever name we pass in.
Let's go ahead and actually put a period at the end there like there should be.
And now we can use bind.
Now I don't know if you read that I'm going to delete it and type it again but if you look at DOT bind
to that the explanation says subscribes to observable sequence using custom binder function.
And what that binder function is going to do is it's going to set the text property of something that
has a text property like a label.
So watch this.
If we bind it to our helo label our X dot text that is and observable of type string.
So we can bind the value coming in from our text field to this label and it will show up in our label.
How cool is that.
So of course let's do some cleanup here for map let's go ahead and put that down below and let's enter
that in a little ways for bind.
Let's put that underneath.
And now if I leave it as is it's going to say result of call bind 2 is unused.
Now of course it's being bound to the label but afterwards what happens.
We don't need it anymore so we can go ahead and call DOT add disposable to dispose bag.
And you'll notice that error goes away.
Now let's go ahead and let's think what we've done here we have taken our textfield we have reacted
to the text inside the textfield and whenever that happens it's whenever we type in the textfield.
Think of it like next being called we're passing in a new value into this observable we are using map
to change the message that's coming in we are binding that message to the label.
So every time we type the label should update.
Now you don't see me conforming to any kind of delegate or protocol.
I haven't used the text field delegate I haven't used the you I label it anything.
I'm this is all reactive.
That's the coolest thing is that Arc's Swift gives you all these amazing extensions for stuff you already
do.
Now the only thing we need to do is call our bind function.
When the app loads.
So in view load go ahead and call bind and let's go build and run to see how we did go ahead and build
and run that.
And you'll notice we're getting a little warning here and you'll see why that warning is there in just
a moment.
So here is our app.
It is built.
And look at that it says hello optional and an empty string.
Now that's because the string coming in from our textfield is optional but we know that it is definitely
going to have a value.
So we're going to go ahead and force on wrap it for now and then in a moment we're going to do some
conditional handling so that if there's nothing typed it we'll just continue to display that type your
name below or or whatever it was.
So now that we have force on Raptor you'll notice that warning goes away and let's build and run again
and let's see what happens.
Lots of projects here.
Geez.
OK.
So here we go.
It's open and it says hello comma and nothing of course because we haven't handled what happens if there's
nothing.
But when I open my textfield watch this.
This is the coolest part.
This is literally a singular line of code.
If I wanted to I could remove all these returns and I could make it just one line of code.
Now watch when I type.
See it says hello C A L E B it's reacting to the data.
When I call on next by using our reactive extension here it is basically taking this data that is passed
in converting it into this string binding that string to the label and then disposing of it when I don't
need it anymore.
That's the coolest thing.
Seriously this is why our swift is so amazing.
We can do all kinds of fancy stuff without needing any of the protocol can conformance or any of the
boilerplate type code that you would need to get this kind of reactivity.
It's just built into our swift.
So this is great but when we open the app it says hello comma blank.
That's not good.
We don't want to say that.
So we're going to set up some conditional code in our map function.
Basically if the text coming in is like an empty string we're going to just return type your name below.
Otherwise we will pass the name and the proper label.
So let's do that now let's go ahead and stop it from running so we don't waste resources.
And inside of map go ahead and type if Dollar Signs zero meaning if the value coming from the textfield
is equal whip's equal to an empty string we're going to go ahead and return type your name below.
Otherwise.
Or else we're going to go ahead and return what we just typed.
OK.
So basically what we're saying is if the text coming in is empty we should just type your name below.
Otherwise we should say hello and whatever letter we type K.
You'll notice that I'm just kind of connecting these functions together in a second I'm going to show
you a really really cool function that will let us delay the text as it comes in.
But for now let's go ahead and build and run this.
And let's see how we did it should show type your name below because initially the text field is empty.
Ok good type your name below let's go ahead and type.
Caleb caid updates.
Awesome.
And let's delete when I go back to being empty watch what happens.
Type your name below.
It goes back to what it was that is so cool.
That's amazing.
Seriously.
OK.
So like I said I was going to show you a very cool thing and what it is.
It is called debauches.
And I'm actually going to go ahead and type it right here.
It's called Debe bounce.
OK.
And inside of debauches we have what's called due time and a schedule or so do time is basically the
amount of time that is going to be delayed.
So if I type a character it's going to delay a certain amount of due time before it then proceeds.
The scheduler is just main schedular instance so I'm going to actually go ahead and set this for 0.5
seconds and the schedular main scheduler datt instance is basically the scheduler you're going to use
for almost everything unless you're doing some really technical stuff.
If you want to dive in deeper to this you can see this is part of our EQ Swift.
It's basically just the dispatch.
Q Just the main dispatch queue handler.
So we're going to actually go ahead and set this so that it is before the map.
So text d bounce and what this is going to do is it's going to delay when we type before it updates
the message and you'll see why this is cool in a second.
So build and run this is just an example of one of the really cool things that you can do and are equipped.
You can just change these functions together and give all kinds of crazy functionality.
So let's go ahead and let's see why this is cool.
I'm going to type.
Caleb did you notice how it didn't change.
Watch if I delete it updates every point five seconds so if I were to type really quickly it would show
up.
I'm delaying it.
Now this is super helpful for if you're using an API so that you don't make an API call every single
time you type a letter and you can bounce it so that it basically only passes it in after point five
seconds of a delay before another character comes in.
Which is pretty cool it's a nice way to prevent API spamming.
Now there are lots of other little functions.
For instance there's another one called distinct until changed.
That basically prevents like let's say that I typed Calleigh oops V Caleb V.
If I were to type the wrong letter if I were to change it and then change it back nothing would happen.
As you can see since our bounce time is pretty long it's not showing those changes because I'm changing
it before it can actually be point five seconds.
But if I wait long enough you'll see that it changes.
So that's just one of the really cool things about our X Swift.
I'm actually going to get rid of that just because I wanted to show you the cool reactiveness and the
cool ability to add in those functions.
But we don't need it for now.
So guys this is really really cool.
This is one part of our app in the next video we're going to go ahead and set this button to be functional.
We're going to set it so that when we tap on the button it's going to clear our textfield.
Update our label back to say typed your name below and add in the names down here by passing the value
of an array all using arke Swift and a really cool subscribe function.
So let's go ahead and head over to that video and let's do that now.