AWS Amplify and Front-end Frameworks with Erik Hanchett

Show Notes

In this episode, you'll hear Erik's developer journey and learn about AWS Amplify. We discuss some ƒront-end trends and continue reiterating the value of rolling up your sleeves and building small things to learn new programming languages and frameworks.

We compare and contrast working with Vue and React. We touch briefly on trends seen at Vercel with server-side generation and rendering. Shopify's acquisition of Remix and the dilemma of choice. The advent of code style challenges to build more small projects to learn from.

In the second half of the episode, Erik teaches Colin and CJ all about AWS Amplify's various components that can be used to build full-stack applications.

Resources:
AWS Amplify documentation
Program With Erik YouTube Channel
@erikch on Twitter
adventofcode.com

Full Transcripts
CJ Avilla: Welcome to Build and Learn.

My name is cj.

Colin Loretz: And I'm Colin.

And today we are joined by Eric
Hanchett to talk about front end

frameworks and the approaches
taken at AWS to implement Amplify.

Erik Hanchett: Hello?

Hello, everybody.

Hey, you guys doing What's up cj?

What's up Colin?

CJ Avilla: what's up?

Welcome, Eric how long
have you been at Amplify?

Erik Hanchett: Yeah, I've
been at AW S for two years.

Most of that time, I've been
doing front end engineering,

working on the Amplify team.

But just recently I moved
over to , dev something.

I know cj, you know a lot about.

So I'm really excited about
that role and actually I'm sort

of doing a hybrid role now.

I'm actually doing a dev, some of the time
and then also still doing front end work.

So I'm still pushing up prs, making fixes.

So yeah, it's kind of, it's kind
of cool seeing like both sides.

Colin Loretz: Yeah, it kind of keeps
you close to the, close to the work.

Erik Hanchett: It does.

Yep.

Yep.

Actually, I'm Dove rel for the team
that I was on before, so I kind of

know it in intimately of what they're
working on and, what we're trying to

accomplish and get the word out on.

Colin Loretz: Awesome.

Yeah.

I think we're gonna get into what
Amplify is in a little bit here, but

would love to just hear a little bit
about your background and the kind of

work that you're doing today, just so
the audience kind of has a sense of who

Eric is and then we can start to chat.

About front end frameworks.

Erik Hanchett: Cool.

Yeah, I'll give you my bridge
diversion  I grew up here in, in

Reno, Nevada, and I've been working,
in tech since I graduated college.

I worked at Intuit for a while.

Uh, I worked at smaller startups.

I worked for bigger companies.

Along my software development journey,
I started getting really into teaching.

It's been a kind of side hobby
of mine, a passion of mine.

So outside my nine to five, I've
been, doing YouTube videos,  blogging.

I got.

To create a couple of books,
publish a couple of books, one

from Manning and one from Pact.

So I just really deep dived
into like personal branding.

I know we're not gonna talk about Ted
today, but if you guys ever wanna,

chat about  that's a fun topic.

And so I, that was kind of my career
for quite a while was, uh, nine to

five, working on the back end doing
Java development, and then I moved

over to the front end doing front end.

I never went with the mainstream popular
libraries and frameworks like React.

I'm always like, I did Ember js back
in the day when Angular one was huge.

And then I moved over to view js when
React started becoming a lot more popular.

And then I did view for a
while and then I did Angular.

And now I'm doing React,
a lot in my day job.

And now I'm also, like I said at the
beginning, I'm moving towards what I used

to just do on my nights and weekends,
creating content, YouTube, uh, speaking,

which I'm trying to get more into.

And now that's my full-time job.

The last few weeks is, is trying to
create content and, you know, there's

a lot to, to bring developer advocate,
but that's, that's a little bit about

me and kind of the journey I've.

CJ Avilla: Very cool.

I was looking at your channel and
you've done so much content about

front end frameworks and also the fact
that you've helped build all of these

tools at Amplify on the front end.

I thought it would be awesome to just
chat about  the direction,  of front end.

At the end there.

You were like, oh, and now I do react.

Like, it was kind of like a
sad , like, you know, like, ok.

Yeah.

I was always off the beaten
path doing these, you know,

like more unique frameworks.

And then, uh, now you're,
now you're in React Land.

Looking at all of those different
frameworks that you've used, even

going back to  Ember, what are
some things that you think are

really popular right now in 2022?

What do you expect to happen in 2020?

Erik Hanchett: That,
that's a good question.

Let me, let me go back first about,
um, being disappointed, working.

React.

I, I still love React, you know, I don't
hate any frameworks or anything like that.

It's just I do, I do like
working on view kind of as my

favorite framework to work on.

. But I am impressed with just in
the last couple years, working deep

diving  in view, in side reacts.

That is, and just how, you know, elegant.

It's, it's done and, and the
functional programming and paradigms

and, and being able to, to create,
you know, really well-written code

and working with really smart people
is something that we do at aws.

You know, they have some really,
really good, uh, react developers.

So I'm just soak.

As much information I can from them and
how to create really succinct, I don't

love this word, but idiomatic type code.

Having the right idioms.

And so that's been, uh, a pleasure
and it's definitely something I,

I will be probably doing in the
future to writing more React.

And it's something I'm actually doing
right now is, writing quite a bit of it.

For the future and trends,  the main
crux of your question I can tell you

that uh, my Twitter feed has been
blowing up in the last few months.

Everything about next and all the
crazy stuff they're doing at Versace.

I think you guys both are nodding
and, and agreeing with me there and,

and just how amazing that community
is and how they're just keep pushing,

uh, these different standards
and different ways of creating a.

Web apps forward, I think we can all
kinda relate back in the day when we

were in web development and  there wasn't
these single page applications and we

were all just dealing with, uh, index
hdml that's linked to another page and

everything was server side rendered.

And it feels like now we're taking these
frameworks and we're kind of moving.

That direction again, where, you
know, everything's being, uh,

rehydrated on, on, on the server and,
everything's server side rendered and

all, all the buzzwords and acronyms
out there that that's happening.

That's where I see like web development's
just becoming easier and easier.

I, I love the tools like
remix that came out as well.

And I guess now they are, who owns them?

Shopify.

CJ Avilla: Shopify.

Yeah, definitely curious to see
what happens with that acquisition,

Shopify acquired remix and.

They are typically a huge
supporter of Rails, right?

Like Shopify was one of the like pre 1.0
Rails apps and is still like very, very

heavily invested in the Rails community.

So I was surprised to see they
bought Remix, which is also a

full stack sort of JavaScript,

competitor to next JS or something, right?

Colin Loretz: Yeah.

Have you seen, um, the Shopify
hydrogen and oxygen stuff?

CJ Avilla: I have.

Do you think that's what they're gonna use
it for is like their, the Shopify apps.

Colin Loretz: I think so.

Yeah, because that's, it's very similar
to, and I don't think people have

disclosed this as much that Hiroku
was bought by Salesforce because,

they needed a way to host Java apps,
and very shortly after Hiroku was

acquired, they added Java support.

There's that, do you
build it or do you buy it?

We had an episode about that.

Right?

And like sometimes it's like, we're
gonna literally go buy the whole company

because we don't want to build a hosting
company or win the case of remix.

These like very modern tools where
I think, in the early days of Rails

you were talking about traditional
v p s hosting,  engine yards and

slice hosts and things like that.

But now you have these tools.

I mean, even Netlify render,, in my
mind, like when I think about it and

we'll, we'll talk about it more, it's
like I see a lot of people learning

today kind of overwhelmed with choice.

Uh, do I invest in, the Versace,
, toolkits, the SVEs, the reacts, the

view, what, what do I start with?

And, would love to hear more Eric
about like what you see in terms of.

How easy is it to get started these days?

when we have so many.

Erik Hanchett: Yeah, it.

, it's super easy to get started.

There's, there is that kind of dilemma
of choice, I guess You so, so to put

it that where there's so many different
choices that a new developer that's just

starting out might, might feel a little
intimidated of like, where should I go?

I think the general wisdom, I still
keep hearing everywhere and it's

taught in bootcamps everywhere.

Still start with React, but
then you gotta have to think

like, do I do create React app?

Do I use next?

Do I use.

Is there anything else?

is there, I'm sure they're remix.

Exactly.

We just talked about it remix.

Uh, yeah, so there's still
some, some choice there.

And then I've, like recently people have
been leasing the Twitter verse and been

posting like, don't use create React app.

Start with something else cuz create
React app doesn't have some things that

you need like, suicide, renderings,
site generation and all that.

I still think though, I mean if
you're starting out with re, you know,

reactors is a great choice and I think
it's, it's pretty common knowledge.

That's what, at least on, on the
web framework, front end, JavaScript

side, uh, that's where you start with.

But I've seen, , sve, you mentioned selt.

Svel Kit.

Which is built on ve ha, uh, which is
like a builder, a bundler for your apps.

I've been seeing so many great
things about SELT Kit lately and

SELT in general, and that community
is  definitely the alternative I think

to, to react, uh, along with view.

View went through a little
bit of a growing pain.

It went from view two to view three,
and for those listeners out there,

That, I don't know,  view two was,  a
really solid, really amazing part of,

technology, and it still is to this day.

But, uh, Evan U the creator of View
and the core contributors in that team

had to make some wholesale changes
to view and kind of added in some

new paradigms, something called the
Composition api, some other APIs, so they.

Kind of a big update to view three,
which was incompatible with view two.

So that's been a little bit of a, a pain
point in that community, uh, to just

upgrade from view two to view three.

But all the stats say that most people now
are creating View three apps from scratch.

And so if you're comparing that view
three is also an excellent way to get

started, if you don't want to go with
that React route as well, and view three.

And if you look at View three and.

And if you use, there's this new type
of way, we call it the script setup

type of way of creating apps in VJs.

It's where you just have the
script at the top, top and then you

have the template at the bottom.

And then you put in all your
variables and anything variables you

have inside, they're actually, uh,
Are available inside the template.

It feels a little bit like svet.

So it's almost like that paradigm shift
where, before we had to use this big

options object and you had to declare
all your reactive variables, that kind

of, that's going out of phase in the view
community and there everybody's moving

to the script setup in the last year.

All that to say that, yeah, I, I
feel like React is still probably.

The most popular way to start.

It's still probably for new developers
the way to go, but I don't think

it hurts to, expand horizons.

Look at things like selt and view,
and then, of course angular too.

But we can get into angular.

That's a little bit, I feel like
that's a, a little bit different.

CJ Avilla: Totally.

One of the other trends that
might be interesting to dig into

is stuff running at the edge.

Versace was pushing this like, okay,
now you can like take your next JS

app and deploy it and then run stuff.

Uh, run stuff at the
edge and then like that.

Plus, I know Super Base
was doing some stuff.

Dino Deploy started doing some stuff and
then all of a sudden there were some other

frameworks that popped up like quick and.

I think, I don't know about Astro,
but there's a handful of like

other, ,  hot new frameworks and it
seems like the new thing is does your

framework work at the Edge or whatever,

Um, I don't know

Colin Loretz: to be

CJ Avilla: that, seems like
it might be a new thing too.

Erik Hanchett: So, but the edge,
meaning like the servers are

like located closer to you, your
physical location, um, wherever the

website's being served up for, uh,

CJ Avilla: Exactly.

Erik Hanchett: Am I right?

CJ Avilla: Yeah.

Yeah, yeah.

Yeah.

Erik Hanchett: Yeah.

It's kind of interesting like.

Edge computing seems to
be a hot topic recently.

I mean, edge computing, ai,  Chat,
G B T, uh, I, I don't, I don't

have too much opinions on it.

Um, cuz I'm like, I just wanna create
good front end software and then I'm

just gonna let my hosting provider
deal with that if they use Edge

Computing to make it faster or if
they're using CDNs, things like that.

That's some of the philosophy with
Amplify itself is that front end develop.

Kind of abstract a lot of that away
with some of the solutions that we have.

So if you want edge computing or, or if
you want some of those things, uh, to

kind of built into some of those services.

But yeah, I don't have too
much of opinion on that.

I haven't really used it.

CJ Avilla: Yeah, it, it seems like
it would be really useful for global

companies, but often the apps that you
know, beginners are making, or that

even indie founders are making are
really mostly just impacted by one geo.

So if you're going to take on the burden
of making your app work, At the edge,

meaning you have to figure out like
some distributed database solution.

And you also have to figure out, you
know, how am I gonna talk to certain APIs?

Do I need to like, make sure that I'm
hitting the right API based on the geo

that the request is coming in through?

Then that might be overhead that
you don't actually need  or like

you probably don't need early on.

Right.

And so, yeah, I think sticking
with, sticking with, uh, the most

popular thing,  probably good, right?

And you, you can go on like Google Trends,
just type in like trends.google.com.

And if you have two choices, just put
them both in there and see which one

is It's positively trending right now.

It's probably like a good bet.

I.

Erik Hanchett: Yeah, for sure.

Colin Loretz: I wonder with like
this, these being mostly client based

apps, how many people are trying to.

Serve the client on the edge and then ends
up making a centralized API call anyway.

And you're like, well, technically,
like the client's, you know,

client or mobile apps, you know,
they're being served by the client.

And so they're like inherently
like the, the farthest edge, right?

And then they're making calls
to API servers or backends.

And like you said, you know, then now
you have to have a distributed database

if you don't want to just end up making
like a central remote call anyway.

But I think while people are
learning, those are things that you

probably should not have to worry
about when you get started and just

focus on, picking the right tool.

I, I agree with what you were saying.

You know, starting with
React is, is a good place.

I think picking something and then
going sideways into other ones, like,

I actually really like doing like the
Hello worlds for all of these, , if

you haven't done selt, go do the
Hello World, go do the angular one.

Build a tiny, you know, to-do list
app or something in each of them, just

so you get those, the differences in.

And even you mentioned like with
React, it's like, do I want to see

what is different in re and Next,
or create React app, insert all the

other options that I'm sure people
have forked and, and created too.

Erik Hanchett: Yeah, it's interesting.

Yeah, you could even like, right this
time of year, I'm seeing so many people

tweeting stuff like I finished the 12
advent calendar, react or view or uh, code

kata type, like these code coding problems
that happen all the time this month.

I mean, Certainly, like if you
wanna learn a new framework

or library, here's the time.

Search out technology advent
calendar or 24 days of Christmas.

And I'm sure someone's having
a website up that can do it.

I was trying to do the
view one for a while.

I can never get into those.

Not like I start like the first two
days and then I'm like, okay, I got it.

And then I just give up the last 20.

Days, we have a Slack channel at AWS
for advent calendar challenge, and

then people post a challenge every day.

And if you get 'em all done,
you get I think, a phone tool

icon or something like that.

And I, I can never get
it, never get it done.

CJ Avilla: I'm also going through, there's
a, there's one called the advent of code.

If you go to advent of code.com, there's
a bunch of challenges that are released

daily and those are insanely fun.

They're, uh, the one for
today is so challenging.

Before we jumped on the call, I was just
telling Colin, like, I, I've been, I

burnt like an hour and a half already,
just trying to like, figure out part

one and they increase in difficulty.

So if you like, day one
is kinda like pretty easy.

It's just like, , parse some of this and.

Sum up the groups or whatever.

But yeah, as you go along, they
get more and more challenging.

These are more like, pick a new
language that you wanna learn and

then solve it with that new language.

They're not like framework
specific or anything.

But yeah, I think if you're looking to
learn a new framework, there's probably

analogs across the, you know, across the

Erik Hanchett: Put that in the show notes.

Colin Loretz: Absolutely.

CJ Avilla: definitely
drop it in the show notes.

And then, uh, yeah, shameless plug.

If you wanna like watch me solve
these, you can head over to YouTube

and, hopefully there's answers there
for the day you're trying to look at.

But uh, yeah, they're, they're getting
to a point where I'm like, okay, this

one is, this one's taking a lot of
time to, a lot of time to solve, but,

Colin Loretz: What I love about
those though is that there's a

community of people who then are
creating content like you, right?

Where now I get to go learn how
to solve the problem that I've

been trying to solve for a while.

. And now I wanna see how CJ did it, like
I did mine and I'm only on day one still.

And like you, Eric, I'm like,
oh, cool, I got one day done.

Um, but, I solved it and then I went and
looked and CJ like solved it in one line.

And I'm like, okay, now let's,
let's dig into this and see what

I need to learn about Ruby here.

But yeah, they're very, very fun.

Um, things, we tried to do a code
challenge in our, we have a, a

Slack group for our local meetup.

And I think I was posting daily
challenges for maybe a week, and

then I just completely forgot.

And it's just now I think we just
tell people to go to advent of code.

But um, yeah.

I guess with, with all these things
that you see changing and, and all

the frameworks and all the things that
you were just talking about, how do

you see like the current landscape of
frameworks and how Amplify fits into that?

And I think actually if you could
give us kind of that, like what is

amplify for people who are new to it?

Erik Hanchett: Yeah.

Amplify is uh, a set of tools and
libraries for front end developers to

make full stack applications, easier.

It's backed by AW s
services, in the backend.

So like for example, we have,
we have a JavaScript library and

that JavaScript library has a
bunch of different categories.

So it makes it easier work
to work with our S3 storage.

Options.

And that's like a service
that you can upload files to.

And then we also have APIs to connect
to our Cognito service, so which

that handles our authentication
and authorization to it.

And then one thing is we have a
managed GraphQL service called Appy.

So that's really popular and people
use that to use that as their database.

Uh, No sql, uh, graph QL database that is.

So that's kind of part of it.

And then we have like an amplify hosting,
so you can easily take your website and,

and host it up on our, on our service.

And we just recently
released support for next 13.

And then we also have, other tools
like, uh, specifically for our.

That team I'm working on, we
have something called Amplify

Studio, which is a visual way
to create your backend services.

Like I said before, like the
authorization, uh, also be able to create.

Tables and databases, and then it
has this kind of no code or low code

solution, which is our Amplify studio
build service that hooks up with Figma.

So you can go into Figma and
you can create the layout of

the website that you like.

then you can export it into code and it
actually generates the React code for you.

And we have our own component
library, which we call, amplify ui.

And this, UI component library is
kind of similar to things like.

Like other React,  libraries,
like material design,

react libraries out there.

And it's not like the olden days
of, of no code or automated code

solutions where you look at the code
afterwards and you're like, this is

just awful and you can't understand it.

No, this is actually using our
primitives that we've created through

this ui library to generate your
site and it'll be exactly how it is.

And then it also has hooks in, so
let's say you're using something called

Data Store, which allows you to have
information up on our Graph QL database.

And it's kind of analogous
to Firebase in some ways.

And so you, it, you can
have hooks in there.

So when you.

Download your code that you created
in Figma and it generates all

your primitives and everything.

It's already connected up to data stores,
so now it's going to automatically

update the table that you created
with the correct information or,

or whatever your data source is.

So that, that's a little bit of it.

So we're really focused
on developer experience.

And to just make it really easier for
developers to, especially front end

developers, to make like full stack
applications quickly using AWS services.

And what's really nice is if you're an
AWS expert, you're using, and we also

generate all your code in the background.

So we have something called
infrastructure as code.

Um, and we, you can
actually take that code.

We have something called cdk
and you can, can eject from

it if you like, grow out of.

And you're like, I don't like the
way it automatically provisions

all these services for me.

You can create your own CDKs
and manage that yourself.

But it, it also has a
command line utility.

It has a, it has a flutter library, an
iOS library, a , react native library.

So we kind of try to do a little
bit of everything in the front

end to make it easier to do.

CJ Avilla: I have so

many questions.

Colin Loretz: Go

Erik Hanchett: question
I can answer for you?

CJ Avilla: I'm in my head, I'm trying to
map like all of these different pieces

to other things that I'm familiar with.

And so you said sort of like, okay,
you know the GraphQL endpoint is sort

of this managed act, or like app, I
think it's called Appy or something.

It's like this managed database
that you can think of as like

Firebase, super base, whatever.

And then you also have some way
to run and host the application

and you mentioned next js.

So you could like take
your next JS app and then.

Deploy it to amplify and have
amplify like host and run that.

And, uh, at the same time we're talking
also about like all these different

UI components and UI libraries.

And so in my head I'm like, okay,

where does next JS stop and
where does Amplify start?

And like, would I, you know, use
next Js maybe without a p i routes?

And would I be instead of u
like writing my own components

on the front end for next.

With React would I'd use like
the stuff from the Amplify

libraries and UI components or.

Erik Hanchett: Yeah, there's a lot there.

You can use Next 13 and
then have it connected.

Use our React UI library to
construct your whole app out of.

You can also use our React UI library
without any of the AW w s services.

If you just want to use it as, uh,
replacement for another,  design

framework that you're using or whatever
other, UI library you're using so

you can kind of mix and match it.

You can use our next app and then use
Amplify Hosting and then connect up

to an AWS Lambda so it hit, it has
all those, features available, so you

kind of mix and match what you want.

Yeah.

It's kind of cool service.

I'm just trying to get the word out
on it more to, cuz it's got, it's,

it's grown a lot in the last, uh,
4, 5, 6 years from what it, when it

started out with, it's, it's, there's
a lot of different pieces to it.

I, I focus mostly on the studio part

CJ Avilla: Mm-hmm.

Erik Hanchett: on that, no-code,
low-code solution, things like,

CJ Avilla: Would you say that that
is a competitor to something like

Retool and Webflow and like, can you
build the whole thing and deploy it

without ever touching any code by going
through this Amplify studio process?

Erik Hanchett: Yeah, you, you
can, you definitely could.

I used Webflow for a while
and I, those guys are amazing.

I mean, they've gone so far in that space
of being able to create a whole site.

That probably is a not what
this low-code Figma plugin is.

This is more like you have a
designer on site, they have a really

cool design that they want to do.

They want to quickly get up and running.

They can go ahead and use.

This Figma plugin, put everything
in, kind of puts it back to studio.

You download the components into your
app and then you can kind of take those

components, move 'em around,  maybe tweak
the design you want, put, put some more

functionality in and do it that way.

It's not at that webflow part where
it's a little bit more sophisticated.

This is kind of a different use
case in that, in that aspect.

One thing we try to do, and we
are creating more and more of is

we call 'em connected components.

we call it somethings primitive,
so those are like your buttons and

your tables and things like that.

But then we also have kind of, we
like higher level components almost

that connect directly to AWS services.

So those are like, we have one geo one,
so if you wanna add a map to your website,

then that would be a part of it and it
can connect to the AW s map, sur mapping

service to do all sorts of things, to give
locations and, and, and things like that.

We.

Authenticator, which connects
to our Cognito service.

So it basically popped us on your
website and gives you a login,

logout change password, but also
does MFA multifactor authentication.

Uh, it also does, uh, s m
s and  one time passwords.

So it has like this built-in
component that does all these things.

And then we just did a follow-up
uploader, so if you wanna upload files

real quickly to s3, so we're also.

Going in couple different fronts here of
just like making more useful tools for

people to use AW s services without having
to,  dig into the AW s documentation

and try to pull everything together.

We're trying to make that
much easier and better.

Colin Loretz: Yeah.

As someone who has had to
write all the off and the m.

And the one-time password more than once.

So it sounds like I wouldn't have to
write that if I'm using that component.

Like it kind of comes with the territory.

Erik Hanchett: Yeah, exactly.

In fact, we have it to the point
where you can use the command line

interface or use our kind of, I was
talking about Studio, which has a.

Like a visual editor
to create your backend.

So you could go in your visual editor
and say, Hey, I want mfa, I want, uh,

I want to have people log in by email
and I want two-factor authentication.

And then you can check
and mark all these things.

I want this attribute, I wanna add in
like last name to every time people

log in, cause I need to collect
their last name for some reason.

Or when they sign up, that is
then you can click a button.

It generates these files for you that
you can download into your project.

and then you, you slap the authenticator
on there and it just detects it

from that file and it says, oh, you
wanted, this QR code to show up.

So, okay, we're gonna add this to
here, and then it just kinda all works.

And then, then you can then kind of
break outta that too if you need to.

And we have a design token so you can
change the branding and look and feel

of it to make it match your website.

And then you can even do more
complicated customizations too, as well.

Colin Loretz: awesome.

CJ Avilla: Nice.

Yeah, it it, this definitely feels
like a trend across the industry

where companies are building.

These abstractions that make it even
easier to embed into your application.

So rather than having to hit some
like rest endpoint somewhere, you

are gonna get this wrapper and like
now that wrapper is some, you know,

react hook and a React component, and
you just pull 'em in from this third

party that's provided the third party
library that's provided by the service.

You drop it right in and
you're off to the races.

, I mean the, the Stripe payment element
definitely comes to mind when you

were talking about you can go in the
dashboard and sort of configure all these

different things and that will change
how, the component actually behaves.

I, it sounds really familiar.

Um, and, uh, that definitely
seems like a trend, right?

Like these inf like especially
for infrastructure companies, API

companies, building tools that
aren't just client libraries.

They're like these souped up.

More ingrained client library
solutions, which is, it's cool to see.

So,

Erik Hanchett: Yeah.

Yeah, definitely.

Stripe has so many amazing configurations
and ways you can create storefronts and

payment options and things like that.

I know Stripe has an amazing
documentation, and they have

pretty good libraries too.

Do they have a component library
that you can just drop, drag,

and drop onto your website?

CJ Avilla: so the payment
element is, A React component.

So there's a, there's a handful
of components for collecting

and tokenizing payment details.

And those are all available in
Stripe js and you can interact

with them with vanilla JavaScript.

And we also have a React framework.

So you can, pull in these components in
React and then drop them on your page.

but we still have a, like a ways to go
in terms of customizing a lot of them.

But for instance, from your dashboard,
you could configure what payment methods

you want to show in your payment element.

It'll be like, oh, it's displaying
cards and Apple Pay and SEPA

debit, or something like that.

And then that you don't actually
have to deploy any new code.

You can  configure everything
from the dashboard, but

changing the appearance of it.

Is all done through this thing
called the appearance api.

So it's just like
properties on the component.

So if you are gonna deploy this, you
actually have to like go into the

code and modify those properties.

Erik Hanchett: Yeah,
that, that's pretty neat.

And I, I like that we have the same
sort of pattern too at Amplify.

Where you have, there
is a JavaScript library.

So if you don't wanna deal with any UI
stuff and you wanna build your UI exactly

how you want, you still have these, these,
this JavaScript library that connects

to, like I mentioned before, to all the
different services and you can create your

own login page is exactly how you want it,
or, or this service is exactly how you.

but then it's kinda also nice if you
want make maybe just a one step up.

Make it a little bit faster.

Then here, plop this component down.

It's probably not gonna look exactly what
you want right away, but you probably can

change the colors and c s s properties
and things like that and, and then you

can even get up and running quicker.

I dunno, I, I do see
some developers, I dunno.

What do you think, Colin?

Like some develop.

Love having those options and some are
like, I wanna do everything myself.

Like you're, I know you do some
design and things like that.

What do you think about
tho those type of UI

Colin Loretz: Yeah,  I think what's
interesting about that, and we're

gonna have to do a show on Tailwind
in the future, is that I think some

people do want to be given design.

Especially I think the stereotype
of a backend engineer is that they

tend to not be good at design.

I think that most of the time it's
because we just haven't done it

enough, to get that muscle right.

And so I think that it's valuable to
have people learn to do it, even if

they don't end up doing it, in the
case of what you're just talking about,

What I was trying to think through
is like what apps or websites are

good candidates for using Amplify?

And I think of prototyping
to validate some idea, right?

And then maybe it gets successful and
I stay on Amplify, or it gets really

successful and I want to eject later.

And that's great because it's not
just a prototyping tool, whereas

like Bubble and some of these other
tools, it feels like if you have a

breakout success, you're probably
gonna be rewriting your, your product.

And I haven't actually used
bubble, so that's no, you know,

uh, nothing on them for that.

But, um, you know, . I think that a lot
of engineers will also default to the,

the not invented here, and they want
to build everything from scratch, but

then they don't realize how long and how
hard it is to make a secure, like, let's

just use the the authenticator example
again, like MFA and one time password and

you know, forgot password and retry and
all these little things that it's like.

It doesn't sound that hard, but once
you get into it maybe you're doing

it at a hackathon, you're like, yeah,
we're just not gonna put that into this

hackathon cuz we just don't have time.

Right.

Um, so I think there's a little
bit of that and I think it, it

sounds like you can still use all
this and bring your own UI as well.

Right?

It's not, you're not forced
to use the Amplify ui.

Erik Hanchett: Yeah, yeah.

We've seen people use our, our
stuff and just use one piece of it.

Like they don't use the ui, but
they use the Amplify JavaScript

library for, for something they need.

Or maybe they have like a pretty
sophisticated DevOps and they already

have everything in, in, uh, CDK  or
some other infrastructure as code.

And then they're like, well, maybe I
wanna connect to this service real easily.

So they.

They just pull one thing out that they
need and they don't use R C L I or Studio

Tool to provision their infrastructure.

And we're trying to also just
make it more flexible for just

all those different use cases.

But I think, yeah, the, a good common
use case would be, yeah, you need to

get up a website, scaffold a website,
quickly, hear the tools, and you go for,

Colin Loretz: Nice.

I imagine that another big selling
point is the mobile, right?

When we're talking about building
anything in the modern web, we're

talking web plus Android plus iOS,
plus maybe desktop too, and now you're

starting to be like, oh, Okay, are we
gonna hire four different teams for

this, or are we gonna go react native?

Are we gonna go flutter?

Um, do I need to hire a flutter developer?

Do I need to hire a React native person?

Like it, it just amplifies
all literally, right?

all of the

Erik Hanchett: nice.

I see what you did there.

Colin Loretz: Yeah, I'll, I'll
give you that one for free.

um, you know, you use amplifies
all those options that we were

talking about earlier, right?

Not just the language or the
framework, it's also all the

devices that it needs to run on.

I know I've thought about like, if I
were to do a mobile app, am I gonna go

right, you know, swift and Kotlin, or
am I gonna go react native and get that?

Almost native feel, which I think even
today we've gotten to the point where it's

pretty much indistinguishable, uh, anyway.

So it sounds like you guys have
libraries for those things as well.

Erik Hanchett: Yeah, on the UI side.

We recently released our React
native, uh, library that focused

on our authenticator component.

But we have several teams working on
different frameworks just to make sure

anywhere you are that, uh, we have a
library that's available that you can.

So, yeah, it's, it's exciting.

I actually started getting into React
Native a little bit, um, as I was deep

diving into React the last couple years,
I'm like, this is pretty slick., I

don't, I can't speak to it very much,
but I'm like, this is uh, very nice

way to create, mobile apps, especially
if you, obviously already know React.

So, it, it's really slick cuz I try
to learn swift, way back in the day.

And.

I just felt thought like it was
different paradigm in my head.

I just didn't get it as quickly as I got,
like JavaScript and things like that.

I'm like, okay, this is,
this is really weird.

Colin Loretz: It feels
like you gotta live there.

I think you gotta, you gotta invest and
be there and be a part of the community.

And it's similar to a lot of these, right?

Like a lot of them have taken an
opinion in their framework and, this

episode's not meant to create JavaScript
Holy Wars by any means, but find

the thing that makes sense for you.

Explore the different options, do a bunch
of Hello Worlds, try out, amplify, you

know, get something up on, on a server

Erik Hanchett: and we're not for everybody
either, so it's, it's worth noting

like, , it's not for every use case.

Like there might be some use cases
where Amplify doesn't make sense.

Maybe you're all in on the Google
ecosystem and, and, uh, or Azure or

something, and, and doesn't really
make sense maybe to use, amplify or

any of the, any of those frameworks.

If you're never gonna use AWS at
all,  it may not make as much.

To do it, you still can, like you
can use our component library.

You don't have to use AWS at all,
but if you wanted to use some of

our nicer connected components, then
you would need some AWS services.

Colin Loretz: Mm-hmm.

CJ Avilla: So a lot of.

. I think a lot of our listeners,
maybe not, but a lot of our

listeners love Ruby . Maybe.

Maybe I'm projecting . Uh, so when
I see Amplify web hosting, I know I

saw Xjs, but can I like run a Rails
application or a Sinatra application?

I see fully managed C I C D and
hosting for fast secure and reliable

static and server side rendered apps.

And in my brain I'm thinking, well,
like anything that we like to use in.

Is technically server
side rendered, probably.

So, yeah.

What's the, what's the
good word for the rubus?

Erik Hanchett: I don't think Amplify
Hosting can work with, with Ruby.

Um, I think you, it would have to
just be statically hosted websites.

CJ Avilla: Mm.

Got.

Erik Hanchett: like ssr,

Colin Loretz: Some more like netlify type.

Erik Hanchett: Yeah.

Like Gatsby, Hugo.

But  I am 99.9% sure.

There's another AWS service that
handles, Ruby on Rails much better.

CJ Avilla: Sure.

Erik Hanchett: And, uh,
bean, elastic bean stock.

I'm just Googling while I'm talking
to you cuz I don't remember all the

hundreds of services names for aws.

Like Elastic Bean stock would
be one of 'em that's popular.

CJ Avilla: Okay.

So maybe for the Rubus one option
would be run your Rails app as like

in API mode or something and then
use Amplify for your front end.

And then you can just like build
everything super quickly in Amplify

Studio or with Figma and then like
deploy that to Amplify Studio.

You get all these UI components
and then yeah, you can wire

that up and talk to Rails.

Colin Loretz: You can write Lambdas in
Ruby, so you could trigger Lambdas from.

Your various apps and glue it
all together with a p i gateway.

And yeah, if you're new to aw w s, as
a listener, like, just go look at the

scrolling list of, of tools there.

Uh, we're using a w s
comprehend now at orbit.

To do sentiment analysis and things.

So that's a little teaser.

But yeah, just like an
endless list of things.

So I'm always impressed, like you
could be, as you mentioned Eric,

a, an AWS pro and still only,
have touched like six things.

Erik Hanchett: Yeah.

Yeah.

I like EC two, like is really popular too.

I'm just thinking like you could,
uh, you could host it on, on your own

server and, and handle that and then
connect up to Amplify hosting or,

or just, yeah.

It's so credible.

I didn't even know before I joined
AWS evolved the different services

and all the things they can do.

And I'm surprised by all the things
that they release every year.

Like, wow, did we do this now?

Okay, we do satellites.

I didn't even know that.

Like there's a satellite service.

We lit, literally do like, um,
we can ship servers to you.

We can ship like a whole truckload of
servers to your location if you need it.

I mean, there's whole
crazy things like that.

We have, we used to have a dog, I
think like a, like a Alexa robot dog.

Yeah.

CJ Avilla: What?

No way,

Colin Loretz: Yeah, I think
the internet of Things button

was one of my favorite ones.

I don't know if that still exists, but
it's like a, it's literally just a button

that triggers the Lambda, which is like,
it's the everything button that you.

Well, yeah, so I think this episode
is actually gonna be coming out at,

as we ran out the end of this year.

And so I think just kind of
wrap, like is there anything

you're excited about for 2023?

It doesn't have to be,
you know, work specific.

It could be kind of anything that
you see kind of coming ahead and

things that you're excited for.

Erik Hanchett: At the end of the
year, I love always, I always take

like the last week or two of the year
off, um, just to unwind and relax.

So I'm looking forward to, to
doing that After a busy year,

my, me and my family have.

Some things planned.

We want to, I think we're gonna
binge watch some movies this year.

Last year we went through most
of the Star Wars movies, but we

didn't get through all of them.

So I think I'm gonna, we're gonna
watch some Star Wars movies,

so I'm looking forward to that.

And then also, I might have to talk
to cj, just get some, or, I know you

guys did a tip on CFPs, so I am, I
listened to you guys' episode on that.

I need to get into this.

Like, there's so many things in the
developer advocacy world between

creating content, doing talks.

I know, Colin, you said you, you
did one, uh, recently, right?

Was that

CJ Avilla: Yeah, Colin.

Colin has talked more
than I have for sure.

. It's.

Uh, but yeah, like, would love
to sync up and yeah, share tips

and tricks for sure, for dev.

Erik Hanchett: I just started putting out
some call for papers, abstracts out there.

So I'm kind of getting a few of those
in the next few weeks, months, so I'll

be ready when all the conference starts
start rolling out, I guess conference

season's more like summer and and fall,
so that's what I'm most excited about.

Colin Loretz: Very cool.

Yeah.

And uh, I take it you're still
doing the YouTube channel.

Erik Hanchett: Yes.

Yep.

Yep.

Still doing, uh, YouTube channel.

I got the domain eric.video,
so that should redirect you

Colin Loretz: Perfect.

Erik Hanchett: directly
to my YouTube page.

E R I k or e r I c so you

Colin Loretz: Oh, you got both.

Personal branding master over here.

Erik Hanchett: I tried so hard to
get twitter.com/eric and now there's

someone that owns the Eric handle,
and Twitter, and they haven't posted.

and it's private.

I want that handle.

But I, and I tried to contact
Twitter cuz they said they're gonna

release a bunch of Twitter handles.

They're like, oh, you don't
have the standing on Eric

enough to get that handle.

So now I wonder if
they'll ever release that.

Maybe

CJ Avilla: Yeah.

.Maybe never.

Yeah.

Colin Loretz: Yeah, definitely.

Well, awesome.

This has been a great
episode with you, Erics.

Thanks for joining us.

We'll definitely put links to all of you.

Are things in the show notes and, uh,
it's been a good little chat, kind

of down a little bit of, uh, like web
development memory lane as well as

just getting some time to hang out.

So appreciate it.

Erik Hanchett: Awesome.

Thanks guys.

CJ Avilla: Yeah.

Thanks Aton for coming on.

As always, if you're interested, you
can head over to build and learn.dev and

check out all the links and the resources.

We'll have those in
the show notes for you.

And that's all for this episode.

Thanks again so much and
we will see you next time.

Colin Loretz: Bye friends.