1 00:00:08,070 --> 00:00:10,290 Hey everybody this is Kayla with slopes. 2 00:00:10,570 --> 00:00:15,930 And in this video we're going to be talking about what is our X what is reactive programming and what 3 00:00:15,930 --> 00:00:17,420 is our X Swift. 4 00:00:17,430 --> 00:00:23,280 We're also going to talk about why we should care as a developer why that's important to us to know 5 00:00:23,280 --> 00:00:28,920 about and how it can help us to write better and just more fun applications I think are next what is 6 00:00:28,920 --> 00:00:30,110 really fun to work with. 7 00:00:30,110 --> 00:00:33,930 And there are some things you will learn in this course that will blow your mind. 8 00:00:34,010 --> 00:00:39,930 Ok seriously when I first learned Ark's Swift I was amazed at just the abilities and some of the things 9 00:00:39,930 --> 00:00:46,080 that I could do that normally would take a ton of time or just a lot of boilerplate code that is just 10 00:00:46,290 --> 00:00:48,770 simply removed when using our swift. 11 00:00:48,780 --> 00:00:54,990 So first of all I want to show you an article and I really recommend that you go back and you read through 12 00:00:54,990 --> 00:00:59,390 all of this when we're done with this video because it's really really really good. 13 00:00:59,400 --> 00:01:02,160 It's called the introduction to reactive programming. 14 00:01:02,220 --> 00:01:07,710 You've been missing and this is language agnostic so it's not going to be specific to swift but that 15 00:01:07,710 --> 00:01:13,050 might actually be helpful if you have experience in another language it might help you to read through 16 00:01:13,050 --> 00:01:19,050 this and see how reactive programming can apply and be used in many other programming languages not 17 00:01:19,050 --> 00:01:20,250 just swift. 18 00:01:20,250 --> 00:01:27,810 So I want to scroll down and just explain to you what re-active programming is and there are some definitions 19 00:01:28,230 --> 00:01:36,810 that are very very very very long very academic very detailed and very hard to understand but at its 20 00:01:36,810 --> 00:01:45,510 core reactive programming is programming with asynchronous data streams like you may have heard me mentioned 21 00:01:45,510 --> 00:01:46,710 in the previous video. 22 00:01:46,950 --> 00:01:50,780 There there is something called an observable in Eric Swift. 23 00:01:50,910 --> 00:01:51,200 OK. 24 00:01:51,240 --> 00:01:58,410 That's not just our ex-wifes that's our acts in general but an observable is a data stream and observable 25 00:01:58,410 --> 00:02:01,040 is something that can hold data. 26 00:02:01,260 --> 00:02:08,940 And when you subscribe to one of these data streams the way that you go through the data is a synchronously 27 00:02:08,940 --> 00:02:14,400 meaning you go from the beginning to the end and you don't skip or you don't jump and you don't go through 28 00:02:14,490 --> 00:02:15,320 in a different order. 29 00:02:15,320 --> 00:02:17,220 You go from the beginning until the end. 30 00:02:17,250 --> 00:02:18,540 That's asynchronous. 31 00:02:18,540 --> 00:02:24,370 So reactive programming is programming with asynchronous data streams. 32 00:02:24,400 --> 00:02:27,760 Ok now it says here in a way this isn't anything new. 33 00:02:27,780 --> 00:02:35,010 If you work with API eyes or really anything in swift or in programming a lot of what we do is asynchronous 34 00:02:35,310 --> 00:02:39,960 if we tap a button it does one thing then it does another thing and another thing and another thing 35 00:02:39,960 --> 00:02:46,440 and it goes from top to bottom you rely on that asynchronous order for the app or the program to do 36 00:02:46,440 --> 00:02:47,600 what you want. 37 00:02:47,910 --> 00:02:52,680 But re-active like it says here is that idea on steroids. 38 00:02:52,680 --> 00:03:01,040 You can create data streams of anything not just clicks not just hover over events like in web development. 39 00:03:01,320 --> 00:03:08,880 Anything can be a stream variables a tap a certain property data streams data structures like anything 40 00:03:08,880 --> 00:03:13,630 can be a reactive stream of data that's the amazing thing about reactive programming now. 41 00:03:13,650 --> 00:03:19,560 Like it says here for example imagine that your Twitter feed would be a stream of data in the same event 42 00:03:19,890 --> 00:03:21,120 that click events are. 43 00:03:21,210 --> 00:03:25,040 You can listen to that stream of data and react accordingly. 44 00:03:25,040 --> 00:03:26,730 OK as it changes. 45 00:03:26,730 --> 00:03:33,630 Now the coolest thing is that on top of just the ability to turn anything into a stream of data you 46 00:03:33,630 --> 00:03:37,830 are given an amazing toolbox of functions and we're going to talk about those. 47 00:03:37,830 --> 00:03:39,320 They're called Transformers. 48 00:03:39,390 --> 00:03:40,670 At least that's what I call them. 49 00:03:40,800 --> 00:03:49,350 But there are ways that we can transform data so we can basically take a stream of data and we can filter 50 00:03:49,350 --> 00:03:54,800 it or combine it or zip it together with any other stream back to back to back to back. 51 00:03:54,810 --> 00:04:01,260 So a single stream can basically go into another one and the output of that stream can go into another 52 00:04:01,260 --> 00:04:10,650 stream and so on and so forth you can merge two streams together you can filter one stream so that you 53 00:04:10,650 --> 00:04:16,100 can basically filter out ones that don't filter out elements that don't meet a certain condition. 54 00:04:16,110 --> 00:04:21,580 You can map values from one stream into another one so you can modify them. 55 00:04:21,600 --> 00:04:25,710 Maybe you want to take an input of certain values and multiply all of them by 10. 56 00:04:25,710 --> 00:04:30,450 You can use Map to do that and then that can feed into another stream if you want to modify the data 57 00:04:30,480 --> 00:04:30,900 again. 58 00:04:30,900 --> 00:04:38,040 So it's really really cool how we can use asynchronous data streams and react to them accordingly and 59 00:04:38,040 --> 00:04:44,130 use these amazing our X functions to modify them and make them exactly the kind of data that we want. 60 00:04:44,160 --> 00:04:47,240 So that is reactive programming. 61 00:04:47,250 --> 00:04:51,780 But why why should we be using our swift. 62 00:04:51,780 --> 00:04:56,910 This is actually from the swift documentation which again as a programmer you should know how to read 63 00:04:56,910 --> 00:05:00,000 documentation you should go look through this and read it yourself. 64 00:05:00,000 --> 00:05:02,580 There's a lot of really good information here. 65 00:05:02,760 --> 00:05:12,490 Now the why for ARC Swift are X allows us to build our apps in a declarative way can now take a look 66 00:05:12,490 --> 00:05:13,360 at this. 67 00:05:13,810 --> 00:05:17,410 You're not going to maybe understand what this is right from the get go but don't worry. 68 00:05:17,440 --> 00:05:18,700 We'll dive into it together. 69 00:05:18,880 --> 00:05:24,880 But basically what they are doing is they are binding and observable to a label. 70 00:05:24,880 --> 00:05:31,720 OK so a label they're basically creating and as an observable they're using a function called combine 71 00:05:31,720 --> 00:05:34,780 latest which is going to take these two variables. 72 00:05:34,870 --> 00:05:35,300 OK. 73 00:05:35,410 --> 00:05:42,300 Or maybe these two labels first name and last name label and then they are pulling out the R X property. 74 00:05:42,370 --> 00:05:48,500 OK the re-active property that you get when you import Ark's swift and they're pulling out the text. 75 00:05:48,550 --> 00:05:56,980 So basically they're turning this first name into an observable of type string from the text. 76 00:05:57,070 --> 00:06:02,110 They're turning the last name label also into an observable and they're using combined latest to put 77 00:06:02,110 --> 00:06:03,240 them together. 78 00:06:03,460 --> 00:06:09,160 Now inside combined latest they can use the dollar sign zero to access the first element and dollar 79 00:06:09,160 --> 00:06:14,260 sign one to access the second element and then they're combining them with a space in the middle to 80 00:06:14,260 --> 00:06:15,880 create the full name. 81 00:06:16,210 --> 00:06:18,470 Then what they do is they take a map. 82 00:06:18,730 --> 00:06:23,410 And what they're doing is they're taking the value from combined latest and they're mapping it to a 83 00:06:23,410 --> 00:06:29,470 string that says greetings and then it adds the full name with dollar signs zero at the end. 84 00:06:29,590 --> 00:06:32,620 They're using bind and with bind. 85 00:06:32,620 --> 00:06:36,850 They can actually take that data and bind it to a UI element. 86 00:06:36,850 --> 00:06:44,710 So their greeting label they're binding the text from those to UI text fields and they are binding it 87 00:06:44,710 --> 00:06:45,730 to a label. 88 00:06:45,790 --> 00:06:46,940 It's so cool. 89 00:06:46,960 --> 00:06:55,300 So this one singular line of code takes the place of tons of importing certain delegates of making Iby 90 00:06:55,300 --> 00:07:01,420 actions and Iby outlets and basically setting all of maybe you have a function that can combine both 91 00:07:01,420 --> 00:07:01,880 of the names. 92 00:07:01,900 --> 00:07:07,860 But instead of that we can do one observable that observes when the the name changes. 93 00:07:08,020 --> 00:07:12,330 It's going to add it to the label and then bind it to the label. 94 00:07:12,370 --> 00:07:13,330 Super super cool. 95 00:07:13,330 --> 00:07:15,480 A single line of code can do that. 96 00:07:15,490 --> 00:07:19,170 It also works with table views and collection views. 97 00:07:19,240 --> 00:07:26,830 You can take data and bind it to a table view the exact same way with a singular line of code that has 98 00:07:26,830 --> 00:07:33,880 functions back to back to back to back member the inputs into one function becomes the output and that 99 00:07:33,910 --> 00:07:37,100 output can go into another function and so on and so forth. 100 00:07:37,120 --> 00:07:38,980 Very very cool. 101 00:07:38,990 --> 00:07:43,550 Now of course there are some really cool ways that we can use this with API. 102 00:07:43,600 --> 00:07:44,610 Like I mentioned. 103 00:07:44,920 --> 00:07:49,320 So let's say we had a function that does something incredible for a certain person. 104 00:07:49,320 --> 00:07:49,880 OK. 105 00:07:50,050 --> 00:07:52,860 Now of course it's going to return an incredible thing. 106 00:07:53,400 --> 00:07:59,590 But basically let's say that when you're working with this API maybe you want to make sure that if it 107 00:07:59,590 --> 00:08:07,060 doesn't get a result back that it can retry retry is built into our X. swift if we don't get a result 108 00:08:07,060 --> 00:08:10,720 back we can react to that and retry the same call again. 109 00:08:10,720 --> 00:08:15,260 We can also said it so that you can avoid kind of API spamming. 110 00:08:15,430 --> 00:08:21,490 You can set it so that in your app when you type in something maybe in a search bar you can set it so 111 00:08:21,490 --> 00:08:28,390 that it pauses for maybe a half second or even a whole second before it actually processes the API call 112 00:08:28,960 --> 00:08:35,140 so that you don't make like 50 API calls if you type 50 characters you could have it wait until you 113 00:08:35,140 --> 00:08:39,100 have paused for point five seconds and it's just built in to our ex-wife. 114 00:08:39,100 --> 00:08:40,930 That's the coolest part. 115 00:08:41,020 --> 00:08:47,950 Now of course delegates there is a really expressive way to use delegates instead of using your standard 116 00:08:47,950 --> 00:08:53,690 scroll view that scroll and maybe you're not really sure what scroll view that is. 117 00:08:53,710 --> 00:08:56,950 Maybe you're not sure exactly what constraint you're dealing with. 118 00:08:57,010 --> 00:09:03,040 Instead of doing that and it appears what they're doing here is they're using this on some type of table 119 00:09:03,040 --> 00:09:10,090 view in order to modify the content offset or maybe the constraint based on the content offset instead 120 00:09:10,090 --> 00:09:13,740 of doing that and you're not really sure what they're trying to do. 121 00:09:13,750 --> 00:09:16,940 You can go into self dot results table view. 122 00:09:17,170 --> 00:09:24,280 You can access the reactive property and you can go into the content offset then you can map that to 123 00:09:24,280 --> 00:09:26,130 be whatever else. 124 00:09:26,230 --> 00:09:35,020 So you can basically say the content offset X and we can bind that to the constant of the constraint. 125 00:09:35,020 --> 00:09:37,590 So it's really easy in a single line of code. 126 00:09:37,750 --> 00:09:44,860 We can specifically and very expressively do the same exact thing as whenever the scroll view scrolls. 127 00:09:44,920 --> 00:09:48,210 You can set it the exact same way with a single line of code. 128 00:09:48,220 --> 00:09:53,890 I hope that as you're seeing this your mind is being blown because it is amazing how much we can do 129 00:09:53,890 --> 00:09:55,820 with so little in our acts. 130 00:09:55,960 --> 00:10:00,690 And I'm going to continue to show that to show you that throughout this course and of course there's 131 00:10:00,700 --> 00:10:07,040 plenty more you can do key value observers you can do notifications transients state stuff lots of cool 132 00:10:07,040 --> 00:10:12,230 stuff in here and I really encourage you to go through and read all of this but I just want to show 133 00:10:12,230 --> 00:10:18,620 you some of the just amazing like the biggest most amazing things that are X can help us with as a developer 134 00:10:18,620 --> 00:10:26,690 I'm sure you're thinking like wow this is a huge huge thing and it is it's a big deal but it's also 135 00:10:26,690 --> 00:10:28,440 kind of a big paradigm shift. 136 00:10:28,500 --> 00:10:35,090 And one of the most challenging things for myself when learning our swift was to think reactively and 137 00:10:35,150 --> 00:10:38,430 to think in a new way because it is kind of a paradigm shift. 138 00:10:38,510 --> 00:10:42,800 We're gonna be doing things differently than you're used to so just prepare yourselves for that in advance. 139 00:10:42,800 --> 00:10:45,080 But let's let's get started. 140 00:10:45,080 --> 00:10:46,880 Guys we are ready to go. 141 00:10:46,880 --> 00:10:52,400 So let's head over to the next video and we're going to dive into learning all about observables in 142 00:10:52,400 --> 00:10:52,940 our X-Wing. 143 00:10:52,950 --> 00:10:54,380 So I'll see in the next video. 144 00:10:54,380 --> 00:10:55,780 Great job with this one. 145 00:10:55,790 --> 00:10:57,360 Let's go over to the next video.