WEBVTT NOTE This file was generated by Descript 00:00:03.143 --> 00:00:04.343 CJ Avilla: Welcome to Build and Learn. 00:00:04.343 --> 00:00:05.183 My name is cj. 00:00:05.183 --> 00:00:06.143 Colin Loretz: And I'm Colin. 00:00:06.203 --> 00:00:09.833 And today we are joined by Eric Hanchett to talk about front end 00:00:09.833 --> 00:00:13.853 frameworks and the approaches taken at AWS to implement Amplify. 00:00:13.960 --> 00:00:14.520 Erik Hanchett: Hello? 00:00:14.525 --> 00:00:15.090 Hello, everybody. 00:00:15.090 --> 00:00:17.040 Hey, you guys doing What's up cj? 00:00:17.040 --> 00:00:17.800 What's up Colin? 00:00:17.868 --> 00:00:18.378 CJ Avilla: what's up? 00:00:18.378 --> 00:00:21.162 Welcome, Eric how long have you been at Amplify? 00:00:22.162 --> 00:00:24.832 Erik Hanchett: Yeah, I've been at AW S for two years. 00:00:25.302 --> 00:00:27.812 Most of that time, I've been doing front end engineering, 00:00:27.872 --> 00:00:29.282 working on the Amplify team. 00:00:29.822 --> 00:00:32.312 But just recently I moved over to , dev something. 00:00:32.317 --> 00:00:33.662 I know cj, you know a lot about. 00:00:34.632 --> 00:00:37.452 So I'm really excited about that role and actually I'm sort 00:00:37.452 --> 00:00:38.652 of doing a hybrid role now. 00:00:38.652 --> 00:00:43.252 I'm actually doing a dev, some of the time and then also still doing front end work. 00:00:43.252 --> 00:00:46.042 So I'm still pushing up prs, making fixes. 00:00:46.742 --> 00:00:49.382 So yeah, it's kind of, it's kind of cool seeing like both sides. 00:00:50.287 --> 00:00:53.437 Colin Loretz: Yeah, it kind of keeps you close to the, close to the work. 00:00:54.437 --> 00:00:54.977 Erik Hanchett: It does. 00:00:55.007 --> 00:00:55.337 Yep. 00:00:55.427 --> 00:00:55.637 Yep. 00:00:55.637 --> 00:00:59.957 Actually, I'm Dove rel for the team that I was on before, so I kind of 00:00:59.957 --> 00:01:04.467 know it in intimately of what they're working on and, what we're trying to 00:01:04.617 --> 00:01:06.022 accomplish and get the word out on. 00:01:06.352 --> 00:01:06.862 Colin Loretz: Awesome. 00:01:06.892 --> 00:01:07.132 Yeah. 00:01:07.137 --> 00:01:11.002 I think we're gonna get into what Amplify is in a little bit here, but 00:01:11.062 --> 00:01:14.002 would love to just hear a little bit about your background and the kind of 00:01:14.002 --> 00:01:17.402 work that you're doing today, just so the audience kind of has a sense of who 00:01:17.402 --> 00:01:19.607 Eric is and then we can start to chat. 00:01:19.832 --> 00:01:21.662 About front end frameworks. 00:01:22.367 --> 00:01:22.757 Erik Hanchett: Cool. 00:01:22.757 --> 00:01:26.437 Yeah, I'll give you my bridge diversion I grew up here in, in 00:01:26.437 --> 00:01:32.252 Reno, Nevada, and I've been working, in tech since I graduated college. 00:01:32.332 --> 00:01:34.192 I worked at Intuit for a while. 00:01:34.192 --> 00:01:35.992 Uh, I worked at smaller startups. 00:01:35.997 --> 00:01:38.002 I worked for bigger companies. 00:01:39.002 --> 00:01:44.012 Along my software development journey, I started getting really into teaching. 00:01:44.012 --> 00:01:46.942 It's been a kind of side hobby of mine, a passion of mine. 00:01:46.942 --> 00:01:52.192 So outside my nine to five, I've been, doing YouTube videos, blogging. 00:01:52.192 --> 00:01:53.002 I got. 00:01:53.095 --> 00:01:55.858 To create a couple of books, publish a couple of books, one 00:01:55.918 --> 00:01:57.418 from Manning and one from Pact. 00:01:58.018 --> 00:02:01.348 So I just really deep dived into like personal branding. 00:02:01.348 --> 00:02:03.988 I know we're not gonna talk about Ted today, but if you guys ever wanna, 00:02:04.188 --> 00:02:05.568 chat about that's a fun topic. 00:02:06.068 --> 00:02:10.598 And so I, that was kind of my career for quite a while was, uh, nine to 00:02:10.598 --> 00:02:14.288 five, working on the back end doing Java development, and then I moved 00:02:14.288 --> 00:02:15.728 over to the front end doing front end. 00:02:16.708 --> 00:02:22.468 I never went with the mainstream popular libraries and frameworks like React. 00:02:22.468 --> 00:02:26.458 I'm always like, I did Ember js back in the day when Angular one was huge. 00:02:26.858 --> 00:02:31.283 And then I moved over to view js when React started becoming a lot more popular. 00:02:32.003 --> 00:02:34.403 And then I did view for a while and then I did Angular. 00:02:34.928 --> 00:02:38.088 And now I'm doing React, a lot in my day job. 00:02:38.688 --> 00:02:42.938 And now I'm also, like I said at the beginning, I'm moving towards what I used 00:02:42.938 --> 00:02:49.048 to just do on my nights and weekends, creating content, YouTube, uh, speaking, 00:02:49.468 --> 00:02:50.668 which I'm trying to get more into. 00:02:50.938 --> 00:02:52.593 And now that's my full-time job. 00:02:52.593 --> 00:02:56.703 The last few weeks is, is trying to create content and, you know, there's 00:02:56.708 --> 00:03:00.603 a lot to, to bring developer advocate, but that's, that's a little bit about 00:03:00.603 --> 00:03:01.833 me and kind of the journey I've. 00:03:02.833 --> 00:03:03.433 CJ Avilla: Very cool. 00:03:03.743 --> 00:03:06.923 I was looking at your channel and you've done so much content about 00:03:06.923 --> 00:03:11.153 front end frameworks and also the fact that you've helped build all of these 00:03:11.153 --> 00:03:12.743 tools at Amplify on the front end. 00:03:12.743 --> 00:03:16.923 I thought it would be awesome to just chat about the direction, of front end. 00:03:16.953 --> 00:03:17.638 At the end there. 00:03:17.638 --> 00:03:19.348 You were like, oh, and now I do react. 00:03:19.348 --> 00:03:22.438 Like, it was kind of like a sad , like, you know, like, ok. 00:03:22.438 --> 00:03:22.618 Yeah. 00:03:22.618 --> 00:03:24.718 I was always off the beaten path doing these, you know, 00:03:24.718 --> 00:03:26.738 like more unique frameworks. 00:03:27.068 --> 00:03:30.248 And then, uh, now you're, now you're in React Land. 00:03:30.298 --> 00:03:32.998 Looking at all of those different frameworks that you've used, even 00:03:32.998 --> 00:03:36.353 going back to Ember, what are some things that you think are 00:03:36.383 --> 00:03:38.723 really popular right now in 2022? 00:03:39.193 --> 00:03:41.673 What do you expect to happen in 2020? 00:03:42.673 --> 00:03:43.603 Erik Hanchett: That, that's a good question. 00:03:43.603 --> 00:03:47.743 Let me, let me go back first about, um, being disappointed, working. 00:03:47.748 --> 00:03:48.103 React. 00:03:48.313 --> 00:03:52.743 I, I still love React, you know, I don't hate any frameworks or anything like that. 00:03:53.073 --> 00:03:55.833 It's just I do, I do like working on view kind of as my 00:03:55.833 --> 00:03:57.883 favorite framework to work on. 00:03:58.598 --> 00:04:02.138 . But I am impressed with just in the last couple years, working deep 00:04:02.138 --> 00:04:04.788 diving in view, in side reacts. 00:04:04.878 --> 00:04:07.128 That is, and just how, you know, elegant. 00:04:07.128 --> 00:04:10.368 It's, it's done and, and the functional programming and paradigms 00:04:10.788 --> 00:04:15.378 and, and being able to, to create, you know, really well-written code 00:04:15.378 --> 00:04:18.618 and working with really smart people is something that we do at aws. 00:04:18.648 --> 00:04:21.978 You know, they have some really, really good, uh, react developers. 00:04:21.978 --> 00:04:22.668 So I'm just soak. 00:04:23.398 --> 00:04:28.418 As much information I can from them and how to create really succinct, I don't 00:04:28.418 --> 00:04:30.968 love this word, but idiomatic type code. 00:04:31.088 --> 00:04:32.138 Having the right idioms. 00:04:32.768 --> 00:04:35.638 And so that's been, uh, a pleasure and it's definitely something I, 00:04:35.643 --> 00:04:38.228 I will be probably doing in the future to writing more React. 00:04:38.228 --> 00:04:42.028 And it's something I'm actually doing right now is, writing quite a bit of it. 00:04:42.838 --> 00:04:46.988 For the future and trends, the main crux of your question I can tell you 00:04:46.988 --> 00:04:50.708 that uh, my Twitter feed has been blowing up in the last few months. 00:04:51.338 --> 00:04:54.668 Everything about next and all the crazy stuff they're doing at Versace. 00:04:54.668 --> 00:04:57.158 I think you guys both are nodding and, and agreeing with me there and, 00:04:57.328 --> 00:05:01.958 and just how amazing that community is and how they're just keep pushing, 00:05:02.648 --> 00:05:05.968 uh, these different standards and different ways of creating a. 00:05:06.503 --> 00:05:10.733 Web apps forward, I think we can all kinda relate back in the day when we 00:05:10.733 --> 00:05:15.873 were in web development and there wasn't these single page applications and we 00:05:15.873 --> 00:05:20.223 were all just dealing with, uh, index hdml that's linked to another page and 00:05:20.223 --> 00:05:21.543 everything was server side rendered. 00:05:21.903 --> 00:05:24.753 And it feels like now we're taking these frameworks and we're kind of moving. 00:05:24.828 --> 00:05:28.548 That direction again, where, you know, everything's being, uh, 00:05:28.548 --> 00:05:32.468 rehydrated on, on, on the server and, everything's server side rendered and 00:05:32.473 --> 00:05:35.978 all, all the buzzwords and acronyms out there that that's happening. 00:05:35.978 --> 00:05:39.183 That's where I see like web development's just becoming easier and easier. 00:05:39.183 --> 00:05:42.453 I, I love the tools like remix that came out as well. 00:05:42.453 --> 00:05:45.603 And I guess now they are, who owns them? 00:05:45.603 --> 00:05:46.233 Shopify. 00:05:46.303 --> 00:05:47.083 CJ Avilla: Shopify. 00:05:47.113 --> 00:05:51.093 Yeah, definitely curious to see what happens with that acquisition, 00:05:51.093 --> 00:05:54.093 Shopify acquired remix and. 00:05:54.543 --> 00:05:57.623 They are typically a huge supporter of Rails, right? 00:05:57.623 --> 00:06:03.923 Like Shopify was one of the like pre 1.0 Rails apps and is still like very, very 00:06:03.923 --> 00:06:05.483 heavily invested in the Rails community. 00:06:05.488 --> 00:06:09.563 So I was surprised to see they bought Remix, which is also a 00:06:09.563 --> 00:06:11.903 full stack sort of JavaScript, 00:06:12.533 --> 00:06:15.023 competitor to next JS or something, right? 00:06:15.908 --> 00:06:16.118 Colin Loretz: Yeah. 00:06:16.118 --> 00:06:19.658 Have you seen, um, the Shopify hydrogen and oxygen stuff? 00:06:20.168 --> 00:06:20.648 CJ Avilla: I have. 00:06:20.768 --> 00:06:23.768 Do you think that's what they're gonna use it for is like their, the Shopify apps. 00:06:24.113 --> 00:06:24.773 Colin Loretz: I think so. 00:06:24.833 --> 00:06:29.393 Yeah, because that's, it's very similar to, and I don't think people have 00:06:29.393 --> 00:06:34.223 disclosed this as much that Hiroku was bought by Salesforce because, 00:06:34.293 --> 00:06:39.723 they needed a way to host Java apps, and very shortly after Hiroku was 00:06:39.728 --> 00:06:41.683 acquired, they added Java support. 00:06:42.183 --> 00:06:44.353 There's that, do you build it or do you buy it? 00:06:44.353 --> 00:06:45.403 We had an episode about that. 00:06:45.408 --> 00:06:45.613 Right? 00:06:45.613 --> 00:06:48.373 And like sometimes it's like, we're gonna literally go buy the whole company 00:06:48.373 --> 00:06:52.663 because we don't want to build a hosting company or win the case of remix. 00:06:52.663 --> 00:06:56.828 These like very modern tools where I think, in the early days of Rails 00:06:56.828 --> 00:07:00.328 you were talking about traditional v p s hosting, engine yards and 00:07:00.328 --> 00:07:01.918 slice hosts and things like that. 00:07:02.603 --> 00:07:03.893 But now you have these tools. 00:07:03.893 --> 00:07:07.953 I mean, even Netlify render,, in my mind, like when I think about it and 00:07:07.953 --> 00:07:11.373 we'll, we'll talk about it more, it's like I see a lot of people learning 00:07:11.378 --> 00:07:13.803 today kind of overwhelmed with choice. 00:07:13.923 --> 00:07:20.568 Uh, do I invest in, the Versace, , toolkits, the SVEs, the reacts, the 00:07:20.568 --> 00:07:22.278 view, what, what do I start with? 00:07:22.278 --> 00:07:26.428 And, would love to hear more Eric about like what you see in terms of. 00:07:26.928 --> 00:07:29.148 How easy is it to get started these days? 00:07:29.548 --> 00:07:30.598 when we have so many. 00:07:31.598 --> 00:07:32.168 Erik Hanchett: Yeah, it. 00:07:33.143 --> 00:07:34.778 , it's super easy to get started. 00:07:34.778 --> 00:07:40.268 There's, there is that kind of dilemma of choice, I guess You so, so to put 00:07:40.268 --> 00:07:45.518 it that where there's so many different choices that a new developer that's just 00:07:45.518 --> 00:07:49.238 starting out might, might feel a little intimidated of like, where should I go? 00:07:49.718 --> 00:07:53.228 I think the general wisdom, I still keep hearing everywhere and it's 00:07:53.228 --> 00:07:54.758 taught in bootcamps everywhere. 00:07:54.758 --> 00:07:57.458 Still start with React, but then you gotta have to think 00:07:57.458 --> 00:07:58.958 like, do I do create React app? 00:07:59.228 --> 00:08:00.278 Do I use next? 00:08:00.968 --> 00:08:01.778 Do I use. 00:08:02.778 --> 00:08:03.498 Is there anything else? 00:08:04.038 --> 00:08:05.658 is there, I'm sure they're remix. 00:08:05.658 --> 00:08:06.048 Exactly. 00:08:06.048 --> 00:08:07.248 We just talked about it remix. 00:08:07.728 --> 00:08:10.188 Uh, yeah, so there's still some, some choice there. 00:08:10.368 --> 00:08:14.778 And then I've, like recently people have been leasing the Twitter verse and been 00:08:14.778 --> 00:08:16.698 posting like, don't use create React app. 00:08:17.188 --> 00:08:20.258 Start with something else cuz create React app doesn't have some things that 00:08:20.258 --> 00:08:23.068 you need like, suicide, renderings, site generation and all that. 00:08:24.068 --> 00:08:27.558 I still think though, I mean if you're starting out with re, you know, 00:08:27.558 --> 00:08:31.098 reactors is a great choice and I think it's, it's pretty common knowledge. 00:08:31.098 --> 00:08:35.148 That's what, at least on, on the web framework, front end, JavaScript 00:08:35.148 --> 00:08:37.188 side, uh, that's where you start with. 00:08:37.188 --> 00:08:39.473 But I've seen, , sve, you mentioned selt. 00:08:39.503 --> 00:08:40.193 Svel Kit. 00:08:41.063 --> 00:08:46.833 Which is built on ve ha, uh, which is like a builder, a bundler for your apps. 00:08:47.653 --> 00:08:51.133 I've been seeing so many great things about SELT Kit lately and 00:08:51.133 --> 00:08:54.743 SELT in general, and that community is definitely the alternative I think 00:08:54.743 --> 00:08:58.193 to, to react, uh, along with view. 00:08:58.243 --> 00:09:00.553 View went through a little bit of a growing pain. 00:09:00.763 --> 00:09:05.233 It went from view two to view three, and for those listeners out there, 00:09:05.793 --> 00:09:09.877 That, I don't know, view two was, a really solid, really amazing part of, 00:09:10.117 --> 00:09:12.097 technology, and it still is to this day. 00:09:12.937 --> 00:09:16.957 But, uh, Evan U the creator of View and the core contributors in that team 00:09:17.587 --> 00:09:21.697 had to make some wholesale changes to view and kind of added in some 00:09:21.697 --> 00:09:26.747 new paradigms, something called the Composition api, some other APIs, so they. 00:09:27.087 --> 00:09:31.137 Kind of a big update to view three, which was incompatible with view two. 00:09:31.767 --> 00:09:36.117 So that's been a little bit of a, a pain point in that community, uh, to just 00:09:36.147 --> 00:09:37.707 upgrade from view two to view three. 00:09:38.127 --> 00:09:43.767 But all the stats say that most people now are creating View three apps from scratch. 00:09:44.037 --> 00:09:48.777 And so if you're comparing that view three is also an excellent way to get 00:09:48.777 --> 00:09:53.827 started, if you don't want to go with that React route as well, and view three. 00:09:53.827 --> 00:09:55.177 And if you look at View three and. 00:09:56.127 --> 00:09:59.457 And if you use, there's this new type of way, we call it the script setup 00:09:59.457 --> 00:10:01.527 type of way of creating apps in VJs. 00:10:01.527 --> 00:10:04.527 It's where you just have the script at the top, top and then you 00:10:04.527 --> 00:10:05.817 have the template at the bottom. 00:10:05.817 --> 00:10:08.708 And then you put in all your variables and anything variables you 00:10:08.713 --> 00:10:12.792 have inside, they're actually, uh, Are available inside the template. 00:10:12.792 --> 00:10:14.532 It feels a little bit like svet. 00:10:15.072 --> 00:10:19.522 So it's almost like that paradigm shift where, before we had to use this big 00:10:19.552 --> 00:10:24.262 options object and you had to declare all your reactive variables, that kind 00:10:24.262 --> 00:10:27.532 of, that's going out of phase in the view community and there everybody's moving 00:10:27.532 --> 00:10:29.092 to the script setup in the last year. 00:10:29.672 --> 00:10:33.742 All that to say that, yeah, I, I feel like React is still probably. 00:10:34.352 --> 00:10:35.852 The most popular way to start. 00:10:35.852 --> 00:10:39.212 It's still probably for new developers the way to go, but I don't think 00:10:39.212 --> 00:10:41.422 it hurts to, expand horizons. 00:10:41.422 --> 00:10:45.012 Look at things like selt and view, and then, of course angular too. 00:10:45.242 --> 00:10:46.652 But we can get into angular. 00:10:46.652 --> 00:10:49.592 That's a little bit, I feel like that's a, a little bit different. 00:10:50.592 --> 00:10:51.262 CJ Avilla: Totally. 00:10:51.762 --> 00:10:55.122 One of the other trends that might be interesting to dig into 00:10:55.122 --> 00:10:57.132 is stuff running at the edge. 00:10:57.562 --> 00:11:01.342 Versace was pushing this like, okay, now you can like take your next JS 00:11:01.342 --> 00:11:03.562 app and deploy it and then run stuff. 00:11:03.682 --> 00:11:06.532 Uh, run stuff at the edge and then like that. 00:11:07.102 --> 00:11:09.232 Plus, I know Super Base was doing some stuff. 00:11:09.232 --> 00:11:13.132 Dino Deploy started doing some stuff and then all of a sudden there were some other 00:11:13.132 --> 00:11:15.142 frameworks that popped up like quick and. 00:11:16.142 --> 00:11:18.822 I think, I don't know about Astro, but there's a handful of like 00:11:18.852 --> 00:11:22.782 other, , hot new frameworks and it seems like the new thing is does your 00:11:22.782 --> 00:11:24.682 framework work at the Edge or whatever, 00:11:25.342 --> 00:11:26.692 Um, I don't know 00:11:26.707 --> 00:11:26.917 Colin Loretz: to be 00:11:26.992 --> 00:11:29.082 CJ Avilla: that, seems like it might be a new thing too. 00:11:29.992 --> 00:11:32.152 Erik Hanchett: So, but the edge, meaning like the servers are 00:11:32.152 --> 00:11:37.252 like located closer to you, your physical location, um, wherever the 00:11:37.252 --> 00:11:39.922 website's being served up for, uh, 00:11:40.922 --> 00:11:41.592 CJ Avilla: Exactly. 00:11:41.712 --> 00:11:42.222 Erik Hanchett: Am I right? 00:11:42.807 --> 00:11:43.047 CJ Avilla: Yeah. 00:11:43.047 --> 00:11:43.557 Yeah, yeah. 00:11:43.617 --> 00:11:44.097 Yeah. 00:11:44.772 --> 00:11:45.012 Erik Hanchett: Yeah. 00:11:45.012 --> 00:11:45.822 It's kind of interesting like. 00:11:46.692 --> 00:11:49.842 Edge computing seems to be a hot topic recently. 00:11:49.842 --> 00:11:54.852 I mean, edge computing, ai, Chat, G B T, uh, I, I don't, I don't 00:11:54.852 --> 00:11:56.112 have too much opinions on it. 00:11:56.502 --> 00:12:02.322 Um, cuz I'm like, I just wanna create good front end software and then I'm 00:12:02.322 --> 00:12:05.922 just gonna let my hosting provider deal with that if they use Edge 00:12:05.922 --> 00:12:09.402 Computing to make it faster or if they're using CDNs, things like that. 00:12:10.012 --> 00:12:13.202 That's some of the philosophy with Amplify itself is that front end develop. 00:12:14.202 --> 00:12:18.252 Kind of abstract a lot of that away with some of the solutions that we have. 00:12:18.252 --> 00:12:22.332 So if you want edge computing or, or if you want some of those things, uh, to 00:12:22.332 --> 00:12:24.312 kind of built into some of those services. 00:12:24.312 --> 00:12:26.292 But yeah, I don't have too much of opinion on that. 00:12:26.292 --> 00:12:26.952 I haven't really used it. 00:12:27.952 --> 00:12:32.992 CJ Avilla: Yeah, it, it seems like it would be really useful for global 00:12:32.992 --> 00:12:37.342 companies, but often the apps that you know, beginners are making, or that 00:12:37.342 --> 00:12:42.832 even indie founders are making are really mostly just impacted by one geo. 00:12:42.862 --> 00:12:49.562 So if you're going to take on the burden of making your app work, At the edge, 00:12:49.592 --> 00:12:53.372 meaning you have to figure out like some distributed database solution. 00:12:53.432 --> 00:12:58.502 And you also have to figure out, you know, how am I gonna talk to certain APIs? 00:12:58.502 --> 00:13:03.122 Do I need to like, make sure that I'm hitting the right API based on the geo 00:13:03.127 --> 00:13:04.592 that the request is coming in through? 00:13:04.982 --> 00:13:08.702 Then that might be overhead that you don't actually need or like 00:13:08.702 --> 00:13:10.442 you probably don't need early on. 00:13:10.442 --> 00:13:10.742 Right. 00:13:10.747 --> 00:13:14.432 And so, yeah, I think sticking with, sticking with, uh, the most 00:13:14.432 --> 00:13:16.723 popular thing, probably good, right? 00:13:16.723 --> 00:13:20.263 And you, you can go on like Google Trends, just type in like trends.google.com. 00:13:20.263 --> 00:13:23.893 And if you have two choices, just put them both in there and see which one 00:13:23.893 --> 00:13:25.808 is It's positively trending right now. 00:13:26.138 --> 00:13:27.278 It's probably like a good bet. 00:13:27.278 --> 00:13:27.308 I. 00:13:28.308 --> 00:13:29.588 Erik Hanchett: Yeah, for sure. 00:13:30.588 --> 00:13:33.408 Colin Loretz: I wonder with like this, these being mostly client based 00:13:33.408 --> 00:13:34.698 apps, how many people are trying to. 00:13:35.403 --> 00:13:39.933 Serve the client on the edge and then ends up making a centralized API call anyway. 00:13:40.353 --> 00:13:42.693 And you're like, well, technically, like the client's, you know, 00:13:43.143 --> 00:13:46.503 client or mobile apps, you know, they're being served by the client. 00:13:46.503 --> 00:13:50.583 And so they're like inherently like the, the farthest edge, right? 00:13:50.583 --> 00:13:54.393 And then they're making calls to API servers or backends. 00:13:54.393 --> 00:13:57.693 And like you said, you know, then now you have to have a distributed database 00:13:57.693 --> 00:14:01.113 if you don't want to just end up making like a central remote call anyway. 00:14:02.113 --> 00:14:04.663 But I think while people are learning, those are things that you 00:14:05.033 --> 00:14:07.963 probably should not have to worry about when you get started and just 00:14:07.963 --> 00:14:09.773 focus on, picking the right tool. 00:14:09.833 --> 00:14:11.393 I, I agree with what you were saying. 00:14:11.423 --> 00:14:13.973 You know, starting with React is, is a good place. 00:14:13.973 --> 00:14:16.943 I think picking something and then going sideways into other ones, like, 00:14:16.973 --> 00:14:19.998 I actually really like doing like the Hello worlds for all of these, , if 00:14:19.998 --> 00:14:23.958 you haven't done selt, go do the Hello World, go do the angular one. 00:14:23.958 --> 00:14:27.888 Build a tiny, you know, to-do list app or something in each of them, just 00:14:27.888 --> 00:14:29.648 so you get those, the differences in. 00:14:30.008 --> 00:14:32.618 And even you mentioned like with React, it's like, do I want to see 00:14:32.623 --> 00:14:36.828 what is different in re and Next, or create React app, insert all the 00:14:36.828 --> 00:14:39.888 other options that I'm sure people have forked and, and created too. 00:14:40.553 --> 00:14:41.393 Erik Hanchett: Yeah, it's interesting. 00:14:41.453 --> 00:14:45.263 Yeah, you could even like, right this time of year, I'm seeing so many people 00:14:45.263 --> 00:14:53.243 tweeting stuff like I finished the 12 advent calendar, react or view or uh, code 00:14:53.248 --> 00:14:57.863 kata type, like these code coding problems that happen all the time this month. 00:14:57.863 --> 00:15:01.268 I mean, Certainly, like if you wanna learn a new framework 00:15:01.298 --> 00:15:03.558 or library, here's the time. 00:15:03.558 --> 00:15:09.618 Search out technology advent calendar or 24 days of Christmas. 00:15:10.038 --> 00:15:12.918 And I'm sure someone's having a website up that can do it. 00:15:13.008 --> 00:15:14.538 I was trying to do the view one for a while. 00:15:14.543 --> 00:15:15.558 I can never get into those. 00:15:15.558 --> 00:15:19.038 Not like I start like the first two days and then I'm like, okay, I got it. 00:15:19.038 --> 00:15:20.748 And then I just give up the last 20. 00:15:21.363 --> 00:15:26.693 Days, we have a Slack channel at AWS for advent calendar challenge, and 00:15:26.693 --> 00:15:28.373 then people post a challenge every day. 00:15:29.123 --> 00:15:31.913 And if you get 'em all done, you get I think, a phone tool 00:15:31.913 --> 00:15:33.173 icon or something like that. 00:15:33.803 --> 00:15:36.053 And I, I can never get it, never get it done. 00:15:37.053 --> 00:15:40.743 CJ Avilla: I'm also going through, there's a, there's one called the advent of code. 00:15:40.743 --> 00:15:44.043 If you go to advent of code.com, there's a bunch of challenges that are released 00:15:44.043 --> 00:15:46.803 daily and those are insanely fun. 00:15:47.013 --> 00:15:50.073 They're, uh, the one for today is so challenging. 00:15:50.078 --> 00:15:53.433 Before we jumped on the call, I was just telling Colin, like, I, I've been, I 00:15:53.438 --> 00:15:56.583 burnt like an hour and a half already, just trying to like, figure out part 00:15:56.583 --> 00:15:58.293 one and they increase in difficulty. 00:15:58.293 --> 00:16:00.333 So if you like, day one is kinda like pretty easy. 00:16:00.333 --> 00:16:01.653 It's just like, , parse some of this and. 00:16:02.273 --> 00:16:03.683 Sum up the groups or whatever. 00:16:03.683 --> 00:16:06.253 But yeah, as you go along, they get more and more challenging. 00:16:06.258 --> 00:16:10.288 These are more like, pick a new language that you wanna learn and 00:16:10.293 --> 00:16:11.668 then solve it with that new language. 00:16:11.668 --> 00:16:13.888 They're not like framework specific or anything. 00:16:13.888 --> 00:16:16.978 But yeah, I think if you're looking to learn a new framework, there's probably 00:16:17.338 --> 00:16:19.988 analogs across the, you know, across the 00:16:20.073 --> 00:16:21.073 Erik Hanchett: Put that in the show notes. 00:16:22.038 --> 00:16:22.518 Colin Loretz: Absolutely. 00:16:22.608 --> 00:16:23.808 CJ Avilla: definitely drop it in the show notes. 00:16:23.958 --> 00:16:25.488 And then, uh, yeah, shameless plug. 00:16:25.488 --> 00:16:28.338 If you wanna like watch me solve these, you can head over to YouTube 00:16:28.398 --> 00:16:31.503 and, hopefully there's answers there for the day you're trying to look at. 00:16:31.503 --> 00:16:34.443 But uh, yeah, they're, they're getting to a point where I'm like, okay, this 00:16:34.448 --> 00:16:38.013 one is, this one's taking a lot of time to, a lot of time to solve, but, 00:16:38.443 --> 00:16:40.483 Colin Loretz: What I love about those though is that there's a 00:16:40.483 --> 00:16:43.903 community of people who then are creating content like you, right? 00:16:43.903 --> 00:16:46.873 Where now I get to go learn how to solve the problem that I've 00:16:46.873 --> 00:16:48.133 been trying to solve for a while. 00:16:48.913 --> 00:16:52.933 . And now I wanna see how CJ did it, like I did mine and I'm only on day one still. 00:16:52.933 --> 00:16:55.713 And like you, Eric, I'm like, oh, cool, I got one day done. 00:16:56.373 --> 00:17:00.963 Um, but, I solved it and then I went and looked and CJ like solved it in one line. 00:17:00.963 --> 00:17:04.353 And I'm like, okay, now let's, let's dig into this and see what 00:17:04.353 --> 00:17:05.673 I need to learn about Ruby here. 00:17:05.673 --> 00:17:07.983 But yeah, they're very, very fun. 00:17:08.313 --> 00:17:11.613 Um, things, we tried to do a code challenge in our, we have a, a 00:17:11.613 --> 00:17:13.293 Slack group for our local meetup. 00:17:13.908 --> 00:17:17.198 And I think I was posting daily challenges for maybe a week, and 00:17:17.203 --> 00:17:18.458 then I just completely forgot. 00:17:18.458 --> 00:17:21.818 And it's just now I think we just tell people to go to advent of code. 00:17:21.818 --> 00:17:23.708 But um, yeah. 00:17:23.708 --> 00:17:26.683 I guess with, with all these things that you see changing and, and all 00:17:26.683 --> 00:17:29.623 the frameworks and all the things that you were just talking about, how do 00:17:29.623 --> 00:17:33.343 you see like the current landscape of frameworks and how Amplify fits into that? 00:17:33.343 --> 00:17:36.493 And I think actually if you could give us kind of that, like what is 00:17:36.493 --> 00:17:38.383 amplify for people who are new to it? 00:17:39.383 --> 00:17:39.803 Erik Hanchett: Yeah. 00:17:39.803 --> 00:17:46.773 Amplify is uh, a set of tools and libraries for front end developers to 00:17:46.773 --> 00:17:50.283 make full stack applications, easier. 00:17:50.623 --> 00:17:54.953 It's backed by AW s services, in the backend. 00:17:55.373 --> 00:18:00.233 So like for example, we have, we have a JavaScript library and 00:18:00.233 --> 00:18:02.783 that JavaScript library has a bunch of different categories. 00:18:02.783 --> 00:18:06.083 So it makes it easier work to work with our S3 storage. 00:18:06.338 --> 00:18:06.848 Options. 00:18:06.848 --> 00:18:09.188 And that's like a service that you can upload files to. 00:18:09.638 --> 00:18:14.858 And then we also have APIs to connect to our Cognito service, so which 00:18:14.858 --> 00:18:18.818 that handles our authentication and authorization to it. 00:18:19.028 --> 00:18:23.098 And then one thing is we have a managed GraphQL service called Appy. 00:18:23.498 --> 00:18:27.418 So that's really popular and people use that to use that as their database. 00:18:27.988 --> 00:18:31.308 Uh, No sql, uh, graph QL database that is. 00:18:31.878 --> 00:18:33.528 So that's kind of part of it. 00:18:33.528 --> 00:18:39.058 And then we have like an amplify hosting, so you can easily take your website and, 00:18:39.058 --> 00:18:41.428 and host it up on our, on our service. 00:18:41.428 --> 00:18:44.368 And we just recently released support for next 13. 00:18:45.358 --> 00:18:49.708 And then we also have, other tools like, uh, specifically for our. 00:18:50.528 --> 00:18:53.738 That team I'm working on, we have something called Amplify 00:18:53.738 --> 00:18:58.958 Studio, which is a visual way to create your backend services. 00:18:58.958 --> 00:19:03.638 Like I said before, like the authorization, uh, also be able to create. 00:19:04.568 --> 00:19:09.128 Tables and databases, and then it has this kind of no code or low code 00:19:09.688 --> 00:19:15.578 solution, which is our Amplify studio build service that hooks up with Figma. 00:19:15.608 --> 00:19:19.628 So you can go into Figma and you can create the layout of 00:19:19.628 --> 00:19:20.648 the website that you like. 00:19:21.648 --> 00:19:28.218 then you can export it into code and it actually generates the React code for you. 00:19:28.638 --> 00:19:32.708 And we have our own component library, which we call, amplify ui. 00:19:33.278 --> 00:19:36.608 And this, UI component library is kind of similar to things like. 00:19:37.608 --> 00:19:40.198 Like other React, libraries, like material design, 00:19:40.498 --> 00:19:41.698 react libraries out there. 00:19:42.358 --> 00:19:48.038 And it's not like the olden days of, of no code or automated code 00:19:48.038 --> 00:19:51.008 solutions where you look at the code afterwards and you're like, this is 00:19:51.158 --> 00:19:53.558 just awful and you can't understand it. 00:19:53.558 --> 00:19:56.408 No, this is actually using our primitives that we've created through 00:19:56.408 --> 00:20:02.292 this ui library to generate your site and it'll be exactly how it is. 00:20:02.292 --> 00:20:06.112 And then it also has hooks in, so let's say you're using something called 00:20:06.112 --> 00:20:12.082 Data Store, which allows you to have information up on our Graph QL database. 00:20:12.562 --> 00:20:15.532 And it's kind of analogous to Firebase in some ways. 00:20:15.982 --> 00:20:18.022 And so you, it, you can have hooks in there. 00:20:18.022 --> 00:20:19.222 So when you. 00:20:20.222 --> 00:20:23.882 Download your code that you created in Figma and it generates all 00:20:23.882 --> 00:20:24.932 your primitives and everything. 00:20:25.022 --> 00:20:29.192 It's already connected up to data stores, so now it's going to automatically 00:20:29.192 --> 00:20:33.332 update the table that you created with the correct information or, 00:20:33.542 --> 00:20:35.012 or whatever your data source is. 00:20:35.522 --> 00:20:37.412 So that, that's a little bit of it. 00:20:37.412 --> 00:20:40.262 So we're really focused on developer experience. 00:20:41.262 --> 00:20:44.832 And to just make it really easier for developers to, especially front end 00:20:44.832 --> 00:20:50.022 developers, to make like full stack applications quickly using AWS services. 00:20:50.022 --> 00:20:53.742 And what's really nice is if you're an AWS expert, you're using, and we also 00:20:53.742 --> 00:20:55.542 generate all your code in the background. 00:20:55.542 --> 00:20:57.432 So we have something called infrastructure as code. 00:20:58.152 --> 00:21:01.032 Um, and we, you can actually take that code. 00:21:01.452 --> 00:21:04.752 We have something called cdk and you can, can eject from 00:21:04.752 --> 00:21:06.042 it if you like, grow out of. 00:21:06.895 --> 00:21:09.865 And you're like, I don't like the way it automatically provisions 00:21:09.925 --> 00:21:11.275 all these services for me. 00:21:11.675 --> 00:21:14.925 You can create your own CDKs and manage that yourself. 00:21:14.985 --> 00:21:17.565 But it, it also has a command line utility. 00:21:18.145 --> 00:21:25.505 It has a, it has a flutter library, an iOS library, a , react native library. 00:21:25.985 --> 00:21:28.865 So we kind of try to do a little bit of everything in the front 00:21:28.865 --> 00:21:30.485 end to make it easier to do. 00:21:31.485 --> 00:21:31.685 CJ Avilla: I have so 00:21:31.685 --> 00:21:32.375 many questions. 00:21:33.320 --> 00:21:33.500 Colin Loretz: Go 00:21:33.680 --> 00:21:34.880 Erik Hanchett: question I can answer for you? 00:21:35.055 --> 00:21:38.745 CJ Avilla: I'm in my head, I'm trying to map like all of these different pieces 00:21:38.745 --> 00:21:40.515 to other things that I'm familiar with. 00:21:40.515 --> 00:21:44.505 And so you said sort of like, okay, you know the GraphQL endpoint is sort 00:21:44.510 --> 00:21:47.745 of this managed act, or like app, I think it's called Appy or something. 00:21:47.745 --> 00:21:49.845 It's like this managed database that you can think of as like 00:21:49.845 --> 00:21:51.195 Firebase, super base, whatever. 00:21:51.735 --> 00:21:56.505 And then you also have some way to run and host the application 00:21:56.505 --> 00:21:57.585 and you mentioned next js. 00:21:57.585 --> 00:22:00.135 So you could like take your next JS app and then. 00:22:00.565 --> 00:22:04.195 Deploy it to amplify and have amplify like host and run that. 00:22:04.705 --> 00:22:08.335 And, uh, at the same time we're talking also about like all these different 00:22:08.455 --> 00:22:10.105 UI components and UI libraries. 00:22:10.110 --> 00:22:11.695 And so in my head I'm like, okay, 00:22:12.235 --> 00:22:15.415 where does next JS stop and where does Amplify start? 00:22:15.415 --> 00:22:19.705 And like, would I, you know, use next Js maybe without a p i routes? 00:22:20.095 --> 00:22:23.335 And would I be instead of u like writing my own components 00:22:23.335 --> 00:22:24.235 on the front end for next. 00:22:24.960 --> 00:22:29.250 With React would I'd use like the stuff from the Amplify 00:22:29.490 --> 00:22:31.470 libraries and UI components or. 00:22:32.040 --> 00:22:33.060 Erik Hanchett: Yeah, there's a lot there. 00:22:34.150 --> 00:22:37.240 You can use Next 13 and then have it connected. 00:22:37.450 --> 00:22:42.040 Use our React UI library to construct your whole app out of. 00:22:42.370 --> 00:22:47.320 You can also use our React UI library without any of the AW w s services. 00:22:47.320 --> 00:22:51.030 If you just want to use it as, uh, replacement for another, design 00:22:51.060 --> 00:22:54.550 framework that you're using or whatever other, UI library you're using so 00:22:54.550 --> 00:22:55.870 you can kind of mix and match it. 00:22:55.970 --> 00:22:59.990 You can use our next app and then use Amplify Hosting and then connect up 00:22:59.990 --> 00:23:06.400 to an AWS Lambda so it hit, it has all those, features available, so you 00:23:06.400 --> 00:23:07.960 kind of mix and match what you want. 00:23:08.170 --> 00:23:08.380 Yeah. 00:23:08.380 --> 00:23:09.290 It's kind of cool service. 00:23:09.340 --> 00:23:12.580 I'm just trying to get the word out on it more to, cuz it's got, it's, 00:23:12.760 --> 00:23:18.370 it's grown a lot in the last, uh, 4, 5, 6 years from what it, when it 00:23:18.370 --> 00:23:22.000 started out with, it's, it's, there's a lot of different pieces to it. 00:23:22.005 --> 00:23:24.130 I, I focus mostly on the studio part 00:23:24.460 --> 00:23:25.070 CJ Avilla: Mm-hmm. 00:23:25.150 --> 00:23:27.810 Erik Hanchett: on that, no-code, low-code solution, things like, 00:23:28.360 --> 00:23:30.520 CJ Avilla: Would you say that that is a competitor to something like 00:23:30.520 --> 00:23:36.710 Retool and Webflow and like, can you build the whole thing and deploy it 00:23:36.710 --> 00:23:40.430 without ever touching any code by going through this Amplify studio process? 00:23:41.360 --> 00:23:43.910 Erik Hanchett: Yeah, you, you can, you definitely could. 00:23:44.010 --> 00:23:46.920 I used Webflow for a while and I, those guys are amazing. 00:23:46.925 --> 00:23:50.970 I mean, they've gone so far in that space of being able to create a whole site. 00:23:51.420 --> 00:23:57.210 That probably is a not what this low-code Figma plugin is. 00:23:57.450 --> 00:24:00.720 This is more like you have a designer on site, they have a really 00:24:00.720 --> 00:24:02.430 cool design that they want to do. 00:24:02.790 --> 00:24:05.460 They want to quickly get up and running. 00:24:06.030 --> 00:24:06.950 They can go ahead and use. 00:24:07.665 --> 00:24:13.095 This Figma plugin, put everything in, kind of puts it back to studio. 00:24:13.095 --> 00:24:17.085 You download the components into your app and then you can kind of take those 00:24:17.085 --> 00:24:21.225 components, move 'em around, maybe tweak the design you want, put, put some more 00:24:21.225 --> 00:24:23.265 functionality in and do it that way. 00:24:23.265 --> 00:24:27.435 It's not at that webflow part where it's a little bit more sophisticated. 00:24:27.925 --> 00:24:30.965 This is kind of a different use case in that, in that aspect. 00:24:31.655 --> 00:24:35.525 One thing we try to do, and we are creating more and more of is 00:24:36.035 --> 00:24:37.895 we call 'em connected components. 00:24:38.445 --> 00:24:41.985 we call it somethings primitive, so those are like your buttons and 00:24:41.990 --> 00:24:45.225 your tables and things like that. 00:24:46.100 --> 00:24:50.240 But then we also have kind of, we like higher level components almost 00:24:50.330 --> 00:24:52.280 that connect directly to AWS services. 00:24:52.280 --> 00:24:57.080 So those are like, we have one geo one, so if you wanna add a map to your website, 00:24:57.470 --> 00:25:01.850 then that would be a part of it and it can connect to the AW s map, sur mapping 00:25:01.850 --> 00:25:06.320 service to do all sorts of things, to give locations and, and, and things like that. 00:25:06.320 --> 00:25:06.440 We. 00:25:07.020 --> 00:25:10.440 Authenticator, which connects to our Cognito service. 00:25:10.440 --> 00:25:13.890 So it basically popped us on your website and gives you a login, 00:25:13.890 --> 00:25:18.150 logout change password, but also does MFA multifactor authentication. 00:25:18.870 --> 00:25:21.535 Uh, it also does, uh, s m s and one time passwords. 00:25:21.925 --> 00:25:24.535 So it has like this built-in component that does all these things. 00:25:25.135 --> 00:25:28.515 And then we just did a follow-up uploader, so if you wanna upload files 00:25:28.515 --> 00:25:30.525 real quickly to s3, so we're also. 00:25:31.335 --> 00:25:35.295 Going in couple different fronts here of just like making more useful tools for 00:25:35.295 --> 00:25:42.525 people to use AW s services without having to, dig into the AW s documentation 00:25:42.530 --> 00:25:44.150 and try to pull everything together. 00:25:44.580 --> 00:25:45.900 We're trying to make that much easier and better. 00:25:46.900 --> 00:25:47.230 Colin Loretz: Yeah. 00:25:47.230 --> 00:25:50.910 As someone who has had to write all the off and the m. 00:25:51.100 --> 00:25:53.680 And the one-time password more than once. 00:25:54.070 --> 00:25:57.190 So it sounds like I wouldn't have to write that if I'm using that component. 00:25:57.190 --> 00:26:00.310 Like it kind of comes with the territory. 00:26:00.850 --> 00:26:01.690 Erik Hanchett: Yeah, exactly. 00:26:01.690 --> 00:26:06.610 In fact, we have it to the point where you can use the command line 00:26:06.610 --> 00:26:10.870 interface or use our kind of, I was talking about Studio, which has a. 00:26:11.575 --> 00:26:13.825 Like a visual editor to create your backend. 00:26:13.825 --> 00:26:19.465 So you could go in your visual editor and say, Hey, I want mfa, I want, uh, 00:26:19.465 --> 00:26:23.485 I want to have people log in by email and I want two-factor authentication. 00:26:23.485 --> 00:26:25.135 And then you can check and mark all these things. 00:26:25.645 --> 00:26:29.305 I want this attribute, I wanna add in like last name to every time people 00:26:29.305 --> 00:26:31.465 log in, cause I need to collect their last name for some reason. 00:26:31.945 --> 00:26:34.855 Or when they sign up, that is then you can click a button. 00:26:34.855 --> 00:26:38.760 It generates these files for you that you can download into your project. 00:26:39.225 --> 00:26:43.305 and then you, you slap the authenticator on there and it just detects it 00:26:43.305 --> 00:26:46.055 from that file and it says, oh, you wanted, this QR code to show up. 00:26:46.055 --> 00:26:49.055 So, okay, we're gonna add this to here, and then it just kinda all works. 00:26:49.055 --> 00:26:52.715 And then, then you can then kind of break outta that too if you need to. 00:26:52.775 --> 00:26:57.395 And we have a design token so you can change the branding and look and feel 00:26:57.395 --> 00:26:58.985 of it to make it match your website. 00:26:59.315 --> 00:27:02.465 And then you can even do more complicated customizations too, as well. 00:27:03.400 --> 00:27:03.665 Colin Loretz: awesome. 00:27:04.665 --> 00:27:05.175 CJ Avilla: Nice. 00:27:05.625 --> 00:27:09.165 Yeah, it it, this definitely feels like a trend across the industry 00:27:09.335 --> 00:27:11.295 where companies are building. 00:27:11.805 --> 00:27:15.765 These abstractions that make it even easier to embed into your application. 00:27:15.765 --> 00:27:19.545 So rather than having to hit some like rest endpoint somewhere, you 00:27:19.545 --> 00:27:23.595 are gonna get this wrapper and like now that wrapper is some, you know, 00:27:23.595 --> 00:27:26.895 react hook and a React component, and you just pull 'em in from this third 00:27:26.900 --> 00:27:30.585 party that's provided the third party library that's provided by the service. 00:27:30.585 --> 00:27:32.775 You drop it right in and you're off to the races. 00:27:33.775 --> 00:27:36.775 , I mean the, the Stripe payment element definitely comes to mind when you 00:27:36.775 --> 00:27:39.265 were talking about you can go in the dashboard and sort of configure all these 00:27:39.265 --> 00:27:44.255 different things and that will change how, the component actually behaves. 00:27:44.875 --> 00:27:46.745 I, it sounds really familiar. 00:27:47.255 --> 00:27:50.375 Um, and, uh, that definitely seems like a trend, right? 00:27:50.375 --> 00:27:53.315 Like these inf like especially for infrastructure companies, API 00:27:53.315 --> 00:27:56.375 companies, building tools that aren't just client libraries. 00:27:56.375 --> 00:27:58.055 They're like these souped up. 00:27:59.055 --> 00:28:03.285 More ingrained client library solutions, which is, it's cool to see. 00:28:03.455 --> 00:28:03.805 So, 00:28:04.230 --> 00:28:04.590 Erik Hanchett: Yeah. 00:28:04.590 --> 00:28:05.610 Yeah, definitely. 00:28:05.640 --> 00:28:10.320 Stripe has so many amazing configurations and ways you can create storefronts and 00:28:10.320 --> 00:28:12.210 payment options and things like that. 00:28:12.290 --> 00:28:15.080 I know Stripe has an amazing documentation, and they have 00:28:15.200 --> 00:28:16.370 pretty good libraries too. 00:28:16.550 --> 00:28:20.300 Do they have a component library that you can just drop, drag, 00:28:20.360 --> 00:28:21.620 and drop onto your website? 00:28:22.405 --> 00:28:27.350 CJ Avilla: so the payment element is, A React component. 00:28:27.410 --> 00:28:29.720 So there's a, there's a handful of components for collecting 00:28:29.750 --> 00:28:31.730 and tokenizing payment details. 00:28:31.850 --> 00:28:35.360 And those are all available in Stripe js and you can interact 00:28:35.360 --> 00:28:36.530 with them with vanilla JavaScript. 00:28:36.740 --> 00:28:38.900 And we also have a React framework. 00:28:39.460 --> 00:28:42.970 So you can, pull in these components in React and then drop them on your page. 00:28:43.525 --> 00:28:48.365 but we still have a, like a ways to go in terms of customizing a lot of them. 00:28:48.395 --> 00:28:52.445 But for instance, from your dashboard, you could configure what payment methods 00:28:52.445 --> 00:28:54.095 you want to show in your payment element. 00:28:54.095 --> 00:28:58.835 It'll be like, oh, it's displaying cards and Apple Pay and SEPA 00:28:58.835 --> 00:28:59.975 debit, or something like that. 00:29:00.335 --> 00:29:03.125 And then that you don't actually have to deploy any new code. 00:29:03.125 --> 00:29:05.745 You can configure everything from the dashboard, but 00:29:05.745 --> 00:29:07.305 changing the appearance of it. 00:29:07.995 --> 00:29:10.725 Is all done through this thing called the appearance api. 00:29:10.725 --> 00:29:12.795 So it's just like properties on the component. 00:29:13.155 --> 00:29:16.005 So if you are gonna deploy this, you actually have to like go into the 00:29:16.010 --> 00:29:17.955 code and modify those properties. 00:29:18.105 --> 00:29:19.395 Erik Hanchett: Yeah, that, that's pretty neat. 00:29:19.400 --> 00:29:23.145 And I, I like that we have the same sort of pattern too at Amplify. 00:29:23.145 --> 00:29:25.245 Where you have, there is a JavaScript library. 00:29:25.245 --> 00:29:29.445 So if you don't wanna deal with any UI stuff and you wanna build your UI exactly 00:29:29.450 --> 00:29:32.685 how you want, you still have these, these, this JavaScript library that connects 00:29:32.690 --> 00:29:37.305 to, like I mentioned before, to all the different services and you can create your 00:29:37.455 --> 00:29:41.085 own login page is exactly how you want it, or, or this service is exactly how you. 00:29:42.005 --> 00:29:45.555 but then it's kinda also nice if you want make maybe just a one step up. 00:29:45.555 --> 00:29:46.695 Make it a little bit faster. 00:29:47.085 --> 00:29:49.605 Then here, plop this component down. 00:29:49.965 --> 00:29:53.265 It's probably not gonna look exactly what you want right away, but you probably can 00:29:53.265 --> 00:29:57.675 change the colors and c s s properties and things like that and, and then you 00:29:57.675 --> 00:29:59.565 can even get up and running quicker. 00:30:00.015 --> 00:30:02.315 I dunno, I, I do see some developers, I dunno. 00:30:02.315 --> 00:30:02.715 What do you think, Colin? 00:30:02.715 --> 00:30:03.755 Like some develop. 00:30:04.485 --> 00:30:08.385 Love having those options and some are like, I wanna do everything myself. 00:30:08.385 --> 00:30:11.025 Like you're, I know you do some design and things like that. 00:30:11.265 --> 00:30:13.635 What do you think about tho those type of UI 00:30:14.635 --> 00:30:16.345 Colin Loretz: Yeah, I think what's interesting about that, and we're 00:30:16.345 --> 00:30:20.005 gonna have to do a show on Tailwind in the future, is that I think some 00:30:20.005 --> 00:30:23.815 people do want to be given design. 00:30:23.815 --> 00:30:26.785 Especially I think the stereotype of a backend engineer is that they 00:30:26.935 --> 00:30:28.405 tend to not be good at design. 00:30:29.215 --> 00:30:32.005 I think that most of the time it's because we just haven't done it 00:30:32.005 --> 00:30:33.890 enough, to get that muscle right. 00:30:33.890 --> 00:30:38.510 And so I think that it's valuable to have people learn to do it, even if 00:30:38.510 --> 00:30:41.640 they don't end up doing it, in the case of what you're just talking about, 00:30:41.677 --> 00:30:45.547 What I was trying to think through is like what apps or websites are 00:30:45.547 --> 00:30:47.287 good candidates for using Amplify? 00:30:47.647 --> 00:30:51.907 And I think of prototyping to validate some idea, right? 00:30:51.907 --> 00:30:55.412 And then maybe it gets successful and I stay on Amplify, or it gets really 00:30:55.417 --> 00:30:57.092 successful and I want to eject later. 00:30:57.092 --> 00:31:00.032 And that's great because it's not just a prototyping tool, whereas 00:31:00.032 --> 00:31:03.212 like Bubble and some of these other tools, it feels like if you have a 00:31:03.212 --> 00:31:06.362 breakout success, you're probably gonna be rewriting your, your product. 00:31:06.367 --> 00:31:09.272 And I haven't actually used bubble, so that's no, you know, 00:31:09.332 --> 00:31:10.862 uh, nothing on them for that. 00:31:10.867 --> 00:31:16.502 But, um, you know, . I think that a lot of engineers will also default to the, 00:31:16.832 --> 00:31:20.012 the not invented here, and they want to build everything from scratch, but 00:31:20.012 --> 00:31:24.602 then they don't realize how long and how hard it is to make a secure, like, let's 00:31:24.602 --> 00:31:29.492 just use the the authenticator example again, like MFA and one time password and 00:31:29.522 --> 00:31:33.362 you know, forgot password and retry and all these little things that it's like. 00:31:33.862 --> 00:31:36.622 It doesn't sound that hard, but once you get into it maybe you're doing 00:31:36.682 --> 00:31:39.502 it at a hackathon, you're like, yeah, we're just not gonna put that into this 00:31:39.502 --> 00:31:41.752 hackathon cuz we just don't have time. 00:31:41.752 --> 00:31:42.052 Right. 00:31:42.472 --> 00:31:46.582 Um, so I think there's a little bit of that and I think it, it 00:31:46.582 --> 00:31:50.092 sounds like you can still use all this and bring your own UI as well. 00:31:50.092 --> 00:31:50.302 Right? 00:31:50.307 --> 00:31:52.793 It's not, you're not forced to use the Amplify ui. 00:31:53.282 --> 00:31:53.942 Erik Hanchett: Yeah, yeah. 00:31:53.942 --> 00:31:58.112 We've seen people use our, our stuff and just use one piece of it. 00:31:58.172 --> 00:32:02.282 Like they don't use the ui, but they use the Amplify JavaScript 00:32:02.282 --> 00:32:04.652 library for, for something they need. 00:32:04.652 --> 00:32:08.102 Or maybe they have like a pretty sophisticated DevOps and they already 00:32:08.107 --> 00:32:13.052 have everything in, in, uh, CDK or some other infrastructure as code. 00:32:13.652 --> 00:32:16.832 And then they're like, well, maybe I wanna connect to this service real easily. 00:32:16.832 --> 00:32:17.342 So they. 00:32:18.137 --> 00:32:22.427 They just pull one thing out that they need and they don't use R C L I or Studio 00:32:22.432 --> 00:32:24.557 Tool to provision their infrastructure. 00:32:25.247 --> 00:32:27.647 And we're trying to also just make it more flexible for just 00:32:27.647 --> 00:32:28.997 all those different use cases. 00:32:28.997 --> 00:32:32.987 But I think, yeah, the, a good common use case would be, yeah, you need to 00:32:32.987 --> 00:32:39.712 get up a website, scaffold a website, quickly, hear the tools, and you go for, 00:32:40.687 --> 00:32:41.002 Colin Loretz: Nice. 00:32:41.452 --> 00:32:44.872 I imagine that another big selling point is the mobile, right? 00:32:44.872 --> 00:32:47.692 When we're talking about building anything in the modern web, we're 00:32:47.692 --> 00:32:53.632 talking web plus Android plus iOS, plus maybe desktop too, and now you're 00:32:53.637 --> 00:32:56.692 starting to be like, oh, Okay, are we gonna hire four different teams for 00:32:56.697 --> 00:32:58.582 this, or are we gonna go react native? 00:32:58.582 --> 00:32:59.662 Are we gonna go flutter? 00:33:00.112 --> 00:33:02.662 Um, do I need to hire a flutter developer? 00:33:02.662 --> 00:33:04.462 Do I need to hire a React native person? 00:33:04.462 --> 00:33:08.302 Like it, it just amplifies all literally, right? 00:33:09.302 --> 00:33:09.692 all of the 00:33:09.707 --> 00:33:10.037 Erik Hanchett: nice. 00:33:10.037 --> 00:33:10.887 I see what you did there. 00:33:11.027 --> 00:33:12.827 Colin Loretz: Yeah, I'll, I'll give you that one for free. 00:33:13.827 --> 00:33:16.917 um, you know, you use amplifies all those options that we were 00:33:16.917 --> 00:33:17.907 talking about earlier, right? 00:33:17.937 --> 00:33:21.537 Not just the language or the framework, it's also all the 00:33:21.537 --> 00:33:23.187 devices that it needs to run on. 00:33:23.237 --> 00:33:26.807 I know I've thought about like, if I were to do a mobile app, am I gonna go 00:33:26.812 --> 00:33:31.757 right, you know, swift and Kotlin, or am I gonna go react native and get that? 00:33:32.537 --> 00:33:36.737 Almost native feel, which I think even today we've gotten to the point where it's 00:33:36.887 --> 00:33:39.887 pretty much indistinguishable, uh, anyway. 00:33:39.917 --> 00:33:42.587 So it sounds like you guys have libraries for those things as well. 00:33:43.307 --> 00:33:44.687 Erik Hanchett: Yeah, on the UI side. 00:33:44.687 --> 00:33:48.967 We recently released our React native, uh, library that focused 00:33:48.972 --> 00:33:50.677 on our authenticator component. 00:33:51.217 --> 00:33:55.712 But we have several teams working on different frameworks just to make sure 00:33:56.122 --> 00:34:00.212 anywhere you are that, uh, we have a library that's available that you can. 00:34:01.212 --> 00:34:02.562 So, yeah, it's, it's exciting. 00:34:02.562 --> 00:34:07.002 I actually started getting into React Native a little bit, um, as I was deep 00:34:07.002 --> 00:34:11.567 diving into React the last couple years, I'm like, this is pretty slick., I 00:34:11.567 --> 00:34:16.447 don't, I can't speak to it very much, but I'm like, this is uh, very nice 00:34:16.447 --> 00:34:20.907 way to create, mobile apps, especially if you, obviously already know React. 00:34:20.912 --> 00:34:25.547 So, it, it's really slick cuz I try to learn swift, way back in the day. 00:34:25.907 --> 00:34:26.057 And. 00:34:27.047 --> 00:34:29.357 I just felt thought like it was different paradigm in my head. 00:34:29.507 --> 00:34:32.987 I just didn't get it as quickly as I got, like JavaScript and things like that. 00:34:32.987 --> 00:34:35.087 I'm like, okay, this is, this is really weird. 00:34:35.637 --> 00:34:36.587 Colin Loretz: It feels like you gotta live there. 00:34:36.587 --> 00:34:40.667 I think you gotta, you gotta invest and be there and be a part of the community. 00:34:40.667 --> 00:34:42.677 And it's similar to a lot of these, right? 00:34:42.677 --> 00:34:46.312 Like a lot of them have taken an opinion in their framework and, this 00:34:46.317 --> 00:34:50.822 episode's not meant to create JavaScript Holy Wars by any means, but find 00:34:50.827 --> 00:34:52.352 the thing that makes sense for you. 00:34:52.402 --> 00:34:56.782 Explore the different options, do a bunch of Hello Worlds, try out, amplify, you 00:34:56.782 --> 00:34:58.582 know, get something up on, on a server 00:34:58.632 --> 00:35:01.632 Erik Hanchett: and we're not for everybody either, so it's, it's worth noting 00:35:01.742 --> 00:35:04.197 like, , it's not for every use case. 00:35:04.287 --> 00:35:07.737 Like there might be some use cases where Amplify doesn't make sense. 00:35:07.977 --> 00:35:13.527 Maybe you're all in on the Google ecosystem and, and, uh, or Azure or 00:35:13.527 --> 00:35:17.887 something, and, and doesn't really make sense maybe to use, amplify or 00:35:17.887 --> 00:35:19.087 any of the, any of those frameworks. 00:35:19.087 --> 00:35:22.357 If you're never gonna use AWS at all, it may not make as much. 00:35:23.212 --> 00:35:25.882 To do it, you still can, like you can use our component library. 00:35:25.882 --> 00:35:29.182 You don't have to use AWS at all, but if you wanted to use some of 00:35:29.182 --> 00:35:32.482 our nicer connected components, then you would need some AWS services. 00:35:33.277 --> 00:35:33.412 Colin Loretz: Mm-hmm. 00:35:34.097 --> 00:35:35.447 CJ Avilla: So a lot of. 00:35:36.447 --> 00:35:39.207 . I think a lot of our listeners, maybe not, but a lot of our 00:35:39.207 --> 00:35:41.607 listeners love Ruby . Maybe. 00:35:41.637 --> 00:35:47.947 Maybe I'm projecting . Uh, so when I see Amplify web hosting, I know I 00:35:47.947 --> 00:35:53.617 saw Xjs, but can I like run a Rails application or a Sinatra application? 00:35:54.037 --> 00:35:58.297 I see fully managed C I C D and hosting for fast secure and reliable 00:35:58.297 --> 00:36:00.397 static and server side rendered apps. 00:36:00.877 --> 00:36:04.787 And in my brain I'm thinking, well, like anything that we like to use in. 00:36:05.347 --> 00:36:08.307 Is technically server side rendered, probably. 00:36:08.377 --> 00:36:10.087 So, yeah. 00:36:10.117 --> 00:36:13.057 What's the, what's the good word for the rubus? 00:36:13.207 --> 00:36:16.927 Erik Hanchett: I don't think Amplify Hosting can work with, with Ruby. 00:36:17.047 --> 00:36:22.987 Um, I think you, it would have to just be statically hosted websites. 00:36:23.557 --> 00:36:24.097 CJ Avilla: Mm. 00:36:24.277 --> 00:36:24.547 Got. 00:36:24.937 --> 00:36:26.017 Erik Hanchett: like ssr, 00:36:26.150 --> 00:36:27.890 Colin Loretz: Some more like netlify type. 00:36:28.250 --> 00:36:28.700 Erik Hanchett: Yeah. 00:36:28.790 --> 00:36:29.810 Like Gatsby, Hugo. 00:36:29.870 --> 00:36:32.220 But I am 99.9% sure. 00:36:32.220 --> 00:36:36.310 There's another AWS service that handles, Ruby on Rails much better. 00:36:36.815 --> 00:36:37.265 CJ Avilla: Sure. 00:36:37.310 --> 00:36:39.530 Erik Hanchett: And, uh, bean, elastic bean stock. 00:36:39.535 --> 00:36:42.110 I'm just Googling while I'm talking to you cuz I don't remember all the 00:36:42.170 --> 00:36:43.940 hundreds of services names for aws. 00:36:43.945 --> 00:36:46.700 Like Elastic Bean stock would be one of 'em that's popular. 00:36:47.098 --> 00:36:47.518 CJ Avilla: Okay. 00:36:47.585 --> 00:36:52.395 So maybe for the Rubus one option would be run your Rails app as like 00:36:52.395 --> 00:36:55.755 in API mode or something and then use Amplify for your front end. 00:36:56.205 --> 00:36:59.325 And then you can just like build everything super quickly in Amplify 00:36:59.325 --> 00:37:03.015 Studio or with Figma and then like deploy that to Amplify Studio. 00:37:03.015 --> 00:37:06.555 You get all these UI components and then yeah, you can wire 00:37:06.555 --> 00:37:07.905 that up and talk to Rails. 00:37:07.960 --> 00:37:12.280 Colin Loretz: You can write Lambdas in Ruby, so you could trigger Lambdas from. 00:37:12.905 --> 00:37:17.435 Your various apps and glue it all together with a p i gateway. 00:37:17.435 --> 00:37:22.035 And yeah, if you're new to aw w s, as a listener, like, just go look at the 00:37:22.065 --> 00:37:24.765 scrolling list of, of tools there. 00:37:25.275 --> 00:37:28.515 Uh, we're using a w s comprehend now at orbit. 00:37:29.150 --> 00:37:30.920 To do sentiment analysis and things. 00:37:30.920 --> 00:37:31.910 So that's a little teaser. 00:37:32.080 --> 00:37:35.170 But yeah, just like an endless list of things. 00:37:35.170 --> 00:37:37.955 So I'm always impressed, like you could be, as you mentioned Eric, 00:37:37.955 --> 00:37:41.530 a, an AWS pro and still only, have touched like six things. 00:37:42.530 --> 00:37:42.890 Erik Hanchett: Yeah. 00:37:42.890 --> 00:37:43.160 Yeah. 00:37:43.160 --> 00:37:45.590 I like EC two, like is really popular too. 00:37:45.590 --> 00:37:50.420 I'm just thinking like you could, uh, you could host it on, on your own 00:37:50.420 --> 00:37:54.260 server and, and handle that and then connect up to Amplify hosting or, 00:37:55.040 --> 00:37:55.610 or just, yeah. 00:37:55.850 --> 00:37:56.690 It's so credible. 00:37:56.695 --> 00:38:00.200 I didn't even know before I joined AWS evolved the different services 00:38:00.590 --> 00:38:01.850 and all the things they can do. 00:38:02.850 --> 00:38:06.360 And I'm surprised by all the things that they release every year. 00:38:06.540 --> 00:38:08.010 Like, wow, did we do this now? 00:38:08.010 --> 00:38:09.930 Okay, we do satellites. 00:38:09.990 --> 00:38:10.890 I didn't even know that. 00:38:10.890 --> 00:38:12.510 Like there's a satellite service. 00:38:12.780 --> 00:38:16.890 We lit, literally do like, um, we can ship servers to you. 00:38:16.920 --> 00:38:23.060 We can ship like a whole truckload of servers to your location if you need it. 00:38:23.060 --> 00:38:25.400 I mean, there's whole crazy things like that. 00:38:25.580 --> 00:38:31.860 We have, we used to have a dog, I think like a, like a Alexa robot dog. 00:38:31.865 --> 00:38:32.190 Yeah. 00:38:32.580 --> 00:38:33.060 CJ Avilla: What? 00:38:33.090 --> 00:38:33.540 No way, 00:38:34.540 --> 00:38:36.100 Colin Loretz: Yeah, I think the internet of Things button 00:38:36.100 --> 00:38:37.510 was one of my favorite ones. 00:38:37.510 --> 00:38:41.080 I don't know if that still exists, but it's like a, it's literally just a button 00:38:41.080 --> 00:38:44.740 that triggers the Lambda, which is like, it's the everything button that you. 00:38:45.240 --> 00:38:47.850 Well, yeah, so I think this episode is actually gonna be coming out at, 00:38:47.940 --> 00:38:50.130 as we ran out the end of this year. 00:38:50.130 --> 00:38:52.950 And so I think just kind of wrap, like is there anything 00:38:52.955 --> 00:38:54.690 you're excited about for 2023? 00:38:54.690 --> 00:38:57.090 It doesn't have to be, you know, work specific. 00:38:57.090 --> 00:39:00.120 It could be kind of anything that you see kind of coming ahead and 00:39:00.180 --> 00:39:01.110 things that you're excited for. 00:39:01.660 --> 00:39:04.330 Erik Hanchett: At the end of the year, I love always, I always take 00:39:04.330 --> 00:39:09.730 like the last week or two of the year off, um, just to unwind and relax. 00:39:09.730 --> 00:39:13.990 So I'm looking forward to, to doing that After a busy year, 00:39:14.090 --> 00:39:15.470 my, me and my family have. 00:39:16.025 --> 00:39:17.045 Some things planned. 00:39:17.075 --> 00:39:21.125 We want to, I think we're gonna binge watch some movies this year. 00:39:21.375 --> 00:39:24.345 Last year we went through most of the Star Wars movies, but we 00:39:24.345 --> 00:39:25.215 didn't get through all of them. 00:39:25.220 --> 00:39:27.675 So I think I'm gonna, we're gonna watch some Star Wars movies, 00:39:28.395 --> 00:39:29.565 so I'm looking forward to that. 00:39:29.565 --> 00:39:32.535 And then also, I might have to talk to cj, just get some, or, I know you 00:39:32.540 --> 00:39:37.005 guys did a tip on CFPs, so I am, I listened to you guys' episode on that. 00:39:37.690 --> 00:39:38.440 I need to get into this. 00:39:38.440 --> 00:39:41.650 Like, there's so many things in the developer advocacy world between 00:39:41.650 --> 00:39:43.910 creating content, doing talks. 00:39:43.910 --> 00:39:47.180 I know, Colin, you said you, you did one, uh, recently, right? 00:39:47.240 --> 00:39:47.600 Was that 00:39:48.710 --> 00:39:49.460 CJ Avilla: Yeah, Colin. 00:39:49.460 --> 00:39:51.530 Colin has talked more than I have for sure. 00:39:52.050 --> 00:39:52.410 . It's. 00:39:52.940 --> 00:39:56.360 Uh, but yeah, like, would love to sync up and yeah, share tips 00:39:56.360 --> 00:39:57.380 and tricks for sure, for dev. 00:39:57.880 --> 00:40:01.363 Erik Hanchett: I just started putting out some call for papers, abstracts out there. 00:40:01.423 --> 00:40:08.173 So I'm kind of getting a few of those in the next few weeks, months, so I'll 00:40:08.173 --> 00:40:12.253 be ready when all the conference starts start rolling out, I guess conference 00:40:12.253 --> 00:40:15.673 season's more like summer and and fall, so that's what I'm most excited about. 00:40:16.663 --> 00:40:17.263 Colin Loretz: Very cool. 00:40:17.263 --> 00:40:17.503 Yeah. 00:40:17.503 --> 00:40:20.353 And uh, I take it you're still doing the YouTube channel. 00:40:21.343 --> 00:40:21.823 Erik Hanchett: Yes. 00:40:21.853 --> 00:40:22.123 Yep. 00:40:22.183 --> 00:40:22.393 Yep. 00:40:22.423 --> 00:40:24.133 Still doing, uh, YouTube channel. 00:40:24.133 --> 00:40:27.853 I got the domain eric.video, so that should redirect you 00:40:28.573 --> 00:40:29.143 Colin Loretz: Perfect. 00:40:29.463 --> 00:40:31.183 Erik Hanchett: directly to my YouTube page. 00:40:31.523 --> 00:40:33.383 E R I k or e r I c so you 00:40:33.383 --> 00:40:34.333 Colin Loretz: Oh, you got both. 00:40:35.333 --> 00:40:36.813 Personal branding master over here. 00:40:36.938 --> 00:40:40.568 Erik Hanchett: I tried so hard to get twitter.com/eric and now there's 00:40:40.573 --> 00:40:43.868 someone that owns the Eric handle, and Twitter, and they haven't posted. 00:40:45.495 --> 00:40:46.365 and it's private. 00:40:46.455 --> 00:40:47.655 I want that handle. 00:40:47.835 --> 00:40:50.625 But I, and I tried to contact Twitter cuz they said they're gonna 00:40:50.625 --> 00:40:53.085 release a bunch of Twitter handles. 00:40:53.585 --> 00:40:55.920 They're like, oh, you don't have the standing on Eric 00:40:56.430 --> 00:40:57.780 enough to get that handle. 00:40:57.790 --> 00:40:59.920 So now I wonder if they'll ever release that. 00:41:00.920 --> 00:41:01.160 Maybe 00:41:01.400 --> 00:41:01.730 CJ Avilla: Yeah. 00:41:02.485 --> 00:41:03.080 .Maybe never. 00:41:03.080 --> 00:41:03.380 Yeah. 00:41:03.605 --> 00:41:04.715 Colin Loretz: Yeah, definitely. 00:41:04.805 --> 00:41:05.765 Well, awesome. 00:41:06.185 --> 00:41:08.315 This has been a great episode with you, Erics. 00:41:08.315 --> 00:41:09.155 Thanks for joining us. 00:41:09.155 --> 00:41:11.425 We'll definitely put links to all of you. 00:41:11.525 --> 00:41:15.665 Are things in the show notes and, uh, it's been a good little chat, kind 00:41:15.665 --> 00:41:19.505 of down a little bit of, uh, like web development memory lane as well as 00:41:19.505 --> 00:41:21.065 just getting some time to hang out. 00:41:21.065 --> 00:41:21.965 So appreciate it. 00:41:22.280 --> 00:41:22.730 Erik Hanchett: Awesome. 00:41:22.735 --> 00:41:23.330 Thanks guys. 00:41:23.940 --> 00:41:24.180 CJ Avilla: Yeah. 00:41:24.180 --> 00:41:25.170 Thanks Aton for coming on. 00:41:25.300 --> 00:41:29.213 As always, if you're interested, you can head over to build and learn.dev and 00:41:29.213 --> 00:41:30.923 check out all the links and the resources. 00:41:31.283 --> 00:41:32.783 We'll have those in the show notes for you. 00:41:32.933 --> 00:41:34.283 And that's all for this episode. 00:41:34.288 --> 00:41:36.503 Thanks again so much and we will see you next time. 00:41:36.870 --> 00:41:37.230 Colin Loretz: Bye friends.