Routing Dependency (Beta)

Announcements
1

Hi all,

For those in the Anvil User Group Meeting you would have seen my short demo on a new routing dependency.

There wasn’t nearly enough time to showcase all the features,
so here’s a few more details

Key Features:

  • True URL-based Routing: Utilizes actual URLs instead of hash-based navigation
  • Meta tag support for more SEO-friendly routes
  • Works with layouts, for consistent UI structures across routes.
  • Server-Side Data Loading: improves initial page load times by serving the page and data together.
  • Intelligent Caching APIs to make your apps feel faster.
  • Smart Navigation Links: Provides enhanced link components that integrate with the routing system for smooth, efficient navigation.

Docs:
https://routing-docs.anvil.works

Source Code:
https://github.com/anvil-works/routing

3rd Party ID:
3PIDO5P3H4VPEMPL

Clone (M3 example):

It’s very much in beta, and subject to breaking changes, but it’s ready to play :tada:

7 Likes
2

That looks very good!

1 Like
3

This is a thing of beauty

1 Like
4

How does this relate to the new anvil.server.route functionality? I see in the example that that decorator is never used.

Does this add on to that functionality?

5

Yes - there’s some notes in the docs about it

https://routing-docs.anvil.works/routes/#server-routes

In order for server routes to work you need to import your routes into a server module

# Server_Routes.py
from . import routes

And when you import your routes into a server module this will create anvil.server.routes based upon the routes you defined.

The actual source code for this is here:

routing/client_code/router/_route.py at master · anvil-works/routing · GitHub

Here is some pseudo code

create_server_route(cls):
    if cls.path is None:
        return

    @anvil.server.route(cls.path)
    def route_handler(*args, **kws):
        ...
        # server an app response

class Route:
    def __init_subclass__(cls):
        if anvil.is_server_side():
            create_server_route(cls)
6

A post was split to a new topic: Anvil.server.route in uplink

7

Going to use this in my new mini app. Can’t wait to see how it works!

2 Likes
8

So far much cleaner than hash routing. I had to fiddle a bit to translate some of the concepts for navigating and caching, passing query parameters etc. but so far so good.

Bonus points for not making me migrate to layouts and allowing for template forms and route forms!! The migration would have been much harder if I had to use layouts too.

1 Like
9

Good effort! Please add to any of the migration docs if anything was confusing or would have been helpful.

1 Like
10

This is undoubtedly one of the features I’ve been looking forward to the most.

I was never really convinced by the hash routing. This new routing makes a lot more sense, and makes it look like any other web app!

This made me more motivated to get my MVP launched using Anvil.

3 Likes
11

From a (admittedly cursory) glance, it seems that the baseline architecture of a Routed app is very different from that of Anvil’s traditional Single-Page app.

That is, I don’t expect to be able to easily or trivially retro-fit anyone’s form of Routing to my large, established, traditional SPA. That would take a new, routing-aware app design. Shared Layouts might help with that…

12

I haven’t worked with layouts, but I have converted SAP apps into routing apps using Anvil Extras’ old routing module.

The idea was that each form loads everything it needs in its form_show event. Then, instead of using open_form or replacing the form within the main page container for navigation, I switched to routing.set_url_hash(url_pattern='new_page', url_dict=url_dict, load_from_cache=ItDepends).

It wasn’t a smooth process, but it worked. One challenge, for instance, was handling pages with an input box for search and a repeating panel displaying the results. To make it work, the input box’s pressed_enter event had to trigger routing.set_url_hash, and the repeating panel had to be updated using url_dict within the form_show event.

1 Like