[MUSIC PLAYING]
ANDREW BROGDON: Hey, everybody, and welcome
back to the Ask Flutter Q&A here at Flutter Interact.
We've done a little switching around of hosts again.
We got Kate up here with us.
KATE LOVETT: In the hot seat.
ANDREW BROGDON: And we have John in the moderator seat.
JOHN RYAN: Yup.
I'm over here.
I'm back in the moderator chair, asking the questions
that you post on Twitter.
ANDREW BROGDON: We also have a new interviewee, somebody I'm
very excited to have with us.
So this is Jenn Creighton.
She is the front end architect at the Wynn.
And you were a noted React expert.
You speak at the React community and help people get up
to speed with React, right?
JENN CREIGHTON: Yes, yes.
Very, very into React.
When you asked me to be here, I was like, uh, you know.
[LAUGHTER]
ANDREW BROGDON: And I was like, that's what we want.
We want the React knowledge.
This is great.
JENN CREIGHTON: I mean, but I'm a big fan also
of seeing other communities.
I'm a big fan of learning new technologies.
So React is definitely what I work with all the time,
but I'm always happy to learn something new.
ANDREW BROGDON: And this is-- you know, we talk all the time,
Flutter is a great way to build apps,
but it's not the only way.
It's one more tool in the toolbox.
And so we wanted to make sure we showed that here
at Ask Flutter.
So we have some questions.
Since this is Ask Flutter, we've got a few.
And let me start off with one.
I thought it'd be fun to sort of see
how you would approach something and how
we would approach something, and where the overlap is.
So this is a question from Samir Ahmad.
He asked, what is the best way to manage
global and local state?
JENN CREIGHTON: OK.
ANDREW BROGDON: So how do you handle that in React?
JENN CREIGHTON: So what we're thinking
about when we're talking about global versus
local state in React is often this question
of what do you store where, because we always
have some sort of global state, and then you may or may not
have local state.
Now, the biggest question that I always
get with this, too, is where to say things like
is a modal open, or is a drop-down open,
or something like that.
ANDREW BROGDON: Just like pure UI questions.
JENN CREIGHTON: Pure UI, yeah.
And my question is always, what else
needs to know about that state?
So if literally nothing else needs to know about it,
it's local.
And it's always good to actually start local and then
see if anything else needs it, and then
move it up to global state.
ANDREW BROGDON: So it sort of graduates
to a higher plane of existence at state?
JENN CREIGHTON: Yeah, it's sort of easier to go from that
up than it is to go from that down.
ANDREW BROGDON: Right.
JENN CREIGHTON: You know?
And yeah, if it's used throughout,
sometimes you do save UI state globally.
So modals are actually a really good example
of this, where you might need to close a modal
and then open up another one, and so you actually
do need some state management at the very top level for that.
Yeah.
ANDREW BROGDON: That sounds very familiar to the concerns
you'd have with Flutter, right?
You certainly have stateful widgets,
you know, lower in the tree that might be tracking things,
like an animation--
KATE LOVETT: Yeah, exactly.
ANDREW BROGDON: --or something like that.
That's still a stateful widget.
But you don't necessarily-- you know,
the time that you need to bring state up into a global state
or something like that would be if you have two widgets that
are sort of different parts of a tree,
you need something above them and they
could both look up to you to get the state that they need.
JENN CREIGHTON: Yeah, exactly.
ANDREW BROGDON: That sounds very similar.
JENN CREIGHTON: It's very comparative.
KATE LOVETT: Yeah.
That's interesting.
ANDREW BROGDON: So you, you have a question, right?
KATE LOVETT: I do.
I wrote this one down earlier.
This is from Max Miracle in New Zealand.
ANDREW BROGDON: Yay, a kiwi.
KATE LOVETT: They wanted to know, how can I avoid messiness
in Flutter?
Sometimes with piecing all the widgets together,
it can get a little overwhelming sometimes.
And so maybe some best practices in clean code.
ANDREW BROGDON: Yeah, this is something I've actually
seen you speak on.
JENN CREIGHTON: Yes.
ANDREW BROGDON: So this is pretty cool.
It's a great question.
JENN CREIGHTON: So this is my, I would say, niche within React,
actually, is component architecture.
Really, I loved component architecture.
I really love that React is declarative,
and that really helps me with this.
So some of my things that I see very often in React--
I don't know if they apply to Flutter, but a lot of times
I see things like a lot of if-else statements
or ternary operators to say, no, actually,
render this thing instead.
And I'm like, oh, actually, what if we broke this out
into two separate components and they actually
can manage their own thing?
You're going see maybe a little bit of duplication,
but maybe we could clean that up some other way.
But mostly, it should be broken out.
And so my advice to a lot of people starting out in React
is more components, not less--
more components.
Go towards that.
ANDREW BROGDON: So fewer total properties
in going into more different components.
JENN CREIGHTON: Yeah.
We actually talked about this just really slightly
before this, that I do a talk where
I talk about the apropcalypse, which
is when you have like a million props
that you're sending into your React component.
And when you're doing that, like, that is
when you're probably sending in either business logic that
doesn't need to be there, and usually you can just
go ahead and pull that out into a separate function,
give it to a parent somewhere and kind of
pass it down that way, or connect to Redux or something
like that, or--
oh, I lost my train of thought.
ANDREW BROGDON: Happens to me all the time.
JENN CREIGHTON: Or it needs to be broken out
into separate components.
So you're doing too much in one component.
You're relying on one component to give you back
how many different states.
And so that's really the first thing that I usually
tell people to do, is break those up into more components.
Don't try and put everything in one component.
I mean, technically, in React, your entire app
could be what component.
It literally could be, you know, where
you're passing in all the props that would ever be used.
But why would you do that?
ANDREW BROGDON: Right.
KATE LOVETT: Yeah.
JENN CREIGHTON: And then the question
is, well, why would you do that farther down the chain, either?
So that's usually my baseline advice on that.
KATE LOVETT: That's great.
ANDREW BROGDON: Yeah, it's certainly possible in Flutter
to load up a widget with, like, 14 parameters
and its constructor--
KATE LOVETT: Yeah, it can--
you know, it's possible to really roll your own widgets
so easily that it can balloon out of proportion sometimes.
So kind of keeping those best practices in mind
is very helpful.
ANDREW BROGDON: Let me ask you sort of a follow-up.
This is something that we get asked
about a lot in Flutter land and something that I wonder about.
How do you separate business logic
from presentation logic with React components?
Do you just say, this is a component
and I'm going to make it a purely business logic
component, and this one's just going to be
for display and presentation?
JENN CREIGHTON: Sometimes.
So earlier, when React was newer on the scene,
maybe about four or five years ago,
there was this idea of presentational components,
components that were really just meant to put in some props
and they were going to present something, and then
components above that that would actually handle the business
logic.
And that's not necessarily the case anymore.
It was a good rule to get started with.
And I still think it helps you as you get started with React.
But normally, you're starting to rely on less components,
but more like functions that handle the business logic
and pass things down.
Or you're relying on connecting to a state management
library, like Redux or MobX or something like that,
and you're using that to store business logic in there.
ANDREW BROGDON: And so your lower components
don't really have a ton of business logic to do generally.
JENN CREIGHTON: Yeah.
ANDREW BROGDON: Which is certainly
the case with Flutter, too.
Because you can use Redux with Flutter, obviously.
But even if you're using something
like BLoC or some other state management solution,
you're probably using an inherited widget somewhere,
and all your lower widgets are just
going straight up the tree to go find
what they need from a business logic perspective.
JENN CREIGHTON: And it makes it so you
can reuse a lot of your components down the tree.
If you're embedding it with business logic, what
you're really doing is you're locking it into place.
You're saying you can only use this with this logic.
And to change it starts to get really, really messy,
and you're going to be like, I'm just
going to add a little prop here and a little prop there,
and then you have, like, 50 plus props
and it's the apropcalypse.
Yep.
ANDREW BROGDON: All right.
JENN CREIGHTON: Yes.
ANDREW BROGDON: Well, that's about all the questions
that we had for you.
Thank you so much for being here with us.
I really appreciate it.
JENN CREIGHTON: Thank you for having me.
I really enjoyed it.
ANDREW BROGDON: I hope, yeah.
If you don't mind setting your microphone right
back down there, and you can go right back
to enjoying the event.
Jenn Creighton, everybody.
Thank you so much.
KATE LOVETT: Thank you for joining us.
[MUSIC PLAYING]