Blog Learn Features Forum Docs Start Building

Anvil Community Forum

MVC Architecture Demo

Show and Tell
#1

I’ve written an example app (the usual todo list) showing how the Model-View-Controller (MVC) pattern can be applied to Anvil apps:

https://anvil.works/build#clone:RHNOQUKUGAUQ4KLZ=SWBITLDPNUSV6OGEIKZ4RJRW

It uses the (experimental) atomic module from Anvil Labs along with Anvil’s Portable Classes.

Models are portable classes representing the domain being modelled. They are entirely standalone and have no knowledge of any other part of the app.

Views are ordinary forms - concerned only with displaying content and responding to user events.

Controllers encode the business logic of the app - that’s where atomic is doing its work.

5 Likes
#2

Hmm… I’m trying to clone it but it’s failing.

I get the pop up, click “make copy”, I see a spinner for a few seconds, then nothing.

No cloned app, no further activity.

#3

odd. I’ve just clicked that link from one of my other accounts and it all worked just fine.

#4

Hold on, it’s the dependencies. I’ll fix it… (thanks @stucork )

#5

Done. Try it again now.

#6

Yep, that did it :slight_smile:

edit - very interesting…

1 Like
#7

This is very nice! I was excited when you first posted about the atomic module, and started brainstorming about my ideal architecture for MVC in Anvil.

Have you worked server side validation into the flow yet? e.g. a todo list item cannot be more than 50 characters (to pick a nonsensical example). The controller can certainly verify that for legitimate users, but the server would also have to verify it to protect against folks hacking the client code. The update_db code would need to be able back out a pending change if it failed server side logic.

Have you thought about working in the portable class cache updates for situations where something on the server changes underlying data? Another nonsensical example for the todo list app, all todo items are converted to sentence case via string.capitalize. For legitimate users that could be done in the atom, but that’s on the client side and subject to tampering.

Just ideas that have been floating around in my head for whenever I start a new app.

#8

Started work on it, but it’s still WIP (and it works both client and server side):

You can see an example of it in use in the test code:

1 Like
#9

Yep! Just need to get this one finished off:

2 Likes
#10

This one’s done now with a new portable_atom decorator.

2 Likes
#11

The demo is now updated with the latest features from atomic (a new ‘reaction’ function) so that the form can use a writeback.

The server calls are also now aysnc, so non-blocking!

2 Likes
#12

I like how this bit of black magic is an offhand comment!

2 Likes
#13

That’s done by the non-blocking module of Anvil Labs.

1 Like
What is the best practice for asynchronously loading component data?
#14

Updated - with a cleaner separation of controller and model layers, status display and error handling for the async server call.

And a Github repo

#16

I should have known better. It didn’t take long for unsuitable stuff to appear. I’ve got rid of the offending items.

Sigh.

But I did enjoy:

2022-02-01_16-21
2022-02-01_16-21865×67 3.5 KB

#17

…whistles … :innocent:

I don’t think I wrote anything bad though? That must have been someone else…

#18

Usual troll stuff. Depressing.

#19

Never ceases to amaze me how quickly trolls find things to spam with nonsense.