1 00:00:00,000 --> 00:00:00,360 2 00:00:00,360 --> 00:00:01,010 DAVID J. MALAN: Hello, everyone. 3 00:00:01,010 --> 00:00:02,924 Thanks so much for coming to a CS50 seminar. 4 00:00:02,924 --> 00:00:04,840 So we're here with our friend Charlie Cheever, 5 00:00:04,840 --> 00:00:09,060 who was a classmate a few years after me, class of 2003, who started off life 6 00:00:09,060 --> 00:00:12,630 here at Harvard, went on to Amazon, went on to Facebook, went on to Quora, 7 00:00:12,630 --> 00:00:15,225 and now is focusing on Exponent and developing 8 00:00:15,225 --> 00:00:18,350 JavaScript-based applications that work especially well for the mobile web. 9 00:00:18,350 --> 00:00:20,920 So as we dive into CS50's own final projects, 10 00:00:20,920 --> 00:00:24,290 this is particularly apt because the world is only getting better and better 11 00:00:24,290 --> 00:00:28,340 at actually developing mobile software and making it easier and easier, 12 00:00:28,340 --> 00:00:30,876 and it's in large part thanks to frameworks like this. 13 00:00:30,876 --> 00:00:32,250 So welcome to our friend Charlie. 14 00:00:32,250 --> 00:00:35,070 15 00:00:35,070 --> 00:00:38,348 [APPLAUSE] 16 00:00:38,348 --> 00:00:39,101 17 00:00:39,101 --> 00:00:40,100 CHARLIE CHEEVER: Thanks. 18 00:00:40,100 --> 00:00:41,342 Hi. 19 00:00:41,342 --> 00:00:42,863 I'm Charlie Cheever. 20 00:00:42,863 --> 00:00:45,290 And I'm going to talk to you about building 21 00:00:45,290 --> 00:00:48,310 native mobile apps in JavaScript. 22 00:00:48,310 --> 00:00:52,034 I think if you are a CS50 student and you have your final project coming up 23 00:00:52,034 --> 00:00:54,950 and you want to build a mobile app, this is probably a pretty good way 24 00:00:54,950 --> 00:00:57,074 to do it because you only have to learn JavaScript. 25 00:00:57,074 --> 00:01:02,952 But you can get really nice looking and feeling native applications this way. 26 00:01:02,952 --> 00:01:04,910 So I'm going to be talking about this product I 27 00:01:04,910 --> 00:01:06,200 work on called Exponent, which is built on top 28 00:01:06,200 --> 00:01:08,491 of something called React Native, which uses JavaScript 29 00:01:08,491 --> 00:01:14,110 for building mobile apps. 30 00:01:14,110 --> 00:01:18,280 A little about me-- I went to Harvard and was class of 2003. 31 00:01:18,280 --> 00:01:20,809 So I took CS50 in 1999. 32 00:01:20,809 --> 00:01:22,850 It was a little bit more about weeding people out 33 00:01:22,850 --> 00:01:27,080 than being the biggest class and teaching people stuff then. 34 00:01:27,080 --> 00:01:28,740 But it was still fun. 35 00:01:28,740 --> 00:01:29,840 I was a CS concentrator. 36 00:01:29,840 --> 00:01:33,770 After I graduated, I got a job working as a programmer at Amazon. 37 00:01:33,770 --> 00:01:35,610 I did that for about two and a half years, 38 00:01:35,610 --> 00:01:40,010 and then I went to Facebook in 2006 and worked on a whole bunch of stuff 39 00:01:40,010 --> 00:01:45,130 there and left in middle of 2009 and started Quora, which 40 00:01:45,130 --> 00:01:46,960 is like a question-answer service. 41 00:01:46,960 --> 00:01:51,290 And then I left that a few years ago and started 42 00:01:51,290 --> 00:01:54,850 working on this project, which basically came out 43 00:01:54,850 --> 00:01:58,980 of-- I was working on our mobile apps at Quora, 44 00:01:58,980 --> 00:02:00,980 and there were all these problems building them. 45 00:02:00,980 --> 00:02:03,650 And I wanted to make that better. 46 00:02:03,650 --> 00:02:06,050 So let me give you a brief history of mobile development, 47 00:02:06,050 --> 00:02:09,620 just so how we ended up in the current state of the world. 48 00:02:09,620 --> 00:02:12,630 49 00:02:12,630 --> 00:02:14,770 Back in 2007, the iPhone came out. 50 00:02:14,770 --> 00:02:17,420 And when it came out, you couldn't really build apps on it. 51 00:02:17,420 --> 00:02:20,054 All you could do is build websites. 52 00:02:20,054 --> 00:02:22,720 And most people didn't build special websites for it right away. 53 00:02:22,720 --> 00:02:27,060 So even in this screenshot, you can see that this is basically 54 00:02:27,060 --> 00:02:28,810 the desktop website of the New York Times. 55 00:02:28,810 --> 00:02:29,910 And so it's cut off. 56 00:02:29,910 --> 00:02:33,820 And you're going to have to do a lot of pinch to zoom and scrolling around 57 00:02:33,820 --> 00:02:35,470 and stuff to see everything. 58 00:02:35,470 --> 00:02:38,260 But this was the main way people kind of used everything 59 00:02:38,260 --> 00:02:42,279 that wasn't built into the iPhone, was you just went to a website. 60 00:02:42,279 --> 00:02:44,070 If you look at this plus button here, there 61 00:02:44,070 --> 00:02:46,872 was a way you could sort of store a website to your home screen 62 00:02:46,872 --> 00:02:47,830 and use stuff that way. 63 00:02:47,830 --> 00:02:50,340 But no one ever really did that. 64 00:02:50,340 --> 00:02:55,640 And so that didn't work that well for developers. 65 00:02:55,640 --> 00:03:00,589 So then in 2008, Apple, with sort of the iOS 2.0 release, 66 00:03:00,589 --> 00:03:02,880 made a way that you could build native apps for iPhone. 67 00:03:02,880 --> 00:03:05,269 And you used Xcode, and you wrote Objective-C. 68 00:03:05,269 --> 00:03:07,060 And you could submit them to the App Store. 69 00:03:07,060 --> 00:03:09,561 And after two weeks, they would maybe get approved by Apple, 70 00:03:09,561 --> 00:03:11,685 and they would show up in the app store, and people 71 00:03:11,685 --> 00:03:12,972 could download them that way. 72 00:03:12,972 --> 00:03:14,680 And then when Android came out, you could 73 00:03:14,680 --> 00:03:17,200 use Java to basically do the same thing on Android. 74 00:03:17,200 --> 00:03:19,830 You could write an app in Java, and then submit to Google, 75 00:03:19,830 --> 00:03:24,060 and they'd distribute it in the Play Store. 76 00:03:24,060 --> 00:03:26,510 So there were a bunch of challenges with this, though. 77 00:03:26,510 --> 00:03:29,780 And I think at the highest level, what basically 78 00:03:29,780 --> 00:03:33,200 happened is all this progress that we made with the web in terms 79 00:03:33,200 --> 00:03:37,770 of making development go faster and be easier and more accessible to everyone, 80 00:03:37,770 --> 00:03:43,506 we kind of went back in time to, like, 1993, before the web was invented, 81 00:03:43,506 --> 00:03:44,380 with this native app. 82 00:03:44,380 --> 00:03:48,100 So you basically were writing this native code, 83 00:03:48,100 --> 00:03:50,260 but you were managing your memory manually. 84 00:03:50,260 --> 00:03:52,940 So you're worrying about allocating and deallocating things. 85 00:03:52,940 --> 00:03:54,273 That's gotten better since then. 86 00:03:54,273 --> 00:03:56,966 But it was still a thing you had to worry about at this time. 87 00:03:56,966 --> 00:03:59,590 And then the biggest thing is when you started making your app, 88 00:03:59,590 --> 00:04:02,600 if you made it one screen, it would kind of take you just a few seconds 89 00:04:02,600 --> 00:04:05,180 to compile and then not too long to copy over to the device, 90 00:04:05,180 --> 00:04:06,190 and it would work fine. 91 00:04:06,190 --> 00:04:09,550 But then as you added a second screen, a third screen, and then 92 00:04:09,550 --> 00:04:12,890 more abstractions and libraries to help you 93 00:04:12,890 --> 00:04:16,090 reason about your code your writing, and your app 94 00:04:16,090 --> 00:04:17,930 kept getting bigger and bigger, every time 95 00:04:17,930 --> 00:04:22,770 you made a small change to your app, rebuilding it would take minutes. 96 00:04:22,770 --> 00:04:26,660 About a year or two ago, somebody who works at Facebook on the mobile app 97 00:04:26,660 --> 00:04:30,600 there told me that building the iPhone app takes 45 minutes there. 98 00:04:30,600 --> 00:04:34,080 So if you change something there and you want to build it, 99 00:04:34,080 --> 00:04:35,860 you wait 45 minutes before it's done. 100 00:04:35,860 --> 00:04:39,030 And they have specialized hardware and build farms and stuff. 101 00:04:39,030 --> 00:04:41,409 And they have ways of just working on pieces of it, 102 00:04:41,409 --> 00:04:42,700 and then combine them together. 103 00:04:42,700 --> 00:04:45,417 But nonetheless, it's a big challenge that you 104 00:04:45,417 --> 00:04:47,500 have to manage as your app gets bigger and bigger. 105 00:04:47,500 --> 00:04:51,040 So dealing with anything complex is really hard and really gnarly. 106 00:04:51,040 --> 00:04:53,080 It's also hard to reuse anyone else's code. 107 00:04:53,080 --> 00:04:55,730 108 00:04:55,730 --> 00:04:59,410 The libraries that people distribute that get 109 00:04:59,410 --> 00:05:01,940 included in Xcode projects and Android Studio projects, 110 00:05:01,940 --> 00:05:02,810 they tend to be really bulky. 111 00:05:02,810 --> 00:05:04,601 And so you can't include that many of them. 112 00:05:04,601 --> 00:05:09,320 So you might include one networking library or one UI library or something. 113 00:05:09,320 --> 00:05:12,070 But it's really hard to just willy-nilly include 114 00:05:12,070 --> 00:05:17,290 a library here, a library there, and reuse lots of pieces of stuff. 115 00:05:17,290 --> 00:05:21,680 Another thing that-- it's hard to understand this if you've ever done 116 00:05:21,680 --> 00:05:24,330 websites or done any kind of modern programming. 117 00:05:24,330 --> 00:05:27,150 But the way that you would do layout with this stuff 118 00:05:27,150 --> 00:05:28,650 is you would do a lot of arithmetic. 119 00:05:28,650 --> 00:05:31,790 So you'd sort of say, I want a box here. 120 00:05:31,790 --> 00:05:33,300 And then I want something inside it. 121 00:05:33,300 --> 00:05:36,920 So x plus 10, comma, y plus 10. 122 00:05:36,920 --> 00:05:39,804 And then by the time you start to get a complex layout that 123 00:05:39,804 --> 00:05:41,970 was sort of a thing inside of a thing that's nested, 124 00:05:41,970 --> 00:05:44,845 and there's a scroll view, and then there's a keyboard that comes up, 125 00:05:44,845 --> 00:05:46,870 you have lots and lots of math that you're 126 00:05:46,870 --> 00:05:48,886 doing manually to compute layout. 127 00:05:48,886 --> 00:05:51,760 And so people have come up with ways to make this a little bit better 128 00:05:51,760 --> 00:05:52,842 over time. 129 00:05:52,842 --> 00:05:56,380 But it's also gotten harder because when mobile phones first came out, 130 00:05:56,380 --> 00:05:57,900 everything was the same screen size. 131 00:05:57,900 --> 00:06:00,730 There was one iPhone, and it was a certain size. 132 00:06:00,730 --> 00:06:02,900 And if you just built for that, you were fine. 133 00:06:02,900 --> 00:06:04,900 But now, there's all kinds of different iPhones, 134 00:06:04,900 --> 00:06:08,210 and there's almost infinity different Android sizes. 135 00:06:08,210 --> 00:06:11,200 So worrying about that, it's unreasonable to worry 136 00:06:11,200 --> 00:06:14,990 about this in a generalized way. 137 00:06:14,990 --> 00:06:18,880 And then once Android got popular and the market 138 00:06:18,880 --> 00:06:20,850 was split between iPhone and Android, you 139 00:06:20,850 --> 00:06:23,617 had this world where if you built an iPhone app, then 140 00:06:23,617 --> 00:06:24,950 you had to build an Android app. 141 00:06:24,950 --> 00:06:26,730 But you had two separate code bases. 142 00:06:26,730 --> 00:06:31,040 And so that was actually, in some ways, the biggest problem because then you 143 00:06:31,040 --> 00:06:34,590 had this ongoing maintenance nightmare, where if you want to add a new feature, 144 00:06:34,590 --> 00:06:36,130 you're doing twice the work. 145 00:06:36,130 --> 00:06:39,930 And in practice, at most companies, the Android team 146 00:06:39,930 --> 00:06:44,150 ends up being like-- they have no creativity or anything like. 147 00:06:44,150 --> 00:06:47,010 Their assignment is whatever the iPhone team does, just copy them. 148 00:06:47,010 --> 00:06:49,410 And then it's just a really boring job that no one wants to do. 149 00:06:49,410 --> 00:06:51,284 It's hard to get good people and retain them. 150 00:06:51,284 --> 00:06:53,010 And it's expensive. 151 00:06:53,010 --> 00:06:56,120 And so there's a lot of problems with that. 152 00:06:56,120 --> 00:06:58,530 So then dealing with all the frustrations of this, 153 00:06:58,530 --> 00:07:00,488 people decided, oh, there must be a better way. 154 00:07:00,488 --> 00:07:02,220 We can't deal with all these things. 155 00:07:02,220 --> 00:07:03,250 What can we do? 156 00:07:03,250 --> 00:07:06,752 So then smart people scratched their head and said, hey, wait a second. 157 00:07:06,752 --> 00:07:08,710 All these phones are coming with a web browser. 158 00:07:08,710 --> 00:07:11,440 We can embed a web view inside our apps. 159 00:07:11,440 --> 00:07:12,950 Web code we can write at once. 160 00:07:12,950 --> 00:07:14,054 It'll run anywhere. 161 00:07:14,054 --> 00:07:16,220 All of our developers are used to writing web stuff. 162 00:07:16,220 --> 00:07:19,010 We're familiar with HTML, JavaScript, CSS, stuff like that. 163 00:07:19,010 --> 00:07:21,350 And then maybe we can wrap stuff in native. 164 00:07:21,350 --> 00:07:23,229 So people made libraries to do this better. 165 00:07:23,229 --> 00:07:25,270 The most popular one is probably called PhoneGap, 166 00:07:25,270 --> 00:07:26,430 then it got renamed to Cordova. 167 00:07:26,430 --> 00:07:28,430 And then people built this thing called Ionic 168 00:07:28,430 --> 00:07:30,856 on top of that that's pretty good. 169 00:07:30,856 --> 00:07:37,650 That's the way a lot of apps are built. And the advantages are pretty obvious. 170 00:07:37,650 --> 00:07:38,780 You write code once. 171 00:07:38,780 --> 00:07:42,210 It's familiar-- because it's web stuff-- if you're a developer. 172 00:07:42,210 --> 00:07:45,670 And then it kind of works on both platforms. 173 00:07:45,670 --> 00:07:51,980 The problems are that the look and feel is never quite right. 174 00:07:51,980 --> 00:07:54,102 If you use mobile websites, you kind of know 175 00:07:54,102 --> 00:07:55,810 that they always feel a little bit janky, 176 00:07:55,810 --> 00:07:59,080 and you're trying to scroll or drag something around. 177 00:07:59,080 --> 00:08:02,780 And it just jerks or snaps to your finger. 178 00:08:02,780 --> 00:08:05,180 And the way the scrolling feels isn't quite right. 179 00:08:05,180 --> 00:08:10,390 And just gestures and animations, in particular, just aren't right. 180 00:08:10,390 --> 00:08:14,400 And then also, performance just tends to be subpar. 181 00:08:14,400 --> 00:08:17,140 And I don't know exactly why that is. 182 00:08:17,140 --> 00:08:22,170 But every company that I talked to from 2009 to 2012 that had a native app 183 00:08:22,170 --> 00:08:25,240 and was trying to do a hybrid app like this, 184 00:08:25,240 --> 00:08:28,140 they found that all of their metrics around engagement and people 185 00:08:28,140 --> 00:08:30,310 using their app would go down when they launched 186 00:08:30,310 --> 00:08:34,370 this web-based thing because for whatever reason, 187 00:08:34,370 --> 00:08:36,508 it just wasn't as fast and as snappy. 188 00:08:36,508 --> 00:08:38,299 And then people would kind of lose interest 189 00:08:38,299 --> 00:08:40,309 and go on to doing other things. 190 00:08:40,309 --> 00:08:42,600 The other thing that's hard about it is a lot of things 191 00:08:42,600 --> 00:08:45,700 that were really great on these phones were that you had a camera 192 00:08:45,700 --> 00:08:48,345 and you could be taking pictures with it. 193 00:08:48,345 --> 00:08:51,950 And they had sort of mapping capabilities and stuff like that. 194 00:08:51,950 --> 00:08:56,550 And it's really hard to integrate those directly into a web view. 195 00:08:56,550 --> 00:08:59,430 And so what most people who built hybrid apps would do 196 00:08:59,430 --> 00:09:03,944 is if you had a camera function, it would be in its own separate screen, 197 00:09:03,944 --> 00:09:05,360 separate from the rest of the app. 198 00:09:05,360 --> 00:09:08,630 And if you had some sort of maps thing, they'd build that in Native separately. 199 00:09:08,630 --> 00:09:11,421 And so you'd kind of end up building all the hard parts of your app 200 00:09:11,421 --> 00:09:14,840 in sort of the native way, which is OK. 201 00:09:14,840 --> 00:09:17,287 But you don't get the seamless experience. 202 00:09:17,287 --> 00:09:19,870 You kind of get this experience where you have some web stuff, 203 00:09:19,870 --> 00:09:22,369 and then you have one screen that's either a camera or a map 204 00:09:22,369 --> 00:09:25,040 or something like that. 205 00:09:25,040 --> 00:09:27,470 So this was really popular for a while. 206 00:09:27,470 --> 00:09:31,660 But then a lot of people started to realize 207 00:09:31,660 --> 00:09:36,510 that there were all these downsides to it, especially in terms of performance. 208 00:09:36,510 --> 00:09:38,720 And so I think Facebook made this big announcement 209 00:09:38,720 --> 00:09:40,320 that they were moving away from it. 210 00:09:40,320 --> 00:09:43,490 I think Mark Zuckerberg said this quote that I put here-- 211 00:09:43,490 --> 00:09:47,340 "Betting completely on HTML5 is one of, if not the biggest strategic mistake we 212 00:09:47,340 --> 00:09:48,710 ever made." 213 00:09:48,710 --> 00:09:51,380 And that really turned the tide away from people 214 00:09:51,380 --> 00:09:56,540 who are serious and thinking they were building real mobile apps. 215 00:09:56,540 --> 00:10:01,122 It pushed them all back into doing native stuff, for the most part. 216 00:10:01,122 --> 00:10:03,830 But I just talked about all the problems with doing native stuff. 217 00:10:03,830 --> 00:10:07,020 And so where do we go from here? 218 00:10:07,020 --> 00:10:09,524 219 00:10:09,524 --> 00:10:11,190 There's a couple ideas that people have. 220 00:10:11,190 --> 00:10:13,580 And one is there's a lot of people who think that the web browser is going 221 00:10:13,580 --> 00:10:15,480 to get a lot better and be really good. 222 00:10:15,480 --> 00:10:18,970 And there's a bunch of smart people at Google working on this. 223 00:10:18,970 --> 00:10:23,514 And there's people working on this at Apple and other things. 224 00:10:23,514 --> 00:10:24,680 And they are getting better. 225 00:10:24,680 --> 00:10:27,870 Phones are getting faster, too, which means that even slow web browsers are 226 00:10:27,870 --> 00:10:32,670 faster when they're running on super fast iPhone 7's. 227 00:10:32,670 --> 00:10:37,560 And there's some reasons to think that this will happen. 228 00:10:37,560 --> 00:10:42,800 I saw when Vine shut down yesterday, some guy at Google said, 229 00:10:42,800 --> 00:10:46,790 oh, I spent one hour hacking and made almost a complete clone of Vine 230 00:10:46,790 --> 00:10:51,190 using progressive web app technology. 231 00:10:51,190 --> 00:10:54,110 And then I tried to open it on my phone, and I got this error message 232 00:10:54,110 --> 00:10:57,220 that MediaRecorder is not supported by this browser. 233 00:10:57,220 --> 00:10:58,330 Try a different version. 234 00:10:58,330 --> 00:11:02,850 And that just kind of demonstrates a lot of the problems with this approach. 235 00:11:02,850 --> 00:11:05,284 One, there's all these different browser vendors. 236 00:11:05,284 --> 00:11:07,200 And so this technology can't move forward that 237 00:11:07,200 --> 00:11:10,283 fast because you're kind of waiting for a standards body to approve stuff, 238 00:11:10,283 --> 00:11:12,730 and then for all the different vendors to implement it. 239 00:11:12,730 --> 00:11:15,700 And so you're always kind of using the lowest common denominator, which 240 00:11:15,700 --> 00:11:18,420 moves really, really slowly. 241 00:11:18,420 --> 00:11:20,980 It's still, you can't reliably play video inline 242 00:11:20,980 --> 00:11:23,580 across all different web browsers. 243 00:11:23,580 --> 00:11:25,900 And so this feels like it's a real long-term thing. 244 00:11:25,900 --> 00:11:28,440 245 00:11:28,440 --> 00:11:30,580 There's also something where progressive web 246 00:11:30,580 --> 00:11:34,730 apps tend to try to download pieces of themselves piece by piece. 247 00:11:34,730 --> 00:11:37,525 So it'll download just what you need to get started. 248 00:11:37,525 --> 00:11:40,400 And then as you go navigate to different screens and stuff like that, 249 00:11:40,400 --> 00:11:43,109 it'll just download the code for those. 250 00:11:43,109 --> 00:11:44,900 And that makes a lot of sense in some ways. 251 00:11:44,900 --> 00:11:46,640 But in practice, a lot of people have found 252 00:11:46,640 --> 00:11:49,056 that if you're in places with spotty internet connections, 253 00:11:49,056 --> 00:11:51,560 it actually doesn't work very well because when you actually 254 00:11:51,560 --> 00:11:54,810 have to download more than just a tiny bit of data 255 00:11:54,810 --> 00:11:58,350 to actually get functionality in an app, the trade-off isn't worth it. 256 00:11:58,350 --> 00:12:01,100 And you'll get a more reliable app if you just download everything 257 00:12:01,100 --> 00:12:04,634 up front, and then just download the minimum amount of data 258 00:12:04,634 --> 00:12:06,800 necessary to sort of fill in what an application is, 259 00:12:06,800 --> 00:12:09,580 like the messages in iMessage or something like that, 260 00:12:09,580 --> 00:12:14,095 instead of downloading all the scaffolding for a screen. 261 00:12:14,095 --> 00:12:15,970 There was a company in India called Flipkart, 262 00:12:15,970 --> 00:12:17,720 which is sort of like the Amazon of India, 263 00:12:17,720 --> 00:12:21,050 although I guess Amazon is becoming the Amazon of India now. 264 00:12:21,050 --> 00:12:24,941 But they notably, a few years ago, decided 265 00:12:24,941 --> 00:12:27,440 they were going to switch entirely to a progressive web app. 266 00:12:27,440 --> 00:12:29,590 And they spent a lot of effort making it really, 267 00:12:29,590 --> 00:12:31,650 really good and being best in class. 268 00:12:31,650 --> 00:12:33,509 And then about six months ago, I think, they 269 00:12:33,509 --> 00:12:36,800 announced that they were switching back to doing a native app because they just 270 00:12:36,800 --> 00:12:40,130 weren't getting the results that they wanted. 271 00:12:40,130 --> 00:12:42,460 So there's problems with that. 272 00:12:42,460 --> 00:12:45,460 The other approach that people were taking is sort of going pure native 273 00:12:45,460 --> 00:12:47,590 and writing Objective-C or Swift. 274 00:12:47,590 --> 00:12:49,002 And that's getting better. 275 00:12:49,002 --> 00:12:50,210 Swift is a cool new language. 276 00:12:50,210 --> 00:12:53,090 It has a lot of nice features. 277 00:12:53,090 --> 00:12:55,770 Google keeps making the Android Java development 278 00:12:55,770 --> 00:12:59,250 experience better and more reasonable. 279 00:12:59,250 --> 00:13:02,270 But there's still just really big, fundamental problems, 280 00:13:02,270 --> 00:13:05,590 I think the biggest of which, in addition to all the ones I mentioned 281 00:13:05,590 --> 00:13:09,430 before, is that if you're trying to organize a team to build something, 282 00:13:09,430 --> 00:13:14,450 from a product perspective, you want to take a feature-- like, say, oh, 283 00:13:14,450 --> 00:13:16,680 here's like the profile screen. 284 00:13:16,680 --> 00:13:19,520 And you want to say, hey, here's a small group of people. 285 00:13:19,520 --> 00:13:21,280 That's your thing. 286 00:13:21,280 --> 00:13:25,010 Designer, engineer, product manager, or maybe another engineer-- go build that. 287 00:13:25,010 --> 00:13:26,350 Figure out what it needs to be. 288 00:13:26,350 --> 00:13:27,266 Talk to everyone else. 289 00:13:27,266 --> 00:13:28,000 Get buy-in. 290 00:13:28,000 --> 00:13:29,480 And then execute on it. 291 00:13:29,480 --> 00:13:32,550 But when you have a really deep stack on iPhone 292 00:13:32,550 --> 00:13:35,050 and then a really deep stack on Android, it's 293 00:13:35,050 --> 00:13:38,140 really unreasonable to expect lots of small teams to know that, 294 00:13:38,140 --> 00:13:41,615 especially when those stacks change pretty quickly. 295 00:13:41,615 --> 00:13:42,490 Swift just came out. 296 00:13:42,490 --> 00:13:44,030 So all those people who knew Objective-C, now they're like, 297 00:13:44,030 --> 00:13:45,071 so I have to learn Swift. 298 00:13:45,071 --> 00:13:47,380 Oh, there's all these new API coming out in iOS 10. 299 00:13:47,380 --> 00:13:48,620 Do I have to learn those? 300 00:13:48,620 --> 00:13:50,110 And so it's not a static thing. 301 00:13:50,110 --> 00:13:52,901 There's actually a bunch of work you have to do on an ongoing basis 302 00:13:52,901 --> 00:13:56,550 to stay an iPhone expert or an Android development expert. 303 00:13:56,550 --> 00:13:59,810 So from a technical perspective, you pretty much 304 00:13:59,810 --> 00:14:03,580 have to organize your team by iPhone team, Android team. 305 00:14:03,580 --> 00:14:06,075 But then you lose that organization by product feature. 306 00:14:06,075 --> 00:14:07,950 And so then you end up having to have someone 307 00:14:07,950 --> 00:14:10,630 spec out exactly what the profile screen is going to look like, 308 00:14:10,630 --> 00:14:13,700 and then hand those specs to your iPhone team and your Android team. 309 00:14:13,700 --> 00:14:18,045 And that makes that loop of, hey, OK. 310 00:14:18,045 --> 00:14:19,670 We built this, and now we're trying it. 311 00:14:19,670 --> 00:14:20,712 Oh, people don't like it. 312 00:14:20,712 --> 00:14:22,419 We need to change this and this and this. 313 00:14:22,419 --> 00:14:23,800 It makes that loop a lot longer. 314 00:14:23,800 --> 00:14:26,647 And so products take longer to develop, and they're not as good. 315 00:14:26,647 --> 00:14:28,980 And so there's really a bunch of organizational problems 316 00:14:28,980 --> 00:14:30,938 that come from just the fact they you're trying 317 00:14:30,938 --> 00:14:33,870 to develop in these two totally separate stacks. 318 00:14:33,870 --> 00:14:35,800 So that's not great. 319 00:14:35,800 --> 00:14:37,220 So is there a solution? 320 00:14:37,220 --> 00:14:37,970 Somebody's got it. 321 00:14:37,970 --> 00:14:39,180 There's so many smart people in the world. 322 00:14:39,180 --> 00:14:40,060 This is such a big problem. 323 00:14:40,060 --> 00:14:41,559 Everyone's gonna have mobile phones. 324 00:14:41,559 --> 00:14:43,700 How do we go forward? 325 00:14:43,700 --> 00:14:46,820 So I think the most promising thing on the horizon right 326 00:14:46,820 --> 00:14:48,370 now is-- not even on the horizon. 327 00:14:48,370 --> 00:14:49,390 It's here now. 328 00:14:49,390 --> 00:14:52,450 It is called React Native. 329 00:14:52,450 --> 00:14:56,420 Facebook announced this at a conference in 2015. 330 00:14:56,420 --> 00:14:59,880 And I think within two days, it had 35,000 stars on GitHub. 331 00:14:59,880 --> 00:15:01,970 I think it has 40,000 now. 332 00:15:01,970 --> 00:15:05,750 So people are really excited about it. 333 00:15:05,750 --> 00:15:08,790 And it basically works where it lets you write 334 00:15:08,790 --> 00:15:14,270 your UI in JavaScript, but instead of generating web stuff, which 335 00:15:14,270 --> 00:15:16,020 has all these performance problems, you're 336 00:15:16,020 --> 00:15:22,490 actually generating the native UI views, like UIKit in iOS or Android Fragment 337 00:15:22,490 --> 00:15:25,120 activities and stuff and views on Android. 338 00:15:25,120 --> 00:15:28,600 So the way that apps look and feel and perform 339 00:15:28,600 --> 00:15:31,225 is just like if you're writing in pure native, 340 00:15:31,225 --> 00:15:33,100 but the development experience is that you're 341 00:15:33,100 --> 00:15:38,890 writing mostly one single UI code base and getting the same result on both. 342 00:15:38,890 --> 00:15:41,950 And so you can develop much more quickly, 343 00:15:41,950 --> 00:15:44,960 and you can kind of work mostly in one codebase 344 00:15:44,960 --> 00:15:47,946 but get a lot of the same benefits. 345 00:15:47,946 --> 00:15:49,820 The way this works is it's a library that you 346 00:15:49,820 --> 00:15:54,580 can include in an Xcode project or an Android Studio project. 347 00:15:54,580 --> 00:15:57,810 And you can also integrate directly with native views. 348 00:15:57,810 --> 00:16:00,780 So if you wanted to include a map or a live camera view 349 00:16:00,780 --> 00:16:04,260 or do something like a Snapchat filter, you could write native code 350 00:16:04,260 --> 00:16:07,029 and have it integrate seamlessly with the rest of your app 351 00:16:07,029 --> 00:16:08,445 that you're writing in JavaScript. 352 00:16:08,445 --> 00:16:12,040 So it's pretty cool. 353 00:16:12,040 --> 00:16:17,690 And it actually in some ways can be more performant than traditional native 354 00:16:17,690 --> 00:16:22,010 because naturally, the way that it's organized 355 00:16:22,010 --> 00:16:26,090 is that you run the JS VM for this stuff in a separate thread, 356 00:16:26,090 --> 00:16:29,540 often in another core because mobile devices are typically multi-core 357 00:16:29,540 --> 00:16:31,440 these days. 358 00:16:31,440 --> 00:16:33,610 And that sends commands over to the main UI thread, 359 00:16:33,610 --> 00:16:37,880 like, put a view here that has a red border that's two pixels wide 360 00:16:37,880 --> 00:16:39,320 and has a green background. 361 00:16:39,320 --> 00:16:45,150 And so the main UI thread is only responsible for drawing 362 00:16:45,150 --> 00:16:49,000 the results of these commands, not doing the logic of figuring 363 00:16:49,000 --> 00:16:52,820 everything else out that's happening in your JavaScript on another thread. 364 00:16:52,820 --> 00:16:56,025 So you're utilizing more cores of the device. 365 00:16:56,025 --> 00:16:58,150 And you can sometimes get more performant behavior. 366 00:16:58,150 --> 00:16:58,890 Not always. 367 00:16:58,890 --> 00:17:03,335 Sometimes you can write slow JS, and then that hold things up. 368 00:17:03,335 --> 00:17:05,710 But in theory, you can actually make this more performant 369 00:17:05,710 --> 00:17:09,619 than most traditional native apps. 370 00:17:09,619 --> 00:17:15,710 So just to talk more about what this is-- why is it called React Native? 371 00:17:15,710 --> 00:17:19,160 And the answer is because it uses React, which is this thing that 372 00:17:19,160 --> 00:17:22,326 was developed for the web, actually. 373 00:17:22,326 --> 00:17:25,200 And it's a JavaScript library that I'll talk a little bit about, just 374 00:17:25,200 --> 00:17:28,730 to give you a sense of what this is. 375 00:17:28,730 --> 00:17:31,860 So this is what React code looks like. 376 00:17:31,860 --> 00:17:35,650 If you're familiar with HTML or XML, it looks a lot like that. 377 00:17:35,650 --> 00:17:38,200 You can see there's these angle brackets. 378 00:17:38,200 --> 00:17:44,150 And then there's the slash in closing tags. 379 00:17:44,150 --> 00:17:47,340 And basically, every time you're doing that, that's a component. 380 00:17:47,340 --> 00:17:54,400 And the most basic building block of React Native components is views. 381 00:17:54,400 --> 00:17:58,230 So you can see this example code has a ton of them. 382 00:17:58,230 --> 00:18:01,010 But then you can also build your own on top of that. 383 00:18:01,010 --> 00:18:04,000 So this ReadMore component here, this BoldText component here-- 384 00:18:04,000 --> 00:18:07,500 those are built by developers or users. 385 00:18:07,500 --> 00:18:12,680 And then you can kind of layer these abstractions on top of each other. 386 00:18:12,680 --> 00:18:17,510 And the ideas behind React are that, basically, components 387 00:18:17,510 --> 00:18:20,630 should be sort of coherent and composable and reusable. 388 00:18:20,630 --> 00:18:23,840 So if someone builds a React component, you 389 00:18:23,840 --> 00:18:27,190 should be able to sort of stick it in your app, 390 00:18:27,190 --> 00:18:30,340 and it should behave and look and feel the same way as it 391 00:18:30,340 --> 00:18:32,490 was when they originally built it. 392 00:18:32,490 --> 00:18:36,610 So the really nice thing about that is that this maps really well to the way 393 00:18:36,610 --> 00:18:40,980 that people think about applications as they build them. 394 00:18:40,980 --> 00:18:46,170 If I handed you an app on my phone-- say, iMessage-- and said, 395 00:18:46,170 --> 00:18:48,210 can you describe to me what you see here? 396 00:18:48,210 --> 00:18:50,940 You would probably say, oh, well, I see one message that's 397 00:18:50,940 --> 00:18:53,250 a blue bubble coming in from the left. 398 00:18:53,250 --> 00:18:55,150 And then it has some text inside it. 399 00:18:55,150 --> 00:18:58,090 And then I see a white bubble coming in from the right. 400 00:18:58,090 --> 00:18:59,890 And then it has some other text in it. 401 00:18:59,890 --> 00:19:03,090 And each of those layers of the things you're describing 402 00:19:03,090 --> 00:19:07,740 would basically be React components inside a React native app. 403 00:19:07,740 --> 00:19:11,860 And so there's something that's just very intuitive about building 404 00:19:11,860 --> 00:19:15,391 in this way, where there's this analogy between the way 405 00:19:15,391 --> 00:19:17,640 that you think about them as a human being and the way 406 00:19:17,640 --> 00:19:18,848 that you're writing the code. 407 00:19:18,848 --> 00:19:21,320 408 00:19:21,320 --> 00:19:24,630 The cool thing about React, though, is that if you 409 00:19:24,630 --> 00:19:29,990 look at this thing here-- every React component, 410 00:19:29,990 --> 00:19:35,330 the most important method on a React component class is the render method. 411 00:19:35,330 --> 00:19:38,660 And what that is is basically, it's a function 412 00:19:38,660 --> 00:19:43,860 that describes given a state and some properties, 413 00:19:43,860 --> 00:19:46,720 how do I draw this on the screen? 414 00:19:46,720 --> 00:19:50,440 And it's really important that it's a function. 415 00:19:50,440 --> 00:19:54,400 And so it means that when you write this render function, 416 00:19:54,400 --> 00:19:57,450 you write it in a way that is general for every possible state 417 00:19:57,450 --> 00:19:58,500 of the component. 418 00:19:58,500 --> 00:20:03,480 So that means that if the state changes, you still 419 00:20:03,480 --> 00:20:05,330 know how to draw it from scratch. 420 00:20:05,330 --> 00:20:09,960 And so no matter what state the component is, you can always redraw it. 421 00:20:09,960 --> 00:20:12,630 422 00:20:12,630 --> 00:20:15,350 I think I got a little lost there, but let 423 00:20:15,350 --> 00:20:17,155 me use an analogy to help with this. 424 00:20:17,155 --> 00:20:24,270 So the original place that this idea came from was, I think, in graphics. 425 00:20:24,270 --> 00:20:26,520 So this is how video games evolved. 426 00:20:26,520 --> 00:20:30,920 This is a really early video game called Nibbles, where there's basically 427 00:20:30,920 --> 00:20:34,550 a snake that you control with the arrow keys and move it around the screen. 428 00:20:34,550 --> 00:20:36,810 And it picks up numbers, and it gets longer. 429 00:20:36,810 --> 00:20:40,230 And so the snake is really easy to animate because every time it 430 00:20:40,230 --> 00:20:44,540 moves, the head is just-- you draw one more dot on the screen, 431 00:20:44,540 --> 00:20:46,180 and then you just erase the tail. 432 00:20:46,180 --> 00:20:48,600 So it's pretty easy to do this manually. 433 00:20:48,600 --> 00:20:51,830 You just keep track of all the places where the snake is, 434 00:20:51,830 --> 00:20:54,070 and then you just add a new one where he's going. 435 00:20:54,070 --> 00:20:57,720 And then your erase the last where he's gone. 436 00:20:57,720 --> 00:21:00,690 And so writing games like this was really 437 00:21:00,690 --> 00:21:03,350 easy to do in pretty much any way. 438 00:21:03,350 --> 00:21:05,580 Kids could figure it out. 439 00:21:05,580 --> 00:21:07,445 But then this is a modern video game. 440 00:21:07,445 --> 00:21:09,712 I think is Uncharted 4. 441 00:21:09,712 --> 00:21:13,620 And it's really hard. 442 00:21:13,620 --> 00:21:17,590 Here, you can sort of break down, oh, I can see how I might draw this snake. 443 00:21:17,590 --> 00:21:19,340 There's so many things going on here, it's 444 00:21:19,340 --> 00:21:23,310 totally unreasonable to even figure out how you would draw this on the screen. 445 00:21:23,310 --> 00:21:25,800 And then if you think about modern video games, probably 446 00:21:25,800 --> 00:21:27,440 what's going to happen in the next second in this game 447 00:21:27,440 --> 00:21:28,880 is the camera's going to swing around here, 448 00:21:28,880 --> 00:21:30,650 and we're going to be looking at this from a totally different angle. 449 00:21:30,650 --> 00:21:33,608 And almost every pixel on this screen is going to be a different color. 450 00:21:33,608 --> 00:21:38,140 So the only reasonable way to approach this is to say, 451 00:21:38,140 --> 00:21:41,420 hey, I need to have some sort of abstract state of the world, 452 00:21:41,420 --> 00:21:44,800 that I know that this character is here, and his arm is out. 453 00:21:44,800 --> 00:21:46,154 And his other arm is back. 454 00:21:46,154 --> 00:21:47,320 And his knees are like this. 455 00:21:47,320 --> 00:21:48,920 And this other character is here. 456 00:21:48,920 --> 00:21:50,440 And there's also a building here. 457 00:21:50,440 --> 00:21:52,849 And that's made up of these blocks of wood. 458 00:21:52,849 --> 00:21:55,890 And so then you have this abstract state of what's going on in the world. 459 00:21:55,890 --> 00:22:00,060 And then you sort of have a library that says, OK, stick the camera here. 460 00:22:00,060 --> 00:22:03,480 And then draw everything and render it. 461 00:22:03,480 --> 00:22:07,420 And so then the system figures out how to create 462 00:22:07,420 --> 00:22:09,840 each pixel based on what's going on in the world 463 00:22:09,840 --> 00:22:11,550 and where you stuck the camera. 464 00:22:11,550 --> 00:22:14,541 React is basically that for apps. 465 00:22:14,541 --> 00:22:21,354 466 00:22:21,354 --> 00:22:23,270 So the idea is that these things are coherent, 467 00:22:23,270 --> 00:22:25,330 and they map to the way you think about things. 468 00:22:25,330 --> 00:22:27,180 And they're reusable and composable. 469 00:22:27,180 --> 00:22:30,930 And so you can build up these libraries of React components. 470 00:22:30,930 --> 00:22:34,240 So that was this thing that was released in about 2011 471 00:22:34,240 --> 00:22:37,230 and has gotten really, really popular on the web. 472 00:22:37,230 --> 00:22:39,590 But now, it's starting to be popular for native. 473 00:22:39,590 --> 00:22:42,160 474 00:22:42,160 --> 00:22:43,676 Cool. 475 00:22:43,676 --> 00:22:46,800 So React Native is really great because you can take all these great things 476 00:22:46,800 --> 00:22:50,720 about React, and you can solve a bunch of the problem 477 00:22:50,720 --> 00:22:53,760 that we had developing mobile apps. 478 00:22:53,760 --> 00:22:58,800 But one challenge now is that in some ways, 479 00:22:58,800 --> 00:23:04,450 now we went from having to know how to do iOS and Android to now having 480 00:23:04,450 --> 00:23:09,120 to know Swift on iOS or Objective-C, and then Java on Android, 481 00:23:09,120 --> 00:23:10,290 and then also JavaScript. 482 00:23:10,290 --> 00:23:12,081 And so now it's like we've gone from having 483 00:23:12,081 --> 00:23:13,650 to know two things to three things. 484 00:23:13,650 --> 00:23:15,432 And that's just sort of harder. 485 00:23:15,432 --> 00:23:17,140 And then a bunch of the other things that 486 00:23:17,140 --> 00:23:19,306 are annoying about the native development cycle also 487 00:23:19,306 --> 00:23:23,230 apply, like submitting to the App Store takes a long time, 488 00:23:23,230 --> 00:23:26,380 and you have to compile still, some of the time, 489 00:23:26,380 --> 00:23:29,720 if you're changing your native code or anything like that. 490 00:23:29,720 --> 00:23:34,420 So I started working with a few people on this project called Exponent 491 00:23:34,420 --> 00:23:39,630 that is basically trying to solve that and make it as easy as possible 492 00:23:39,630 --> 00:23:40,810 to do what you want to do. 493 00:23:40,810 --> 00:23:45,700 So the idea is write cross-platform apps writing just React Native JS 494 00:23:45,700 --> 00:23:47,890 and not worrying at all about the native code. 495 00:23:47,890 --> 00:23:51,630 So Exponent basically takes care of all the native code 496 00:23:51,630 --> 00:23:54,960 and lets you write just JavaScript when you're building your app. 497 00:23:54,960 --> 00:23:59,730 So we include components that do all the common things that people 498 00:23:59,730 --> 00:24:03,700 want to do in native apps, like Facebook login, maps, camera, camera roll, 499 00:24:03,700 --> 00:24:06,030 contacts, et cetera. 500 00:24:06,030 --> 00:24:09,035 And you don't need to use Xcode or Android Studio. 501 00:24:09,035 --> 00:24:10,910 You don't need to learn Objective-C or Swift. 502 00:24:10,910 --> 00:24:12,360 You don't need to learn Java. 503 00:24:12,360 --> 00:24:15,180 All you have to do is worry about the JavaScript. 504 00:24:15,180 --> 00:24:19,080 The other thing that's really cool that you get when you do this 505 00:24:19,080 --> 00:24:24,180 is that you can deploy updates to your app on the fly, over the air. 506 00:24:24,180 --> 00:24:29,870 Since it's all just JavaScript and since Exponent takes care of the binary code, 507 00:24:29,870 --> 00:24:33,180 you can actually have the same app sitting on your phone, 508 00:24:33,180 --> 00:24:36,460 but then it can download new JavaScript and completely change its behavior. 509 00:24:36,460 --> 00:24:37,610 So you can fix bugs. 510 00:24:37,610 --> 00:24:42,430 You can run a sale in the morning and put a dialog that said, sale, 10% off. 511 00:24:42,430 --> 00:24:45,850 And then you could take it down at night just 512 00:24:45,850 --> 00:24:47,467 by deploying new stuff over the air. 513 00:24:47,467 --> 00:24:50,150 514 00:24:50,150 --> 00:24:54,410 So I'm going to show you how to use Exponent a little bit, 515 00:24:54,410 --> 00:24:57,880 if you ever wanted to use that for a project. 516 00:24:57,880 --> 00:25:00,540 So our website is getexponent.com. 517 00:25:00,540 --> 00:25:05,470 And then you can download two things from there. 518 00:25:05,470 --> 00:25:09,430 There's a piece of desktop software called XDE that I'll demo for you. 519 00:25:09,430 --> 00:25:12,532 And then on your phone, you can also get iOS and Android apps 520 00:25:12,532 --> 00:25:14,115 that you'll use to open your projects. 521 00:25:14,115 --> 00:25:18,710 522 00:25:18,710 --> 00:25:30,300 So if I go to getexponent.com, then go to Installation. 523 00:25:30,300 --> 00:25:33,105 I could download for Mac here. 524 00:25:33,105 --> 00:25:34,980 Actually, I've got it on my computer already. 525 00:25:34,980 --> 00:25:38,280 This is like a cooking show. 526 00:25:38,280 --> 00:25:42,590 So I'll go here and make a new project. 527 00:25:42,590 --> 00:25:47,121 You can choose between tab navigation and blank. 528 00:25:47,121 --> 00:25:48,741 And we might add more templates later. 529 00:25:48,741 --> 00:25:51,740 If you're starting off, I would actually choose the tab navigation thing 530 00:25:51,740 --> 00:25:53,220 because it gives you lots of different things. 531 00:25:53,220 --> 00:25:56,420 And I always find that it's easier to delete stuff and change stuff 532 00:25:56,420 --> 00:25:58,360 than it is to write stuff from scratch. 533 00:25:58,360 --> 00:26:05,280 So I kind of like to start with the tab navigation project. 534 00:26:05,280 --> 00:26:08,510 I'll just call it CS50 demo, and I'll make a new project. 535 00:26:08,510 --> 00:26:13,120 536 00:26:13,120 --> 00:26:15,966 And it'll start up your project and start showing you logs. 537 00:26:15,966 --> 00:26:20,090 538 00:26:20,090 --> 00:26:23,550 And I can open it in my text editor. 539 00:26:23,550 --> 00:26:39,300 540 00:26:39,300 --> 00:26:42,620 After a second, it will say, product is open. 541 00:26:42,620 --> 00:26:46,840 You can now use the send link to device buttons for your project. 542 00:26:46,840 --> 00:26:51,540 So what you see here is there's a URL here, 543 00:26:51,540 --> 00:26:53,560 which is like the URL for your project. 544 00:26:53,560 --> 00:26:57,169 And the way to think of this is sort of like web development, 545 00:26:57,169 --> 00:26:58,960 if you're familiar with that, and that when 546 00:26:58,960 --> 00:27:02,293 you're developing a website, if you have the URL for it, you can just go to that 547 00:27:02,293 --> 00:27:05,362 and open it, and then see what you're working on. 548 00:27:05,362 --> 00:27:07,320 And that's the way it works with Exponent, too, 549 00:27:07,320 --> 00:27:09,528 except that instead of opening it with a web browser, 550 00:27:09,528 --> 00:27:11,890 you open it with the Exponent developer app. 551 00:27:11,890 --> 00:27:16,940 So I can either send that to my phone using Send Link or I can just open it 552 00:27:16,940 --> 00:27:21,710 in the iOS simulator, which I'll do here because it's easier to see. 553 00:27:21,710 --> 00:27:26,350 So then it takes a second the first time. 554 00:27:26,350 --> 00:27:29,470 But then it'll open it up in the simulator here. 555 00:27:29,470 --> 00:27:55,814 556 00:27:55,814 --> 00:27:57,230 Usually it doesn't take this long. 557 00:27:57,230 --> 00:27:58,730 I'm not sure why it's so slow today. 558 00:27:58,730 --> 00:28:20,530 559 00:28:20,530 --> 00:28:21,550 AUDIENCE: Hey, Charlie? 560 00:28:21,550 --> 00:28:22,508 CHARLIE CHEEVERS: Yeah. 561 00:28:22,508 --> 00:28:25,630 AUDIENCE: While this is loading, can you show us that a little bigger? 562 00:28:25,630 --> 00:28:26,838 CHARLIE CHEEVERS: Which ones? 563 00:28:26,838 --> 00:28:28,255 AUDIENCE: Just the relevant ones. 564 00:28:28,255 --> 00:28:29,380 CHARLIE CHEEVERS: This one? 565 00:28:29,380 --> 00:29:23,771 566 00:29:23,771 --> 00:29:26,009 Well, I don't know why it took so long. 567 00:29:26,009 --> 00:29:27,300 But anyway, you get this thing. 568 00:29:27,300 --> 00:29:29,680 It says here, welcome to Exponent. 569 00:29:29,680 --> 00:29:32,140 Change this text and your app will automatically reload. 570 00:29:32,140 --> 00:29:34,630 So I can go into my text editor, and then 571 00:29:34,630 --> 00:29:38,030 find where it says "change this text and your app will automatically reload." 572 00:29:38,030 --> 00:29:41,380 And I can say, hello, CS50! 573 00:29:41,380 --> 00:29:44,990 Sorry that took so long to load. 574 00:29:44,990 --> 00:29:48,890 Save it, and then-- oh, that was a lot faster. 575 00:29:48,890 --> 00:29:52,330 Just a second later, it appears. 576 00:29:52,330 --> 00:29:56,520 So you can see that this is sort of one of the basic building blocks of React 577 00:29:56,520 --> 00:29:58,650 Native, is these text elements. 578 00:29:58,650 --> 00:29:59,900 They're pretty simple. 579 00:29:59,900 --> 00:30:02,220 They're just like a HTML tag, pretty much. 580 00:30:02,220 --> 00:30:05,730 But you just say Text, and then you can include text inside it. 581 00:30:05,730 --> 00:30:09,100 The other really basic building block that I'll show you is just views. 582 00:30:09,100 --> 00:30:11,420 So I can wrap this text inside a view. 583 00:30:11,420 --> 00:30:13,930 And a view is sort of like a div on the web. 584 00:30:13,930 --> 00:30:17,700 It's just a rectangle that you can decorate. 585 00:30:17,700 --> 00:30:24,710 And the way you decorate stuff in React Native is with this style attribute. 586 00:30:24,710 --> 00:30:29,200 So just so that this will show up, I'll give it a border. 587 00:30:29,200 --> 00:30:31,910 588 00:30:31,910 --> 00:30:36,890 I'll give it some rounded corners, and I'll make it really thick 589 00:30:36,890 --> 00:30:38,840 so it shows up. 590 00:30:38,840 --> 00:30:45,410 And I'll make it red so it's noticeable. 591 00:30:45,410 --> 00:30:48,560 And I'll make it solid so that it shows up. 592 00:30:48,560 --> 00:30:54,410 593 00:30:54,410 --> 00:30:56,750 And I can give it a width and a height. 594 00:30:56,750 --> 00:31:04,600 And now, I have a big red border with rounded colors. 595 00:31:04,600 --> 00:31:09,470 And then I can also set background color and things like that. 596 00:31:09,470 --> 00:31:10,542 You can use hex colors. 597 00:31:10,542 --> 00:31:14,790 598 00:31:14,790 --> 00:31:18,160 Another thing that's cool is-- so on the web, 599 00:31:18,160 --> 00:31:22,026 you typically use CSS, which is sort of its own separate DSL, 600 00:31:22,026 --> 00:31:28,100 whereas in React Native, all the styling is just done using JavaScript objects. 601 00:31:28,100 --> 00:31:33,300 So that means that this is just a regular JavaScript object here. 602 00:31:33,300 --> 00:31:34,980 And that means I can do math here. 603 00:31:34,980 --> 00:31:41,660 So I could do 100 plus 100 plus 50 here instead. 604 00:31:41,660 --> 00:31:44,990 Save it, and that'll get a little bit skinnier 605 00:31:44,990 --> 00:31:49,320 because that's 250 instead of 300. 606 00:31:49,320 --> 00:31:53,120 But this means that you can use variables. 607 00:31:53,120 --> 00:31:56,311 You can say something should be one third the width of something else, 608 00:31:56,311 --> 00:31:59,060 et cetera, et cetera, et cetera, which is pretty hard to do in CSS 609 00:31:59,060 --> 00:32:00,870 but is really easy to do in React Native. 610 00:32:00,870 --> 00:32:03,400 611 00:32:03,400 --> 00:32:07,540 And so you can see here that most of the time, 612 00:32:07,540 --> 00:32:10,380 as people write more advanced code bases, 613 00:32:10,380 --> 00:32:15,540 they tend to use variables for their styles so it's more readable. 614 00:32:15,540 --> 00:32:21,320 And so you can just assign styles.codeHighlightContainer 615 00:32:21,320 --> 00:32:22,627 and include that here. 616 00:32:22,627 --> 00:32:24,960 You don't have to inline everything the way I have here. 617 00:32:24,960 --> 00:32:27,530 618 00:32:27,530 --> 00:32:28,880 Cool. 619 00:32:28,880 --> 00:32:36,240 So this is how you basically build really simple stuff using Exponent. 620 00:32:36,240 --> 00:32:41,340 I can then share it to my phone, if I want, if I hit this Send Link button. 621 00:32:41,340 --> 00:32:43,704 I put in my phone number here. 622 00:32:43,704 --> 00:32:45,120 That will send a text to my phone. 623 00:32:45,120 --> 00:32:47,960 624 00:32:47,960 --> 00:32:50,250 And then I guess it'll be hard to see on camera. 625 00:32:50,250 --> 00:32:53,124 But if you open that link on your phone and you have the Exponent app 626 00:32:53,124 --> 00:32:55,420 on your device, then it will take a second 627 00:32:55,420 --> 00:32:59,419 to load-- probably not as long as it did the first time-- 628 00:32:59,419 --> 00:33:01,460 and then it will show up on your device, as well. 629 00:33:01,460 --> 00:33:05,179 So you can immediately start sending to-- if you're working with a partner, 630 00:33:05,179 --> 00:33:07,970 you can send your work to your partner, or you can open it yourself 631 00:33:07,970 --> 00:33:09,511 on your iPhone or your Android phone. 632 00:33:09,511 --> 00:33:12,010 633 00:33:12,010 --> 00:33:13,856 And so then that's the basic workflow. 634 00:33:13,856 --> 00:33:19,630 635 00:33:19,630 --> 00:33:23,500 So I thought that what would make sense is 636 00:33:23,500 --> 00:33:27,180 I could show you guys how to make a really simple hangman game. 637 00:33:27,180 --> 00:33:28,840 I think there's a lot there. 638 00:33:28,840 --> 00:33:33,630 So what I think I'll try to do is just give you an overview of hey, 639 00:33:33,630 --> 00:33:38,160 here are some things that are possible and a really brief coverage 640 00:33:38,160 --> 00:33:39,366 of how to do it. 641 00:33:39,366 --> 00:33:41,240 But it'll probably be just enough so that you 642 00:33:41,240 --> 00:33:44,480 could know that something is possible and start googling it. 643 00:33:44,480 --> 00:33:48,275 But you probably wouldn't be able to remember it from this seminar. 644 00:33:48,275 --> 00:33:52,410 645 00:33:52,410 --> 00:33:56,830 So I decided we'd make a hangman game that looks kind of like this. 646 00:33:56,830 --> 00:33:57,680 Really simple. 647 00:33:57,680 --> 00:33:59,490 We'll just have a keyboard down here. 648 00:33:59,490 --> 00:34:03,830 We'll have to make a fake keyboard because we want to disable the letters 649 00:34:03,830 --> 00:34:07,497 and numbers as we play them. 650 00:34:07,497 --> 00:34:10,580 And then in the middle, we'll have a hangman that gets progressively drawn 651 00:34:10,580 --> 00:34:12,489 as you guess letters wrong. 652 00:34:12,489 --> 00:34:18,216 And then above that, we'll have the words to guess. 653 00:34:18,216 --> 00:34:21,630 I also decided that I would pull the words to guess 654 00:34:21,630 --> 00:34:24,810 from things that are trending Google searches so 655 00:34:24,810 --> 00:34:27,929 that it would be interesting. 656 00:34:27,929 --> 00:34:29,825 So I made this. 657 00:34:29,825 --> 00:34:31,199 I was working on this last night. 658 00:34:31,199 --> 00:34:34,710 I put the source code up on GitHub up so you can download the whole source 659 00:34:34,710 --> 00:34:36,409 and play with it yourself. 660 00:34:36,409 --> 00:34:39,150 And if you have the Exponent developer app on your phone, 661 00:34:39,150 --> 00:34:42,647 if you go to that URL, you'll just be able to open it up and try it 662 00:34:42,647 --> 00:34:43,230 on your phone. 663 00:34:43,230 --> 00:34:46,370 664 00:34:46,370 --> 00:34:50,250 So the first thing that I thought I would cover 665 00:34:50,250 --> 00:34:57,620 is-- well, let me open up the project in Exponent here. 666 00:34:57,620 --> 00:35:17,434 667 00:35:17,434 --> 00:35:20,225 So let's open it up in the simulator so we can see what's going on. 668 00:35:20,225 --> 00:35:26,104 669 00:35:26,104 --> 00:35:29,020 So first thing it says is, loading a trending phrase for you to guess. 670 00:35:29,020 --> 00:35:31,314 It loads that over the internet, and then gives 671 00:35:31,314 --> 00:35:32,522 some sort of trending phrase. 672 00:35:32,522 --> 00:35:40,690 673 00:35:40,690 --> 00:35:44,000 Oh, Chicago Bulls. 674 00:35:44,000 --> 00:35:45,850 So I got that one wrong. 675 00:35:45,850 --> 00:35:49,010 But I just wanted to give you a demo of what we're trying to build. 676 00:35:49,010 --> 00:35:53,220 So the first thing we'll focus on is how did we get that trending topic 677 00:35:53,220 --> 00:35:55,890 from the internet? 678 00:35:55,890 --> 00:36:00,380 And here's the code for that. 679 00:36:00,380 --> 00:36:04,050 680 00:36:04,050 --> 00:36:06,270 So you can see here, this getTrendsAsync. 681 00:36:06,270 --> 00:36:09,090 682 00:36:09,090 --> 00:36:11,650 This is an async function. 683 00:36:11,650 --> 00:36:15,300 If you haven't written modern JavaScript, 684 00:36:15,300 --> 00:36:18,800 one of the best things that's true about very modern JavaScript 685 00:36:18,800 --> 00:36:20,830 is these async and await keywords. 686 00:36:20,830 --> 00:36:23,980 And they basically let you do these things-- like make network 687 00:36:23,980 --> 00:36:26,660 requests-- that take a long time to do. 688 00:36:26,660 --> 00:36:29,690 And you can sort of say, hey, go do this, 689 00:36:29,690 --> 00:36:32,230 but then continue running the code within my program. 690 00:36:32,230 --> 00:36:36,290 And then when it's done, re-enter right here. 691 00:36:36,290 --> 00:36:39,920 So I'm going to do that here, where I fetch from this endpoint 692 00:36:39,920 --> 00:36:42,880 that I've set up that serves me just a JSON 693 00:36:42,880 --> 00:36:46,180 string of the trending topics from Google. 694 00:36:46,180 --> 00:36:49,630 And you can use fetch, which is a browser API, actually. 695 00:36:49,630 --> 00:36:52,570 But it's been implemented in React Native and is built in by default. 696 00:36:52,570 --> 00:36:55,320 So whenever you want to make network requests-- basically, 697 00:36:55,320 --> 00:36:58,500 HTTP requests-- you just want to use fetch. 698 00:36:58,500 --> 00:37:01,300 There's tons of documentation on it since it's built into browsers. 699 00:37:01,300 --> 00:37:04,800 And so it's pretty easy to look up how to do POSTs and add parameters 700 00:37:04,800 --> 00:37:08,380 and how to set headers and all those other kind of things. 701 00:37:08,380 --> 00:37:10,920 But we're just doing a simple GET from a URL. 702 00:37:10,920 --> 00:37:15,090 And so we don't actually need any of the other options except the URL. 703 00:37:15,090 --> 00:37:18,537 And then the await means that other code will run while we're 704 00:37:18,537 --> 00:37:19,870 waiting for the network request. 705 00:37:19,870 --> 00:37:23,874 But then it will assign the response value to the response. 706 00:37:23,874 --> 00:37:24,790 So it's really simple. 707 00:37:24,790 --> 00:37:26,970 It's just regular JavaScript. 708 00:37:26,970 --> 00:37:32,680 The other thing that's pretty cool about this is you noticed at the top here, 709 00:37:32,680 --> 00:37:36,810 I do this import diacritics from diacritics. 710 00:37:36,810 --> 00:37:39,810 What I'm doing there is using a diacritics module 711 00:37:39,810 --> 00:37:41,820 that someone else made. 712 00:37:41,820 --> 00:37:47,850 You can use any JavaScript that's on npm inside of React Native. 713 00:37:47,850 --> 00:37:50,090 Some things rely on node APIs and won't work. 714 00:37:50,090 --> 00:37:51,680 And some things rely on native code, and they won't work. 715 00:37:51,680 --> 00:37:53,810 But most things that are just random JavaScript 716 00:37:53,810 --> 00:37:56,110 will work just fine within a React Native project. 717 00:37:56,110 --> 00:37:59,450 So what diacritics are are like if there's an accent on an E 718 00:37:59,450 --> 00:38:02,480 or an umlaut over a U, that would break our hangman game 719 00:38:02,480 --> 00:38:06,470 because there's no u with an umlaut over it on our keyboard. 720 00:38:06,470 --> 00:38:09,390 So we need to turn that into a regular U. 721 00:38:09,390 --> 00:38:11,710 So what I could do is research all about this stuff 722 00:38:11,710 --> 00:38:15,350 and write a regular expression myself of how to strip it out. 723 00:38:15,350 --> 00:38:18,020 But I would probably miss some edge case or not 724 00:38:18,020 --> 00:38:20,160 do it in an efficient way or something like that. 725 00:38:20,160 --> 00:38:29,190 But what I was able to do instead was just Google for npm diacritic strip. 726 00:38:29,190 --> 00:38:35,620 And I found a Stack Overflow question about it. 727 00:38:35,620 --> 00:38:37,320 And that looks gross. 728 00:38:37,320 --> 00:38:42,700 But then somehow, I found this module on npm 729 00:38:42,700 --> 00:38:45,720 called diacritics that will let yous strip them out. 730 00:38:45,720 --> 00:38:48,740 And it had a really simple example here. 731 00:38:48,740 --> 00:38:53,490 So then if you want to use that in your project, all you have to do 732 00:38:53,490 --> 00:39:04,340 is go into your project directory and run npm install diacritics. 733 00:39:04,340 --> 00:39:08,070 734 00:39:08,070 --> 00:39:10,670 And then this will basically download from npm 735 00:39:10,670 --> 00:39:13,470 and let you use this, whoever made this code. 736 00:39:13,470 --> 00:39:15,535 You can use it inside your application. 737 00:39:15,535 --> 00:39:18,930 738 00:39:18,930 --> 00:39:22,966 And so people share a lot more stuff in this JavaScript ecosystem 739 00:39:22,966 --> 00:39:24,549 than they do in the native code world. 740 00:39:24,549 --> 00:39:28,860 741 00:39:28,860 --> 00:39:43,760 So then the next thing that I wanted to focus on was this thing, Redux. 742 00:39:43,760 --> 00:39:50,840 What Redux is is a way to basically manage the state of your application 743 00:39:50,840 --> 00:39:52,595 and pass it in to React. 744 00:39:52,595 --> 00:39:57,220 745 00:39:57,220 --> 00:40:00,820 You don't need to use it to build simple UIs. 746 00:40:00,820 --> 00:40:04,100 But as you start having a complicated state in your application, 747 00:40:04,100 --> 00:40:06,925 you pretty much need it. 748 00:40:06,925 --> 00:40:08,800 And there's basically three concepts involved 749 00:40:08,800 --> 00:40:13,390 in it-- state, actions, and a reducer. 750 00:40:13,390 --> 00:40:15,770 The most important of these is the reducer. 751 00:40:15,770 --> 00:40:17,710 And what that basically does is it's just one 752 00:40:17,710 --> 00:40:23,625 function that takes your state and some action and returns a new state. 753 00:40:23,625 --> 00:40:26,240 754 00:40:26,240 --> 00:40:29,505 That was all really abstract, so let me show you what that means in practice. 755 00:40:29,505 --> 00:40:36,790 756 00:40:36,790 --> 00:40:38,080 Here's the hangman app. 757 00:40:38,080 --> 00:40:42,420 And so here's my reducer. 758 00:40:42,420 --> 00:40:49,910 So it's just one function that takes a state and an action, 759 00:40:49,910 --> 00:40:53,580 and it ends up returning a state, which is the new state of the game. 760 00:40:53,580 --> 00:40:56,270 And what state means-- I think the easiest way for me 761 00:40:56,270 --> 00:41:01,690 to think about it is if you were going to implement a save game function, 762 00:41:01,690 --> 00:41:05,320 state is everything that would have to be written out to disk 763 00:41:05,320 --> 00:41:07,035 to save the game. 764 00:41:07,035 --> 00:41:11,570 So it's everything that's going on in a meaningful, abstract way-- 765 00:41:11,570 --> 00:41:15,680 in the case of this game, the set of letters that you've already guessed, 766 00:41:15,680 --> 00:41:18,890 what the word is, and how many strikes against you you have, 767 00:41:18,890 --> 00:41:22,709 how many limbs on the hangman, and then this thing 768 00:41:22,709 --> 00:41:25,250 called game state, which is like the game hasn't started yet, 769 00:41:25,250 --> 00:41:28,090 or you won, or you lost, or it's in progress. 770 00:41:28,090 --> 00:41:30,090 And if you have all those pieces of information, 771 00:41:30,090 --> 00:41:32,548 that's kind of enough to recreate the game in its entirety. 772 00:41:32,548 --> 00:41:35,300 773 00:41:35,300 --> 00:41:41,220 So this one function just takes initial state and action and returns that. 774 00:41:41,220 --> 00:41:46,020 And so it basically does different things depending on what the action is. 775 00:41:46,020 --> 00:41:47,390 Actions have a type. 776 00:41:47,390 --> 00:41:52,440 So if you guess a letter, then it makes sure that the game is in progress. 777 00:41:52,440 --> 00:41:54,445 And then if you've already guessed that letter, 778 00:41:54,445 --> 00:41:56,590 it just says, you already played that letter. 779 00:41:56,590 --> 00:42:00,400 Otherwise, it adds another letter to the list of letters you've played, 780 00:42:00,400 --> 00:42:04,460 and then adds that letter to the guessed letter C, 781 00:42:04,460 --> 00:42:07,662 and then checks to see if that letter's in the word, 782 00:42:07,662 --> 00:42:10,245 and then checks to see if you guessed all letters in the word. 783 00:42:10,245 --> 00:42:12,110 And so basically, this is where all the game logic 784 00:42:12,110 --> 00:42:13,610 is and the meat of your application. 785 00:42:13,610 --> 00:42:15,560 It's in this reducer. 786 00:42:15,560 --> 00:42:21,090 And if you write your apps this way, it seems more complicated at first, 787 00:42:21,090 --> 00:42:27,000 but they end up being very clean and very easy to get bugs out of because 788 00:42:27,000 --> 00:42:29,802 at any given moment, all you have to reason about is OK, 789 00:42:29,802 --> 00:42:31,260 what's the current state of things? 790 00:42:31,260 --> 00:42:34,009 And then how do I get to the next state of things given an action? 791 00:42:34,009 --> 00:42:36,290 792 00:42:36,290 --> 00:42:41,210 And so then I think my main piece of advice 793 00:42:41,210 --> 00:42:44,130 here is just if you build anything complicated with React Native, just 794 00:42:44,130 --> 00:42:47,800 google Redux and read the tutorial and use it. 795 00:42:47,800 --> 00:42:50,300 This is probably too abstract for you to actually understand 796 00:42:50,300 --> 00:42:51,690 what I'm talking about right now. 797 00:42:51,690 --> 00:42:54,740 But I would use it. 798 00:42:54,740 --> 00:43:08,980 So next thing I want to do is talk a little bit about making the keyboard. 799 00:43:08,980 --> 00:43:16,160 So the keyboard, if you look at it, it's basically just a bunch 800 00:43:16,160 --> 00:43:18,860 of letters and numbers inside of boxes. 801 00:43:18,860 --> 00:43:21,570 And so it's pretty easy for us to make this fake keyboard 802 00:43:21,570 --> 00:43:26,000 just by using views for the boxes around the letters and numbers 803 00:43:26,000 --> 00:43:31,260 and texts inside of those. 804 00:43:31,260 --> 00:43:40,430 So if I look at this keyboard thing, you can 805 00:43:40,430 --> 00:43:42,656 see that it's just a React component. 806 00:43:42,656 --> 00:43:45,330 807 00:43:45,330 --> 00:43:52,800 And the meat of it is basically that if the tile is active, 808 00:43:52,800 --> 00:43:55,290 then I have a letter tile. 809 00:43:55,290 --> 00:43:58,810 And I wrap it in a touchable bounce, which means that you can touch it 810 00:43:58,810 --> 00:44:01,760 and that it'll bounce when you touch it. 811 00:44:01,760 --> 00:44:05,200 And if it's not active, it doesn't have it wrapped in a touchable bounce, 812 00:44:05,200 --> 00:44:08,200 and it looks different. 813 00:44:08,200 --> 00:44:12,661 So one cool thing about this is just the idea 814 00:44:12,661 --> 00:44:15,660 that you can just wrap things inside of something like touchable bounce, 815 00:44:15,660 --> 00:44:19,300 and they'll do what you expect-- they'll bounce when you touch them, 816 00:44:19,300 --> 00:44:25,557 and then they'll call whatever's in the onPress attribute when you press them. 817 00:44:25,557 --> 00:44:27,390 There's also touchable opacity and touchable 818 00:44:27,390 --> 00:44:32,390 highlight, which have slightly different effects on the things that you touch. 819 00:44:32,390 --> 00:44:34,530 But you can use those around any view or any text 820 00:44:34,530 --> 00:44:35,988 or any image or anything like that. 821 00:44:35,988 --> 00:44:38,450 822 00:44:38,450 --> 00:44:41,150 And so then, to draw the letter tiles, I just 823 00:44:41,150 --> 00:44:47,380 use the same styling that I was showing you. 824 00:44:47,380 --> 00:44:52,020 It's very similar to CSS styling except that it's JavaScript objects. 825 00:44:52,020 --> 00:44:56,880 But all of these things are essentially similar to CSS properties. 826 00:44:56,880 --> 00:45:01,920 And so you can see that basically, if it's active, 827 00:45:01,920 --> 00:45:05,820 I use slightly different colors than if it's not active. 828 00:45:05,820 --> 00:45:10,510 And that's how you get sort of the effect of things looking 829 00:45:10,510 --> 00:45:12,150 faded when they're not active anymore. 830 00:45:12,150 --> 00:45:16,610 831 00:45:16,610 --> 00:45:20,540 And so then, the most interesting part of this maybe is you can see here, 832 00:45:20,540 --> 00:45:24,360 there's actually different numbers of characters 833 00:45:24,360 --> 00:45:26,530 in each of these rows on the keyboard. 834 00:45:26,530 --> 00:45:28,400 There's 10 numbers at the top. 835 00:45:28,400 --> 00:45:32,050 But then at the bottom row, there's only 7 letters there. 836 00:45:32,050 --> 00:45:33,830 And so it would be really gnarly if I had 837 00:45:33,830 --> 00:45:41,150 to do the math to figure out how to space all these things out, especially 838 00:45:41,150 --> 00:45:45,270 since I want this to work in general, across all different screen sizes. 839 00:45:45,270 --> 00:45:50,230 I want this to work on an iPhone 5 and then also an iPhone 7 840 00:45:50,230 --> 00:45:57,520 and also my Samsung Galaxy Note 7 that hasn't caught on fire yet. 841 00:45:57,520 --> 00:46:00,430 And I don't want to have to write different arithmetic for all those. 842 00:46:00,430 --> 00:46:04,430 And so one thing that's really cool is that React Native uses 843 00:46:04,430 --> 00:46:07,210 Flexbox as its built-in layout engine. 844 00:46:07,210 --> 00:46:10,600 And so Flexbox is this thing that was added to CSS recently. 845 00:46:10,600 --> 00:46:14,250 And so you can just Google it and find out all the things that it does. 846 00:46:14,250 --> 00:46:17,701 I spend a lot of time in my life visiting this page over and over again 847 00:46:17,701 --> 00:46:19,451 to see all the different things it can do. 848 00:46:19,451 --> 00:46:22,750 849 00:46:22,750 --> 00:46:25,920 And in this case, the most important line 850 00:46:25,920 --> 00:46:37,390 here is this thing that's justifyContent space-around. 851 00:46:37,390 --> 00:46:41,810 And I can see when I go look through all these things, 852 00:46:41,810 --> 00:46:44,067 here's the justifyContent attribute. 853 00:46:44,067 --> 00:46:46,400 And you can see the different options that it gives you. 854 00:46:46,400 --> 00:46:50,590 There's a way to squeeze everything at the beginning of your view, a way 855 00:46:50,590 --> 00:46:52,799 to squeeze everything at the end, a way to center it. 856 00:46:52,799 --> 00:46:54,798 And then there's these more interesting options, 857 00:46:54,798 --> 00:46:56,370 space-between and space-around. 858 00:46:56,370 --> 00:46:59,220 space-between will put even spacing between all the things 859 00:46:59,220 --> 00:47:01,540 in the view but nothing on the edges. 860 00:47:01,540 --> 00:47:06,070 And then space-around will put even spaces between stuff and at the edges. 861 00:47:06,070 --> 00:47:08,170 And so space-around is kind of intuitively 862 00:47:08,170 --> 00:47:09,610 what we want for this keyboard. 863 00:47:09,610 --> 00:47:11,680 And so I use it here in the code. 864 00:47:11,680 --> 00:47:19,430 And just by adding this one line of code, the keyboard looks like that. 865 00:47:19,430 --> 00:47:21,525 But then you can see, I could change this. 866 00:47:21,525 --> 00:47:29,130 867 00:47:29,130 --> 00:47:31,660 We could make it look like this if we do flex-end. 868 00:47:31,660 --> 00:47:35,263 So if I just do flex-end, then this will reload. 869 00:47:35,263 --> 00:47:39,060 870 00:47:39,060 --> 00:47:42,670 And now all the keys are squeezed over to the right side of the screen. 871 00:47:42,670 --> 00:47:46,800 So it's pretty easy to just make these changes very, very quickly 872 00:47:46,800 --> 00:47:49,830 without doing a lot of gnarly arithmetic and math or anything like that. 873 00:47:49,830 --> 00:47:56,350 874 00:47:56,350 --> 00:48:09,350 And so then I wanted to show you drawing the hangman because I just showed you 875 00:48:09,350 --> 00:48:10,080 how to do text. 876 00:48:10,080 --> 00:48:12,120 And I showed you how to do rectangles. 877 00:48:12,120 --> 00:48:15,550 But if I guess letters wrong here, it draws a circle, and then 878 00:48:15,550 --> 00:48:17,880 a line, and then a diagonal line. 879 00:48:17,880 --> 00:48:20,550 And those would be hard to do with views and text. 880 00:48:20,550 --> 00:48:22,480 But when you want to do anything like this, 881 00:48:22,480 --> 00:48:25,360 there's something built in called SVG, which 882 00:48:25,360 --> 00:48:29,400 is very similar to the SVG on the web. 883 00:48:29,400 --> 00:48:36,350 And so the code for that just looks like this, where you have an SVG component. 884 00:48:36,350 --> 00:48:38,110 You give it a height and a width. 885 00:48:38,110 --> 00:48:43,010 And then what this line does is it basically says, show this part 886 00:48:43,010 --> 00:48:46,100 if there's more than one strike against me. 887 00:48:46,100 --> 00:48:47,960 And so in this case, it draws the head. 888 00:48:47,960 --> 00:48:50,870 And so there's just a circle component, and you give it an x and a y 889 00:48:50,870 --> 00:48:54,790 and a radius, and then some information about the stroke, 890 00:48:54,790 --> 00:48:58,330 which is like-- stroke is like a line in drawing. 891 00:48:58,330 --> 00:49:03,560 And so I just add in all these SVG parts. 892 00:49:03,560 --> 00:49:06,380 If you google like SVG spec, you can find 893 00:49:06,380 --> 00:49:07,880 all the different things you can do. 894 00:49:07,880 --> 00:49:09,796 But the most simple things you can do are just 895 00:49:09,796 --> 00:49:11,914 drawing circles and lines and boxes. 896 00:49:11,914 --> 00:49:15,080 And hangman is really simple, so I end up only using circles and lines here. 897 00:49:15,080 --> 00:49:17,696 898 00:49:17,696 --> 00:49:19,570 And so then that's how I'm able to draw this. 899 00:49:19,570 --> 00:49:23,010 900 00:49:23,010 --> 00:49:27,680 And then if I win or lose the game-- Vine shut down, 901 00:49:27,680 --> 00:49:33,310 I guess-- you can see I have this sort of sticker 902 00:49:33,310 --> 00:49:38,990 with this military-looking font on it, which doesn't come with iOS or Android. 903 00:49:38,990 --> 00:49:43,230 So I actually had to use a custom font for this. 904 00:49:43,230 --> 00:49:47,520 And the way you do that is pretty simple. 905 00:49:47,520 --> 00:49:51,190 In your project directory, just somewhere there, 906 00:49:51,190 --> 00:49:59,200 you put your font file-- in this case, that's a font called top secret. 907 00:49:59,200 --> 00:50:02,820 I just found it on the internet on a font site. 908 00:50:02,820 --> 00:50:11,460 And then in your code-- especially if you 909 00:50:11,460 --> 00:50:14,610 start with the tab project in Exponent, we give you a bunch of basic code 910 00:50:14,610 --> 00:50:16,260 for doing this. 911 00:50:16,260 --> 00:50:23,080 You just write require and then the path to that asset. 912 00:50:23,080 --> 00:50:30,170 And what Exponent will do is upload all your assets to a CDN, 913 00:50:30,170 --> 00:50:33,110 and then serve them to the app when the app needs them. 914 00:50:33,110 --> 00:50:37,400 So you can swap in fonts, images, whatever 915 00:50:37,400 --> 00:50:40,500 without having to update your app in the App Store. 916 00:50:40,500 --> 00:50:44,930 917 00:50:44,930 --> 00:50:49,960 So I just wanted to give you an example of using a custom font. 918 00:50:49,960 --> 00:50:55,020 So then if we put together all these pieces and we have our game 919 00:50:55,020 --> 00:50:59,570 and we want to publish it-- let's say I decided I did 920 00:50:59,570 --> 00:51:02,660 want to squeeze all the keys to the right of the screen like this. 921 00:51:02,660 --> 00:51:05,280 And I want to make that the version that is sort 922 00:51:05,280 --> 00:51:06,860 of the official, canonical version. 923 00:51:06,860 --> 00:51:10,990 All I have to do is hit the Publish button here. 924 00:51:10,990 --> 00:51:17,320 And this will basically take my code, which is currently 925 00:51:17,320 --> 00:51:20,770 being served from my computer, and it'll package it all up 926 00:51:20,770 --> 00:51:23,660 and put it on Amazon's web servers in the cloud 927 00:51:23,660 --> 00:51:29,830 so that anyone who hits the URL that I gave you 928 00:51:29,830 --> 00:51:35,770 earlier-- exp.host/@ccheever/hangman-- will then get this new code when 929 00:51:35,770 --> 00:51:39,700 they visit it on the developer app. 930 00:51:39,700 --> 00:51:52,346 And then if I wanted to, I could run one command at the command line-- xbuild 931 00:51:52,346 --> 00:51:57,140 ios-- and it will actually build an iOS app 932 00:51:57,140 --> 00:51:59,800 that I can submit to the iOS App Store. 933 00:51:59,800 --> 00:52:06,000 Or I could run xbuild-- oh, I guess I need to set some settings. 934 00:52:06,000 --> 00:52:08,240 There's documentation on it. 935 00:52:08,240 --> 00:52:10,910 But basically, with one command, I can build an iOS app 936 00:52:10,910 --> 00:52:14,200 that I can submit to the App Store, or I can run xbuild android 937 00:52:14,200 --> 00:52:16,700 and build an Android app that I can submit to the App Store. 938 00:52:16,700 --> 00:52:20,040 And what that will do is give me an app that's basically the Exponent developer 939 00:52:20,040 --> 00:52:23,847 app, except that all the branding is switched to the branding for your app. 940 00:52:23,847 --> 00:52:25,930 And the name is switched to the name for your app. 941 00:52:25,930 --> 00:52:29,320 And it's only pointed at the URL of your published project 942 00:52:29,320 --> 00:52:32,970 so that a user would never know that it's using any of this stuff. 943 00:52:32,970 --> 00:52:34,640 They'll just see it as a regular app. 944 00:52:34,640 --> 00:52:38,920 But anytime you want to make changes to it, you just hit the Publish button, 945 00:52:38,920 --> 00:52:42,750 and they'll get the new code the next time they open the app. 946 00:52:42,750 --> 00:52:48,710 So the main point, I guess, is just by writing a bunch of JavaScript, 947 00:52:48,710 --> 00:52:51,080 you can make something that behaves and looks 948 00:52:51,080 --> 00:52:53,430 and feels like a really native app. 949 00:52:53,430 --> 00:52:55,426 And you can put it in the app stores. 950 00:52:55,426 --> 00:52:58,550 But you can get most of the benefits of web development, where you can just 951 00:52:58,550 --> 00:53:00,730 pass around a URL while you're doing development, 952 00:53:00,730 --> 00:53:04,084 and you can just change stuff and see the changes happen on the fly. 953 00:53:04,084 --> 00:53:07,330 954 00:53:07,330 --> 00:53:07,830 Cool. 955 00:53:07,830 --> 00:53:11,680 I just wanted to give you guys an overview of a possibility, 956 00:53:11,680 --> 00:53:14,580 if you wanted to use that for your final projects. 957 00:53:14,580 --> 00:53:15,490 Cool. 958 00:53:15,490 --> 00:53:16,430 Thanks for having me. 959 00:53:16,430 --> 00:53:19,930 [APPLAUSE] 960 00:53:19,930 --> 00:53:26,690 961 00:53:26,690 --> 00:53:29,572 DAVID J. MALAN: Questions for Charlie? 962 00:53:29,572 --> 00:53:30,530 CHARLIE CHEEVERS: Yeah. 963 00:53:30,530 --> 00:53:33,279 AUDIENCE: So you're not really coding on any platform on Exponent. 964 00:53:33,279 --> 00:53:37,406 You're coding on some other thing and transferring the code? 965 00:53:37,406 --> 00:53:40,222 Or where are you-- I saw Atom, and I saw-- 966 00:53:40,222 --> 00:53:41,906 CHARLIE CHEEVERS: Oh, yeah. 967 00:53:41,906 --> 00:53:42,406 OK. 968 00:53:42,406 --> 00:53:44,310 AUDIENCE: What's going on? 969 00:53:44,310 --> 00:53:48,400 CHARLIE CHEEVERS: So you can use your own text editor. 970 00:53:48,400 --> 00:53:51,060 You can use Atom, you can use Vim, you can use Emacs, whatever. 971 00:53:51,060 --> 00:53:52,226 And they're just text files. 972 00:53:52,226 --> 00:53:55,430 What's going on is with XTE, it runs this thing 973 00:53:55,430 --> 00:53:59,100 called the React Native Packager, which is this process that 974 00:53:59,100 --> 00:54:03,730 goes through and scans all of your JavaScript files, 975 00:54:03,730 --> 00:54:07,980 and then transpiles them into a version of JavaScript-- there's 976 00:54:07,980 --> 00:54:10,810 a lot of fancy, modern JavaScript, like the async, 977 00:54:10,810 --> 00:54:14,070 await keywords that I was showing you and things like that. 978 00:54:14,070 --> 00:54:21,280 And so to have it run on all phones, that has to be transpiled down to ES5. 979 00:54:21,280 --> 00:54:25,570 Transpilation is just like turning newfangled stuff 980 00:54:25,570 --> 00:54:28,620 into equivalent old stuff. 981 00:54:28,620 --> 00:54:31,570 And so it bundles it all up into one file 982 00:54:31,570 --> 00:54:35,250 so that it can be transferred over. 983 00:54:35,250 --> 00:54:37,970 The reason that it took so long to load the first time 984 00:54:37,970 --> 00:54:40,270 was it was scanning all the different files 985 00:54:40,270 --> 00:54:43,170 and then transponding all of them, and then packaging them 986 00:54:43,170 --> 00:54:45,647 all up into one thing. 987 00:54:45,647 --> 00:54:46,730 It's pretty smart, though. 988 00:54:46,730 --> 00:54:48,630 And so when you make small changes later on, 989 00:54:48,630 --> 00:54:50,755 it doesn't have to do all that work all over again. 990 00:54:50,755 --> 00:54:54,290 It just only does that one file. 991 00:54:54,290 --> 00:55:03,270 And so then when you're doing development, it runs a web server 992 00:55:03,270 --> 00:55:09,510 and basically will serve up the bundle so that the client app on your phone 993 00:55:09,510 --> 00:55:14,710 or on the simulator can just load that by making a web request to that web 994 00:55:14,710 --> 00:55:16,800 server. 995 00:55:16,800 --> 00:55:20,040 And so then when you do publish, it copies all the code into the cloud. 996 00:55:20,040 --> 00:55:23,290 And so then instead of requesting from the web server running on your machine, 997 00:55:23,290 --> 00:55:25,706 it just requests it from the cloud. 998 00:55:25,706 --> 00:55:26,580 Does that make sense? 999 00:55:26,580 --> 00:55:27,030 AUDIENCE: Yeah. 1000 00:55:27,030 --> 00:55:27,300 CHARLIE CHEEVERS: OK. 1001 00:55:27,300 --> 00:55:29,675 AUDIENCE: It's a little advanced for me, but I'll get it. 1002 00:55:29,675 --> 00:55:31,080 CHARLIE CHEEVERS: Sorry. 1003 00:55:31,080 --> 00:55:31,580 Yeah. 1004 00:55:31,580 --> 00:55:33,900 AUDIENCE: So why did you guys choose JavaScript? 1005 00:55:33,900 --> 00:55:34,858 Is that the iPhone or-- 1006 00:55:34,858 --> 00:55:37,620 1007 00:55:37,620 --> 00:55:41,040 CHARLIE CHEEVERS: There's basically one really big reason, which 1008 00:55:41,040 --> 00:55:43,810 is that Apple's developer terms of service 1009 00:55:43,810 --> 00:55:49,180 say you can't download any code from the internet and run it on the iPhone 1010 00:55:49,180 --> 00:55:52,120 or you'll get banned from the App Store unless that's 1011 00:55:52,120 --> 00:55:55,050 JavaScript code running on JavaScriptCore, 1012 00:55:55,050 --> 00:55:56,720 which is their JavaScript interpreter. 1013 00:55:56,720 --> 00:56:01,352 And so anyone who wants to do this downloading 1014 00:56:01,352 --> 00:56:03,560 new versions of the app on the fly over the internet, 1015 00:56:03,560 --> 00:56:07,420 you have to do it this way using JavaScript. 1016 00:56:07,420 --> 00:56:12,460 You could do kind of crazy things where you translated Python 1017 00:56:12,460 --> 00:56:14,530 into JavaScript or something like that. 1018 00:56:14,530 --> 00:56:18,920 But it's easier to just use JavaScript. 1019 00:56:18,920 --> 00:56:20,070 Yeah? 1020 00:56:20,070 --> 00:56:22,710 AUDIENCE: So if you want to use some kind of API that 1021 00:56:22,710 --> 00:56:26,327 is for Android or for Right how do you use it? 1022 00:56:26,327 --> 00:56:29,410 CHARLIE CHEEVERS: So if you wanted to do some low-level thing-- basically, 1023 00:56:29,410 --> 00:56:32,750 Exponent is where you just write just JavaScript. 1024 00:56:32,750 --> 00:56:37,870 You could take all this JavaScript and set up a new Xcode or Android Studio 1025 00:56:37,870 --> 00:56:42,460 project and then write the native code and integrate it there. 1026 00:56:42,460 --> 00:56:46,630 If you Google React Native native modules-- 1027 00:56:46,630 --> 00:56:49,440 I could talk for, like, two hours about the details of that. 1028 00:56:49,440 --> 00:56:51,940 But there's ways to write native code that way. 1029 00:56:51,940 --> 00:56:54,380 And you could use your same code from this 1030 00:56:54,380 --> 00:56:58,700 if you needed to dive down and write your own sort of specialized 1031 00:56:58,700 --> 00:57:00,050 platform-specific stuff. 1032 00:57:00,050 --> 00:57:14,330 You also can do stuff though where you can customize per platform. 1033 00:57:14,330 --> 00:57:17,330 If you just wanted to say, hey, I know there's a Back button on Android. 1034 00:57:17,330 --> 00:57:19,510 And so I want to handle that a little differently. 1035 00:57:19,510 --> 00:57:23,630 Or I want to be able to say, hey, you're an Android to certain people. 1036 00:57:23,630 --> 00:57:26,850 There's these variables called platform.ios in there. 1037 00:57:26,850 --> 00:57:29,882 That's iOS or Android, or maybe in the future, Windows Phone 1038 00:57:29,882 --> 00:57:30,840 or something like that. 1039 00:57:30,840 --> 00:57:33,210 AUDIENCE: And it will enable Siri or Apple Pay or something like that. 1040 00:57:33,210 --> 00:57:34,168 CHARLIE CHEEVERS: Yeah. 1041 00:57:34,168 --> 00:57:36,170 So we have a bunch of those libraries built in. 1042 00:57:36,170 --> 00:57:38,510 And so you could integrate with those that way. 1043 00:57:38,510 --> 00:57:40,420 And they might only work on one platform. 1044 00:57:40,420 --> 00:57:42,670 But you could check to see if you're on that platform. 1045 00:57:42,670 --> 00:57:48,794 1046 00:57:48,794 --> 00:57:52,961 AUDIENCE: When you're hot reloading, does 1047 00:57:52,961 --> 00:57:56,025 that reload the module or the whole package? 1048 00:57:56,025 --> 00:57:59,150 CHARLIE CHEEVERS: You can turn on and off live reloading and hot reloading. 1049 00:57:59,150 --> 00:58:03,390 If you're in the iOS similar, you hit Command-D to bring it up. 1050 00:58:03,390 --> 00:58:04,560 You can't have them both on. 1051 00:58:04,560 --> 00:58:06,987 This is like a weird gotcha of React Native 1052 00:58:06,987 --> 00:58:10,070 that somebody will fix in the next couple months, I'm sure, but isn't yet. 1053 00:58:10,070 --> 00:58:14,780 But you can't have live reloading and hot reloading on at the same time. 1054 00:58:14,780 --> 00:58:17,610 Live reloading means that whenever you make a change, 1055 00:58:17,610 --> 00:58:19,951 the whole app will reload. 1056 00:58:19,951 --> 00:58:23,330 And hot reloading means that it will just reload that module. 1057 00:58:23,330 --> 00:58:26,740 Hot reloading is cooler and faster, but it doesn't work all the time. 1058 00:58:26,740 --> 00:58:31,790 And so I think most people end up using the live reloading when 1059 00:58:31,790 --> 00:58:33,450 they're doing most stuff. 1060 00:58:33,450 --> 00:58:38,667 But if they are just going to tweak a color or tweak moving some stuff around 1061 00:58:38,667 --> 00:58:41,750 or changing some text, they might turn on hot reloading for a little while 1062 00:58:41,750 --> 00:58:43,912 because that iteration cycle is so fast. 1063 00:58:43,912 --> 00:58:47,120 And if you're just doing something not too complicated, it's pretty reliable. 1064 00:58:47,120 --> 00:58:50,730 But if you ever start changing the logic in your app or something 1065 00:58:50,730 --> 00:58:54,280 deeper or more complicated, the hot reloading thing is little unreliable. 1066 00:58:54,280 --> 00:58:58,780 1067 00:58:58,780 --> 00:59:05,270 AUDIENCE: Can this do more complicated things, like maybe a 3D game? 1068 00:59:05,270 --> 00:59:06,790 CHARLIE CHEEVERS: Yeah. 1069 00:59:06,790 --> 00:59:19,170 But we're actually releasing that, like, next week or maybe the week after. 1070 00:59:19,170 --> 00:59:21,241 No promises. 1071 00:59:21,241 --> 00:59:29,020 But somebody made a game. 1072 00:59:29,020 --> 00:59:35,602 1073 00:59:35,602 --> 00:59:38,310 I can show you a 2D game that somebody made if you're interested. 1074 00:59:38,310 --> 01:00:02,581 1075 01:00:02,581 --> 01:00:04,080 Actually, it'll take a little while. 1076 01:00:04,080 --> 01:00:05,621 So I probably shouldn't show you now. 1077 01:00:05,621 --> 01:00:08,512 But yeah, people have made games with this. 1078 01:00:08,512 --> 01:00:10,970 But I would say that if you wanted to make a 3D game today, 1079 01:00:10,970 --> 01:00:12,303 you probably shouldn't use this. 1080 01:00:12,303 --> 01:00:19,090 But follow our Twitter, and we'll announce this stuff next week. 1081 01:00:19,090 --> 01:00:24,330 1082 01:00:24,330 --> 01:00:28,230 And then if you were interested in just different examples, 1083 01:00:28,230 --> 01:00:30,620 there's this awesome Exponent repo that just 1084 01:00:30,620 --> 01:00:35,987 has a readme with a bunch of examples to check out and copy and things to read 1085 01:00:35,987 --> 01:00:36,820 and stuff like that. 1086 01:00:36,820 --> 01:00:41,200 And then we have a Slack that has a community where lots of our users 1087 01:00:41,200 --> 01:00:44,724 will help each other with questions and explain how to do different things. 1088 01:00:44,724 --> 01:00:46,640 And then the docs are at docs.getexponent.com. 1089 01:00:46,640 --> 01:00:51,090 1090 01:00:51,090 --> 01:00:55,910 So we're happy to help anyone, too, if you join our Slack community. 1091 01:00:55,910 --> 01:00:57,840 I know this probably wasn't enough information 1092 01:00:57,840 --> 01:01:01,346 to actually go off and complete a full project without learning more. 1093 01:01:01,346 --> 01:01:02,971 But we have a pretty helpful community. 1094 01:01:02,971 --> 01:01:07,012 1095 01:01:07,012 --> 01:01:09,220 AUDIENCE: So what would prevent a malicious developer 1096 01:01:09,220 --> 01:01:12,924 from creating an app, and then later on update the app on the fly? 1097 01:01:12,924 --> 01:01:15,590 Do you have a mechanism in place to prevent this kind of problem 1098 01:01:15,590 --> 01:01:16,240 from occurring? 1099 01:01:16,240 --> 01:01:18,355 I'm just wondering from a local device security perspective, 1100 01:01:18,355 --> 01:01:19,938 how would it know the user of the app? 1101 01:01:19,938 --> 01:01:25,710 CHARLIE CHEEVERS: So Apple would just ban that. 1102 01:01:25,710 --> 01:01:29,670 They've moved away from a purely technical approach 1103 01:01:29,670 --> 01:01:36,590 to enforcing security that way to one that basically, 1104 01:01:36,590 --> 01:01:43,580 if you were to change an app that was finding changing stations for babies 1105 01:01:43,580 --> 01:01:48,150 into some sort of porn app, they would just say, you can't do that. 1106 01:01:48,150 --> 01:01:50,525 You're done. 1107 01:01:50,525 --> 01:01:52,900 But you could do it for probably five minutes before they 1108 01:01:52,900 --> 01:01:55,110 caught on or something like that. 1109 01:01:55,110 --> 01:01:59,080 And then within the Exponent developer app and stuff like that, 1110 01:01:59,080 --> 01:02:01,040 you basically have to trust people. 1111 01:02:01,040 --> 01:02:03,600 It's a developer app, so you just load code 1112 01:02:03,600 --> 01:02:05,799 you trust and don't load random strangers that you 1113 01:02:05,799 --> 01:02:07,382 think might be doing malicious things. 1114 01:02:07,382 --> 01:02:19,212 1115 01:02:19,212 --> 01:02:21,670 DAVID J. MALAN: Thank you so much, Charlie, for joining us. 1116 01:02:21,670 --> 01:02:22,270 CHARLIE CHEEVERS: OK. 1117 01:02:22,270 --> 01:02:23,145 Thanks for having me. 1118 01:02:23,145 --> 01:02:26,220 [APPLAUSE] 1119 01:02:26,220 --> 01:02:28,860