Full stack Dart / Flutter Reference Architecture

Help Architecture & Patterns
1

Hey All,

I thought I might offer up an example app that recently turned up in the Flutter samples repo called “Compass” which loosely follows a basic implementation of an AirBnB like application.

One of the things I often found most difficult when I was first learning to code was the lack of “real world” examples to learn from and so I’m really glad the team decided to invest some time in putting this together.

I also really appreciate the fact that they also included a Dart backend to go with it as I don’t think there are enough examples for people to point to out there at the moment even though Dart is truly a great language in that context too.

Anyways, if you haven’t already seen it take a look here samples/compass_app at main · flutter/samples · GitHub and let me know what you think.

13 Likes
2

Hello! I am happy to hear that you liked it.

I worked on it, and I recommend checking some of the earlier PRs because there’s a lot of discussion in them on how/why we took certain decisions, e.g. one of the first PRs: Create compass-app first feature by miquelbeltran · Pull Request #2342 · flutter/samples · GitHub

I’ll also add that the Flutter team is currently reviewing (in public) the documentation that will go with it: Add initial pages for Architecture guidance by ericwindmill · Pull Request #11300 · flutter/website · GitHub so anyone who wants to take an early look please check it out

11 Likes
3

Ah that’s so nice to hear from you. Congratulations on the great work here. I think this has long been a sorely missing piece of guidance up until this point that’s lead to lots of rather frustrating conversations almost on repeat it seems at times debating one state management approach verses another while seemingly ignoring all the other aspects that go into architecture.

It’s really nice to finally have something a bit more authoritative and prescriptive coming down the pipe on the topic and I think it is going to help grow the overall level of engineering maturity in the community as a whole so thank you again for your contribution towards that along with everyone else involved. I think you have done a fantastic job here.

4 Likes
4

Both the app and the documentation is fantastic.

I didn’t dive in too deeply into either but had a quick look at both and I’m very impressive with the quality of both.

I imagine this will help a lot of developers and I really hope it helps inspire many others to be more open to using Dart when it comes to picking a backend language.

3 Likes
5

I’m happy to see positive feedback before the docs even go live, thank you all.

The current PR for the website mostly covers high-level stuff. I don’t think there’s a single code snippet in the 3 pages included in that PR. There are several more PRs to come come for docs that Miguel and I have already written, including a doc that gets into the implementation details of the compass app, and several docs that Miguel has written that we’ve been referring to as “design pattern recipes”. These expand on the main docs to implement things like offline first functionality.

It has taken Miguel and I many months to write all these docs, and I’m looking forward to getting critical feedback.

7 Likes
6

Yeah, just to build on top of what was already said…

It’s looking amazing already and you can absolutely see exactly how that hard work is paying off. This is a genuinely huge win for the community. Thanks again to you both and everyone else involved in making this happen.

I did have one follow up question to which I suspect the answer to this is perhaps not but are there any plans to also take a look at including some material regarding the server / API side of things too?

1 Like
7

There aren’t plans to discuss the server much in these architecture docs. I feel like they’re overwhelming already, and I don’t want to add more.

But there are regularly discussions about how much effort we should put into ‘backend Dart’ resources. We haven’t done so because there’s just so much to document and other topics get more requests.

In other words, if there were enough requests from the Flutter developers for resources about the backend, I think we’d do it. :wink:

2 Likes
8

What about a fork using different state management package?
I really like that there is such a reference app but as always when someonething like this is published by the Flutter team it makes it harder for packages that are not part of it.

2 Likes
9

Those are in the works :slight_smile:

2 Likes
10

I hope you include watch_it :wink:
If I find some time I would help with the fork.

11

What would be an effective way to communicate those kinds of wants? It does feel a bit like a chicken and egg problem sometimes but I think some kind of API server guide in Dart would be also an incredibly huge gift for the community.

I just think there’s a large group of people who are looking for someone to show them the way at the moment because they aren’t really even sure what is possible especially when it comes to modern setups building on top of a platform like Cloud Run or the wider GCP ecosystem.

12

This is an effective way to communicate it. The DevRel team is constantly on the look out for what folks want from us.

You could also look for issues on flutter/website and dart-lang/site-www that relate to what you want, and comment or upvote them. If the issues don’t exist, feel free to create one.

And you should respond to user surveys and feedback forms whenever you get the chance. This is probably the most effective way because it has built in redundancy, but its reactive and depends on when we send out surveys. These periodically popup in the IDE and around the website. Theres one right now on the Flutter Fundamentals pages, and there will be on the architecture docs soon after they land.

As long as the message gets to us, it’ll be considered when we have conversations about planning our work.

3 Likes
13

I was playing around with this approach last night to just build some simple CRUD functionality on a basic resource.

I did have one question about where if at all a concept like Actions and Intents fits into this pattern?

I was thinking that it might be nice to have a unified way to trigger certain operations on a screen from button presses or keyboard shortcuts for example.

Actions seemed very similar to the command pattern in some sense but things just lived in a slightly different place and figured before I got too deep into it, I might just ask how I might think about bringing those worlds together with the MVVM architecture in the Compass App example.

14

I am not familiar with this specific API (action + intent), my understanding is that its use is purely for user hardware input (like keyboard presses) on the view (widget) level. To me this API doesn’t really belong an architecture pattern documentation, but rather they solve a very specific hardware input problem.

While a Command is a pattern that helps interact between the View and the ViewModel (a more in detail guide for the Command pattern is in the works btw).

15

Ah just to clear up some things here because yeah, I had observed that it didn’t seem to be particularly common in the Flutter community for whatever reason so its not a huge shock to hear you hadn’t had much experience with it.

But while it is typically used in the context of handling keyboard shortcuts it’s otherwise a very general API to basically map some kind of “intent” I.e a user clicks a button to some kind of “action” I.e calling a view model for example and this entire concept of an “Acton” is as best I can tell essentially a “command object” in that you extend the action base class and override the “invoke” method the same way you might for a widget with a build method.

I guess the part I’m specifically a bit confused by was from what I could tell in the Compass app there were a few parts like this where it seemed like there were custom implementations of things that were already in the framework and due to the fact that I’m still coming to terms with Flutter and how many people seemed to have looked at this I just arrived to the conclusion that I’m missing something here but I wasn’t sure what exactly if that makes sense.

This video gives a much easier/quicker way to parse the concept of Actions that might be worth taking a look at because I’m not sure I did a great job here myself explaining :stuck_out_tongue_winking_eye:

Note: that video talks about actions again in the context of keyboard shortcuts but if you take a look in that documentation link I provided earlier you can see that it’s not actually coupled to that concept whatsoever just a common use case and for me it seems sensible to use the same approach for both that and things like user interactions or even just screen loads for example.

16

This part of the docs probably proves the clearest example of what I’m talking about where you can see what an Intent and Action look like in practice and how you could use that in a click handler to do the command pattern if that all makes sense.

@override
Widget build(BuildContext context) {
  return Actions(
    actions: <Type, Action<Intent>>{
      SelectAllIntent: SelectAllAction(model),
    },
    child: Builder(
      builder: (context) => TextButton(
        onPressed: Actions.handler<SelectAllIntent>(
          context,
          SelectAllIntent(controller: controller),
        ),
        child: const Text('SELECT ALL'),
      ),
    ),
  );
}


/// An intent that is bound to SelectAllAction to select all the text in its
/// controller.
class SelectAllIntent extends Intent {
  const SelectAllIntent();
}


class SelectAllAction extends Action<SelectAllIntent> {
  SelectAllAction(this.model);

  final Model model;

  @override
  void invoke(covariant SelectAllIntent intent) => model.selectAll();
}
17

In case you weren’t aware of it, itsallwidgets.com (similar to this site, for good reason) has a catalog of hundreds of flutter apps, many of which are open source with source code available.

5 Likes
18

Ah I did not know that, I’ll certainly take a look and thanks for the heads up but in this particular case I’m interested in just this one app at the moment as it’s the reference architecture.

19

I would like to be a bit cautious with calling it “the reference” architecture. It’s one good example but there are many ways to structure good apps

2 Likes
20

I’m also somewhat cautious with that because I feel like it only ever leads to a whole host of very unproductive conversations not unlike where the wider community has been for several years now on the topic of state management but I think without getting caught up on the the idea that “the” implies “the only one true way” it is otherwise in a fairly concrete sense “the architecture that is being recommended and all the relevant code and documentation is being built around” explaining.

I think it’s not in anyway incompatible to say this is the reference architecture but as you mentioned many other approaches work well especially when you have specific needs and requirements that would dictate it, and to their credit the team does go to great lengths to say exactly that in the documentation they are currently developing.

I assume the focus is a lot more on general patterns though rather than this is the exact specific way to say for example implement “the command pattern” or something like that which is also what I was interested in exploring a bit here since AFAICT there’s something like that built into the framework already and I was curious to get some feedback on things like that.

1 Like