0
1
00:00:00,690 --> 00:00:01,350
Hey, guys,
1

2
00:00:01,350 --> 00:00:06,650
and welcome to a brand-new module on SwiftUI. In this module,
2

3
00:00:06,660 --> 00:00:09,930
we're going to be exploring what exactly is SwiftUI.
3

4
00:00:10,110 --> 00:00:11,100
What does it do?
4

5
00:00:11,100 --> 00:00:15,000
And how can we use it to build iOS apps?
5

6
00:00:15,000 --> 00:00:23,310
Now, at the Dub Dub DC 2019, one of the most exciting announcements that came out was SwiftUI.
6

7
00:00:23,310 --> 00:00:31,180
Now, SwiftUI is Apple's brand-new UI framework built with declarative Swift code.
7

8
00:00:31,200 --> 00:00:33,840
Now, you might be wondering what is all of that mean.
8

9
00:00:34,170 --> 00:00:42,180
Well, this is Apple's attempt to make it easier for beginners to get into iOS development through a whole
9

10
00:00:42,180 --> 00:00:46,560
bunch of cool features, such as drag-and-drop code creation.
10

11
00:00:46,560 --> 00:00:55,230
Let me demo. So, for example, using SwiftUI, you can simply go into the Object library, drag in a button
11

12
00:00:55,290 --> 00:01:03,300
or a text element, and then simply drop it onto the canvas, and it will automatically write the necessary
12

13
00:01:03,300 --> 00:01:04,400
code.
13

14
00:01:04,410 --> 00:01:11,730
Now, not only is that limited to components such as text and buttons, but you can also drag on attributes
14

15
00:01:11,790 --> 00:01:19,050
such as, for example, if you wanted to change the font of our text, we just drag and drop it onto the text,
15

16
00:01:19,350 --> 00:01:26,640
or if we want to change the font weight. And you can see that the preview canvas on the right is automatically
16

17
00:01:26,730 --> 00:01:33,650
updating to show our code changes as and when they're made.
17

18
00:01:33,650 --> 00:01:42,620
Now, SwiftUI being a UI framework, one of its main goals was to make layouts much easier in iOS apps and
18

19
00:01:42,650 --> 00:01:48,170
we can do that through something called vertical horizontal and the Z axis stack.
19

20
00:01:48,770 --> 00:01:55,640
So, for example, you've already seen that we can simply drag on elements and drop them, either below to
20

21
00:01:55,640 --> 00:02:02,100
create a vertical stack or next to other elements to create a horizontal stack.
21

22
00:02:02,180 --> 00:02:09,170
And using these stacks, we can create pretty complex designs just through the use of these vertical and
22

23
00:02:09,170 --> 00:02:12,890
horizontal, almost like columns and rows if you will.
23

24
00:02:13,530 --> 00:02:20,190
And a lot of this has inspirations from the web design world where we're often using tools like bootstrap
24

25
00:02:20,190 --> 00:02:28,160
or other UI frameworks to be able to easily build out a complex and adaptive user interface.
25

26
00:02:28,170 --> 00:02:34,310
So, in this case, I'm actually going to use a Z Stack to stack elements on top of each other.
26

27
00:02:34,320 --> 00:02:40,830
So right now, I've got a purple background, and then I'm going to add a circle onto my stack and it's
27

28
00:02:40,830 --> 00:02:46,800
gonna go straight on top. And then I'm going to add a button which is also going to go on top in the
28

29
00:02:46,800 --> 00:02:47,870
z axis.
29

30
00:02:47,910 --> 00:02:54,540
So I've now got three layers of a purple background a black circle and a button right at the top.
30

31
00:02:54,720 --> 00:03:01,590
And you can see that the order is determined by which order these elements go into the Z Stack from
31

32
00:03:01,590 --> 00:03:08,880
top to bottom. Now, by creating swift code while we're designing our UI.
32

33
00:03:08,910 --> 00:03:14,120
It means that the user interfaces that we build become highly reusable.
33

34
00:03:14,220 --> 00:03:23,100
So, for example, here I've built a really simple layout of a horizontal stack which has an image of a
34

35
00:03:23,100 --> 00:03:31,020
book and I've sized it and changed its color. And then I've got a vertical stack inside the horizontal
35

36
00:03:31,020 --> 00:03:39,720
stack which has a title text as well as a sort of smaller author text. And I've arranged and added the
36

37
00:03:39,720 --> 00:03:43,910
attributes that I wanted to set up this particular appearance.
37

38
00:03:43,920 --> 00:03:52,320
Now, if I wanted to reuse this component that I've designed, all I have to do is simply command-click
38

39
00:03:52,410 --> 00:04:01,590
on each stack, and I can extract this as a subview. I can give that view a name. And now, I can add
39

40
00:04:01,650 --> 00:04:10,910
properties to that view to be able to set various components to use those properties. And when I initialize
40

41
00:04:10,910 --> 00:04:15,170
a new BookView, I can pass in a dynamic title.
41

42
00:04:15,170 --> 00:04:22,150
So, now if I wanted to build a bunch of these BookViews, I can just initialize a brand-new BookView,
42

43
00:04:22,440 --> 00:04:30,200
pass in the properties that are changeable or dynamic, and I end up with a whole bunch of these BookViews
43

44
00:04:30,200 --> 00:04:40,330
all stacked together on my screen. And I can go even one step further and change my V stack into
44

45
00:04:40,420 --> 00:04:44,370
a list view just by renaming it a list.
45

46
00:04:44,560 --> 00:04:50,110
And now all the components inside the list are going to be stacked into a table view.
46

47
00:04:51,080 --> 00:04:56,650
I can also change that into a form which creates a group sort of like interface.
47

48
00:04:56,650 --> 00:05:04,390
And just by changing these different components around and reusing these views I've created, I can create
48

49
00:05:04,420 --> 00:05:10,840
incredibly complex components, and I can simply copy and paste this code to be reused anywhere else where
49

50
00:05:10,840 --> 00:05:19,420
it's needed. Now, you've already seen that we can use the canvas preview to see as we make changes.
50

51
00:05:19,430 --> 00:05:22,390
For example, when we drag on new components,
51

52
00:05:22,400 --> 00:05:29,870
we can see these changes happen pretty much live on screen, and that happens when I'm dragging components
52

53
00:05:29,900 --> 00:05:34,810
onto the canvas or as I'm typing code in my content view.
53

54
00:05:35,390 --> 00:05:42,920
But what you might not know is that there's actually a live preview mode where once I'm done with my
54

55
00:05:42,920 --> 00:05:43,920
layouts.
55

56
00:05:43,940 --> 00:05:48,180
So in this case, I've got a VStack that's inside a ScrollView,
56

57
00:05:48,230 --> 00:05:57,310
so I've made it scrollable, and I've got a text component a text field, a Stepper, and a Picker.
57

58
00:05:57,410 --> 00:06:04,790
So all of those components are now live. And in my preview without having to run the app or use a simulator
58

59
00:06:04,820 --> 00:06:06,100
or use a device,
59

60
00:06:06,260 --> 00:06:12,970
I can already start testing out these components and the layouts as if it was running in a real device.
60

61
00:06:14,330 --> 00:06:14,660
Now,
61

62
00:06:14,660 --> 00:06:21,860
finally, one of the biggest reasons why Apple came out with SwiftUI is to make it easier to build cross
62

63
00:06:21,860 --> 00:06:24,350
platform user interfaces.
63

64
00:06:24,350 --> 00:06:31,400
Now, when I say cross platform, I don't mean fully cross platform, like a cross iOS or Android, but a cross
64

65
00:06:31,400 --> 00:06:33,270
the Apple platform.
65

66
00:06:33,290 --> 00:06:41,240
So this means that you can build the same app, say, for watch or for Mac,and still use all of these tools
66

67
00:06:41,270 --> 00:06:48,230
and SwiftUI to see how they look and create their layouts and reuse some of those subviews that you've
67

68
00:06:48,230 --> 00:06:52,340
created for your apps across different platforms.
68

69
00:06:52,580 --> 00:06:59,870
Now, not only is the UI more reusable across different Apple platforms, they've actually made it a lot
69

70
00:06:59,960 --> 00:07:08,240
easier for us to build our iOS apps, say, for iPhone or iPad, and turn it straight into a Mac app through
70

71
00:07:08,240 --> 00:07:10,700
something called Project Catalyst.
71

72
00:07:10,820 --> 00:07:17,120
Now, Project Catalyst basically allows us to build an iOS app like the demo that I created just now,
72

73
00:07:17,120 --> 00:07:24,200
and simply go into the Settings and check the Mac checkbox, so that it also works on Mac. And then, of course,
73

74
00:07:24,200 --> 00:07:31,490
you need a Apple developer account setup, and then if you run, your app will be run straight onto the
74

75
00:07:31,550 --> 00:07:38,640
Mac app, and you will be able to see it as a separate application running on your Mac.
75

76
00:07:38,780 --> 00:07:43,910
So, now that we've seen all the capabilities of SwiftUI, let's get some more hands-on practice and build
76

77
00:07:43,910 --> 00:07:46,550
an app using SwiftUI ourselves.
77

78
00:07:46,670 --> 00:07:53,510
Now, before we proceed you first have to make sure that you are running macOS Catalina version 10.5
78

79
00:07:53,510 --> 00:07:54,500
or above,
79

80
00:07:54,500 --> 00:08:00,920
ideally, the latest version that you can get on the App Store. And on top of that, you will need the latest
80

81
00:08:00,920 --> 00:08:02,420
version of Xcode.
81

82
00:08:02,480 --> 00:08:06,020
So at minimum, it's gonna be 11.0.
82

83
00:08:06,020 --> 00:08:12,470
The other thing to remember is that the apps built with SwiftUI can only run on a device that's running
83

84
00:08:12,470 --> 00:08:21,710
iOS 13, and the only devices that can actually update iOS 13 are iPhones 6S or later, as well as the iPhone SE,
84

85
00:08:21,770 --> 00:08:29,250
and on iPad, it's the iPad Air 2 or later, or the latest iPad mini 4.
85

86
00:08:29,300 --> 00:08:36,350
So this does mean that anybody with an older phone or who have an updated iOS 13 would not be able
86

87
00:08:36,350 --> 00:08:40,000
to download an app that's actually made with SwiftUI.
87

88
00:08:40,490 --> 00:08:48,530
So at the moment, SwiftUI is very much in sort of early adopter experimentation phase. And for the next
88

89
00:08:48,530 --> 00:08:52,750
two or three years, we're not going to see any serious apps built with it.
89

90
00:08:52,940 --> 00:08:58,970
But there's no better time to get a head start on everybody and have a play around with SwiftUI.